简介
- JavaScript 是前端通用脚本语言,以下简称 JS
- JS 是解释型,动态语言(不用编译,类型可自动转换)
构成
- ECMA: 语法(ECMAScript)
- DOM: 文档对象模型(Document Object Model)
- BOM: 浏览器对象模型(Browser Object Model)
ES6
- ES6: ECMA2015,是 JS 最重要的一个全新版本
- 以后的 JS 版本,都是基于 ES6 上的做的扩展
- ES6+ 是泛指现代 JS 语言版本,并不限于 ECMA2015
JS 与 HTML,CSS
- HTML: 结构(骨架)
- CSS: 表现(血肉)
- JS: 行为(灵魂)
JS 推荐插件
- JavaScript(ES6)code snippets: ES6 代码片断
- JavaScript Comment Snippet: JS 注释片断
JS 引入方式
- 事件属性:
onclick='...' - 文档脚本:
<script></script> - 外部脚本:
<script src='xxx.js'></script>
三张js引入方式代码：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<!-- 1. 事件属性 -->
<!-- <button class="" id="" onclick="alert('删除成功')">删除</button> -->
<button onclick="this.remove()">删除</button>
<hr />
<!-- 2. 文档脚本 -->
<button onclick="del(this)">删除</button>
<script>
// function del(ele) {
// if (confirm('是否删除?')) ele.remove()
// }
</script>
<!-- 3. 外部脚本 -->
<script src="funcs.js"></script>
</body>
</html>funcs.js代码：
function del(ele) {
if (confirm('是否删除?')) ele.remove()
}
控制台指令
console是浏览器提供的控制台对象,用于查看 JS 执行结果:
下面是常用的几个console方式：
console.log(data): 查看数据(支持模板和 CSS)console.dir(obj): 树形可折叠查看对象结构console.table(obj): 表格方式查看对象console.error(msg): 输出错误警告console.clear(): 清空输出
标识符
- 用途: 变量,常量,函数,属性,方法,类,…
- 分类: 关键字(保留字),自定义
- 规则: 仅限字母,数字,下划线,$,且禁止数字开头
- 命名: 驼峰(大驼,小驼),蛇形(小蛇,大蛇)
<!DOCTYPE html>
<html lang="zh-CN">
<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>标识符</title>
</head>
<body>
<script>
// 正确
// 字母,数字,下划线, $
let username
let x1
let _uname
let $email
// Error
// 禁止数字开头
// let 3a
// 禁止特殊符号
// let my#name
// let get@id
// 小驼峰: 第2个单词起首字母大写
let userName
// 大驼峰: 所有单词起首字母大写
function UserModel() {}
// 蛇形: 多个单词之间用"_"连接
let user_name
</script>
</body>
</html>
语句
- 分号: 可选
[],(),{},+,-,/: 前分号不能省
代码成员
代码成员简单的可以分为三个部分：数据->函数->函数的返回值，就好比下面图中举例的面包制作过程。
代码学习示例：
<!DOCTYPE html>
<html lang="zh-CN">
<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>代码成员</title>
</head>
<body>
<script>
// 1. 数据
// 变量: 数据的复用
let a = 1
let b = 2
console.log(a + b)
// 2. 操作
// 函数: 操作的复用
function sum(x, y) {
return x + y
}
console.log(sum(1, 2))
console.log(sum(a, b))
</script>
</body>
</html>变量
- 变量:
let - 常量:
const
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<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>数据:变量/常量</title>
</head>
<body>
<script>
// 1. 变量
// var : 重复声明,变量提升
// let : 禁止重复声明,不会变量提升
// 声明
let uname
// undefined
console.log(uname)
// 赋值: 第一次赋值叫初始化
uname = 'Jack'
console.log(uname)
// 更新
uname = 'Tony'
console.log(uname)
// 2. 常量
// 常量禁止更新
// 因为不能更新,所以声明时必须赋值(初始化)
const gender = 'male'
// gender = 'female'
// 推荐变量声明时同步初始化, 采用与常量定义相同的方式
let email = 'admin@qq.com'
/**
* 什么时候用变量?什么用常量?
* 首选常量, 除非你确定这个数据会被更新,如循环变量
*/
</script>
</body>
</html>
函数
- 命名函数:
function - 匿名函数:
fn = function (){} - 箭头函数:
fn = ()=>{} - 立即执行函数:
(function(){})()
<!DOCTYPE html>
<html lang="zh-CN">
<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>操作: 函数</title>
</head>
<body>
<script>
// 函数: 先声明,再调用
console.log(sum(3, 4))
// 1. 命名函数
function sum(a, b) {
// return a + b
// "1 + 2 = 3"
// "1 + 2 =": 模板
// php: 双号中的变量会被解析出来
// js: 反引号中的变量会被解析出来 `
// js中 ,字符串拼装用 "+"
// return `${a} + ${b} = ` + (a + b)
// `...`: 模板字面量,还支持表达式(可以计算出来一个值)
return `${a} + ${b} = ${a + b}`
// "模板字面量": 可以自定义输出格式,让结果更直观
}
console.log(sum(1, 2))
// function : 声明自动提升到顶部
// 如果要遵循"先声明再调用"的编程规范,可以用匿名函数来解决
// ---------------------------------------
// 2. 匿名函数
// 不存在声明提升,可以将一个匿名函数赋值给一个let/const声明的变量
// let/const不存在声明提升,所以它所引用的函数也不会声明提升
// 函数表达式(函数变量): 值是一个匿名函数
const sum1 = function (a, b) {
return `${a} + ${b} = ${a + b}`
}
console.log(sum1(5, 6))
// ---------------------------------------
// 3. 箭头函数(匿名函数的简写)
let sum2 = function (a, b) {
return `${a} + ${b} = ${a + b}`
}
/**
* 声明简化
* 1. 删除: function
* 2. (){}: ()=>{}
* (参数列表)与{代码块}之间用胖箭头=>连接
*/
sum2 = (a, b) => {
return `${a} + ${b} = ${a + b}`
}
/**
* 参数简化
* 1. 单参数: 可不加括号 ()
* 2. 多个参数或无参数: 必须加括号 ()
*/
sum2 = uname => {
return `Hello, ${uname}`
}
console.log(sum2('朱老师'))
sum2 = () => {
return `Hello, 张老师`
}
console.log(sum2())
/**
* 返回值简化
* 如果只有一条return 语句
* 1. 可不写: {}
* 2. 可不写: return
*/
sum2 = (a, b) => `${a} + ${b} = ${a + b}`
console.log(sum2(7, 8))
/**
* 箭头函数注意事项
* 1. 没有自己的this, 不能用于构造函数
* 2. 它的this,由它的上下文确定(执行环境)
*/
// ---------------------------------------
// 4. 立即执行函数
// 声明与调用二合一(声明时立即调用): IIFE
// 写完就执行完了,所以是一次性的,肯定是匿名函数
let result = (function (a, b) {
return `${a} + ${b} = ${a + b}`
})(10, 15)
console.log(result)
/**
* IIFE用途
* 1. 模块: Node.js
* 2. 临时作用域: 私有变量
*/
// ====================================
/**
* 1. 命名函数: function
* 2. 匿名函数: 函数表达式,变量化,无提升
* 3. 箭头函数: 匿名函数的简化(this)
* 4. 立即执行函数: IIFE, 阅后即焚,一次性的
*/
</script>
</body>
</html>数据类型
- 原始类型:
string,number,boolean,null,undefined
<!DOCTYPE html>
<html lang="zh-CN">
<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>原始类型</title>
</head>
<body>
<script>
// 原始类型: 原子类型,基本类型,单值
// 1. number
console.log(123, typeof 123)
console.log(3.14, typeof 3.14)
// 2. string
console.log('php.cn', typeof 'php.cn')
// 3. boolean
console.log(true, typeof true)
// 4. null
// null 返回的是 object , 这是一个千年bug,不会再改了
console.log(null, typeof null)
// 5.undefined
let a
console.log(a, typeof a)
</script>
</body>
</html>- 引用类型:
array,object,function
<!DOCTYPE html>
<html lang="zh-CN">
<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>引用类型(对象)</title>
</head>
<body>
<script>
// 1. 数组
const arr = [10, 'admin', true]
console.log(arr)
// 表格形式输出数组
console.table(arr)
console.log(arr[1])
console.log(typeof arr)
// 正常判断数组类型的方式
console.log(Array.isArray(arr))
// 2. 对象
// 与数组是有区别的, 可以视为键为语义化字符串的数组, 有点像"关联数组"
let user = { id: 10, uname: 'admin', isMarried: true, 'my email': 'admin@qq.com' }
console.log(user['id'])
console.log(user['uname'])
// 如果属性都是合法标识符,可用"."来访问成员
console.log(user.uname)
console.log(user)
// 如果属性是非法的标识符,就必须要['key']数组成员的方式来访问
console.log(user['my email'])
// 对象可以将一个操作进行封装
user = {
// 属性: 对象中的变量
id: 10,
uname: 'admin',
isMarried: true,
// 方法: 对象中的函数
show: function () {
// this: 当前对象的引用
// console.log(this.uname === user.uname)
return `id=${this.id},uname=${this.uname}`
},
// 对象中不能用箭头函数(除非内部用不到this)
// 箭头函数没有自己的this
// say: () => `id=${this.id},uname=${this.uname}`,
// say: () => console.log(this),
}
console.log(user.show())
// console.log(user.say())
// 3. 函数
let fn = function () { }
console.log(typeof fn)
// 因为函数也是对象,所以可以添加属性
fn.price = 12345
console.dir(fn.price)
// 也可以添加方法
fn.greet = function (uname) {
return 'Hello, ' + uname
}
console.log(fn.greet('赵老师'))
</script>
</body>
</html>
本文地址：https://www.mainblog.cn/326.html
版权声明：本文为原创文章，版权归 阁主 所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。
版权声明：本文为原创文章，版权归 阁主 所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。
黔ICP备19006353号-2
贵公网安备 52052102000042号