JavaScript入门学习一

JavaScript 是全球最流行的编程语言。

JavaScript 是属于 Web 的编程语言。

JavaScript 很容易学习。

后期学到的案例有w3c里面的实例：

JavaScript 实例

• JS D3.js

• JS HTML DOM

JavaScript 能做什么？

• JavaScript 能够改变 HTML 内容

• JavaScript 能够改变 HTML 属性

• JavaScript 能够改变 CSS 样式

• JavaScript 能够隐藏 HTML 元素

• JavaScript 能够显示隐藏的 HTML 元素

例子解释：JavaScript 简介

在何处插入 JavaScript

• 中的 JavaScript

• 中的 JavaScript

• 外部文件中的 JavaScript

• 外部 url 中的 JavaScript

• 外部文件夹中的 JavaScript

例子解释：使用 JavaScript

JavaScript 输出

• 写入 HTML 输出

• 写入 HTML 元素

• 写入窗口提示框

• 写入浏览器控制台

例子解释：输出

JavaScript 语法

• JavaScript 语句

• JavaScript 数字

• JavaScript 字符串

• JavaScript 变量

• JavaScript 运算符

• JavaScript 赋值

• JavaScript 表达式（使用常量）

• JavaScript 表达式（使用字符串）

• JavaScript 表达式（使用变量）

• JavaScript 关键词

• JavaScript 注释

• JavaScript 对大小写敏感

例子解释：语法

JavaScript 语句

• JavaScript 语句是对浏览器的命令

• JavaScript 代码是一系列语句

• JavaScript 语句由分号分隔

• 一行允许多条语句

• JavaScript 语句可以在代码块中组合在一起

• 您可以在运算符或逗号之后对代码折行

例子解释：语句

JavaScript 注释

• 单行注释

• 行末的单行注释

• 多行注释

• 阻止执行的单行注释

• 阻止执行的多行注释

例子解释：注释

JavaScript 变量

• JavaScript 变量

• 作为代数的 JavaScript 变量

• JavaScript 数字和字符串

• JavaScript var 关键词

• 在一条语句中声明多个变量

• 多行声明多个变量

• 没有值的变量返回值 undefined

• 重新声明变量不会破坏值

• JavaScript 数组相加

• JavaScript 字符串相加

• 字符串和数字相加

• 数值和字符串相加

例子解释：变量

JavaScript 算术

• 加 (+) 运算符

• 减 (-) 运算符

• 乘 (*) 运算符

• 除 (/) 运算符

• 取模 (%) 运算符

• 递增 (++) 运算符

• 递减 (--) 运算符

例子解释：算数

JavaScript 赋值

• = 赋值运算符

• += 赋值运算符

• -= 赋值运算符

• *= 赋值运算符

• /= 赋值运算符

• %= 赋值运算符

例子解释：赋值

JavaScript 字符串级联

• 使用级联运算符 (+) 将两个字符串相加

• 对两个字符串相加，第一个字符串中包含空格

• 对两个字符串相加，字符串之间有空格

• 使用 += 运算符对两个字符串相加

• 对字符串和数字相加

例子解释：字符串级联

JavaScript 数据类型

• 声明（创建）字符串

• 声明（创建）数字

• 声明（创建）数组

• 声明（创建）对象

• 确定变量的类型

• 对两个数字和一个字符串相加

• 对一个字符串和两个数字相加

• 一个未定义变量

• 一个空变量

例子解释：数据类型

JavaScript 对象

• 创建 JavaScript 变量

• 创建 JavaScript 对象

• 创建 person 对象（单行）

• 创建 person 对象（多行）

• 使用 .property 访问对象属性

• [使用 property] 访问对象属性

• 以方法访问函数属性

• 以属性访问函数属性

例子解释：对象

JavaScript 函数

• 一个简单的函数

• 带一个参数的函数

• 带一个参数的函数 2

• 返回一个值的函数

• 把华氏度转换为摄氏度的函数

• 没有 () 的函数

例子解释：函数

JavaScript 事件

• 更改 HTML 元素的 onclick 事件

• 更改元素本身的 onclick 事件

• 调用函数的 onclick 事件

例子解释：事件

JavaScript 字符串

• 字符串可由单引号或双引号包围

• 展示一些字符串实例

• 在引号前添加反斜杠被认定为引号

• 确定字符串的长度

• 用反斜杠对文本字符串折行

• 无法对代码使用反斜杠折行

• 确定文本在字符串中首次出现的位置 - indexOf()

• 在字符串中搜索文本并在找到后返回这段文本 - match()

• 替换字符串中的字符 - replace()

• 把字符串转换为大写 - toUpperCase()

• 把字符串转换为小写 - toLowerCase()

• 把字符串拆分入数组 - split()

例子解释：字符串

JavaScript 数字

• 带或不带小数点都可以写数值

• 可以使用指数计数法编写极大或极小的数

• 数字会被精确到 15 位

• 浮点算术不总是 100% 精确

• 但是可以通过乘并除以 10 解决此问题

• 两数相加会产生新数

• 两个数字字符串相加会产生连接的字符串

• 数字和数字字符串相加也会产生连接的字符串

• 数字字符串和数字相加也会产生连接的字符串

• 字符串和数字相加的常见错误 1

• 字符串和数字相加的常见错误 2

• 在除法运算时，JavaScript 会尝试把字符串转换为数字

• 在乘法运算时，JavaScript 会尝试把字符串转换为数字

• 在减法运算时，JavaScript 会尝试把字符串转换为数字

• 在加法运算时，JavaScript 不会把字符串转换为数字

• 被字符串除的数不再是数

• 数字除以数字字符串为数字

• 全局 JavaScript 函数 isNaN() 判断值是否为数字

• 在数学运算中使用 NaN 会始终返回 NaN

• 在数学字符串运算中使用 NaN 将连接 NaN

• NaN 的类型是数字（没错！typeof NaN 返回 number）

• 如果计算出最大可能数字之外的数字，则返回无穷大（Infinity）

• 被零除会生成 Infinity

• Infinity 也是数（typeof Infinity 返回 number）

• 前缀为 0x 的常量会被解释为十六进制

• toString() 方法能够以十六进制、八进制或二进制输出数

• 数字可以是对象

• 数字和对象无法安全地比较

• 对象和对象无法安全地比较

例子解释：数字

JavaScript 数字方法

• toString() 方法将数字转换为字符串

• valueOf() 方法以数字返回数字

• toExponential() 返回一个带指数表示法的数字

• toFixed() 方法将数字四舍五入为指定位的数字

• toPrecision() 返回指定长度的数字

• 全局方法 Number() 将变量转换为数字

• 全局方法 Number() 甚至可以将日期转换为数字

• 全局方法 parseInt() 将字符串转换为数字

• 全局方法 parseFloat() 将字符串转换为数字

• MAX_VALUE 返回 JavaScript 中可能的最大数字

• MIN_VALUE 返回 JavaScript 中可能的最小数字

• POSITIVE_INFINITY 表示无穷大

• 溢出时返回 POSITIVE_INFINITY

• NEGATIVE_INFINITY 表示负无穷大

• 溢出时返回 NEGATIVE_INFINITY

• NaN 代表“非数字”

• 对字符串执行的算术将导致 NaN

• 对变量使用数字属性将返回 undefined

例子解释：数字方法

JavaScript 数学

• Math.PI 返回 PI 的值

• Math.round(x) 返回 x 的 取整值（舍入值）

• Math.pow(x, y) 返回 x 的 y 次方

• Math.sqrt(x) 返回 x 的平方

• Math.abs(x) 返回 x 的绝对值

• Math.ceil(x) 返回 x 的向上舍入值

• Math.floor(x) 返回 x 的向下舍入值

• Math.sin(x) 返回角度 x（以弧度计）的正弦

• Math.cos(x) 返回角度 x（以弧度计）的余弦

• Math.max() 返回参数列表中的最高值

• Math.min() 返回参数列表中的最低值

• 把摄氏度转换为华氏度

例子解释：数学

JavaScript 随机

• Math.random() 返回介于 0（包括）与 1（不包括）之间的随机整数

• 如何返回介于 0 与 9 之间（都包括）的随机整数

• 如何返回介于 0 与 10 之间（都包括）的随机整数

• 如何返回介于 0 与 99 之间（都包括）的随机整数

• 如何返回介于 0 与 100 之间（都包括）的随机整数

• 如何返回介于 1 与 10 之间（都包括）的随机整数

• 如何返回介于 1 与 100 之间（都包括）的随机整数

• 如何返回介于 x（包括）与 y（不包括）之间的随机整数

• 如何返回介于 x 与 y 之间（都包括）的随机整数

例子解释：随机

JavaScript 日期

• 使用 Date() 来显示今天的日期和时间

• 使用 getFullYear() 显示年份

• 使用 getTime() 计算 1970 年至今的毫秒数

• 使用 setFullYear() 设置一个具体的日期

• 使用 toUTCString() 把今天的日期（根据 UTC）转换为字符串

• 使用 getDay() 以数字显示星期名

• 使用 getDay() 以及一个数组以名称显示星期名

• 显示时钟

例子解释：日期

JavaScript 数组

• 创建数组 1

• 创建数组 2

• 访问数组元素

• 更改数组元素

• 访问整个数组

• 确定数组的长度

• 遍历数组

• 向数组添加元素

• 将未定义的“孔”添加到数组中

• 如何识别数组 1

• 如何识别数组 2

例子解释：数组

JavaScript 数组方法

• 向数组添加元素

• 删除数组中最后一个元素 - pop()

• 将数组的所有元素连接成一个字符串 - join()

• 连接两个数组 - concat()

• 连接三个数组 - concat()

• 将一个元素添加到数组中的位置 2 - splice()

• 把数组转换为字符串 - toString()

• 把新元素添加到数组的开头 - unshift()

• 删除数组中的第一个元素 - shift()

• 选取数组中的元素 - slice()

例子解释：数组方法

JavaScript 数组排序

• 按升序对数组排序

• 按降序对数组排序

• 按升序排列数字

• 按降序排列数字

• 排序数字（按字母顺序或数字顺序）

• 按随机顺序排序数组中的数字

• 确定数组中最小的数

• 确定数组中最大的数

• 使用 Math.min() 确定数组中最小的数

• 使用 Math.max() 确定数组中最大的数

• 使用“自制的” myArrayMin 方法

• 使用“自制的” myArrayMax 方法

• 按数字属性排序对象

• 按字符串属性排序对象

例子解释：数组排序

JavaScript 数组迭代

• Array.forEach()

• Array.map()

• Array.filter()

• Array.reduce()

• Array.reduceRight()

• Array.every()

• Array.some()

• Array.indexOf()

• Array.lastIndexOf()

• Array.find()

• Array.findIndex()

例子解释：数组迭代

JavaScript 类型转换

• 显示所有变量的类型

• 显示所有变量类型的构造器

• 使用 String() 把数转换为字符串

• 使用 toString() 把数转换为字符串

• 确认变量是否是数组

• 确认变量是否是日期

例子解释：类型转换

JavaScript 布尔

• 显示 Boolean(10 > 9) 的值

• 显示 10 > 9 的值

• 拥有真正值的一切均为 true

• 零的布尔值是 false

• 减零（minus zero）的布尔值是 false

• 空字符串的布尔值是 false

• undefined 的布尔值是 false

• null 的布尔值是 false

• false 的布尔值是 false

• NaN 的布尔值是 false

例子解释：布尔

JavaScript 比较

• 把 5 赋值给 x，然后显示 (x == 8) 的值

• 把 5 赋值给 x，然后显示 (x == 5) 的值

• 把 5 赋值给 x，然后显示 (x === 5) 的值

• 把 5 赋值给 x，然后显示 (x === "5") 的值

• 把 5 赋值给 x，然后显示 (x != 8) 的值

• 把 5 赋值给 x，然后显示 (x !== 5) 的值

• 把 5 赋值给 x，然后显示 (x !== "5") 的值

• 把 5 赋值给 x，然后显示 (x > 8) 的值

• 把 5 赋值给 x，然后显示 (x < 8) 的值

• 把 5 赋值给 x，然后显示 (x >= 8) 的值

• 把 5 赋值给 x，然后显示 (x <= 8) 的值

例子解释：比较

JavaScript 条件

• if 语句

• else 语句

• else if 语句

• 随机链接

• Switch 语句

例子解释：条件

JavaScript 循环

• for 循环

• 遍历 HTML 标题

• while 循环

• do while 循环

• 打破循环

• 打破并继续循环

• 使用 for...in 语句遍历对象中的元素

例子解释：循环

JavaScript 错误处理

• try...catch 语句

• 弹出提示框的 try...catch 语句

• onerror 事件

例子解释：错误

JavaScript 正则表达式

• 在字符串中检索表达式

• 检索表达式然后替换它

例子解释：正则表达式

JavaScript 对象

• 创建 JavaScript 变量

• 创建 JavaScript 对象

• 创建 JavaScript 对象（单行）

• 创建 JavaScript 对象（多行）

• 使用 new 创建 JavaScript 对象

• 使用构造器创建 JavaScript 对象

• 创建内置的 JavaScript 对象

• 创建 JavaScript 变量的最佳方式

• JavaScript 对象是易变的

例子解释：对象

JavaScript 对象属性

• 使用 .property 访问属性

• [使用 property] 访问属性

• 使用 for in 访问属性

• 向已有对象添加新属性

• 从对象中删除属性

例子解释：对象属性

JSON 对象

• 使用 .property 访问属性

• [使用 property] 访问属性

• 遍历属性

• 遍历属性值

• 访问嵌套的 JSON 对象

• 使用点号表示法修改值

• 使用括号表示法修改值

• 删除对象属性

例子解释：JSON 对象

JSON 数组

• 访问数组值

• 使用 for-in 循环遍历数组

• 使用 for 循环遍历数组

• 访问嵌套的 JSON 数组

• 修改数组值

• 删除数组项目

例子解释：JSON 数组

JSON 解析

• 使用 JSON 解析

• 在 AJAX 实例中使用 JSON 解析

• 对数组使用 JSON 解析

• 解析日期

• 使用 reviver 函数解析日期

• 解析函数

例子解释：JSON 解析

JSON Stringify

• 使用 JSON 字符串化

• 对数组使用 JSON 字符串化

• 对日期字符串化

• 对函数字符串化

• 使用 toString() 方法对日期进行字符串化

例子解释：JSON Stringify

JSON PHP

• 从 php 文件获取 JSON

• 从 php 文件获取 JSON 数组

• 从数据库获取 JSON

• 遍历来自数据库的结果

• 使用 POST 方法发送 JSON

例子解释：JSON PHP

JSON HTML

• 生成基于 JSON 数据的 HTML 表格

• 生成动态 HTML 表格

• 生成基于 JSON 数据的 HTML 下拉列表

例子解释：JSON HTML

JSON JSONP

• 简单的 JSONP 实例

• 创建动态脚本标签

• 带动态结果的 JSONP 实例

• 带回调函数的 JSONP 实例

例子解释：JSON JSONP

为何学习 JavaScript？

JavaScript 是 web 开发者必学的三种语言之一：

• HTML 定义网页的内容

• CSS 规定网页的布局

• JavaScript 对网页行为进行编程

本教程提供关于 JavaScript，以及 JavaScript 如何与 HTML 和 CSS 协同工作的知识。

本教程涵盖了 JavaScript 的每个版本：

• 原始的 JavaScript ES1 ES2 ES3 (1997-1999)

• 第一个主要修订版 ES5 (2009)

• 第二个修订版 ES6 (2015)

• 所有年度增强版 (2016、2017、2018、2019、2020、2021)

JS的书写方式：

行内式：

a标签的情况：

非a标签：

内嵌式：

    var a = 10;
    var b = 20;
    alert(a)
    alert(b)

外链式：

变量

var => 用来声明变量的关键字

变量的命名规则

• 规定

  • 以数字，字母，下划线，$ 符组成

  • 不能以数字开头

  • 不能使用关键字

  比如：

  /* 
      以数字,字母,下划线,$组成
      不能以数字开头
      不能使用关键字
          常见的关键字,var,break,default,if,else...
  */
  var var = 10;   //不能使用关键字
  var break = 20; //不能使用关键字
  var 1a = 30;    //不能以数字开头
  var a^1 = 30;   //以数字,字母,$,下划线组成,没有^
  var a = 20;

• 规范(可以遵守,也可以不遵守,推荐遵守)

  • 推荐使用驼峰命名,当没有明确的说明的时候,那么驼峰命名一般指的就是小驼峰

    • 小驼峰 => 当由多个单词组成的时候,第一个单词首字母小写,后面的每一哥单词首字母大写

    • 大驼峰 => 每一个单词首字母都要大写

  • 可以使用_将多个单词连接起来

例如：

//推荐使用小驼峰或者下划线连接
// 小驼峰 => 一般推荐使用小驼峰,没有明确的说明的时候,那么驼峰命名法指就是小驼峰
var listCount = 30;
var userAge = 40;
// 大驼峰
var ListCount = 30;
var UserAge = 4;
//下划线连接
var list_count = 40;
var user_age = 30;

1. 变量的值

比如

//JS里面存储的内容特别的多,我们为了更容易让别人命名变量里面存储的是什么
//所以我们对存储的内容进行分类
//分为5大类
// number => 表示存储的是一个数字
// string => 使用单引号或者双引号包裹起来,单引号和双引号在成对的时候,有区分,表示字符串类型
// boolean => 存储就是真假,true表示真,false表示假
// null => 表示空:比如:相当于空气,空气看不见,摸不着,但是确实存在
// undefined => 空:真空,太空,不存在的,一般undefined就是在定义变量的时候,没有给变量赋值
var a = 10;     //表示声明了一个变量a,里面存储了一个值10,10是一个数字,是一个number类型
var b = "张三"  //表示声明了一个变量b,里面存储了一个值张三
var c = '陈锦'  //表示声明了一个变量c,里面存储了一个值陈锦
var d = true;   //表示声明了一个变量d,里面存储了一个值true
var e = false;  //表示声明了一个变量e,里面存储了一个值false
var f = null;   //表示声明了一个变量f,里面存储了一个值null
var g = undefined; //表示声明了一个变量,里面存储了一个值 undefined
var h;//表示声明了一个变量,没有给变量赋值,那么值也是undefined
alert(a)
alert(b)
alert(c)
alert(d)
alert(e)
alert(f)
alert(g)
alert(h)

1. 检查数据类型 typeof => typeof可以根据变量的值来进行检测变量的值的类型 bug => 当我们使用typeof检测null这个数据类型的时候,那么检测出来的结果Object

语法

用法一 => typeof 变量或者变量的值
用法二 => typeof (表达式)//表达式就是+,-,*,/运算

比如

var a = 1;
var b = "陈锦"
var c = '文渊'
var d = true;
var e = false;
var f = null;//使用typeof检测出来的结果 Object
var g = undefined;
var h;
//检测变量 => typeof 变量或者变量的值
alert(typeof a)
alert(typeof b)
alert(typeof c)
alert(typeof d)
alert(typeof e)
alert(typeof f)
alert(typeof g)
alert(typeof h)
​
// 检测变量的值
alert(typeof '陈锦')
alert(typeof 1)
​
// 检测表达式
alert(typeof (1+3))