本篇是供自己方便使用
一、JavaScript简介
星期一, 十二月 14, 2015 09:52:13
JavaScript 是属于网络的脚本语言!
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
一、java简介
1.1提示:您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。
1.2alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
1.3您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。
<p id ="demo">
javascript html 改变内容
</p>
function myFunction() {
x = document.getElementById("demo");//查找元素
x.innerHTML = "hello javascript";//改变内容
}
<button type = "button" onclick = "myFunction()">click this</button>
1.4JavaScript:改变 HTML 图像
本例会动态地改变 HTML <image> 的来源 (src)
代码案例:
<html>
<head>
<title>js_lightbulb</title>
<meta http-equiv="Context-Type" content="text/html";charset="utf-8" />
</head>
<body>
<script type="text/javascript">
function changeImage() {
element = document.getElementById("myimage")
if(element.src.match(1)){
element.src = "E:/zhuhw_study/js/jpg/2.jpg";
}else {
element.src = "E:/zhuhw_study/js/jpg/1.jpg";
}
}
</script>>
<img id = "myimage" οnclick="changeImage()" src="E:/zhuhw_study/js/jpg/2.jpg">
<p>js一个函数控制</p>>
</body>
</html>
1.5JavaScript:改变 HTML 样式
<!DOCTYPE html>
<html>
<head>
<title>JavaScript:改变 HTML 样式</title>
</head>
<body>
<script type="text/javascript">
function changeStyle() {
x = document.getElementById("demo1");
x.style.color = "#ff0000";
}
</script>
<p id="demo1">
hello JavaScript!
</p>
<button οnclick="changeStyle()");
">点击</button>
</body>
</html>
1.6JavaScript 常用于验证用户的输入。
isNaN() 函数用于检查其参数是否是非数字值。
<html>
<head>
<title>JavaScript 常用于验证用户的输入</title>
</head>
<body>
<script type="text/javascript">
function myF(){
y = document.getElementById("text1").value;
if (y =="" || isNaN(y) ) {
alert("Not Numeric");
};
}
</script>
<p>校验输入书否是数值</p>
<input id = "text1" type ="text" />
<button οnclick="myF()">提交</button>
</body>
</html>
二、JavaScript 使用
1、HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
2、<head> 或 <body> 中的 JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
3.外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:
3.1代码案例:
<html>
<head>
<title>应用外部的js</title>
</head>
<body>
<p id = "p1">引用外部的js文件进行改变文本的字体颜色</p>
<button οnclick="myfunction()">点击</button>
<script src = "E:/zhuhw_study/js/myScript.js"></script>
</body>
</html>
外部js
function myfunction() {
x = document.getElementById("p1");
x.style.color = "#ff0000";
}
注意:
外部脚本不能包含 <script> 标签。
三、JavaScript 输出
警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
<html>
<head></head>
<body>
<p>此文档会被覆盖,因为在加载后会使用document.write()方法</p>
<button οnclick="myFF()">提交</button>
<script type="text/javascript">
function myFF() {
document.write("糟糕,文档被覆盖了呢");
}
</script>
</body>
</html>