【JavaWeb03】 入门JavaScript：轻松掌握前端开发核心技能
文章目录
- 🌍一. JavaScript
- 1. 基本说明
- 2. JavaScript 特点!
- 3. JavaScript 快速入门
- 🌍二. js变量
- 1. 变量的声明
- 2. 示例
- 3. 变量的命名规则
- 4. 变量的类型
- 5. 变量的作用域
- 6. 变量的提升
- 🌍三. 数据类型
- 1. 基本数据类型（Primitive Types）
- 2. 引用数据类型（Reference Types）
- 3. 类型检测
- 🌍四. 运算符
- 1. 算术运算符
- 2. 赋值运算符
- 3. 关系运算符
- 4. 逻辑运算符
- 🌍 五. 数组
- 1. 数组定义
- 2. 数组使用和遍历
- 🌍六. js函数
- 1. 函数定义方式
- 2. JavaScript 函数注意事项和细节
- 🌍七. 事件
- onload 加载完成事件
- onclick 单击事件
- onblur 失去焦点事件
- o nchange 内容发生改变事件
- onsubmit 表单提交事件!
- 🌍八. 习题
🙋♂️ 作者：@whisperrr.🙋♂️
👀 专栏：JavaWeb👀
💥 标题：【JavaWeb03】 入门JavaScript：轻松掌握前端开发核心技能💥
❣️ 寄语：比较是偷走幸福的小偷❣️
🌍一. JavaScript
1. 基本说明
- JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成页面的数据验证
- JS 需要运行浏览器来解析执行 JavaScript 代码。
- JS 是 Netscape 网景公司的产品，最早取名为 LiveScript，后更名为JavaScript。和 Java 没有关系
- JavaScript 简写 JS
2. JavaScript 特点!
1.JavaScript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 JavaScript 是在程序的运行过程中逐行进行解释。
2.JavaScript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。
3.JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。
4.跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
创建 js 弱类型.html演示弱类型特点
1.js 代码可以写在 script 标签中
2. type=“text/javascript” 表示这个脚本(script)类型是 javascript
3. type=“text/javascript” 可以不写，但是建议写上
4. js 语句可以不写 ; 建议写上
5. var
输出 alert() 使用弹框方式
输出 console.log() 在调试输出
输出变量的类型 typeof, 输出变量的类型
JavaScript 是弱类型的 num = 1; alert("num=" + num); alert("num 数据类型=" + (typeof num)); num = "csdn"; alert("num=" + num); alert("num 数据类型=" + (typeof num));3. JavaScript 快速入门
JavaScript 可以以多种方式使用，以下是两种主要的使用方式：
使用方式 1:script 标签 写 JS 代码
script 标签中 写 JS 代码 window.alert("hello, Javascript"); // alert 是 JavaScript 语言提供的一个警告框函数。 // 它可以输出指定的内容, 变量等信息 //scrpt 标签的位置，可以在 head 中，也可以在 body 体 window.alert("hello, 韩顺平教育");使用方式 2: 使用 script 标签引入 JS 文件
通过 标签的 src 属性引用外部 JavaScript 文件。
两种使用 js 的方式，是二选一，不能混用, 如果你两种方式都使用了,不会报错
但是只有一个生效, 前面引入的 js 生效
🌍二. js变量
在 JavaScript 中，变量是存储信息的容器。它们是编程语言中的基本构建块，用于存储数据值，这些值可以在需要时进行修改。以下是关于 JavaScript 变量的一些关键点：
1. 变量的声明
在 JavaScript 中，你可以使用以下关键字来声明变量：
- var：ES5 及更早版本中的传统声明方式，具有函数作用域。
- let：ES6（ECMAScript 2015）中引入，具有块作用域。
- const：ES6 中引入，用于声明一个只读的常量引用，也具有块作用域。
2. 示例
使用 var 声明变量
var x = 10;
使用 let 声明变量
let y = 20;
使用 const 声明变量
const PI = 3.14159;
3. 变量的命名规则
- 变量名必须以字母、下划线（_）或美元符号（$）开头。
- 变量名不能以数字开头。
- 变量名只能包含字母、数字、下划线和美元符号。
- 变量名不能是 JavaScript 中的保留字或关键字，如 if, else, var, let, const 等。
4. 变量的类型
JavaScript 是一种动态类型语言，这意味着同一个变量可以用来存储不同类型的数据。以下是 JavaScript 中的一些基本数据类型：
- String：表示文本数据，例如 "Hello, World!"。
- Number：表示数值数据，例如 42 或 3.14。
- Boolean：表示逻辑值 true 或 false。
- Undefined：表示未定义的值，即声明了变量但未初始化。
- Null：表示空值或不存在。
- Object：表示复杂数据结构，例如对象、数组和函数。
- Symbol（ES6 新增）：表示唯一的、不可变的数据类型。
5. 变量的作用域
- var 声明的变量具有函数作用域，如果在函数外部声明，则为全局作用域。
- let 和 const 声明的变量具有块作用域，这意味着它们只在声明它们的块（{} 内）中有效。
6. 变量的提升
- var 声明的变量会被提升到其所在作用域的顶部，但不会初始化。
- let 和 const 声明的变量也会被提升，但在声明之前不能访问，这被称为“暂时性死区”。
了解这些基本概念对于编写有效的 JavaScript 代码至关重要。随着 JavaScript 语言的发展，let 和 const 已成为声明变量的首选方式，因为它们提供了更好的作用域管理和代码清晰度。
🌍三. 数据类型
JavaScript 中的数据类型分为两大类：基本（原始）数据类型和引用（对象）数据类型。
1. 基本数据类型（Primitive Types）
基本数据类型是表示简单值的类型，它们是：
1.String
- 表示文本数据，可以是单引号、双引号或反引号（模板字符串）包围的字符序列。
- 示例："Hello, World!", 'JavaScript', `This is a template string`
- tring 字符串 [可以双引号括起来，也可以单引号括起来]
- 实例："a book of JavaScript"、'abc'、"a"、""
2.Number
- 表示整数和浮点数，也包括 Infinity（无穷大）、-Infinity（负无穷大）和 NaN（不是一个数字）。
- 示例：42, 3.14, Infinity, -Infinity, NaN
3.Boolean
- 表示逻辑值，只有两个可能的值：true 和 false。
- 示例：true, false
4.Undefined
- 表示声明了变量但未初始化的值。
- 示例：undefined（注意：undefined 也是一个全局变量，但最好使用它作为数据类型而不是变量）
5.Null
- 表示空值或不存在对象的引用。
- 示例：null
6.Symbol (ES6 新增)
- 表示唯一的、不可变的数据类型，常用于对象的属性名，以确保不会与其他属性名冲突。
- 示例：Symbol("description")
7.BigInt (ES2020 新增)
- 表示大整数，可以表示超过 Number 类型安全范围的整数值。
- 示例：BigInt("123456789012345678901234567890")
2. 引用数据类型（Reference Types）
引用数据类型是指对象，它们可以存储多个值和更复杂的数据结构。以下是 JavaScript 中的几种引用类型：
1.Object
- 表示一组无序的键值对，是所有复杂数据结构的基础。
- 示例：{ name: "Alice", age: 25 }
2.Array
- 表示一组有序的元素集合，可以包含不同类型的值。
- 示例：[1, "two", true]
3.Function
- 表示函数，JavaScript 中的函数是一等公民，可以作为值来使用。
- 示例：function greet(name) { return "Hello, " + name; }
除了上述基本引用类型，JavaScript 还提供了许多内置对象，如 Date、RegExp（正则表达式）、Map、Set、WeakMap、WeakSet 等。
3. 类型检测
在 JavaScript 中，可以使用以下方法来检测变量的数据类型：
- typeof 操作符：用于检测基本数据类型，对于引用类型（除了函数），它会返回 "object"。
- instanceof 操作符：用于检测对象是否是特定构造函数的实例。
- Object.prototype.toString.call() 方法：可以准确检测对象的具体类型。
例如：
typeof "Hello"; // "string" typeof 42; // "number" typeof true; // "boolean" typeof undefined; // "undefined" typeof null; // "object"（这是 JavaScript 的一个历史错误） typeof Symbol(); // "symbol" typeof {}; // "object" typeof []; // "object"（注意：数组也是对象） typeof function() {}; // "function" let arr = []; arr instanceof Array; // true arr instanceof Object; // true（因为数组也是对象） Object.prototype.toString.call([]); // "[object Array]"🌍四. 运算符
1. 算术运算符
- 算术运算符用于执行变量与/或值之间的算术运算。
- y 等于 5，下面的表格解释了这些算术运算符
2. 赋值运算符
- 赋值运算符用于给 JavaScript 变量赋值。
- 给定 x=10 和 y=5，下面的表格解释了赋值运算符
3. 关系运算符
- 关系(比较) 运算符在逻辑语句中使用，以测定变量或值是否相等。
- 给定 x=5，下面的表格解释了比较运算符
等于： == 是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
var a = "100";//string
var b = 100;//number
console.log(a == b);//true
console.log(a === b);//false
4. 逻辑运算符
- 逻辑运算符用于测定变量或值之间的逻辑。
- 给定 x=6 以及 y=3，下表解释了逻辑运算符
注意事项：
- 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
- 0 、null、 undefined、""(空串) 都认为是 false
- && 且运算，有两种情况
- 当表达式全为真的时候,放回最后一个表达式的值
- 当表达式中,有一个为假时,返回第一个为假的值
- || 或运算, 有两种情况 =
- 当表达式全为假的时候,放回最后一个表达式的值
- 当表达式中,有一个为真时,返回第一个为真的值
🌍 五. 数组
1. 数组定义
数组定义方式 1
var cars1 = ["Audi", "BMW", "Volvo"]; console.log("cars1=" + cars1); console.log(cars1[1]);//表示访问 cars1 数组的第 2 个元素, 1 表示下标/索引， 从 0 开始编号数组定义方式 2
var cars2 = [];//空数组 //添加元素 cars2[0] = "奥迪"; cars2[1] = "宝马"; cars2[2] = "奔驰"; console.log("cars2=" + cars2); console.log("cars2[2]=" + cars2[2]);//奔驰 console.log("cars2[10]=" + cars2[10]);// 如 果 该 元 素 不 存 在 ， 返 回 的 就 是 undefined数组定义方式 3
var cars3 = new Array("Audi", "BMW", "Volvo"); console.log("cars3=" + cars3); console.log("cars3[0]=" + cars3[0]);//Audi数组定义方式 4
var cars4 = new Array();//空数组 console.log(typeof cars4); cars4[0] = "法拉利"; cars4[1] = "保时捷"; cars4[2] = "yy";//相当于是给数组扩容 cars4[0] = "zz";//替换 cars4[8] = "红旗";//扩容, 如果是跳过了下标给赋值，那么中间没有赋值的元素 为 undefined console.log("cars4[3]=" + cars4[3]);//undefined console.log("cars4= " + cars4);2. 数组使用和遍历
数组使用和遍历 var cars = ["Audi", "BMW", "Volvo", 100, 1.1, true]; //遍历 console.log("数组的长度= " + cars.length)//6 for (i = 0; i🌍六. js函数
一句话：函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块
1. 函数定义方式
方式 1: function 关键字来定义函数
定义没有返回值的函数
function f1() { alert("f1() 被调用..."); } f1();定义有形参的函数,这里的形参，不需要指定类型, name 的数据类型是由实参决定
function f2(name) { alert("hi " + name); } f2("刘");定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数
据来决定,js 的函数调用机制和 java 一样
function f3(n1, n2) { return n1 + n2; } alert("f3(10, 20)=" + f3(10, 20));方式 2: 将函数赋给变量
var f1 = function () { alert("hi"); } console.log(typeof f1); f1();//调用函数2. JavaScript 函数注意事项和细节
-
JS 中函数的重载会覆盖掉上一次的定义,也就是没有重载
-
函数的 arguments 隐形参数（作用域在 function 函数内）
(1) 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量。
(2) 隐形参数特别像 java 的可变参数一样。 public void fun( int … args )
(3) js 中的隐形参数跟 java 的可变参数一样。操作类似数组
-
如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
(1)如果有匹配上，就赋给他， 如果没有匹配上，也无所谓
(2)仍然会把所有的实参，赋给 arguments
(3)如果形参个数，大于了实参个数，则该形参的值为 undefined
🌍七. 事件
- 事件是电脑输入设备与页面进行交互的响应
- 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
事件一览表
- 事件的注册（绑定）
事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
- 静态注册事件
通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册
- 动态注册事件(
通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形
式叫动态注册
4.16.4 动态注册事件步骤
- 获取标签dom 对象
- dom 对象.事件名 = fucntion(){}
onload 加载完成事件
- onload : 某个页面或图像被完成加载
- 在 js 中，将页面窗口 映射成 window dom 对象
- window 对象有很多的函数和属性，可以使用
- window.onload 表示页面被加载完毕
- 后面的 function (){} 表示加载完毕后，要执行的函数/代码
onload 加载完成事件 //定义了一个函数 function sayOK() { alert('静态注册 onload 事件 sayOK'); } window.onload = function () { alert("动态注册 onload 事件"); } hello~onclick 单击事件
- onclick : 鼠标点击某个对象
- 动态注册 onclick 事件
- 先拿到 id=btn01 的 button 对应 dom 对象
- 通过 dom 对象动态的绑定 onclick 事件
- 通过 document 的 getElementById 获取对应的 dom 对象
onclick 单击事件 function sayOK() { alert("你点击了 sayOK 按钮"); } //当页面加载完毕后，我们再进行动态绑定 //基本概念和机制一定要清楚 window.onload = function () { var btn01 = document.getElementById("btn01"); btn01.onclick = function () { alert("你点击了 sayHi 按钮"); } } sayOK 按钮 sayHi 按钮onblur 失去焦点事件
onblur : 元素失去焦点
通过下面任务来理解 onblur
输入小写单词,当输入框失去焦点时,小写单词转换大写
onblur 失去焦点事件 //静态绑定 function upperCase() { //1. 先得到 fname 输入框的 value -> 得到对应 dom 对象 var fname = document.getElementById("fname"); fname.value = fname.value.toUpperCase(); } //在页面加载完毕，完成动态绑定 window.onload = function () { //1.得到 fname2 的 dom 对象 var fname2 = document.getElementById("fname2"); fname2.onblur = function () { fname2.value = fname2.value.toUpperCase(); } } 输入英文单词：
输入英文单词：o nchange 内容发生改变事件
- onchange : 域的内容被改变
通过下面的代码来理解
onchange 内容发生改变事件 韩顺平 Java 工程师 function mySal() { alert("工资范围变化了~"); } //动态注册 window.onload = function () { //获取到 sel01 的 dom 对象 var sel01 = document.getElementById("sel01"); //给 sel01 绑定 onchange 事件 sel01.onchange = function () { alert("你换女友的~"); } } 你当前工资水平： --工资范围-- 10k 以下 10k-30k 30k 以上
你当前女友是谁： ---女友--- 艳红 春桃 春花onsubmit 表单提交事件!
- onsubmit : 注册按钮被点击, 提交表单(需求: 如果用户名或密码为空，不能提交表单，正则表达式语法是通用)
onsubmit 表单提交事件 //静态注册表单提交事件 function register() { //先得到输入的用户名和密码 var username = document.getElementById("username"); var pwd = document.getElementById("pwd"); //判断是否为空"" if ("" == username.value || "" == pwd.value) { alert("用户名和密码不能为空, 不能提交"); return false;//不提交 } //表示要提交 return true; } //动态注册表单提交事件 window.onload = function () { //使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访 问的页面一致 //得到 from2 表单 dom 对象 var form2 = document.getElementById("form2"); // //给 form2 绑定 onsubmit 事件 // onsubmit 绑定的函数，会直接将结果(f,t)返回给 onsubmit form2.onsubmit = function () { if(form2.username.value == "" || form2.pwd.value == "") { alert("用户名和密码不能为空, 不能提交"); return false;//不提交 } return true; } }注册用户 1
u:
p:注册用户 2
u:
p:🌍八. 习题
onsubmit : 注册按钮被点击, 提交表单, 要求如下
onsubmit 表单提交事件 //动态注册表单提交事件 window.onload = function () { var form2 = document.getElementById("form2"); form2.onsubmit = function () { //过关斩将 if (!(form2.username.value.length >= 4 && form2.username.value.length alert("用户名长度(4-6)"); return false;//不提交 } if (form2.pwd.value.length != 6) { alert("密码长度(6)"); return false;//不提交 } if (form2.pwd.value != form2.pwd2.value) { alert("两次密码不等"); return false;//不提交 } //电子邮件-正则表达式 ^[\\w-]+@([a-zA-Z]+\\.)+[a-zA-Z]+$ var emailPatt = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/; if (!emailPatt.test(form2.email.value)) { //4 提示用户 alert("电子邮件格式不正确~") return false; } return true; } }注册用户
用户名: 长度(4-6)
密 码: 长度(6)
确 认: 长度(6)
电 邮: 满足基本格式感谢大家的参与和支持，希望我的交流对您有所帮助。愿我们在未来的日子里继续携手共进，共创美好明天！再见！
-
