JS（JavaScript）详解-程序员宅基地

技术标签：前端 javascript 开发语言

一、JS定义和特点

JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。
JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。
JavaScript组成

ECMAScript：JavaScript的核心，语法格式，使用方法
文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档 document对象有一个一个的元素(element)
浏览器对象模型（BOM，browser object model）对浏览器窗口进行访问和操作 window对象扩展：JScript：微软推出的类似JavaScript的语言

特点：

脚本语言

脚本语言是一种简单的程序，是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。
基于对象的语言 非面向对象，面向对象有三大特点（封装，继承，多态）缺一不可。

通常"基于对象"是使用对象，但无法利用现有对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。

注意：目前的js脚本已经支持创建自定义类，继承等
事件驱动 在网页中执行了某种操作的动作，被称为"事件"(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
简单性 变量类型是采用弱类型，并未使用严格的数据类型。

var a,b,c; a=123; b="abc"; c=true;
安全性 JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
跨平台（系统）性 JavaScript依赖于浏览器本身，与操作平台无关，只要计算机安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程序就可以正确执行。

缺点（浏览器兼容性不好！）

各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

二、JavaScript和Java的区别

区别1：公司不同，前身不同

JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；

Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发； Java的前身是Oak（橡树）语言。

区别2：基于对象和面向对象

JavaScript是脚本语言，是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用，但不支持继承和多态。

Java是面向对象的，是一种真正的面向对象的语言，支持封装、继承和多态。

区别3：变量类型强弱不同

Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;

JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。

三、引入方式

可以在HTML文档中直接嵌入JavaScript代码
JavaScript 代码必须位于 <script> 与 </script> 标签之间
一个HTML文档中可以出现多个<script>标签
JavaScript代码的出现次序就是JavaScript的执行顺序
标签<script>可出现在HTML文档的任何位置，但一般放在<head>内部，可以早于<body>部分执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        //1.使用浏览器弹出提示框
        alert("提示框");

        //2.在浏览器页面输出
        document.write("在浏览器页面输出");

        //3.在浏览器控制台输出
        console.log("在浏览器控制台输出");
    </script>
</head>
<body>

</body>
</html>

四、基本语法

（1）注释

单行注释 //
多行注释 /* */

（2）数据类型

数值型：整数和浮点数统称为数值。例如85或3.1415926等。
字符串型：由0个,1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，如"您好"、'学习JavaScript' 等。
逻辑（布尔）型：用true或false来表示。
空（null）值：表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串""或0。
未定义（undefined）值：它也是一个保留字。表示变量虽然已经声明，但却没有赋值。
JavaScript还支持复合数据类型，包括对象和数组两种。

（3）变量使用

声明变量
1. 声明一个变量： var a；
2. 同时声明多个变量：var b, c;
变量赋值
1. a = 10;
2. B = "abc"; c = true;
声明同时完成赋值
1. var d = ”js“；

（4）运算符

1.类型运算符

2.算数运算符

3. 赋值运算符

4.比较运算符

注意：

==和===的区别

等于判断（==）：先判断类型，类型一致则直接比较内容，如果类型不一致，转换为数字类型后再比较内容

等值判断（===）：先判断类型，类型不一致则直接false，类型一致则继续比较内容，内容一致则true，不一致则false
boolean类型

参与计算或比较时，true转换为1，false转换为0。

5.逻辑运算符

（5）流程控制

分支语句：if、switch
循环语句：while循环、do-while循环、for循环、for-each循环
- 终止循环：break、continue、return

（6）创建对象

//js中的对象

var stu = {"id":1,"name":"zs","age":18};

五、引入外部的JS文件 ※

引入外部CSS文件一样，也同样可以引入外部的JavaScript文件。
格式为：<script src="文件路径" type="text/javascript"></script>

六、函数

（1）全局函数

Global中的函数是全局函数
JavaScript 全局函数，直接使用方法名就可以调用

（2）对象中的函数

JavaScript中提供了很多对象，比如String、Math、Date等，和Java中的使用基本相同

（3）自定义函数

语法格式

function 函数名(参数1,参数2，… ) { JavaScript代码; }

var 函数名 = function (参数1,参数2，… ) { JavaScript代码; }

自定义函数不会自动执行，需要调用才会执行
不需要指明参数类型，因为变量都可以使用var类型
无论是否有返回值，都无需指定返回值类型。

七、数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    //创建数组的方式一
    var str = [1, 2, 3];
    //创建数组的方式二
    var str1 = new Array();
    var str2 = new Array(10);
    //foreach获取的是每个元素的脚标
    for(var s in str){
        console.log(str[s]);
    }
    //数组的脚标也可以是其他类型的
    var arr = new Array();
    arr["李"] = "四";
    console.log(arr["李"]);
</script>
<body>
</body>
</html>

八、事件event

事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onclick（单击）事件来触发某个函数。

属性	说明
onerror	当加载图像时发生错误
onload	页面被完成加载
onresize	窗口或框架被调整尺寸
onmouseover	鼠标移入
onmousemove	鼠标移动
onmouseout	鼠标移出
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onclick	鼠标单击
ondbclick	鼠标双击
onkeydown	某个键盘的键被按下
onkeyup	某个键盘的键被松开
onfocus	元素获得焦点
onblur	元素失去焦点
onchange	用户改变域中内容
onselect	文本被选定
onreset	重置按钮被点击
onsubmit	提交按钮被点击

九、 BOM

BOM是Browser Object Model的简写，即浏览器对象模型。
BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象

（1）Window对象方法

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
close()	关闭浏览器窗口。
setInterval()	按照指定周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        * BOM : 浏览器对象模型
        *   Window对象在使用时可以省略
        * */
        function f() {
            //1.显示一个带有确定按钮和一段消息的警告框
            alert("按钮被点击了");

            //2.显示一个带有一段消息以及确认按钮和取消按钮的对话框
            //点击确认返回true,点击取消返回false
            var b = confirm("确认删除");

            //3.显示一个用户输入的对象框
            //返回用户输入的内容
            var s = prompt("密码");

            //4.打开一个新的浏览器窗口
            open("index.html");

            //5.关闭一个页面
            close();

            //6.只执行一次的执行计划
            var timeout = setTimeout(function () {
                var date = new Date();
                console.log(date.toLocaleString());
            },5000);//5秒之后调用此方法

            //7.按照指定周期执行方法的执行计划
            var interval = setInterval(function () {
                var date = new Date();
                console.log(date.toLocaleString());
            },1000);

            //8.取消执行一次的执行计划
            clearTimeout(timeout);
            
            //9.取消周期执行的执行计划
            clearInterval(interval);
        }
    </script>
</head>
<body>
    <button onclick="f()">按钮</button>
</body>
</html>

（2）Window对象属性

属性	描述
history	客户访问过的URL的信息
navigator	浏览器基本信息
document	文档对象。后续详细讲解
location	当前 URL 的信息
screen	客户端的屏幕信息

1. location对象：代表当前打开窗口的URL

* 主机名： location.hostname;
* 端口名：location.port;
* 主机名+端口名：location.host;
* 当前文档URL： location.href;
* 刷新页面：location.reload();

2. history对象：有关客户访问过的URL的信息

* back() 后退到前一个页面 go(-1)
* forward() 前进到后一个页面 go(1)
* go(n) 直接前进到第n个页面
* go(-n) 直接后退到第n个页面

3. navigator对象：管理浏览器基本信息

* 浏览器名称： navigator.appName
* 浏览器版本： navigator.appVersion
* 浏览器类型： navigator.userAgent

4. screen屏幕对象：screen

- 宽像素：screen.width
- 高像素：screen.height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //获取IP
        console.log(location.hostname);
        //获取端口号
        console.log(location.port);
        //获取IP+端口号
        console.log(location.host);
        //获取URL
        console.log(location.href);
        //刷新页面
        console.log(location.reload());
    </script>
</head>
<body>

</body>
</html>

（3）超链接与表单的跳转控制

超链接和表单都可以进行跳转。跳转属于他们的默认功能。

一般在他们触发的一个事件中，我们可以通过返回false，来阻止他们的跳转！

function fun5(){
    alert('超链接被点击了！');
    return false;
}

function f() {
    alert("阻止表单提交");
    return false;
}

<a href="https：//www.baidu.com" onclick="return fun5()">超链接</a>
//阻止提交
<a href="javascript：void(0)">我是超链接</a>

<form action="http://www.baidu.com" onsubmit="return f()">
    <input type="submit">
</form>

十、DOM

DOM是document object model，也就是文档对象模型。
我们可以将HTML页面看做一个文档，在js眼中就是一个document对象。
这个document对象中就包含了页面中的所有元素。

（1）DOM中的节点分类

元素节点（element node）
属性节点（attribute node）
文本节点（text node）

（2）获取元素

直接获取指定节点的方法：

getElementById()：根据元素id返回一个节点对象
getElementsByName()：根据元素name返回多个节点（节点数组）
getElementsByClassName()：根据class属性值返回多个节点（节点数组）
getElementsByTagName()：根据标签名返回多个节点（节点数组）

间接根据层次关系获取节点：

1.父节点

parentNode：表示该元素的父节点

2.孩子节点

childNodes：表示该元素的所有子节点的集合，数组对象

firstElementChild：第一个儿子节点

lastElementChild：最后一个儿子节点

3.兄弟节点

nextElementSibling：该元素后一个兄弟元素节点

previousElementSibling：该元素前一个兄弟元素节点

（3）操作文本

对于<p></p>、<hn></hn>、<div></div>、<span></span>等标签，操作内部文本使用innerHTML或者innerText
对于img等单标签，不涉及文本

innerHTML 指的是从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签
innerText 指的是从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签

（4）操作属性

方法1：setAttribute(属性名，属性值) 和getAttribute(属性名)
方法2: .属性名
说明：方法1可以对自定义属性进行操作；但是方法2只能对标准属性进行操作。

（5）操作元素

创建节点的方法 document.createElement(“div")
加入孩子节点的方法
1. parentNode.appendChild(childElement)：末尾追加方式插入节点
2. parentNode.insertBefore(newNode,beforeNode)：在指定节点前插入新节点
删除节点的方法 parentNode.removeChild(childNode)
替换节点的方法 parentNode.replaceChild(newNode, oldNode)

（6）操作CSS

使用style对象操作CSS

对于单个单词的css属性，在style对象中的属性名称不变。

对于多单词的属性改写为小驼峰写法。例如：css中的font-size对应style属性为fontSize.

注意：是JavaScript的style对象，不是HTML标签的style属性。

使用className属性操作CSS

节点的className属性对应于css中的类选择器

注意：不是this.class = "out"; 是this.className = "out";

本文链接：https://blog.csdn.net/weixin_53455615/article/details/126929467

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux devkmem 源码,linux dev/mem dev/kmem实现访问物理/虚拟内存-程序员宅基地

文章浏览阅读451次。dev/mem: 物理内存的全镜像。可以用来访问物理内存。/dev/kmem: kernel看到的虚拟内存的全镜像。可以用来访问kernel的内容。调试嵌入式Linux内核时，可能需要查看某个内核变量的值。/dev/kmem正好提供了访问内核虚拟内存的途径。现在的内核大都默认禁用了/dev/kmem，打开的方法是在 make menuconfig中选中 device drivers --> ..._dev/mem 源码实现

vxe-table 小众但功能齐全的vue表格组件-程序员宅基地

文章浏览阅读7.1k次，点赞2次，收藏19次。vxe-table，一个小众但功能齐全并支持excel操作的vue表格组件_vxe-table

（开发）bable - es6转码-程序员宅基地

文章浏览阅读62次。参考：http://www.ruanyifeng.com/blog/2016/01/babel.htmlBabelBabel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item..._让开发环境支持bable

FPGA 视频处理 FIFO 的典型应用_fpga 频分复用视频-程序员宅基地

文章浏览阅读2.8k次，点赞6次，收藏29次。摘要：FPGA视频处理FIFO的典型应用，视频输入FIFO的作用，视频输出FIFO的作用，视频数据跨时钟域FIFO，视频缩放FIFO的作用_fpga 频分复用视频

R语言：设置工作路径为当前文件存储路径_r语言设置工作目录到目标文件夹-程序员宅基地

文章浏览阅读575次。【代码】R语言：设置工作路径为当前文件存储路径。_r语言设置工作目录到目标文件夹

background 线性渐变-程序员宅基地

文章浏览阅读452次。格式：background: linear-gradient(direction, color-stop1, color-stop2, ...);<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? &l..._background线性渐变

随便推点

【蓝桥杯省赛真题39】python输出最大的数中小学青少年组蓝桥杯比赛算法思维python编程省赛真题解析-程序员宅基地

文章浏览阅读1k次，点赞26次，收藏8次。第十三届蓝桥杯青少年组python编程省赛真题一、题目要求（注：input（）输入函数的括号中不允许添加任何信息）1、编程实现给定一个正整数N，输出正整数N中各数位最大的那个数字。例如:N=132，则输出3。2、输入输出输入描述：只有一行，输入一个正整数N输出描述：只有一行，输出正整数N中各数位最大的那个数字输入样例：

网络协议的三要素-程序员宅基地

文章浏览阅读2.2k次。一个网络协议主要由以下三个要素组成：1.语法数据与控制信息的结构或格式，包括数据的组织方式、编码方式、信号电平的表示方式等。2.语义即需要发出何种控制信息，完成何种动作，以及做出何种应答，以实现数据交换的协调和差错处理。3.时序即事件实现顺序的详细说明，以实现速率匹配和排序。不完整理解：语法表示长什么样，语义表示能干什么，时序表示排序。转载于:https://blog.51cto.com/98..._网络协议三要素csdn

The Log: What every software engineer should know about real-time data's unifying abstraction-程序员宅基地

文章浏览阅读153次。主要的思想，将所有的系统都可以看作两部分，真正的数据log系统和各种各样的query engine所有的一致性由log系统来保证，其他各种query engine不需要考虑一致性，安全性，只需要不停的从log系统来同步数据，如果数据丢失或crash可以从log系统replay来恢复可以看出kafka系统在linkedin中的重要地位，不光是d..._the log: what every software engineer should know about real-time data's uni