javaScript(简称js)

js是一门运行在客户端浏览器的脚本语言，它无法独立运行，直译型语言（不需要编译）；同时js也是一门弱类型的程序语句

js的组成

ECMScript核心语法：由ECMA-262定义，提供核心语言功能；
BOM(浏览器对象模型)：提供与浏览器交互的方法和接口；
DOM(文档对象模型)：提供访问和操作网页内容的方法和接口

基础语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// System.out.println()console.log("hello js!");
</script>
</body>
</html>

语言位于一对script之间

常见引入方式

在html中使用js包含以下三种方式：

直接在html页面中使用内联script标签编写
代码如下：

<html><head></head><body><script>.....</script>        </body>
</html>

引入外部的脚本文件（js文件）

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

直接在html元素中使用内嵌的方式使用

<a href="javascript:alert('')"></a>

数据类型

js包含以下几类：

数值型（包含浮点类型）
字符串型
布尔型
对象
- 普通对象
- null
- 数组
undefined (空值)

运算符

js的运算符主要包含以下几类：

算术运算符
关系运算
布尔逻辑运算
位运算
三目运算

流程控制

分支语句
- if：与java类似，唯一不同的是java中if必须是一个布尔类型的表达式，而js中if可以编写任意类型的表达式
- switch : 语句代码如下：

var y = 2020;
var m = 2;
switch(m){case 4:case 6:case 9:case 11:console.log(30);break;case 2:if(y % 4 == 0 && y % 100 != 0 || y % 400 == 0){console.log(29);}else{console.log(28);}break;default:console.log(31);break;
}

循环语句

js主要包含两种：

for
while
功能以及使用：与java中类似

函数（方法）

js中的函数，可以理解为java中方法，语句结构如下：

function 函数名称(参数列表){//执行体
}

函数定义

js中函数分类包含四种类型函数：

有参数有返回值
有参数无返回值
无参数无返回值
无参数有返回值

语句使用如下：

//有参数无返回值
function print(msg){console.log(msg);
}//无参有返回值函数
function msg(){return "helloworld";
}//有参数有返回值函数
function max(a,b){return a > b ? a : b;
}//无参数无返回值函数
function show(){console.log("this is function");
}

函数的调用

js中的函数调用，只需要在script语句块中直接调用即可，或者通过html元素中的事件属性进行调用

调用方式一

function show(){console.log("this is function");
}
//调用
show();

调用方式二

<button onclick="show()">点我试试</button><a href="javascript:print('')">点我试试</a>

匿名函数&函数自调用

语句代码结构如下：

//将一个匿名函数存储到一个变量中，（将匿名函数改成有名字的函数）
var add = function(a,b){console.log(a + b);
}
add(1,2);//自调用函数
var value =  (function(a,b){var r = a > b ? a : b;console.log('匿名函数被执行');return r;
})(10,20);console.log(value);

闭包

语句代码结构如下：

//闭包即在一个函数内部定义的函数
//闭包提供了在函数外部对函数内部局部变量的访问能力
function counter(){var count = 0;//闭包return {increment:function(){count++;},decrement:function(){count--;},count:function(){return count;}}
}var c = counter();
c.increment();
c.increment();
console.log(c.count()); // 2
var c = counter();
c.increment();
console.log(c.count()); // 1

let变量（ES6新增）

代码结构如下：

(function a(){//全局变量(js中变量在使用前如未做任何声明，一律称之为全局变量)i = 10;var n = 20;
})();console.log(i);
// console.log(n);//局部变量无法调用 Uncaught ReferenceError: j is not defined at...if(i >= 10){//es6新增，用于防止变量污染存在的一个关键字（let声明任何变量只能在声明区域使用）let j = 20;//非函数的语句块无法形成作用域，因此该区域定义的变量，在外部可以被调用(变量污染)var k = 20;
}
console.log(k);
console.log(j); // Uncaught ReferenceError: j is not defined at...

事件分类

js中事件分为以下几类

窗口事件
鼠标事件
键盘事件
文档事件

事件名	描述
onload	当窗体内容被加载时触发
onnuload	当窗体中内容卸载时触发
oobeforeunload	当窗体内容被卸载之前触发
onresize	当窗体大小被改变时触发
onscroll	当窗体内部发生滚动时触发

鼠标事件

事件名	描述
onclick	当鼠标单击时触发
ondblclick	当鼠标双击时触发
onmouseover	当鼠标悬停到元素上时触发
onmouseout	当输入从元素中移出时触发
onmouseenter	当鼠标进入时触发
onmouseleave	当鼠标离开时触发
onmousedown	当鼠标按下时触发
onmouseup	当鼠标抬起时触发

键盘事件

事件名	描述
onkeydown	当键盘按键被按下时触发
onkeyup	当键盘按下抬起触发
onkeypress	当键盘按键被按压时触发

表单事件

事件名	描述
onchange	当控件内容改变时触发
onselect	当控件内容被选中时触发
onblur	当控件失去焦点时触发
onfocus	当控件获得焦点时触发
onreset	表单重置时触发
onsubmit	表单提交时触发

事件绑定

javascript事件需要为指定的触发源进行绑定，js事件绑定的方式有如下几种

直接在html元素中通过事件名绑定

 <button onclick="backTop()" onmouseover="enter(this)" onmouseout="out(this)">回到顶部</button>

在js中获取元素调用元素的事件名

document.getElementById('box').onmousemove=function(e){console.log(e.x+"----"+e.y);
}//窗口滚动事件
window.onscroll=function(e){//获取与浏览器顶部的距离（px）var t = document.body.scrollTop || document.documentElement.scrollTop;console.log('滚动条滚动'+t);
}

获取元素对象之后使用addEventListener（）方法绑定

//为控件添加事件监听(内容选中事件)
document.getElementById('uname').addEventListener('select',function(e){console.log(this.value);
})//为控件绑定change事件document.getElementById('city').addEventListener('change',function(e){console.log('选择的城市是:' + this.value);
})//为表单控件绑定重置事件document.getElementById('form1').addEventListener('reset',function(){alert('表单已重置')
})

事件冒泡&事件捕获

事件冒泡是一个由内向外的传播过程，当触发最内层的元素事件时，逐级向外进行传播；
事件捕获是一个由外向内的传播过程，当触发内层元素事件时，实际是最先执行最外层元素事件，逐级向内传播

取消事件传播 ：若要取消事件传播，只需要通过调用事件对象的stopPropagation（）即可

全局函数

js中提供了一些常见的全局函数，大多数用实现数据转换的功能：

parseInt():将string类型转换为number类型（只会取整数）
parseFloat():将string类型转换为number类型（会保留小数点）
eval():可以将字符串作为js代码进行执行
encodeURI():将string类型数据转码为url编码
decodeURI():将url编码的字符串解码为原始字符串值
Number():将任意类型转换为number
String():将任意类型转换为string

DOM（文档对象模型）

js支持DOM编程，DOM：对于任何一个html网页都可以将网页中所有内容当做一个倒置的文档树理解，可以通过js的dom操作对树中的任意节点进行访问

获取DOM的几种方式

获取文档中的所有元素

var all = document.all; // 返回一个包含了文档中所有节点的数组对象

根据标签获取元素

//获取页面中的所有h1元素 (返回数组对象)
let titles = document.getElementsByTagName("h1");
console.log(titles);

根据元素的class名称获取元素（慎用）

//返回所有class名称为row的元素(返回数组对象)
let rows = document.getElementsByClassName("row");
console.log(rows);

根据元素的name属性获取元素集合

let langs = document.getElementsByName("lang"); //返回数组

根据元素的id获取元素（因为id在页面中具备唯一性，因此以下代码只能获取一个元素）

let selectAll = document.getElementById("selectAll");//返回单个元素对象

获取dom对象的方式

document.querySelector();根据css的选择器获取匹配的单个元素
document.quertySelectAll();根据提供的css选择器获取匹配的多个元素

//根据css的选择器获取指定选择器选中的单个元素
var h2 = document.querySelector("h2");
console.log(h2);var tds = document.querySelectorAll("td");
console.log(tds);//获取所有class="row" h1 h2元素？
var elements = document.querySelectorAll(".row,h1,h2");
console.log(elements);

插入DOM

js中向指定节点插入元素的方法主要包含以下几类：

appendChild(node):向当前节点中插入子元素（子元素必须是一个dom对象）
insertBefore(newNode,refNode):向当前节点中的refNode之前插入newNode
innerHTML:向当前节点插入htel代码（覆盖原有的内容）

修改DOM

innerText：将文本内容插入到指定节点
innerHTML：将html代码插入到指定节点

删除DOM

removeChild（childNode) ：删除当前节点下指定的子节点
remve（）；删除当前节点对象

DOM其他方法

children：dom元素通过该属性可以获取当前节点下的所有的子节点（返回的是一个集合）
parentNode：dom元素通过该属性可以获取当前节点的父节点（唯一）

BOM

BOM为浏览器对象模型

window： window对象是BOM的顶层对象，bom中的一些核心对象都是源自于window，全局函数的this指针一般都是指向window
window的常见属性：
- innerWidth：当前窗口可用区域的宽度
- innerHeight：当前窗口可用区域的高度
- outerWidth：浏览器窗口开启的实际宽度
- outerHeght：浏览器开启的实际高度

前端进阶之javaScript相关推荐

Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
前端进阶之路: 前端架构设计(2)-流程核心
可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
自学前端开发，前端进阶阶段需要学习哪些知识？
今天要跟大家分享的文章是关于web前端进阶阶段需要学习哪些知识?已经入门web前端想要提升自己技术的小伙伴们来和小编一起看一看本篇文章吧,希望本篇文章能够对大家有所帮助. 1.完善我们的基础知识 (1 ...
fifo算法_前端进阶算法6：一看就懂的队列及配套算法题
引言队列这种数据结构,据瓶子君了解,前端需要了解的队列结构主要有:双端队列.滑动窗口,它们都是算法中是比较常用的数据结构. 因此,本节主要内容为: 数据结构:队列(Queue) 双端队列(Deque ...
前端进阶垫脚石-前端工程化
什么是前端工程化前端工程化,就是降本提效的体现广义上,前端工程化包含一切以降低成本.提高效率.保障质量为目的的手段通过一系列的规范.流程.工具达到研发提效.自动化.保障质量.服务稳定.预警监控等 ...
IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
大前端进阶！NodeJS、Npm、Es6、Babel、Webpack、模块化开发
文章目录大前端进阶一.Node.js 1.1.Nodejs介绍和安装 1.2 .Nodejs入门 1.2.1.快速入门-Hello World 1.2.2.Node - 实现请求响应 1.2.3. ...
前端战五渣学JavaScript——call、apply以及bind
写这篇博客之前,我想先说下今天(2019年3月28日)一直关注的一件事吧(出于凑热闹的心情--尴尬).在昨天,全球最大交友网站Github上悄然出现一个名为996.ICU的文档项目,整个项目没有代码, ...

前端进阶之javaScript