主页 > IT业界 >

JavaScript(JS)

IT业界
2025-08-31 15:30:01

介绍

JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互 JavaScript 和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似

JS引入方式

内部脚本:将JS代码定义在HTML页面中 JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可改善显示速度

外部脚本:将JS代码定义在外部JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签 <script>标签不能自闭合：

JS基础语法书写语法

区分大小写:与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无注释: 单行注释://注释内容多行注释:/*注释内容 */ 大括号表示代码块

输出语句

使用 window.alert()写入警告框使用 document.write()写入 HTML 输出

使用 console.log()写入浏览器控制台

变量

JavaScript 中用 var关键字(variable 的缩写)来声明变量。

Javascript 是一门弱类型语言，变量可以存放不同类型的值变量名需要遵循如下规则: 1.组成字符可以是任何字母、数字、下划线(_)或美元符号(S) 2.数字不能开头 3.建议使用驼峰命名

特点1：作用域比较大，全局变量

特点2：可以重复定义的

ECMAScript6 新增了let关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在let关键字所在的代码块内有效(局部变量)，且不允许重复声明。 ECMAScript6新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型、运算符、流程控制语句数据类型

JS中分为：原始类型（Java当中的基本数据类型）和引用类型（JS当中的对象）

使用typeof运算符可以获取数据类型：

运算符

算术运算符:+，-，*,/,%，++，--

赋值运算符:=，+=，-=，*=，/=，%=

比较运算符:>，<，>=，<=，!=，==，=== 逻辑运算符:&&，||，! 三元运算符:条件表达式?true_value:false_value

==与=== ==会进行类型转换，===不会进行类型转换

类型转换

字符串类型转为数字: 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

其他类型转为boolean: Number:0和NaN为false，其他均转为true。 String:空字符串为false，其他均转为true。 Null和 undefined:均转为false。

流程控制

JS函数

定义方式二：

var functionName=function(参数1,参数2..){ //要执行的代码

}

注意事项：

JS中，函数调用可以传递任意个数的参数

虽然传入的参数有四个，但是只调用两个，虽然传递了，但是没有接收

JS对象 Array

JavaScript中Array对象用于定义数组

特点：长度可变，类型可变

注意事项：JavaScript中的数组相当于java集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据

属性、方法

区别：

for循环是遍历数组中的所有元素，而forEach遍历数组中有值的元素

ES6 箭头函数

function可以省略，（...）里面是方法的形参列表，{...}里面是函数体的内容

如果要给箭头函数起名字：var xxx=(...) =>{...}

push

splice

start：从哪个位置开始删

deleteCount：删几个

String

JSON

概念：JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本

由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输

基础语法

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

组成: Window:浏览器窗口对象

Navigator:浏览器对象

Screen:屏幕对象

History:历史记录对象 Location:地址栏对象

Window

介绍:浏览器窗口对象。获取:直接使用window，其中 window.可以省略。 window.alert("Hello window"); alert("Hello window"); 属性 history:对 History 对象的只读引用。请参阅 History 对象 location:用于窗口或框架的 Location 对象。请参阅 Location 对象 navigator:对 Navigator 对象的只读引用。请参阅Navigator 对象

方法 alert():显示带有一段消息和一个确认按钮的警告框 confirm():显示带有一段消息以及确认按钮和取消按钮的对话框 setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式 setTimeout():在指定的毫秒数后调用函数或计算表达式

Location

DOM

概念:Document Object Model，文档对象模型

将标记语言的各个组成部分封装为对应的对象： Document:整个文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象

JavaScript 通过DOM，就能够对HTML进行操作：改变 HTML 元素的内容改变 HTML元素的样式(CSS) 对 HTML DOM 事件作出反应添加和删除 HTML元素

DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为三个不同的部分：

1.Core DOM-所有文档类型的标准模型 Document:整个文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象 2.XML DOM-XML文档的标准模型 3.HTML DOM-HTML文档的标准模型 lmage: <img> Button : <input type='button'>

如何获取元素对象

案例

JS事件监听

事件:HTML事件是发生在HTML元素上的“事情”。比如: 按钮被点击鼠标移动到元素上按下键盘按键事件监听:JavaScript可以在事件被侦测到时执行代码

事件绑定

常见事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-事件-常见事件</title> </head> <body onload="load()"> <form action="" style="text-align: center;" onsubmit="subfn()"> <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"> <input id="b1" type="submit" value="提交"> <input id="b1" type="button" value="单击事件" onclick="fn1()"> </form> <br><br><br> <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"> <tr> <th>学号</th> <th>姓名</th> <th>分数</th> <th>评语</th> </tr> <tr align="center"> <td>001</td> <td>张三</td> <td>90</td> <td>很优秀</td> </tr> <tr align="center"> <td>002</td> <td>李四</td> <td>92</td> <td>优秀</td> </tr> </table> </body> <script> //onload : 页面/元素加载完成后触发 function load(){ console.log("页面加载完成...") } //onclick: 鼠标点击事件 function fn1(){ console.log("我被点击了..."); } //onblur: 失去焦点事件 function bfn(){ console.log("失去焦点..."); } //onfocus: 元素获得焦点 function ffn(){ console.log("获得焦点..."); } //onkeydown: 某个键盘的键被按下 function kfn(){ console.log("键盘被按下了..."); } //onmouseover: 鼠标移动到元素之上 function over(){ console.log("鼠标移入了...") } //onmouseout: 鼠标移出某元素 function out(){ console.log("鼠标移出了...") } //onsubmit: 提交表单事件 function subfn(){ alert("表单被提交了..."); } </script> </html> 案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-事件-案例</title> </head> <body> <img id="light" src="img/off.gif"> <br> <input type="button" value="点亮" onclick="on()"> <input type="button" value="熄灭" onclick="off()"> <br> <br> <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"> <br> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <br> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"> </body> <script> //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick function on(){ //a. 获取img元素对象 var img = document.getElementById("light"); //b. 设置src属性 img.src = "img/on.gif"; } function off(){ //a. 获取img元素对象 var img = document.getElementById("light"); //b. 设置src属性 img.src = "img/off.gif"; } //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur function lower(){//小写 //a. 获取输入框元素对象 var input = document.getElementById("name"); //b. 将值转为小写 input.value = input.value.toLowerCase(); } function upper(){//大写 //a. 获取输入框元素对象 var input = document.getElementById("name"); //b. 将值转为大写 input.value = input.value.toUpperCase(); } //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick function checkAll(){ //a. 获取所有复选框元素对象 var hobbys = document.getElementsByName("hobby"); //b. 设置选中状态 for (let i = 0; i < hobbys.length; i++) { const element = hobbys[i]; element.checked = true; } } function reverse(){ //a. 获取所有复选框元素对象 var hobbys = document.getElementsByName("hobby"); //b. 设置未选中状态 for (let i = 0; i < hobbys.length; i++) { const element = hobbys[i]; element.checked = false; } } </script> </html>

标签：

JavaScript(JS)由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“JavaScript(JS)”

上一篇
python如何从路径中获取文件名

下一篇
flinkjobgraph详细介绍