引入
内部 script:
内部 script 是指将 JavaScript 代码直接写在 HTML 文件中的
<!DOCTYPE html>
<html>
<body>
<script>
alert("这是内部脚本的示例!");
</script>
</body>
</html>
内部 script 的优点是简单直接,适用于小型、简单的脚本。但对于大型项目,过多的代码写在 HTML 文件中可能会导致文件变得混乱,不利于维护和管理。
外部 script:
外部 script 是将 JavaScript 代码写在一个独立的 .js 文件中,然后通过
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
</body>
</html>
其中 script.js 是一个独立的 JavaScript 文件,内容可能如下:
alert("这是外部脚本的示例!");
外部 script 的优点在于可以将 JavaScript 代码与 HTML 结构分离,提高代码的可维护性和可重用性。多个 HTML 文件可以引用同一个外部 JavaScript 文件,方便统一管理和修改代码。
自闭合的概念
在 HTML 中,“自闭合” 指的是一种标签的书写方式,即标签以 <标签名 /> 的形式出现,而不是传统的 <标签名></标签名> 形式。
例如:
<img src="image.jpg" />
就是一个自闭合标签。自闭合标签不需要有对应的结束标签。
需要注意的是,并非所有的 HTML 标签都支持自闭合的写法。像 的形式。
再比如,
标签通常写成
的自闭合形式,用于表示换行。
自闭合标签的使用可以使代码更加简洁,但必须遵循 HTML 标准中对各个标签的规定
== 注意:JS不允许自闭合 ==
分割线
JS变量
var 关键字:
在较旧的 JavaScript 代码中常用。但存在一些作用域和变量提升的问题。
var num = 5;
let 关键字:
具有块级作用域,即在花括号 {} 内声明的 let 变量,其作用域仅限于该块。
{
let message = "Hello";
console.log(message);
}
// 在花括号外访问 message 会报错
// console表示在控制台对message进行输出
const 关键字:
用于声明常量,即声明后其值不能被重新赋值。但如果 const 变量指向的是一个对象或数组,其内部的属性或元素可以被修改。
const person = { name: "John" };
person.name = "Jane"; // 可以修改对象的属性
JS函数
在 JavaScript 中,函数是一段可以被重复调用的代码块,用于执行特定的任务或计算并返回结果。
函数的定义可以使用函数声明或函数表达式两种方式。
函数声明:
function functionName(parameters) {
// 函数体
return result; // 可选的返回值
}
function add(a, b) {
return a + b;
}
函数表达式:
let functionName = function(parameters) {
// 函数体
return result; // 可选的返回值
};
let multiply = function(a, b) {
return a * b;
};
函数可以接受参数,参数用于向函数传递数据,函数内部使用这些参数进行计算或操作。
函数还可以返回值,通过 return 语句将计算结果返回给调用者。
function square(num) {
return num * num;
}
let result = square(5); // result 的值为 25
函数还支持默认参数和剩余参数等特性。
默认参数:
function greeting(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greeting(); // 输出 "Hello, Guest!"
greeting("John"); // 输出 "Hello, John!"
剩余参数:
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3, 4, 5)); // 输出 15
函数在 JavaScript 编程中是非常重要的组成部分,它有助于提高代码的复用性、可读性和可维护性。
String类型
在 JavaScript 中,创建字符串有多种方式。例如:
1.利用构造函数初始化
var Str = new String("我是一个字符串");
2.直接声明
let str1 = "Hello World";
let str2 = 'This is also a string';
字符串函数
字符串函数: JS String函数操作手册
JS对象
可以类比C++的类进行理解
注意其中的函数可以省略function
JSON对象
注意 字符串变量需要用单引号进行定义 而JSON对象中的键仍需要加双引号
在 JavaScript 中,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
JSON 对象有两个主要的方法:JSON.parse() 和 JSON.stringify() 。
JSON.parse() 方法用于将一个有效的 JSON 字符串转换为 JavaScript 对象。
let jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
let obj = JSON.parse(jsonStr);
console.log(obj.name);
__JSON.stringify()__ 方法则用于将 JavaScript 对象转换为 JSON 字符串。
//JSON格式 ———— 键值对
let person = {
name: "Alice",
age: 25,
hobbies: ["reading", "swimming"],
function(形参列表){}
};
let jsonString = JSON.stringify(person);
console.log(jsonString);
例如,如果您从服务器接收到一个 JSON 格式的数据,就可以使用 JSON.parse() 来将其转换为 JavaScript 对象,以便进行操作和处理。 相反,如果您需要将 JavaScript 对象发送到服务器或存储在本地,通常会使用 JSON.stringify() 将其转换为字符串格式。
BOM对象
window 对象:这是 BOM 的核心对象,表示浏览器窗口本身。
window.location:包含有关当前 URL 的信息,例如 href(完整的 URL)、protocol(协议)、host(主机名和端口)等。
console.log(window.location.href);
可以直接用这个方法进行url的设置并重定向到指定的url
window.history:用于操作浏览器的历史记录,可以进行前进、后退等操作。
window.screen:提供有关屏幕的信息,如宽度、高度等。
console.log(window.screen.width);
window.navigator:包含有关浏览器的信息,例如浏览器名称、版本等。
BOM 使得 JavaScript 能够控制浏览器的行为,例如打开新窗口、调整窗口大小、滚动页面等。
例如,使用 window.open() 方法可以打开一个新的浏览器窗口:
window.open('https://www.example.com', '_blank');
使用 window.resizeTo() 方法可以调整窗口的大小:
window.resizeTo(800, 600);
setInterval函数
周期性的执行指定的函数
settTmeout函数
经过指定时间执行一次
DOM对象
DOM操作获取Element 元素对象
1.getElementById() 方法:通过元素的 id 属性来获取元素。
let element = document.getElementById('yourElementId');
例如,如果有一个元素 div id=“myDiv”,则可以使用 document.getElementById(‘myDiv’) 来获取它。
2.getElementsByTagName() 方法:通过元素的标签名获取元素的集合(HTMLCollection)。
let elements = document.getElementsByTagName('div');
这将返回页面中所有的 div 元素组成的集合。
3.getElementsByClassName() 方法:通过元素的 class 属性值获取元素的集合。
let elements = document.getElementsByClassName('yourClassName');
比如,对于具有 class=“myClass” 的元素,可以使用这个方法获取。
6.根据name属性获取
5.querySelector() 方法:通过 CSS 选择器获取第一个匹配的元素。
let element = document.querySelector('.yourSelector');
例如,document.querySelector(‘#myId’) 可以获取 id 为 myId 的元素。
6.querySelectorAll() 方法:通过 CSS 选择器获取所有匹配的元素集合(NodeList)。
let elements = document.querySelectorAll('.yourSelector');
例如,document.querySelectorAll(‘div.myClass’) 可以获取所有具有 class=“myClass” 的
如何直接修改获得的元素值
通过查找手册的方式,查找需要修改的元素的 封装的DOM对象的相应的属性和方法::
直接调用innerHTML方法修改元素内容
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/8aa4d009b5d045fb8b318b623e839221.png)
案例:通过修改DOM属性完成下列操作
1.img对象的修改可以通过src属性
var img = document.getElementById('h1');
img.src = "xxx"
2.修改div标签,由于div标签没有特有的管理修改的属性,但是支持普通元素属性,随意通过调用普通元素属性的innerHTML属性进行修改
如上同时进行了字体颜色的修改
3.复选框改为选中如上,只需要将ele.checked改为true即可
JS事件和事件监听
事件绑定
1.通过HTML的事件属性,将HTML和JS进行耦合
2.通过DOM元素属性绑定
常见事件
案例
案例基础代码:
<body>
<img 1 d="light" src="img/off.gif" > <br>
<input type-"button" value-"点亮" >
<input type="button" value="熄灭" >
<br><br>
<input type="text" id="name" value="TCAST" <br><br>
<input type="checkbox" name-"hobby" > 电影
<input type="checkbox" name-"hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏
<br>
<input type="button" value="全选" >
<input type="button" value="反选" >
</body>
定义点亮和熄灭事件的两个方法
<input type-"button" value-"点亮" onclick = "on()">
<input type="button" value="熄灭" onclick = "off()">
1.获取img元素对象
2.进行图片的更换
function on(){
let ele = document.getElementById("light");
ele.src = "off.gif"; //修改元素属性
}