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>