1在html中添加js代码的三种方式

Posted xzy不会飞的地板流

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1在html中添加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>

 

以上是关于1在html中添加js代码的三种方式的主要内容,如果未能解决你的问题,请参考以下文章

HTML中使用JavaScript的三种方式及优缺点

js中的事件绑定的三种方式

JS 对象的三种创建方式

JS数组添加元素的三种方式

JS事件绑定的三种方法

JS常用标签