JavaScript基础
JavaScript 是 Web 的主流编程语言,可以实现网页与用户的动态交互。所有HTML页面都可以使用JS。
JS的导入方式
在HTML中,使用<script>
标签来导入JS命令。有两种方式:
- 内部导入:在HTML中直接使用
<script>
标签 + 内容。
- 外部导入:在HTML中使用
<script src="xxx.js"></script>
导入外部.js文件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js 基础</title> <script> console.log("js内部导入:head") </script> <script src="./js/hello.js"></script> </head> <body> <script> console.log("js内部导入:body") </script> </body> </html>
|
在浏览器中按F12在控制台中可以看到log:
![](http://images.phyjack.com/20240716072232.png)
JS基本语法
下面一个例子演示JS基本语法 (注释语法:JS中 // 注释
或/* 注释 */
,CSS中为 /* 注释 */
,HTML中为 <!-- 注释 -->
)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js 基础语法</title> </head> <body> <script> var x = 1 let y = 2 const NUM = 15 s = "a string" v1 = null var v2 console.log(x,y,s,NUM); console.log(v1); console.log(v2); if(y == 1){ console.log("if 分支1"); }else{ console.log("if 分支2"); } i = 0; while(i<5){ console.log("while 循环 i=",i); i++; } j = 0 while(true){ if(j==2){ console.log("continue"); j++ continue } if(j>=4){ console.log("break"); break } console.log("while 循环 j=",j); j++; } </script> </body> </html>
|
后台输出:
![](http://images.phyjack.com/20240719055943.png)
JS函数与事件
事件是JS的触发机制,是发生在 HTML 元素上的事情,每一个事件背后可以触发一个或多个动作。
事件绑定的方式有三种:
- HTML属性
- DOM属性
- addEventListener方法
常见的HTML属性事件有:
- onClick:点击
- onFocus:光标聚集
- onBlur:光标移开
- onMouseOver:鼠标经过
- onMouseOut:鼠标移出
- onChange:文本内容改变
- onSelect:文本框选中
示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js 函数与事件</title> </head> <body> <button onclick="fun_onClick()">OK</button> <br></br> <button onfocus="fun_onFocus()" onblur="fun_blur()">Yes</button> <script> function fun1(input1) { console.log("fun1"); return input1 + 1; } let a = fun1(1); console.log(a); let i = 1 function fun_onClick() { console.log("点击按钮,次数:",i); i++; } let j = 0 function fun_onFocus() { j++; console.log("聚集,次数:",j); } function fun_blur() { j--; console.log("聚集,次数:",j); }
</script> </body> </html>
|
效果:
![](http://images.phyjack.com/bne_dotskirt_06.gif)
DOM 和 addListener
加载网页时,浏览器会自动创建页面的DOM:文档对象模型(Document Object Model)
![](http://images.phyjack.com/20240717071213.png)
通过DOM,JS可以方便地获取HTML文档中的所有元素及其属性,再使用元素.addListener(event, action)
可以对特定的元素添加“事件-动作”对,实现HTML网页的动态交互。
示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js 函数与事件</title> </head> <body> <h1 class="c1">标题</h1> <p id="p01">正文内容</p> <button id="b01">这是一个按钮</button> <hr> <button id="b02">这个按钮用来切换标题颜色</button>
<script> var e1 = document.getElementsByClassName("c1") var e2 = document.getElementById("p01") var e3 = document.getElementById("b01") var e4 = document.getElementById("b02") console.log(e1); console.log(e2); console.log(e3); console.log(e4);
e1[0].style.color = "red" e2.style.color = "blue" e2.style.fontSize = "20px" e3.addEventListener("click", fun_onClick) e4.addEventListener("click", switch_head_color)
let i = 1; function fun_onClick() { console.log("点击按钮,次数:",i); i++; } color_set = ['red','green','blue']; let j = 0; function switch_head_color() { j++; if(j>=3) j = j - 3 e1[0].style.color = color_set[j]; } </script> </body> </html>
|
效果:
![](http://images.phyjack.com/tmp.gif)