文章目录
JavaScript
1.概述
- JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
- JavaScript 和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
- JavaScript在1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。
- ECMAScript6(ES6)是最新的JavaScript版本(发布于 2015 年)。
ECMA:ECMA国际(前身为欧洲计算机制造商协会)，制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而iavascript是遵守ECMAScript的标准的。
2.JS引入方式
1.内部脚本 ：将JS代码定义在HTML页面中
- JavaScript代码必须位于
<script></script>标签之间 - 在HTML文档中，可以在任意地方，放置任意数量的
<script> - 一般会把脚本置于
<body>元素的底部，可改善显示速度
2.外部脚本：将JS代码定义在外部JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含
<script>标签 <script src="js/demo.js"/><script>标签不能自闭合
3.JavaScript基础语法
3.1书写语法
-
区分大小写:与Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
-
注释:
- 单行注释：//注释内容
- 多行注释：/*注释内容 */
-
大括号表示代码块
if(count == 3){ alert(count); }
输出语句
- 使用 window.alert()写入警告框.
- 使用 document.write()写入HTML输出
- 使用 console.log()写入浏览器控制台
<script>
window.alert("HellojavaScript"); //浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML,在浏览器展示
console.log("HellojavaScript"); //写入浏览器控制台
</script>
3.2变量
-
JavaScript 中用 var 关键字(variable 的缩写)来声明变量
-
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
var a = 20; a="张三”; -
变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线()或美元符号($)
- 数字不能开头9
- 建议使用驼峰命名
变量特点及注意事项
- 特点1：变量作用域比较大，为全局变量
- 特点2：可以重复定义的
- 注意1：ECMAScript6 新增了let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
- 注意2：ECMAScript6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
3.3数据类型
JavaScript中分为:原始类型和引用类型
3.3.1主要原始类型
-
number：数字(整数、小数、NaN(NotaNumber))
-
string：字符串，单双引皆可
-
boolean：布尔。true，false
-
null：对象为空
-
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
-
注：使用 typeof运算符可以获取数据类型
var a = 20; alert(typeof a);官方注释：为什么 typeof 运算符对于 nul 值会返回"object"。这实际上是 JavaScript 最初实现中的一个错误，然后被ECMAScript 沿用了，现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
3.3.2运算符
-
算术运算符：+，-，*,/,%，++，–
-
赋值运算符：=，+=，-=，*=，/=,%=
-
比较运算符：>，<，>=，<=，!=，，
-
逻辑运算符：&&,||，!
-
三元运算符：条件表达式? true value：false value
-
注：==会进行类型转换，===不会进行类型转换
var a = 10; alert(a == "10"); //true alert(a ==="10"); //false alert(a === 10);//true
类型转换
-
字符串类型转为数字:
-
将字符串字面值转为数字。如果字面值不是数字，则转为NaN
alert(parseInt("12"));//12 alert(parseInt("12A45"));//12 alert(parseInt("A45"))://NaN(not a number)
-
-
其他类型转为boolean:
- Number：0和 NaN为false，其他均转为true
- String：空字符串为false，其他均转为true。
- Null 和 undefined：均转为false。
4.函数
-
介绍：函数(方法)是被设计为执行特定任务的代码块
-
定义：JavaScript 函数通过 function 关键字进行定义，语法为：
//方式1 function functionName(参数1,参数2..){ //要执行的代码 } //方式2 var functionName=function functionName(参数1,参数2..){ //要执行的代码 } -
注意：
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
-
调用：函数名称（实际参数列表）
//定义函数方式1 function add(a,b){ return a+ b } //定义函数方式2 var add = function(a,b){ return a + b; } //函数调用 var result = add(10,20); alert(result); -
注意：JS中函数调用可以传递任意个事的参数，即对于上述add函数可以传递多个参数，但只会对前两个参数起作用
5.对象
5.1Array
JavaScript 中的 Array 对象用于存储和操作多个值。
5.1.1创建数组
使用数组字面量：最常用的创建数组的方法是使用数组字面量。
let fruits = ["Apple", "Banana", "Orange"];
使用 Array 构造函数
let fruits = new Array("Apple", "Banana", "Orange");
5.1.2常用的数组的属性
length
length 属性返回数组中的元素个数。
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length); // 输出: 3
5.1.3常用数组的方法
forEach
forEach 方法对数组中的每个元素执行一次提供的函数。
let fruits = ["Apple", "Banana", "Orange"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
// 输出:
// Apple
// Banana
// Orange
push
push 方法在数组末尾添加一个或多个元素，并返回新数组的长度。
let fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits); // 输出: ["Apple", "Banana", "Orange"]
console.log(fruits.length); // 输出: 3
splice
splice 方法通过删除或替换现有元素来修改数组内容，并返回被删除的元素。它可以用于插入、删除和替换数组中的元素。
let fruits = ["Apple", "Banana", "Orange"];
// 删除元素
let removedFruits = fruits.splice(1, 1); // 从索引1开始删除1个元素
console.log(fruits); // 输出: ["Apple", "Orange"]
console.log(removedFruits); // 输出: ["Banana"]
// 插入元素
fruits.splice(1, 0, "Mango"); // 在索引1处插入 "Mango"
console.log(fruits); // 输出: ["Apple", "Mango", "Orange"]
// 替换元素
fruits.splice(1, 1, "Grapes"); // 从索引1开始删除1个元素，并插入 "Grapes"
console.log(fruits); // 输出: ["Apple", "Grapes", "Orange"]
5.2 String
JavaScript 中的 String 对象用于表示和操作文本。
5.2.1创建字符串
最常用的创建字符串的方法是使用字符串字面量。
let greeting = "Hello, World!";
也可以使用 String 构造函数来创建字符串。
let greeting = new String("Hello, World!");
5.2.2常用字符串的属性
length
length 属性返回字符串中的字符个数。
let greeting = "Hello, World!";
console.log(greeting.length); // 输出: 13
5.2.3字符串的方法
charAt
charAt 方法返回指定索引处的字符。索引从 0 开始。
let greeting = "Hello, World!";
console.log(greeting.charAt(0)); // 输出: H
console.log(greeting.charAt(7)); // 输出: W
indexOf
indexOf 方法返回指定子字符串在字符串中首次出现的位置。如果没有找到子字符串，则返回 -1。
let greeting = "Hello, World!";
console.log(greeting.indexOf("World")); // 输出: 7
console.log(greeting.indexOf("world")); // 输出: -1
trim
trim 方法移除字符串两端的空白字符。
let greeting = " Hello, World! ";
console.log(greeting.trim()); // 输出: "Hello, World!"
substring
substring 方法返回一个新的字符串，其中包含从指定索引开始到另一个指定索引结束的字符（或到字符串末尾的字符）。
let greeting = "Hello, World!";
console.log(greeting.substring(0, 5)); // 输出: Hello
console.log(greeting.substring(7)); // 输出: World!
5.3自定义对象
-
定义格式
var 对象名= { 属性名1:属性值1, 属性名2:属性值2， 属性名3:属性值3， 函数名称:function(形参列表){} }; -
调用格式
- 对象名.属性名;
- 对象名.函数名();
5.4 JSON
5.4.1介绍
- 概念：JavaScript Object Notation，JavaScript对象标记法。
- JSON 是通过JavaScript 对象标记法书写的文本
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
例如下代码：
{
"name" :"Tom",
"age":20,
"gender":"male",
}
注：json的数据文件中的key必须打上双引号，不然会导致格式错误
5.4.2定义方法
var 变量名='{"key1":value1，"key2":value2}';
5.4.3JSON字符串转换为JS对象
var jsobject = JSON.parse(userstr);
5.4.4JS对象转换为JSON字符串
var jsonstr = JSON.stringify(jsobject);
5.4.5JSON中的值的数据类型
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- nult
示例：
//定义json
var jsonstr ='{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';
alert(jsonstr.name); //错误调用因为jsonstr此时不是对象只是json格式的对象
//json字符串--js对象，json格式字符串转换为js对象
var obi=JsoN.parse(jsonstr);
alert(obi.name); //输出Tom
//js对象--json字符串，js对象转换为json格式字符串
alert(JsoN.stringify(obj); //输出"name":"Tom","age":18,"addr":["北京","上海","西安"]
5.5BOM
5.5.1介绍
Browser Object Model 浏览器对象模型，允许javaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
5.5.2Window对象
-
介绍：浏览器窗口对象。
-
获取：直接使用window，其中 window.可以省略。
window.alert("Hello window"); alert("Hello Window"); -
属性
- history：对 History 对象的只读引用。
- location：用于窗口或框架的 Location 对象。
- navigator：对 Navigator 对象的只读引用。
-
方法
alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框，带有返回值true和false。
setlnterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
5.5.3Location对象
-
介绍：地址栏对象。
-
获取：使用 window.location 获取，其中 window.可以省略。
window.location.属性; location.属性; -
属性：
- href:设置或返回跳转到完整的URL。
5.6DOM
5.6.1简要介绍DOM
文档对象模型（Document Object Model，简称DOM）是用于HTML和XML文档的编程接口。它提供了一种结构化的方式来表示文档，使得开发者可以通过编程语言（如JavaScript）动态地访问和更新文档的内容、结构和样式。对于后端开发者来说，了解DOM有助于更好地理解前端技术，并能有效地与前端开发协作。
5.6.2DOM的基本概念
- 文档节点（Document Node）：DOM的顶层节点，表示整个文档。
- 元素节点（Element Node）：文档中的每个HTML元素都是一个元素节点。
- 文本节点（Text Node）：包含在元素节点中的文本内容。
- 属性节点（Attribute Node）：元素节点的属性。
5.6.3操作DOM的常用方法
-
获取元素
通过各种方法可以获取文档中的元素。
// 根据ID获取元素 let element = document.getElementById("myElement"); // 根据标签名获取元素 let elements = document.getElementsByTagName("div"); // 根据类名获取元素 let elements = document.getElementsByClassName("myClass"); // 使用CSS选择器获取元素 let element = document.querySelector(".myClass"); let elements = document.querySelectorAll(".myClass"); -
创建和插入元素
可以动态创建新元素并将其插入到文档中。
// 创建一个新的元素 let newElement = document.createElement("div"); newElement.textContent = "Hello, World!"; // 将新元素插入到现有元素中 let parentElement = document.getElementById("parent"); parentElement.appendChild(newElement); -
修改元素
可以更改元素的属性和内容。
// 修改元素的文本内容 let element = document.getElementById("myElement"); element.textContent = "New Content"; // 修改元素的属性 element.setAttribute("class", "newClass"); // 直接修改样式 element.style.color = "red"; -
删除元素
可以从文档中删除元素。
let element = document.getElementById("myElement"); element.parentNode.removeChild(element);
5.6.4事件处理
DOM允许开发者为文档中的元素添加事件监听器，以响应用户交互。
let button = document.getElementById("myButton");
// 添加点击事件监听器
button.addEventListener("click", function() {
alert("Button clicked!");
});
// 移除事件监听器
button.removeEventListener("click", handlerFunction);
对于后端开发者来说，了解DOM的基本概念和操作有助于与前端开发更好地协作，并且在需要时能够编写简单的前端代码来处理动态内容更新和用户交互。DOM是前端开发的核心知识之一，掌握它可以为你在全栈开发之路上打下坚实的基础。
5.7事件监听
5.7.1基本概念
-
事件：HTML事件是发生在HTML元素上的“事情”。比如:
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
-
事件监听：JavaScript可以在事件被侦测到时执行代码
5.7.2事件绑定
-
方式一：通过 HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1"> <script> function on(){ alert("我被点击了"); } </script> -
方式二：通过 DOM 元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
document.getelementById('btn').onclick = function(){
alert('我被点击了!);
}
</script>
5.7.3常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
扫一扫
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
