|
引入方式
JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。
内部引入
写在 body 结束标签的上方。- <!DOCTYPE html>
- <html lang="en">
- <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>Document</title>
- </head>
- <body>
-
-
- </body>
- </html>
复制代码 外部引入
- // 文件名 demo.js
- alert('我是外部的 js文件')
复制代码- <!DOCTYPE html>
- <html lang="en">
- <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>Document</title>
- </head>
- <body>
-
- </body>
- </html>
复制代码 内联引入
- <!DOCTYPE html>
- <html lang="en">
- <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>Document</title>
- </head>
- <body>
-
-
- </body>
- </html> 按钮
复制代码 输入输出
输出
- alter() 以弹窗形式输出。
- document.writer() 输出在页面上。可以写 HTML 标签,会被解析。
- console.log() 控制台输出。
输入
展示一个输入弹窗。- prompt()
- prompt(message)
- prompt(message, defaultValue)
复制代码 参数说明:
- message:提示信息
- defaultValue:文本框中的默认值
变量
声明及赋值
- let name1;
- let name1 = value1;
- let name1 = value1, name2 = value2;
- let name1, name2 = value2;
- let name1 = value1, name2, /* …, */ nameN = valueN;
复制代码 参数说明:
- nameN:变量名称。
- valueN:变量初始值,默认值为 undefined。
关键字
JavaScript 使用专门的关键字 let 和 var 来声明(定义)变量,在使用时需要注意一些细节:
以下是使用 let 时的注意事项:
- 允许声明和赋值同时进行
- 不允许重复声明
- 允许同时声明多个变量并赋值
- JavaScript 中内置的一些关键字不能被当做变量名
以下是使用 var 时的注意事项:
- 允许声明和赋值同时进行
- 允许重复声明
- 允许同时声明多个变量并赋值
大部分情况使用 let 和 var 区别不大,但是 let 相较 var 更严谨,因此推荐使用 let。
命名规则
关于变量的名称(标识符)有一系列的规则需要遵守:
- 只能是字母、数字、下划线、$,且不能能数字开头
- 字母区分大小写,如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词(关键字或保留字)不允许使用
- 尽量保证变量具有一定的语义,见字知义
常量
概念:使用 const 声明的变量称为“常量”。
使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。
命名规范:和变量一致注意: 常量不允许重新赋值,声明的时候必须赋值(初始化)
数据类型
可以通过 typeof 关键字检测数据类型
- document.writer(typeof 1) // number
- document.writer(typeof '字符串') // string
- document.writer(typeof true) // boolean
- let tmp
- document.writer(typeof tmp) // undefined
复制代码 基本数据类型
- number:数值型
- string:字符串型
- // 使用 "" '' `` 包裹的都为字符串
- // 当使用 `` 时,为模板字符串,例如: `我今年${age}岁`,可以避免字符串拼接
- let age = 20
- document.writer(`我今年${age}岁`)
复制代码
- boolean:布尔型
- undefined:未定义型
- null:空类型
引用数据类型
数组
定义数组
- let arr = []
- // a) 数组单元值的类型为字符类型
- let list = ['HTML', 'CSS', 'JavaScript']
- // b) 数组单元值的类型为数值类型
- let scores = [78, 84, 70, 62, 75]
- // c) 混合多种类型
- let mixin = [true, 1, false, 'hello']
复制代码 操作数组
- push 动态向数组的尾部添加一个单元
- /*
- push()
- push(element0)
- push(element0, element1)
- push(element0, element1, … , elementN)
- */
- const animals = ['pigs', 'goats', 'sheep'];
- const count = animals.push('cows');
- console.log(count);
- // Expected output: 4
- console.log(animals);
- // Expected output: Array ["pigs", "goats", "sheep", "cows"]
- animals.push('chickens', 'cats', 'dogs');
- console.log(animals);
- // Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
复制代码 - unshit 动态向数组头部添加一个单元
- /*
- unshift()
- unshift(element1)
- unshift(element1, element2)
- unshift(element1, element2, …, elementN)
- */
- const array1 = [1, 2, 3];
- console.log(array1.unshift(4, 5));
- // Expected output: 5
- console.log(array1);
- // Expected output: Array [4, 5, 1, 2, 3]
复制代码 - pop 删除最后一个单元
- shift 删除第一个单元
- splice 从指定位置开始,删除0~N个数
- /*
- splice(start)
- splice(start, deleteCount)
- splice(start, deleteCount, item1)
- splice(start, deleteCount, item1, item2, itemN)
-
- start:开始位置,包括该位置
- deleteCount(可选):删除的个数,如果为0则必须有 item,即将 item 插入指定索引位置
- item(可选):要插入的元素
- */
- const months = ['Jan', 'March', 'April', 'June'];
- months.splice(1, 0, 'Feb');
- // Inserts at index 1
- console.log(months);
- // Expected output: Array ["Jan", "Feb", "March", "April", "June"]
- months.splice(4, 1, 'May');
- // Replaces 1 element at index 4
- console.log(months);
- // Expected output: Array ["Jan", "Feb", "March", "April", "May"]
复制代码 函数声明
- /*
- function:关键字
- 形参与返回值是可选的,非必须
- */
- function 函数名(形参) {
- // 逻辑代码
-
- return 返回值;
- }
- /*
- 匿名函数,一般用于函数表达式
- */
- let fun = function() {
- console.log('函数表达式')
- }
- // 调用
- fun()
- /*
- 立即执行函数
- 多个立即执行函数之间必须要使用 ; 隔开
- */
- (function(形参) {
-
- })(实参);
- (function(形参) {
-
- }(实参));
复制代码 对象
对象的构成与声明
- // 空对象
- let obj = {}
- // 对象构成
- let 对象名 = {
- 属性名: 属性值,
- 方法名: function() {}
- }
复制代码 对象的操作
属性访问与方法调用
- /*
- 属性名需要使用 "" 或 '' 包裹,但可以省略
- 当属性名包含特殊符号时则必须使用上述符号包裹
- */
- const person = {
- name: ["Bob", "Smith"],
- age: 32,
- bio: function () {
- console.log(`${this.name[0]} ${this.name[1]} 现在 ${this.age} 岁了。`);
- },
- introduceSelf: function () {
- console.log(`你好!我是 ${this.name[0]}。`);
- },
- };
- // 点表示法
- person.name;
- // 括号表示法,一般用于属性名有特殊符号的时候
- person['name'];
- person.name[0];
- person.age;
- person.bio();
- // "Bob Smith 现在 32 岁了。"
- person.introduceSelf();
- // "你好!我是 Bob。"
复制代码 遍历对象
- const obj = {
- uname: '张三',
- age: 18,
- gender: '男'
- };
- for (let key : obj) {
- console.log(obj[key])
- /*
- 张三
- 18
- 男
- */
- }
复制代码 来源:https://www.cnblogs.com/fallingintodreams/p/17806169.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作! |
|