标签:
最初由Netscape公司发明
JavaScript 是属于网络的脚本语言(弱类型,解释型)。
JavaScript可以在HTML网页中放入动态文本。
JavaScript响应用户在网页时产生的事件。
JavaScript可以校验用户输入的数据。
JavaScript可以对HTML网页中的元素进行:增、删、改、查!
JavaScript可以用于创建cookliessd。
1JavaScript:写入 HTML 输出
实例
<!DOCTYPE html> <html> <body> <p> JavaScript 能够直接写入 HTML 输出流中: </p> <script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); </script> <p> 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。 </p> </body> </html>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
2JavaScript:对事件作出反应
实例
<!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p> JavaScript 能够对事件作出反应。比如对按钮的点击: </p> <button type="button" onclick="alert(‘Welcome!‘)">点击这里</button> </body> </html>
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
alert()必须用‘’号,不然没法起作用
3JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
实例
html> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
document.getElementByID("some id")这个方法是 HTML DOM 中定义的,意为:通过某个ID获得元素
innerHTML 访问特定的元素并改变其内容。
注:单词一定要拼写正确!如document.getElementById("")
4JavaScript:改变 HTML 图像
本例会动态地改变 HTML <image> 的来源 (src):
<html> <body> <script> function changeImage() { a=document.getElementById(‘myimage‘); if (a.src.match("a1")) { a.src="./b1.jpg"; } else { a.src="./a1.jpg" } } </script> <img id="myimage" onclick="changeImage()" src="./a1.jpg"> <p>点击图片来变换</p> </body> </html>
注:document.getElementById()前面一定要加变量a !;
src.match("")意思是图片匹配图片的意思;
JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。
JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
实例
<html>
<body>
<script type="text/javascript">
function g(){
j=document.getElementById("jianding");
j.style.color="red";
j.style.fontSize="20px";
}
</script>
<P id="jianding">我是一定不会改变的!</P>
<input type="button" onclick="g()" value="请试一试"/>
</body>
</html>
注:请注意fontSize的驼峰写法如果不大写不会出现效果!
样式的写法“定义.style.想要改变的属性”
JavaScript:验证输入
JavaScript 常用于验证用户的输入。
实例
<html> <body> <script type="text/javascript"> function dot(){ var x=document.getElementById("test").value; if(x=="" || isNaN(x)){ alert("not a number"); } else{ alert("success"); } } </script> <p>请查看如下</p> <input type="text" id="test"/> <input type="button" onclick="dot()" value="请点击"/> </body>
</html>
注: 这个例子里面id=test后面必须要跟.value才能正确传入输入的值从而进行判断!
isNaN(x)意为:(x)不是一个数字;
""意为:空
输入框和确认栏之间的间隙可以用两个办法消除1.请在包裹这两个标签的框的样式中加入"fontsize=0",但请小心在这两个框样式里面加入字体大小。2.把这两个标签写在同一行!
警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
实例
<html>
<head>
<script>
function a(){
document.write("完蛋了吧!");
}
</script>
</head>
<body>
<input type="button" onclick="a()" value="千万不要点"/>
<h1>第一次</h1>
<P>第二次</P>
</body>
</html>
注:根据目前测试,无论button标签或者脚本放到何处,都会触发覆盖效果!
JavaScript 语句
JavaScript 代码(或者只有 JavaScript)是 JavaScript 语句的序列。
浏览器会按照编写顺序来执行每条语句。
本例将操作两个 HTML 元素:
<html>
<head>
<script>
function way1(){
document.getElementById("h2").innerHTML="不是题目"
}
function way2(){
document.getElementById("p1").innerHTML="不是段落"
}
</script>
</head>
<body>
<h1 id="h2">题目</h1>
<p id="p1">段落</p>
<input type="button" onclick="way2()" value="先点这里"/>
<input type="button" onclick="way1()" value="后点这里"/>
</body>
</html>
声明(创建) JavaScript 变量
在 JavaScript 中创建变量通常称为“声明”变量。
实例:
<html>
<head>
<script>
function test(){
var a=document.getElementById("p1").innerHTML="是不可能的!";
var b= 1,c=2 ;
alert(b+c)
}
</script>
</head>
<body>
<p>下面是一个例子</p>
<input type="button" onclick="test()" value="试试看"/>
<p id="p1">没有改变</p>
</body>
</html>
注:可以在一条语句中声明多个变量,该语句以 var 开头,并使用逗号分隔。
变量b+c如果在alert里面用""包裹则变成一个文本显示b+c!
JavaScript 算数
实例:
<html>
<head>
<script>
function sum(){
var a=1;
var b=a+1;
var c=document.getElementById("p1");
c.innerHTML="b="+b;
}
</script>
</head>
<body>
<p>请注意看这里</p>
<p id="p1"></p>
<input type="button" onclick="sum()" value="点击试试"/>
</body>
</html>
注 经过测试"b="+b中的+号不能少,不然会报错!
JavaScript 数据类型
原始数据类型:Undefine、Null、Boolean、Number、String
判断语句:tpyof
实例
<html>
<body>
<script>
var a=1;
var b;
var c="henry";
document.write(typeof a+"<br/>");
document.write(typeof b+"<br/>");
document.write(typeof c+"<br/>");
document.write(b==undeifned);
document.write(null== undefined);
</script>
</body>
</html>
注:var x==数据类型,可以拿来测试数据类型,其返回值是True or False.
判断语句只能用于已经定义了的变量,不然会引起错误!
声明变量类型
当您声明新变量时,可以使用关键词 "new" 来声明其类型:
实例
<html> <body> <script> var carname=new String; var carname="volvo"; var x= new Number; var x=123; var y= new Boolean; var y=true; var cars= new Array; var cars=new Array(1,"good",3); document.write(carname+"<br/>"); document.write(x+"<br/>"); document.write(y+"<br/>"); document.write(cars+"<br/>"); </script> </body> </html>
标签:
原文地址:http://www.cnblogs.com/nonameG/p/4771267.html