JavaScript详解

本文主要是介绍JavaScript详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

JavaScript
- 简介
- - JS的特点
  - JS的组成
- HTML与JavaScript的结合方式
- - 行内脚本
  - 内部脚本
  - 外部脚本
- JavaScript的使用
- - 变量
  - - 自动类型转换
    - 数据类型转换函数
    - null & undefined
    - 算术运算
    - 关系运算
    - 逻辑运算
    - 控制语句
  - 常用字符串API
  - 数组
  - - 初始化数组的三种方式
    - 数组的常用方法
  - Math数学对象
  - number对象
  - 正则表达式
  - 日期对象
  - 函数
  - - 参数对象
    - 构造函数
    - 匿名函数
    - 全局函数
    - 闭包
  - 弹框输出
- DOM操作
- - DOM访问
  - DOM修改
  - 事件
  - - 窗口事件 (Window Events)
    - 表单元素事件 (Form Element Events)
    - 鼠标事件 (Mouse Events)
    - 键盘事件
    - 事件冒泡
    - 事件捕获
  - JSON

JavaScript

简介

虽然java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，也就是没有任何关系…
网景公司在Netscape2.0首先推出了JavaScript
JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译

JS的特点

解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象
常用于：
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作

JS的组成

ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
BOM：浏览器对象模型，对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供 Web 浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对 cookie 的支持
- IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术

HTML与JavaScript的结合方式

行内脚本

点击按钮（触发）
弹框（具体的操作）

<button onclick="alert('弹框测试')">点我一下</button>

内部脚本

使用<script></script>
标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以，无论什么位置，<html>外，<p></p>内部，都可以。

<body>
    <script> 
        alert("弹框提示"); 
    </script>
</body>

外部脚本

在项目根目录下创建一个目录js
在js目录中创建一个文件，后缀名是.js
在html页面中，使用：

<script src="js/xx.js"></script>

注意事项：因为是解释性语言，所以以上三种使用脚本的方式没有优先级之分，在上面的优先执行。

JavaScript的使用

变量

因为js是弱类型语言，所以在定义变量的时候，所有的数据类型都是var
- 声明变量： var x ; var x,y;
数值类型：number
- 不区分整型数值和浮点型数值
- 所有数字都采用 64 位浮点格式存储，类似于double 格式
字符串：string
- 首尾由单引号或双引号括起
布尔类型：
- 仅有两个值：true和false也代表1和0
- 实际运算中true=1,false=0

自动类型转换

数字 + 字符串：数字转换为字符串 				 10 + 'a' -> 10a 
数字 + 布尔值：true转换为1，false转换为0 	   true + 5 -> 6 
字符串 + 布尔值：布尔值转换为字符串true或false 	true + 'a' -> truea 
布尔值 + 布尔值：布尔值转换为数值1或0 			true + true -> 2

数据类型转换函数

parseInt：强制转换成整数
- 如果不能转换，则返回 NaN （NaN：代表非数字值的特殊值。该属性用于指示某个值非数字）
- 例如：parseInt(“6.32”)=6
parseFloat：强制转换成浮点数
- 如果不能转换，则返回 NaN
- 例如：parseFloat(“6.32”)=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object
- 例如：typeof(“test”+3)==“string”

null & undefined

null 在程序中代表“无值”或者“无对象”
- 可以通过给一个变量赋值 null 来清除变量的内容
undefined
- 声明了变量但从未赋值或者对象属性不存在

算术运算

加(＋)、减(－)、乘( * ) 、除( / ) 、取余( % )
- - 可以表示减号，也可以表示负号，如：x = -y
- +可以表示加法，也可以用于字符串的连接
递增( ++ ) 、递减( – )，同Java
- i++ 相当于 i=i+1
- i-- 相当于 i=i-1

关系运算

严格相等：===
- 类型、数据都相同
非严格相等：!==

逻辑运算

逻辑非（!）、逻辑与（&&）、逻辑或（||）
逻辑运算的操作数均为 boolean 表达式

控制语句

同Java

常用字符串API

length：获取字符串的长度（字符串中字符的个数）属性，没有小括号
toUpperCase/toLowerCase：转换大小写
charAt(下标)：返回某个下标上的字符
indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标
substring(开始,结束)：截取字符串中一部分（不包含结束）
replace(旧的,新的)：将字符串中的旧字符替换成新字符
split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

<script>
    // 获取字符串长度
    var str = "hello";
    console.log(str.length);

    // 转换大小写
    var name = "AngierSun";
    console.log("大写：" + name.toUpperCase());
    console.log("小写：" + name.toLowerCase());

    // 返回某个下标上的字符
    var str1 = "javascript网页教程";
    var str2 = str1.charAt(12);             // 下标12上的字符 
    console.log(str2);                      // "教" 
    var str3 = str1.charCodeAt(12);
    console.log(str3);                      // 25945:（汉字“教”在unicode编码中的编号）

    // 根据字符查找对应下标
    var str1 = "javascript网页教程";
    var str2 = str1.indexOf("a");           // a字符在str1中第一次出现的下标
    console.log(str2);
    var str3 = str1.lastIndexOf("a");       // a字符在str1中最后一次出现的下标 
    console.log(str3);

    // 截取字符串
    var str1 = "abcdefgh";
    var str2 = str1.substring(2, 4);
    console.log(str2);                      // cd，从2开始（包含），4结束（不包含）

    // 替换字符
    var str1 = "abcde";
    var str2 = str1.replace("cd", "XXX");
    console.log(str2);                      // abXXXe，将str1中的cd替换成XXX

    // 切割字符串，返回数组类型
    var str1 = "一,二,三,四,五";
    var arr = str1.split(",");              // 将str1以逗号进行分割，分割成N份，返回一个数组 
    console.log("共分割成：" + arr.length + "份");
    console.log("第三份是：" + arr[2]);      // "三"
</script>

数组

初始化数组的三种方式

<script>
    // 第一种 
    var arr1 = new Array();
    arr1[0] = 110;
    arr1[1] = 119;
    arr1[2] = 120;

    // 第二种 
    var arr1 = new Array(10, "a", true);

    // 第三种 
    var arr1 = [10, "a", true];
</script>

数组的常用方法

tostring()：将数组转换成字符
join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
concat(新元素)：在原数组的末尾添加新元素，生成一个新数组，原数组不变。
slice(开始，结束)：在数组中截取一部分，形成新的数组。（含开始，不含结束）
reverse()：将数组反转（倒序）
sort()：数组排序
- arr.sort() 字符排序
- arr.sort(func) 按自定义的func函数进行排序

// 按照数值大小进行排序
function func(a,b) {
	return a-b;
}

Math数学对象

Math 对象用于执行数学任务
没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法

在这里插入图片描述

number对象

Number.fixed(n)：精确到小数点后n位（四舍五入）

正则表达式

此处建议面向百度编程

日期对象

<script>
    var time = new Date();
    console.log(time);                   // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间) 
    var year = time.getFullYear();       // 年 
    var month = time.getMonth() + 1;     // 月（从0开始，11结束，所以国内习惯要+1）
    var day = time.getDate();            // 日 
    var hour = time.getHours();          // 时 
    var m = time.getMinutes();           // 分 
    var s = time.getSeconds();           // 秒 
    var ms = time.getMilliseconds();     // 毫秒（1000毫秒 = 1秒） 
    var timestr = year + "年" + month + "月" + day + "号 " + hour + "点" + mm + "分" + s + "秒" + ms + "毫秒";
    console.log(timestr);
</script>

函数

使用关键字 function 定义函数

function 函数名( 形参列表 ){ 
    // 函数体 
    return 返回值; 
}

函数声明后不会立即执行，会在我们需要的时候调用到。
注意事项：
- 形参不能带数据类型
- 分号是用来分隔可执行JavaScript语句的。由于函数声明不是一个可执行语句，所以不以分号结束。

参数对象

在函数内部，调用参数列表的属性
- arguments.length：获取参数的个数
- arguments[1]：获取下标为1的参数

构造函数

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

var myFunction = new Function("a", "b", "return a * b");

匿名函数

<script>
    var fn = function (a, b) {      // 匿名函数需要用一个变量来接收 
        return a * 10 + b;
    };
    console.log(fn(3, 4));
</script>

全局函数

isNaN：检查其参数是否为非数字值
eval：转换字符串中的运算

<script>
    var str = "1+3";
    console.log(str);           // 1+3 ，+会认定为一种字符符号，没有加法的作用 
    console.log(eval(str));     // 4 ，使用eval让字符串中的运算符号生效
</script>

转码 & 解码（常用于信息的加密）
- encodeURI(参数)：转码
- decodeURI(参数)：解码

闭包

概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理。
简单来讲：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性。
缺点：使用闭包可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，大量消耗内存。

弹框输出

普通弹框：alert("hello");
控制台日志输出：console.log("谷歌浏览器按F12进入控制台");
页面输出：document.write("<h2>我爱你中国</h2>"); 将<h2>元素输出到<body>中
确认框：confirm("确定删除吗？");
输入框：prompt("请输入姓名：");

DOM操作

在一个html页面中，会使用很多标签来规划制作页面。
每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一片叶子，应该怎么做？
“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了
叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
- 在节点树中，顶端节点就是根节点（root）
- 每个节点都有父节点（根节点除外）
- 任何一个节点都可以拥有任意数量的子节点
- 同胞指的是拥有相同父节点的节点

DOM访问

使用 document 对象来调用以下方法：
- getElementById：通过id属性获得元素节点对象
- getElementsByName：通过name属性获得元素节点对象集
- getElementsByTagName：通过标签名称获得元素节点对象集

DOM修改

修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）

事件

JS 捕获某个动作而做出的反馈
HTML 事件的案例：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。
- onload 当文档被载入时执行脚本

<body onl oad="test()">
    <script>
        function test() { 
            document.write("哈哈哈哈"); 
        } 
    </script>
</body>

表单元素事件 (Form Element Events)

仅在表单元素中有效。
- onblur 当元素失去焦点时执行脚本
- onfocus 当元素获得焦点时执行脚本

鼠标事件 (Mouse Events)

onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmouseout 当鼠标指针移出某元素时执行脚本
onmouseover 当鼠标指针悬停于某元素之上时执行脚本

键盘事件

onkeydown 按下时执行脚本
onkeyup 回弹时执行脚本

事件冒泡

先子后父。事件的触发顺序自内向外。

事件捕获

先父后子。事件的触发顺序由外向内。

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
易于阅读和编写，同时也易于机器解析和生成。

// 格式如下：
var json = {
    属性1：值1，
    属性2：值2，
};

这篇关于JavaScript详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript详解

文章目录

JavaScript

简介

JS的特点

JS的组成

HTML与JavaScript的结合方式

行内脚本

内部脚本

外部脚本

JavaScript的使用

变量

自动类型转换

数据类型转换函数

null & undefined

算术运算

关系运算

逻辑运算

控制语句

常用字符串API

数组

初始化数组的三种方式

数组的常用方法

Math数学对象

number对象

正则表达式

日期对象

函数

参数对象

构造函数

匿名函数

全局函数

闭包

弹框输出

DOM操作

DOM访问

DOM修改

事件

窗口事件 (Window Events)

表单元素事件 (Form Element Events)

鼠标事件 (Mouse Events)

键盘事件

事件冒泡

事件捕获

JSON

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯