1在html中添加js代码的三种⽅式以及js中变量,函数1.第⼀种⽅式:在时间句柄后太假js代码;
例如浏览器弹出对话框;
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<title>⽆标题⽂档</title>
7</head>
8
9<body>
10<!--JavaScript是基于事件驱动型的编程语⾔,当发⽣某个特殊的事件的时候执⾏⼀段特殊的程序-->
11<!--每⼀个时间都会对应⼀个事件句柄,事件句柄的名称:on+事件名-->
12<!--程序员可以在事件句柄后"注册"js代码-->
13<!--当事件发⽣时浏览器⾃动执⾏事件句柄后的js代码-->
14<!--window是js中的内置对象,代表整个窗⼝属于BOM的⼀员-->
15<!--window这个内置对象有⼀个⽅法,叫做alert,这个⽅法可以弹出消息框-->
16<!--JS语句以分号结尾-->
17<button type="button" onclick="window.alert('hello world')">请点击我</button>
18
19</body>
20</html>
2.第⼆种:让浏览器弹出对话框也可以把js代码写在独⽴脚本块中:
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<!-- TemplateBeginEditable name="doctitle" -->
7<title>⽆标题⽂档</title>
8<!-- TemplateEndEditable -->
9<!-- TemplateBeginEditable name="head" -->
10<!-- TemplateEndEditable -->
11<!--独⽴脚本块,其中可以编写js代码;独⽴脚本块既可以放在head中,可以出现在hmtl中的任何位置-->
12<script type="text/javascript">
13//在整个页⾯加载过程中之上⽽下的顺序解释执⾏
14//并且alert⽅法具有阻塞作⽤,只有点击确定后alert⽅法才算执⾏完成,页⾯中才会出现"注册"
15 alert("hello");
16</script>
17</head>
18
19<body>
20注册
21</body>
22</html>
3.第三种⽅式:将js⽂件(专门写js代码)引⽤到html中
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<title>⽆标题⽂档</title>
7<script type="text/javascript" src="1.js">
8
9//这⾥不能写js代码
10//alert("你好,世界");
11</script>
12</head>
13
14<body>
15注册
16</body>
17</html>
4.js中的变量
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<!-- TemplateBeginEditable name="doctitle" -->
7<title>JS中的变量</title>
8<!-- TemplateEndEditable -->
9<!-- TemplateBeginEditable name="head" -->
10<!-- TemplateEndEditable -->
11<script type="text/javascript">
12
13/*
141.什么是变量?
15  -内存中存储数据的最基本的单元
16
172.变量怎么声明?
18  -java是⼀种强类型的语⾔
19强类型:java语⾔是由编译阶段,在编译阶段就确定了变量的数据类型
20例如:int i=10;
21以上程序通过编译之后,i变量的数据类型从始⾄终都是int类型,不能将其他数据类型的值赋给i变量。例如:i="abc"; 22以上程序不能通过编译。
23这种类型称为强类型;
24  -jsvascript是⼀种弱类型编程语⾔
25弱类型:javascript这种脚本语⾔,以普通形式保存,不需要编译,直接运⾏。没有编译期。
26弱类型的特征:变量的数据类型是可以随意改变。
27    int i=100;//在javascript中不需要这样编写,因为没有编译期了。
28
29    var a=100;//javascript中是这样做的
30    a="abc";//程序执⾏到此,a为字符串类型
31    a=true;//a为boolear类型
32    a=3.2;//a 为浮点类型
33  -变量声明的语法格式:
34    var 变量名;
35
363.变量如何赋值?
37变量赋值格式:
38变量名=值;
39    *重点:js中的变量若没有显⽰赋值,系统默认赋值undefined;undefined在js中是⼀个具体的值,表⽰未定义。
40
414.全局变量,局部变量?
42  js中遵循就近原则,全局变量作⽤域是整个js程序,局部变量的作⽤域只是某个函数
43
445.⼀⾏上可以定义多个变量
45*/
46//若没有给变量赋值,系统默认undefined
47var ename;
48 alert("ename:"+ename);
49
50//可以赋其他类型的值
51 ename="SMITH";
52 alert("ename:"+ename);
53
54 ename=100;
55 alert("ename:"+(ename+1));
56
57 ename=false;
58 alert("ename:"+(ename?"ABC":"DEF"));
59
60//js中字符串可以使⽤单引号
61 ename='abcdf';
62 alert("ename:"+ename);
63
64//a,b的值都是undefined;c的值为300;
65var a,b,c=300;
66
67 alert(a);
68 alert(b);
69 alert(c);
70
71</script>
72</head>
73
74<body>
75
76</body>
77</html>
5.js中的函数
(1)js中的函数定义⽅式:
第⼀种定义⽅式:function  函数名(形参列表){
js语句;
}
第⼆中定义⽅式:函数名=function(形参列表){
           js语句;
        }
(2)js中的函数⽆返回值类型;其函数的可以返回任意类型的数据,也可以⽆返回值;当函数⽆返回值的时候默认返回undefine;
(3)js中的函数没有重载机制,在同⼀个js代码中,不能出现两个同名函数;
(4)当函数返回NaN时,表⽰返回的结果本应该是⼀个数字,但是实际返回的结果不是⼀个数字;
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<title>⽆标题⽂档</title>
7<script type="text/javascript">
8
9//这段js语句直接暴露在script标签中,整个html页⾯加载的时候⾃上⽽下的顺序执⾏
10        window.alert("测试程序");
11/*
12        4.js中的函数怎么定义?
13语法格式1:
14            function 函数名(形参列表){
15
16                js语句构成的函数体;
17
18            }
19语法格式2:
20函数名=function(形参列表){
21
22函数体;
23
24            }
25
26
27        function testFun(){
28
29            //js的函数执⾏结束之后的返回值类型是任意的,也可以不返回任何数据,当函数没⽤返回值的时候默认返回undefine;
30
31            //return 100;
32            //return "Hello";
33            //return  12.0;
34
35        }
36
37        function sum(a,b){
38
39
40        }
41
42怎么调⽤函数?以下都可以
43        sum(10,20);
44        sum("abs","def");
45        sum(2.0,3.0);
46        sum(3.6);
47        sum();
48
49注意:js中的函数没有重载机制
50在同⼀个js代码中,函数名不能重名
51
52*/
53function sayHello(){
54
55            alert("helllo World");
56
57        }
58
59        sayHello();//js语句,直接暴露在js标签中
60
61function sum(a,b){
62
63return a+b;
64
65        }
66function testFun1(){
67
68
69
70        }
71
72</script>
73</head>
74
75<body>
76<input type="button" value="sayHello" onclick="sayHello()">
77
script在html中的用法78<!--NaN:表⽰Not a Number"-->
79<!--
80    js中什么情况下结果是NaN?
81计算结果本应该返回⼀个数字,但是结果并不是⼀个数字,结果就是NaN--> 82<input type="button" value="sum1" onclick="alert(sum())">
83<input type="button" value="sum2" onclick="alert(sum(1,2))">
84<input type="button" value="sum3" onclick="alert(sum(1))">
85<input type="button" value="sum4" onclick="alert(testFun1())">
86
87</body>
88</html>