1在html中添加js代码的三种方式以及js中变量,函数

1.第一种方式:在时间句柄后太假js代码;

例如浏览器弹出对话框;

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/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 "http://www.w3.org/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 "http://www.w3.org/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 "http://www.w3.org/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 /*
14 1.什么是变量?
15   -内存中存储数据的最基本的单元
16   
17 2.变量怎么声明?
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 
36 3.变量如何赋值?
37   变量赋值格式:
38     变量名=值;
39     *重点:js中的变量若没有显示赋值,系统默认赋值undefined;undefined在js中是一个具体的值,表示未定义。
40 
41 4.全局变量,局部变量?
42   js中遵循就近原则,全局变量作用域是整个js程序,局部变量的作用域只是某个函数
43   
44 5.一行上可以定义多个变量
45 */
46 //若没有给变量赋值,系统默认undefined
47 var 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;
65 var 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 "http://www.w3.org/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         */
53         function sayHello(){
54         
55             alert("helllo World");
56         
57         }
58         
59         sayHello();//js语句,直接暴露在js标签中
60         
61         function sum(a,b){
62         
63             return a+b;
64         
65         }
66         function testFun1(){
67         
68         
69         
70         }
71 
72     </script>
73 </head>
74 
75 <body>
76     <input type="button" value="sayHello" onclick="sayHello()">
77     
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>