4、JavaScript
一、JavaScript的概念：是基于对象和事件的脚本语言。
1、特点：
a）、安全性。
b）、跨平台性（只要可以解释JS的浏览器就可以执行，和平台无关）
2、JavaScript与Java的区别：
a)、JS是NetScape公司产品，Java是Oracle公司
b)、JS是基于对象，Java是面向对象
c)、JS只需解释就可以执行，Java需要先编译成字节码文件再执行
d)、JS是弱类型，Java是强类型
3、JavaScript与HTML的结合：
a)、JS代码存放在标签<script>...</script>中
b)、使用script标签的src属性引入一个js文件(<script type="text/javascript" src="JS文件"></script>)
4、<script>的存放位置：
a）、HTML文件的<head>标签中
b）、HTML文件中<body>标签中
二、JavaScript语法：
1、变量：通过关键字var来定义，弱类型不需要指定具体的数据类型（注意：JS中特殊常量值undefined，当变量没有初始化就被使用，该变量的的值就是undefined）
var v;
v = v + 5;
alert(v);// 结果是NaN
2、语句(与Java语句格式相同)：逻辑运算符：&& ||
if语句：
注意：var x = 3;
if(x==4)//可以进行比较运算
if(x=4)//可以进行赋值运算，而且同样可以进行判断
原因：在JS中0可以表示false，非0可以表示true(通常用1表示)，因此if(x=4)结果为true 。非null为true，null为false
switch语句：switch(x)，其中x可以接收字符串
循环语句(while\do...while\for)
for(变量 in 对象){...}
3、函数：
一般函数：格式：function 函数名(形式参数...){...}
注意：调用有参数的函数时，但没有给其传值，函数一样可以运行，或者调用没有参数的函数并给其传值，该函数一样可以运行。
在函数中有一个参数数组对象(arguments)，该对象将传递的参数都封装在一个数组中
在函数中定义变量时没有使用var关键字，那么执行该函数后，此变量就成为一个全局变量
函数在调用时的写法：
var s = method();// s变量接收method函数的返回值
var s = method;// s和method代表同一个函数，那么该函数也可以通过s()的方式调用
匿名函数：格式：function(){...} （或者说是直接将函数作为参数直接传递，不进行封装）
例：var demo = function(){...}
调用：demo();
4、数组：
特点：长度是可变的，可以存任意元素(数组里存放的元素类型可以不同)
定义格式：var arr = new Array();
arr[0] = "hello";
arr[1] = 1;
arr[2] = true;
输出：var arr = ["123", 23, true];
三、JavaScript语句示例：
1、在<head>标签中编写：
1 <!-- 鼠标单击显示按钮后弹出提示对话框，提示内容为：JavaScript示例 --> 2 <html> 3 <head> 4 <title>JavaScript示例</title> 5 <script type="text/javascript"> 6 function test(){ 7 alert("JavaScript示例"); 8 } 9 </script> 10 </head> 11 12 <body> 13 <input type="button" value="显示" onclick="test()"> 14 </body> 15 </html>
2、外部 .js 文件中编写
a）、创建一个 .js 文件：如文件名为 testJavaScript.js 类容为：
function test(){ alert("JavaScript示例"); }
b）、在<head>标签中利用<script>标签引入 testJavaScript.js文件，便可以达到与上例相同的结果。
1 Transitional//EN"> 2 <!-- 鼠标单击显示按钮后弹出提示对话框，提示内容为：JavaScript示例 --> 3 <html> 4 <head> 5 <title>JavaScript示例</title> 6 <script type="text/javascript" src="testJavaScript.js"></script> 7 </head> 8 9 <body> 10 <input type="button" value="显示" onclick="test()"> 11 </body> 12 </html>
四、DOM(document object model):文档对象模型
1、DHTML：是多个技术的综合体，称为动态HTML
HTML:将数据进行封装
CSS:负责标签中数据的样式
DOM:将标签封装成对象
JS:将以上三者进行融合，通过程序来操作这些对象，完成动态效果
2、节点：根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
-
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
父级节点：parentNode
子节点：childNodes
兄弟节点：
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
五、JavaScript中的常见对象中
1、Document对象：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Document节点</title> <script type="text/javascript"> function test(){ /* 将String类型的数据强转为number型 document.getElementsById返回的是一个具体的对象 */ var sum= Number(document.getElementById("data1").value); sum+= Number(document.getElementById("data2").value); alert(sum); } function test1(){ /* 将String类型的数据强转为number型 document.getElementsByName返回的是一个数组对象 */ var sum = document.getElementsByName("data1")[0].value; sum -= document.getElementsByName("data2")[0].value; alert(sum); } </script> </head> <body> 数值一：<input type="text" id="data1" name ="data1" value="1"/> 数值二：<input type="text" id="data2" name ="data2" value="1"/> <input type="button" onclick="test()" value="计算加" /> <input type="button" onclick="test1()" value="计算减" /> </body> </html>
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByName() | 返回带有指定名称的对象集合。 |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
2、Date对象：
| Date() | 返回当日的日期和时间。 |
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getYear() | 请使用 getFullYear() 方法代替。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
1 function test(){ 2 var da = new Date(); /*返回当前日期和时间*/ 3 alert(da.getDate()); /*返回一个月中的某天*/ 4 alert(da.getDay()); /*返回一周中的某天*/ 5 alert(da.getHours()); /*返回对象的小时数*/ 6 };
