sitemap
知识分享网:一个值得你收藏的网站!
当前位置:PHP知识网 > JavaScript > JavaScript基础教程 > JavaScript 实例

JavaScript 实例

发布时间:2020-07-29浏览:79评论:0


JavaScript 能做什么?

  • JavaScript 能够改变 HTML 内容

  • JavaScript 能够改变 HTML 属性

  • JavaScript 能够改变 CSS 样式

  • JavaScript 能够隐藏 HTML 元素

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

例子解释:JavaScript 简介

在何处插入 JavaScript

  • <head> 中的 JavaScript

  • <body> 中的 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


欢迎 发表评论: