JS

1.什么是JavaScript?作用？

　　JS是运行在浏览器上的脚本语言。

　　注：JavaScript与java没有任何关系，只是语法上有点类似，它们运行的位置不同。java运行在JVM中，JavaScript运行在浏览器的内存中。JS程序不需要手动编译，编写完代码后，浏览器直接打开解释执行。即JS的“目标程序”以普通文本形式保存，类似的这种语言都叫做“脚本语言”。java的目标程序以.class形式存在，不能使用文本编辑器打开，所以不是脚本语言。

2.在HTML中如何嵌入JavaScript代码？

2.1 方式一

　　(1)要实现的功能：用户点击一下按钮，弹出消息框
　　(2)JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。例如鼠标单击就是一个事件。
任何事件都会对应一个事件句柄叫做：onclick。事件和事件句柄的区别是，事件句柄是在事件单词前添加一个on。事件句柄是以HTML标签的属性存在的。
　　(3)onclick=“js代码”执行的原理是：页面打开时，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上，等这个按钮发生click事件后，注册在onclick上的js代码会被浏览器自动调用。
　　(4)如何使用js弹出消息框？
　　在js中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
　　window对象有一个函数叫做alert，用法：window.alert。这样就可以弹窗了。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>HTML中嵌入JS代码的第一种方式</title>
 6     </head>
 7     <body>
 8         <!--
 9             作者：1824118112@qq.com
10             时间：2021-01-11
11             描述：
12             1.要实现的功能：用户点击一下按钮，弹出消息框
13             2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。例如鼠标单击就是一个事件。
14             任何事件都会对应一个事件句柄叫做：onclick。事件和事件句柄的区别是，事件句柄是在事件单词前添加一个on。事件句柄是以HTML标签的属性存在的。
15                3.onclick=“js代码”执行的原理是：页面打开时，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上，等这个按钮发生click事件后，注册在onclick上的js代码会被浏览器自动调用。
16             4.如何使用js弹出消息框？
17                 在js中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
18                 window对象有一个函数叫做alert，用法：window.alert。这样就可以弹窗了。
19         
20         -->
21         <input type="button" value="按钮" onclick="alert('hello js')"/>
22         
23         
24         <input type="button" value="按钮" onclick="alert('how');alert('are');alert('you')"/>
25     </body>
26     </body>
27 </html>

2.2 方式二

　　脚本块的方式

（1）露在脚本块中的程序,在页面打开的时候执行。并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件，浏览器打开即可执行）
（2）js的脚本块在一个页面当中可以多次出现。
（3）js的脚本块出现位置没有要求。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>HTML中嵌入JS代码的第二种方式</title>
 6     </head>
 7     <body>
 8         <!--
 9             ：
10                 第二种方式：脚本块的方式
11         1.露在脚本块中的程序,在页面打开的时候执行.并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件，浏览器打开即可执行）
12         2.js的脚本块在一个页面当中可以多次出现。
13         3.js的脚本块出现位置没有要求。
14         -->
15         
16         <script type="text/javascript">
17             window.alert('hello JS'); //alert函数会阻塞整个html页面的加载，直到用户点击确定按钮。
18             window.alert('hello word');
19         </script>
20     </body>
21 </html>

2.3方式三

　　引入外部独立的js文件

　　同一个j文件可以被多次引入

window.alert('Hello JS');

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>HTML中嵌入JS代码的第三种方式</title>
 6     </head>
 7     <body>
 8         <script type="text/javascript" src="1.js">
 9         
10         
11         /*
12          * 注：引入js文件的同时，如果在其中编写代码，这些代码是不会被执行的。
13          */
14             window.alert('hello word');
15         </script>
16         
17         
18         
19         <!--
20                      但是可以编写脚本块
21        -->
22         <script type="text/javascript">
23             
24             window.alert('Hi Im Boss');
25         </script>
26         
27         
28         
29     </body>
30 </html>

3.JS的变量

（1）声明变量

　　var

（2）变量赋值

　　变量名=值

注：JS是一种弱类型语言，没有编译阶段，一个变量可以随意赋值。

posted @ 2021-01-11 22:48  L1998  阅读(114)  评论(0)    收藏  举报