javascript的作用
HTML网页运行在浏览器端,与用户没有交互功能,用户访问网页的时候只能看,如果网页没有程序员去更新,永远是一成不变的。JavaScript就是可以让程序运行在网页上,提高客户访问网页时的体验。可以让网页有交互的功能。
JavaScript的基本概述
在1995时,由Netscape公司在网景导航者浏览器上首次设计实现而成。因为Netscape与sun合作。Netscape管理层希望它外观看起来像Java。因此取名为JavaScript,主要是为了营销。
JavaScript是一种属于网络的脚本语言,已经被广泛用于web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏效果。
JavaScript与java的区别
JavaScript的语法组成
注意: BOM与DOM编程会出现浏览器到兼用性问题。
javascript的基本语法
引入外部到js文件
1
优点:
1.结构清晰
2.分工明确
3.降低耦合度
4.复用性高
在html页面使用
<script type="text/javascript"></script>
弊端:
1. 耦合度高,分工不明确。
2. 复用性差
注意的事项:
1. <script>标签是带有开始标签与结束标签的,千万不要省略结束标签
2. <script>标签一旦用于引入了,那么标签内容就不要在编写js代码。
javascirpt的注释
变量
定义变量的各式
var 变量名=数据
变量定义的特点
1.var 关键字可以省略,建议加上
2.变量可以重复定义,var a=5,var a="abc";
3.在java大括号变量的作用范围,在js中不受这个限制
4.一个变量存储的数据可以随时发生变化
数据类型
在JavaScript中可以使用typeof关键字查看变量的数据类型, 格式: typeof 变量名
五种原始类型
引用类型
object 对象类型:JS内置对象或自定义对象
学习类型转换的目的
以后我们从网页中获取到的所有数据都是String类型,但是有时候数据需要转换成number类型才能够比较的,所以我们需要学习类型转换。JavaScript内置了三个函数式关于类型转换的。
控制流程语句
1 //if语句
2
3 if(条件判断){
4
5 代码
6
7 };
if...else if....else 语句
使用这个语句可以选择执行若干块代码中的一个。
1 if (条件表达式) {
2
3 //代码块;
4
5 }
6
7 else if(条件表达式) {
8
9 //代码块;
10
11 }
12
13 else {
14
15 //代码块;
16
17 }
特殊之处: 条件判断可以使用非逻辑运算符
swtich多分支
语法一:case后使用变量,与Java相同
1 switch(变量名) {
2
3 case 常量值:
4
5 break;
6
7 case 常量值:
8
9 break;
10
11 default:
12
13 break;
14
15 }
语法二(特殊之处):case后使用表达式
1 switch(true) { //这里的变量名写成true
2
3 case 表达式: //如:n > 5
4
5 break;
6
7 case 表达式:
8
9 break;
10
11 default:
12
13 break;
14
15 }
循环
while语句
当指定的条件为 true 时循环执行代码
1 while (条件表达式) {
2
3 需要执行的代码;
4
5 }
6
7
do-while语句
1 do {
2
3 需要执行的代码;
4
5 }
6
7 while (条件表达式)
for 语句
循环指定次数
for (var i=0; i<10; i++) {
需要执行的代码;
}
break和continue
break: 结束整个循环
continue:跳过本次循环,执行下一次循环
函数的使用
函数的定义格式
1 function 函数名(参数列表) {
2
3 // 函数体;
4
5 [return 返回值];
6
7 }
函数要注意的事项
1.定义函数的时候,形式参数不准使用var声明变量。
2.由于JavaScript是弱类型语言,所以定义函数的时候是没有返回值类型
3.如果一个函数需要返回结果,那么直接使用return关键字返回即可。
4.JavaScript中没有函数重载的概念,后定义同名函数会直接覆盖之前的同名函数。
5.调用一个函数的时候,实参会先传递给一个argument对象,arguments对象是任何一个函数都隐式维护的一个数组对象,然后再重arguments对象中取出数据分配给形参。
匿名函数
语法格式:
var 变量名 = function(参数列表) {
函数体;
}
函数变量的作用域
局部变量
1 <script type="text/javascript">
2
3 function test(){
4 //该变量定义在函数内部,这种我们称作为局部变量
5 var age = 10;
6 }
7
8 alert(age);
9
10
11 </script>
全局变量
一个函数内部定义变量的时候,如果不要var,那么该变量就是一个全局变量。
1 //定义全局变量
2
3 function test2(){
4
5 //全局变量
6 name= "狗娃";
7
8 }
9 test2();
10 alert(name);
javascript的事件
事件的作用
当发生指定到事情到时候,会触发相应的处理方式。 比如: 按钮被点击的时候,弹出一个窗口。
事件的注册方式
方式一:直接在html元素内部注册
1 <script type="text/javascript">
2
3 function test(){
4 alert("哎呀,被点了!");
5 }
6
7 </script>
8 </head>
9 <body>
10
11 <input type="button"id="b1"value="按钮"onclick="test()"/>
方式二:使用js代码注册
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css"></style>
7
8 </head>
9 <body>
10
11 <input type="button"id="b1"value="按钮"/>
12 </body>
13
14 <script type="text/javascript">
15 /*
16 function test(){
17 alert("哎呀,被点了!");
18 }*/
19
20
21 //先找到html的元素
22 var button = document.getElementById("b1");
23 //匿名函数的写法
24 button.onclick = function(){
25 alert("哎呀,又被点了!");
26 }
27
28 </script>
29 </html>
常见的事件
事件案例演示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title><!DOCTYPE html>
6 <html>
7 <head>
8 <meta charset="UTF-8">
9 <title></title>
10 <script type="text/javascript">
11
12 //获取焦点的事件 清空默认值
13 function clearText(input){
14 input.value="";
15 }
16
17 //失去焦点
18 function setData(input){
19 //获取input标签的内容
20 var content = input.value;
21 //如果用户没有输入,那么会恢复原来的提示信息
22 if(content==""||content==null){
23 input.value = "请输入用户名...";
24 }
25 }
26
27
28 //下拉框内容发生改变
29 function changeTest(){
30 alert("改变了,,");
31 }
32
33 //单击事件
34 function testClick(){
35 alert("单击了..");
36 }
37
38 //当body 的内容被加载完毕的时候会触发
39 /*function ready(){
40 alert("页面被加载完毕了..");
41 }
42
43 */
44 //window代表了当前的窗口,window.onload代表的是当前窗口的数据已经被加载完毕了.
45 window.onload = function(){
46 alert("加载完毕了..");
47 }
48
49 </script>
50 </head>
51 <body>
52 <input type="button"value="点我啊"onclick="testClick()"/><br/><br/>
53
54
55 <input type="text"value="请输入用户名..."onfocus="clearText(this)"onblur="setData(this)"/><hr/>
56
57 省份:
58 <select onchange="changeTest()">
59 <option value="bj">北京</option>
60 <option value="sh">上海</option>
61 <option value="gd">广东</option>
62 <option value="hn">湖南</option>
63 </select><br/>
64
65 <!-- 如果该表单需要根据触发函数的返回值决定是否可以提交,那么必须在触发方法之前加上return关键字-->
66 <form action="success.html"onsubmit="return submitTest()">
67 用户名:<input type="text"name="userName"/>
68 <input type="submit"value="提交"/>
69 </form>
70 <br/>
71 </body>
72 </html></title>
73 <style type="text/css"></style>
74 <script type="text/javascript"></script>
75 </head>
76 <body>
77
78 </body>
79 </html>
JavaScript的内置对象
数组对象
数组的创建方式
数组的特点
1)数组的每个元素的类型是可以不同的
2)数组的长度可以动态变化
3)数组中包含大量的方法,类似于java中的集合,而java中的数组没有方法
数组创建代码演示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css"></style>
7 <script type="text/javascript">
8
9 /*
10
11 数组的创建方式一: new Array(length)
12
13 数组的创建方式第二: [元素1,元素2..]
14
15 JavaScript的数组特点:
16 1) 数组中的每个元素的类型是可以不同的。
17 2) 数组的长度可以动态变化
18
19 */
20 var arr= new Array(); //创建了一个长度为0的数组
21 arr[1] ="aa";
22 arr[10]="bb";
23
24 for(var index = 0; index<arr.length ; index++){
25 document.write(arr[index]+",");
26 }
27
28 document.write("<hr/>");
29
30 //使用静态方式创建数组对象
31 var arr2 = ["狗娃","狗剩","铁蛋"];
32
33 for(var index = 0; index<arr2.length ; index++){
34 document.write(arr2[index]+",");
35 }
36
37
38 </script>
39 </head>
40 <body>
41
42 </body>
43 </html>
数组常用的方法
常用方法代码演示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css"></style>
7 <script type="text/javascript">
8 /*
9 concat() 连接两个或更多的数组,并返回结果
10 reverse() 将数组进行反转
11 join(separator) 将数组元素通过分隔符,拼成一个字符串,返回的是一个字符串。
12 sort() 对字符串数组进行排序
13 */
14
15 var arr1 = [1,2,3];
16 var arr2 = [4,5,6];
17
18 //合并数组
19 var arr3 = arr1.concat(arr2);
20
21 //元素翻转
22 arr3.reverse();
23
24
25
26
27 var arr4 = [10,2,12,6,1];
28
29 /*
30 对数组进行排序
31
32 注意:
33 1. sort方法在排序的时候默认是按照字符串的标比较则排序的.
34 1. 可以找到对应位置不同的字符, 比较第一个不同的字符。 aba aca
35 2. 找不到对应位置不同的字符,比较两个字符串的长度。 aab aa
36
37 2. 如果不希望按照字符串的比较规则进行排序,那么需要自定义一个函数传入。
38
39 函数返回值的规则:
40 负值,如果所传递的第一个参数比第二个参数小。
41 零,如果两个参数相等。
42 正值,如果第一个参数比第二个参数大。
43
44 */
45
46 function sortFunction(a,b){
47 return a-b;
48 }
49
50 arr4.sort(sortFunction);
51
52
53
54 //将数组每一个元素通过分隔符,拼成一个字符串,返回的是一个字符串。 6,5,4,
55 var str = arr4.join(",");
56
57
58 document.write("数组的元素:"+ str);
59
60 //在JavaScript有for-in语句,但是遍历数组的时候,遍历出来的是索引值
61 /* for(var index in arr3){
62 document.write(arr3[index]+",");
63 }*/
64
65
66 </script>
67 </head>
68 <body>
69
70 </body>
71 </html>
日期对象
创建日期对象格式
1 var myDate=new
日期对象常用的方法
案例输出当前的系统时间
代码实现
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css"></style>
7 <script type="text/javascript">
8
9 //创建日期对象 , 获取当前的系统时间
10 var date = new Date();
11
12 document.write("年:"+ date.getFullYear()+"<br/>");
13 document.write("月:"+ (date.getMonth()+1)+"<br/>");
14 document.write("日:"+ date.getDate()+"<br/>");
15 document.write("时:"+ date.getHours()+"<br/>");
16 document.write("分:"+ date.getMinutes()+"<br/>");
17 document.write("秒:"+ date.getSeconds()+"<br/>");
18
19 document.write("当前时间:"+ date.toLocaleString()+"<br/>");
20
21 var curTime = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+ date.getDate()+"日"+date.getHours()+":"+ date.getMinutes()+":"+date.getSeconds();
22 document.write("当前时间:"+ curTime+"<br/>");
23
24 </script>
25 </head>
26 <body>
27
28 </body>
29 </html>