JavaScript（一）
JavaScript
1.解释性脚本
2.与Java无关★★
作用：
1.html添加交互行为
2.客户端运行
组成：
1.ECMAScript 核心
2.DOM 文档对象模型
3.BOM 浏览器对象模型
使用方式：
1.直接嵌入，随意位置
<script type="text/javascript">
<!--
代码，（浏览器兼容）
-->
</script>
2.文件调用
<script type="text/javascript" src="外部脚本文件地址"></script>
3.事件定义
<input type="button" onclick="javascript代码" />
====================================ECMAScript=====================================
1.描述了语法和基本对象
2.定义了脚本语言的所有属性、方法和对象，包括语法、类型、关键字、保留字、运算符、对象等
3.ECMAScript：JavaScript| ActionScript | ScriptEase
数据类型
1.基本类型
String Number Boolean
2.引用类型
Array Object
数组 对象
3.特殊类型
Null Undefined
无值或无对象，只有一个值null 未赋值，对象或对象属性不存在
范例：变量
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 <!-- 方法1 --> 9 <script type="text/javascript"> 10 <!-- 11 document.write("hello,js"); 12 document.write("<h1>hello,js</h1>"); 13 --> 14 </script> 15 16 <!-- 方法2 --> 17 <script type="text/javascript" src="index.js"></script> 18 19 <!-- 方法3 --> 20 <input type="button" value="点击" onclick="alert('按钮点击')"></input> 21 22 <script > 23 /*声明变量：统一var*/ 24 var number = 10; 25 document.write(number); 26 27 /* 后面的值，直接代表变量类型 */ 28 number = "abc"; 29 document.write(number); 30 31 /* 不建议 */ 32 str = "ABC"; 33 document.write(str); 34 35 /* 没赋值 undefined */ 36 var number1; 37 document.write(number1); 38 39 </script> 40 </body> 41 </html>
范例：数组
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 /* 直接赋值 */ 10 var myArray = ["张三","李四",20]; 11 document.write("数组内容：" + myArray + "<br/>"); 12 document.write("数组长度：" + myArray.length + "<br/>"); 13 14 /* 只有一个数字的时候，代表的是myArray1.length */ 15 var myArray1 = new Array(15); 16 document.write("数组内容：" + myArray1 + "<br/>"); 17 document.write("数组长度：" + myArray1.length + "<br/>"); 18 19 /* 只要数字大于2位以上，就表示的是数组里的元素 */ 20 var myArray2 = new Array(15,2); 21 document.write("数组内容：" + myArray2 + "<br/>"); 22 document.write("数组长度：" + myArray2.length + "<br/>"); 23 24 /* 双引号和单引号没区别 */ 25 var myArray4 = new Array('王五'); 26 document.write("数组内容：" + myArray4 + "<br/>"); 27 document.write("数组长度：" + myArray4.length + "<br/>"); 28 29 var myArray3 = new Array(15,2,"李四"); 30 document.write("数组内容：" + myArray3 + "<br/>"); 31 document.write("数组长度：" + myArray3.length + "<br/>"); 32 33 /* 添加一个或多个元素 */ 34 myArray3.push('王五','25a',45); 35 document.write("数组内容：" + myArray3 + "<br/>"); 36 document.write("数组长度：" + myArray3.length + "<br/>"); 37 38 /* 删除最后一个元素 */ 39 myArray3.pop(); 40 document.write("数组内容：" + myArray3 + "<br/>"); 41 document.write("数组长度：" + myArray3.length + "<br/>"); 42 43 /* 删除一个或多个元素，index从0开始 */ 44 myArray3.splice(0,2,"test","您好",25); 45 document.write("数组内容：" + myArray3 + "<br/>"); 46 document.write("数组长度：" + myArray3.length + "<br/>"); 47 48 /* 数字首位 -> 字母 -> 字符串（升序） */ 49 myArray3.sort(); 50 document.write("<br/>排序：<br/>") 51 document.write("数组内容：" + myArray3 + "<br/>"); 52 document.write("数组长度：" + myArray3.length + "<br/>"); 53 54 /* 数字首位 -> 字母 -> 字符串（降序） */ 55 myArray3.reverse(); 56 document.write("<br/>reverse排序：<br/>") 57 document.write("数组内容：" + myArray3 + "<br/>"); 58 document.write("数组长度：" + myArray3.length + "<br/>"); 59 60 /* 拼接 */ 61 var test = ['EF','TEST']; 62 var newArray = myArray3.concat('23QW',test,'规划'); 63 document.write("数组内容：" + newArray + "<br/>"); 64 document.write("数组长度：" + newArray.length + "<br/>"); 65 66 /* 数组变字符串 */ 67 var str = newArray.join('-'); 68 document.write("数组拼接后的内容：" + str + "<br/>"); 69 </script> 70 </body> 71 </html>
=====================================对象========================================
1.内部对象：Date\Math\String
2.自定义对象:window\document\外部对象
范例：日期
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"> 4 <head> 5 <title>时间格式</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']; 10 var date = new Date(); 11 var year = date.getFullYear(); 12 var month = date.getMonth() + 1; /* 月份值：0-11 */ 13 var day = date.getDate(); /* 日期 */ 14 var hour = date.getHours(); 15 var mi = date .getMinutes(); 16 var sec = date.getSeconds(); 17 var week = date.getDay(); /* 星期 */ 18 19 /* 显示两位数 */ 20 month = month > 9 ? month : '0' + month; 21 day = day > 9 ? day : '0' + day; 22 hour = hour > 9 ? hour : '0' + hour; 23 mi = mi > 9 ? mi : '0' + mi; 24 sec = sec > 9 ? sec : '0' + sec; 25 26 document.write(year + '年'); 27 document.write(month + '月'); 28 document.write(day + '日'); 29 document.write(hour + '：'); 30 document.write(mi + '：'); 31 document.write(sec + ''); 32 // document.write(week + ''); 33 document.write(weeks[week]); 34 </script> 35 </body> 36 </html>
======================================运算符=======================================
1.赋值、算数、关系、逻辑
==，！=都不严格相等
2.特殊运算符
a.=== 严格相等，！==不严格相等
b.typeof 获取类型信息的字符串，有6种可能："number"，"string"，"boolean"，"object"， "function"，"undefined"
c.in 对象中的属性
d:delete 删除属性/元素
范例：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"> 4 <head> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 /* 得到计算值 */ 10 document.write(5/4); 11 document.write('<br/>') 12 13 /* == 和 ！= 不严格 */ 14 document.write(" ==: "); 15 document.write('1' == 1); 16 document.write('<br/>') 17 18 document.write(" !=: "); 19 document.write('1' != 1); 20 document.write('<br/>') 21 22 document.write(" !==: "); 23 document.write('1' !== 1); 24 document.write('<br/>') 25 26 document.write(" ===: "); 27 document.write('1' === 1); 28 document.write('<br/>') 29 30 document.write(" 加法： "); 31 document.write(1 + '1'); 32 document.write('<br/>') 33 34 document.write(" 乘法: "); 35 document.write('2' * 1); 36 document.write('<br/>') 37 38 document.write(" 减法: "); 39 document.write('2' - 1); 40 document.write('<br/>') 41 42 document.write(typeof true); 43 document.write('<br/>') 44 45 document.write(typeof (true)); 46 document.write('<br/>') 47 48 document.write(typeof (null)); 49 document.write('<br/>') 50 51 document.write(typeof (document.write)); 52 document.write('<br/>') 53 54 var person = {name:'张三',age:45}; 55 if ('name' in person) { 56 person.name = '王五'; 57 document.write(person.name + "<br/>"); 58 } 59 60 //删除属性 61 delete person.name; 62 63 //遍历对象的属性 in 64 for(var property in person){ 65 document.write(property); 66 document.write(person[property]); 67 } 68 </script> 69 </body> 70 </html>
=====================================控制语句=========================================
1.选择
2.循环
for...in
3.控制
其余和java语法一样
=====================================JavaScript函数=================================
定义：与java中的方法相似，可以定义完成特定代码块的语句
分类：系统函数\自定义函数
系统函数：
1.对话框函数：alert、confirm、prompt
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 /* 确认按钮 */ 10 alert('提示框'); 11 12 /* 确认和取消按钮 */ 13 var result = confirm('确认删除数据？'); 14 alert(result); 15 16 /* 动态输入内容 */ 17 var context = prompt('请输入内容：'); 18 alert(context); 19 </script> 20 </body> 21 </html> 22 23 2.数值类函数：parseInt、parseFloat、isNaN(不是数字) 24 范例： 25 <!DOCTYPE html> 26 <html> 27 <head> 28 <meta charset="UTF-8"> 29 <title></title> 30 </head> 31 <body> 32 <script type="text/javascript"> 33 alert(parseInt('a123.333334df4afdfca')); 34 alert(parseInt('123.333334df4afdfca')); 35 36 alert(isNaN('1234.3C')); 37 alert(isNaN('1234.3')); 38 </script> 39 </body> 40 </html>
自定义函数：
1.语法：
function 函数名（[参数1，参数2，...]）{
//js语句
[return 返回值;]
}
2.调用
a.一般与HTML元素的事件一起使用
b.调用格式：事件名 = "函数名()"
============================================匿名函数（自定义函数）================================
1.匿名函数
一般和自定义对象一起使用
定义方式不同的自定义函数
2.语法
var 变量名 = function（[参数1，参数2，...]）{
//js语句
[return 返回值;]
}
3.调用匿名函数
变量名()
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="打印图形" onclick="printShap()"/> 9 <input type="button" value="打印图形" onclick="printShapByRow(10)"/> 10 11 <!-- 变量定义为一个自定义函数时，在onclick事件中，为变量方法，要加括号 --> 12 <input type="button" value="匿名函数" onclick="printVar()"/> 13 14 <!-- 变量调用其他函数时，在onclick事件中，为【变量.方法】 --> 15 <input type="button" value="自我介绍" onclick="person.say()"/> 16 <input type="button" value="自我介绍" onclick="person1.say()"/> 17 18 <script type="text/javascript"> 19 20 //定义了一个方法,凡是函数，结尾都不要“;” 21 function printShap(){ 22 for (var i = 1; i <= 3; i++) { 23 for (var j = 1; j <= i; j++) { 24 document.write('*'); 25 } 26 document.write("<br/>"); 27 } 28 } 29 30 /* 自定义函数有参数时，直接写参数名，不要var */ 31 function printShapByRow(rows){ 32 for (var i = 1; i <= rows; i++) { 33 for (var j = 1; j <= i; j++) { 34 document.write('*'); 35 } 36 document.write("<br/>"); 37 } 38 } 39 40 /* 凡是变量里面包含函数或者就是函数时，最后都不要加';' */ 41 var printVar = function(){ 42 //★★对话框的内容★★ 43 alert("匿名函数"); 44 } 45 46 //匿名函数一般和自定义函数用 47 var person_say = function(){ 48 alert('姓名：' + this.name + '年龄：' + this.age); 49 } 50 51 var person ={ 52 name :'zl', 53 age:34, 54 say:person_say 55 } 56 57 var person1 ={ 58 name :'赵六', 59 age:56, 60 say:person_say 61 } 62 </script> 63 </body> 64 </html>
====================================DOM=====================================
1.描述处理网页内容的方法和接口
2.HTML和XML的应用程序接口（API）
3.整个页面规划为层级式的节点结构
====================================BOM=====================================
1.描述与浏览器进行交互的方法和接口
2.包括：
a.弹出新的浏览器窗口
b.移动、关闭浏览器窗口及调节浏览器窗口大小
c.获取用户屏幕分辨率的屏幕对象
d.WEB浏览器详细的定位对象
3.对象：Window、Navigator、Screen、History、Location(当前页面的URL信息)
