前端入门第三课：JS 核心语法（变量 / 数组 / 函数）+ DOM 操作精讲

文章目录

javascript(基础语法)
- 输入输出
- 变量的使用
- 数组
- 函数
- 对象
javascript(webapi)

javascript(基础语法)

javascript的书写形式:

1.行内式:直接嵌入到html元素内部

注意，JS 中字符串常量可以使用单引号表示，也可以使用双引号表示—HTML 中推荐使用双引号，JS 中推荐使用单引号.

2.内嵌式:写到html的script标签里面

3.外部式:写到单独的js文件里面

–通过 <script> 标签的 src 属性指定外部 .js 文件路径（如 hello.js），浏览器会自动加载并执行该文件中的代码

–注意:当 <script> 标签设置了 src 属性时，标签内部不能再写 JavaScript 代码，即使写了也不会被执行

html文件中:
<script src="hello.js"></script>

hello.js中:
alert("hehe");

javascript中注释的方法://和/**/

输入输出

prompt:

// 输入: prompt（弹出输入框）
prompt("请输入您的姓名:");

alert:

// 输出: alert（弹出警示对话框）
alert("hello");
alert("您的姓名是：" + name + "\\n" + "您的年龄是：" + age + "\\n" + "您的分数是：" + score + "\\n");

console.log:

// 向控制台输出日志
console.log("这是一条日志");

–但是这个操作可以通过在vscode中输入log然后再按tab快速输入console.log

–这个日志信息在浏览器的开发者工具里面的console标签页才能看到结果

{: id="20260510082658-f1p46ga" updated="20260510082703"}

变量的使用

创建变量:

var name = 'zhangsan';
var age = 20;
var age = prompt("请输入年龄");

–字符串类型的初始化值，需要用单引号或双引号包裹；数字类型的初始化值可直接赋值，无需引号

–在JS中，如果定义一个变量不使用let/var，此时这跟变量就会变成一个全局变量

使用变量:

console.log(age); // 读取变量 age 的值，然后把这个值作为日志打印出来
age = 30; // 修改变量内容

js中变量的类型是动态类型!

–JS 的变量类型是程序运行过程中才确定的

–随着程序运行，变量的类型可能会发生改变

js的基本数据类型:

number: 数字类型，不区分整数和小数（统一用 64 位浮点数存储）–可以用n进制的方式表示数字

其中:

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

NaN: 表示当前的结果不是一个数字.

eg:
onsole.log('hehe' – 10); // 得到 NaN（字符串与数字相减，无法转为有效数字）,但是'hehe'+10的结果是hehe10!!!
—引申:可以使用 isNaN 判断非数字
isNaN(10);会返回false

boolean: 布尔类型，包含 true（真）和 false（假）两个值

string: 字符串类型，用于表示文本数据

字符串字面量需要使用引号引起来，单引号、双引号均可

–如果字符串中本身包含引号，直接书写会导致语法错误,这时需要用到转义字符

var msg = "My name is \\"zhangsan\\""

转义字符有:\\n, \\\\, \\', \\", \\t

字符串的拼接用的是+(可以字符串和数字进行拼接)

求字符串长度，使用 String 的 length 属性即可，返回值为字符数量(不是字节!)

var b = '哈哈';
b.length; //2

undefined: 只有唯一值 undefined，表示变量已声明但未赋值的状态

如果一个变量没有被初始化过，结果就是 undefined，属于 undefined 类型

undefined 和字符串进行相加时，会执行字符串拼接操作

var a;
console.log(a + "10"); // 输出：undefined10

undefined 和数字进行相加时，结果为 NaN（非数字）

console.log(a + 10); // 输出：NaN

null: 只有唯一值 null，表示“空值”或“不存在的对象”

var b = null;
console.log(b + 10); // 输出：10
console.log(b + "10"); // 输出：null10

跟undefined的区别:null 表示当前的值为空;undefined 表示当前的变量未定义

相关运算符的话跟cpp差不多，就不介绍了，比如+-*/% 还有位运算那些

但是js多了一些:===严格等于(==只要求值相等，===还要求类型也一样才行) !==严格不等于

条件语句:if语句,三元表达式,switch

循环语句:while,for循环，以及continue和break

–以上这些都跟cpp的用法一致

数组

注意:js的数组不要求元素是相同类型

创建数组:var arr = new Array();或者var arr = [];或var arr2 = [1, 2, 'haha', false];

访问元素:

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr);//输出全部内容
console.log(arr[0]); // 访问第1个元素：小猪佩奇
console.log(arr[–1]);//如果下标超出数组的有效范围（包括负数下标），读取元素的结果为 undefined
arr = '小猫凯迪'; //直接给数组变量赋值会导致原数组丢失，变量类型会被改变

新增数组元素:

1.通过修改 length 新增元素:新增的元素默认值为 undefined
var arr = [9, 5, 2, 7];
arr.length = 6; // 将数组长度从4改为6，新增2个元素

2.通过下标新增元素:
如果赋值的下标超出数组当前长度，会在指定位置插入新元素，中间未赋值的下标会被填充为 undefined
var arr = [];
arr[2] = 10;

3.通过push进行追加元素
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
newArr.push(arr[1]);

删除数组中的元素:

var arr = [9, 5, 2, 7];
// 第一个参数表示从下标为 2 的位置开始删除，第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);

函数

js的函数跟cpp的其实差不多，但是js的函数可以用作变量

var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}

console.log(add(10, 20)); // 输出：30

对象

注意:javascript里面没有类，多态，不区分属性和方法，没有private/public等访问控制机制,没有继承

创建对象:

1.用字面量进行创建对象:

// 创建空对象
var a = {};

// 创建包含属性和方法的对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};

2.使用new object来创建对象

var student = new Object();

// 动态添加属性：支持 . 语法
student.name = "蔡徐坤";
student.height = 175;

// 动态添加属性：也支持 [] 语法
student['weight'] = 170;

// 动态添加方法
student.sayHello = function () {
console.log("hello");
}

3.使用构造函数创建对象:

var mimi = {
name: "咪咪",
type: "中华田园喵",
miao: function () {
console.log("喵");
}
};

function Cat(name, type, sound) {
// this 指向当前正在创建的实例
this.name = name;
this.type = type;
this.miao = function() {
console.log(sound);
};
}

// 必须用 new 调用，创建实例
var mimi = new Cat("咪咪", "中华田园喵", "喵");
console.log(mimi.name); // 输出：咪咪
mimi.miao(); // 输出：喵

使用对象的属性和方法:

// 1. 使用 . 成员访问运算符来访问属性
console.log(student.name);

// 2. 使用 [] 访问属性，此时属性需要加上引号
console.log(student['height']);

// 3. 调用方法
student.sayHello();

javascript(webapi)

Web API | MDN里面的webapi很全

JS 分成三个大的部分

ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM

DOM树的结构:

在这里插入图片描述

文档: 一个页面就是一个文档, 使用 document 表示.

元素: 页面中所有的标签都称为元素. 使用 element 表示.

节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

获取元素:

querySelector:HTML5 新增的 DOM 方法，IE9 及以上版本浏览器支持

–若需要获取所有匹配的元素列表，使用配套方法 querySelectorAll(),这俩就返回值不同

var element = document.querySelector(selectors);

selectors：必填，类型为 DOM 字符串，必须是有效的 CSS 选择器
（如类选择器.box、ID 选择器#id、标签选择器div、组合选择器h3 span input等），否则会抛出SYNTAX_ERR语法错误。
返回值：文档中与选择器匹配的第一个元素对象，如果没有匹配项则返回null。—querySelectorAll返回的是所有符合的元素

操作元素:

获取/修改元素内容:

innerText:只处理纯文本,不解析HTML标签，把所有标签当作普通文字

// 读操作
var renderedText = HTMLElement.innerText;

// 写操作
HTMLElement.innerText = string;

innerHTML:处理完整的HTML结构

// 读操作：获取元素内部的HTML内容（包含标签和文本）
var content = element.innerHTML;

// 写操作：设置元素内部的HTML内容（浏览器会解析HTML标签并渲染）
element.innerHTML = htmlString;

获取/修改元素属性:

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
console.log(img.src); // 获取图片的src属性值
console.log(img.title); // 获取图片的title属性值
console.log(img.alt); // 获取图片的alt属性值
</script>

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
// 给图片绑定点击事件，实现图片切换
img.onclick = function () {
if (img.src.lastIndexOf('rose.jpg') !== –1) {
// 当前是rose.jpg时，切换为rose2.png
img.src = './rose2.png';
} else {
// 否则切换回rose.jpg
img.src = './rose.jpg';
}
}
</script>

获取/修改表单元素属性:

表单（主要是<input>标签）的以下属性，都可以通过 DOM 进行读写修改：

value：input 的内容值（如文本框、按钮的显示文本）

disabled：是否禁用表单元素（布尔值，true为禁用，false为启用）

checked：复选框 / 单选框是否被选中（布尔值）

selected：下拉框<option>是否被选中（布尔值）

type：input 的类型（如text、password、button、file等）

<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
if (btn.value === '播放') {
btn.value = '暂停';
} else {
btn.value = '播放';
}
}
</script>

获取/修改样式属性:–所有 CSS 中定义的元素样式属性，都可以通过 JavaScript 进行读写修改

–注意:CSS属性名要转为驼峰（去掉连字符，后面单词首字母大写）eg:background-color → backgroundColor

行内样式操作:
// 方式1：单独修改单个样式属性
element.style.[属性名] = [属性值];

// 方式2：批量设置多个样式属性
element.style.cssText = [属性名+属性值];

类名样式操作:—修改元素的 CSS 类名
element.className = [CSS 类名];

操作节点:

新增节点:先创建元素节点，再把元素节点插入到DOM树中

创建元素节点:var element = document.createElement(tagName[, options]);

把元素节点插入到DOM树有俩种方法: 1.将节点插入到指定节点的最后一个孩子之后：element.appendChild(aChild)

2.将节点插入到指定节点之前:var insertedNode = parentNode.insertBefore(newNode, referenceNode);

–注意:如果对同一个节点调用两次插入方法（比如appendChild），它只会出现在「最后一次」插入的位置，前面的插入会自动失效

删除节点:oldChild = element.removeChild(child);

关于事件:用户对页面的操作（点击、选择、修改等），会在浏览器中产生一个个「事件」，JS 获取这些事件后，就能执行对应的交互逻辑。

对于键盘事件的操作也要会:比如onkeydown onkeypress onkeyup

可以去w3school.com里面去查具体的用法

前端入门第三课：JS 核心语法（变量 / 数组 / 函数）+ DOM 操作精讲

文章目录

javascript(基础语法)

输入输出

变量的使用

数组

函数

对象

javascript(webapi)

相关推荐

评论抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

文章目录

javascript(基础语法)

输入输出

变量的使用

数组

函数

对象

javascript(webapi)

相关推荐

评论 抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

评论抢沙发