JavaScript
JavaScript的作用
表单动态验证
网页特效
服务端开发（Node.js）
桌面程序（Electron）
APP(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)
JavaScript的构成
ECMAScript : 一门标准化的语言。
DOM(文档对象模型) :通过DOM提供的接口可以对页面上的各种元素进行操作。比如大小、位置、颜色等。
BOM(浏览器对象模型) :通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
JavaScript的书写方式
JS有3种书写位置，分别为行内、内嵌和外部。
1.行内式JS
<input type="button"value="点我试试"onclick="alert('He1lo world')"/>
·可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
·注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
·可读性差，在html中编写JS大量代码时，不方便阅读；
·引号易错，引号多层嵌套匹配时，非常容易弄混；
2.内嵌JS
<script>alert('Hello World~!');</script>
·可以将多行JS代码写到<script>标签中
·内嵌JS是学习时常用的方式
3.外部JS文件
<script src="my.js"></script>
·利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
·引用外部JS文件的script标签中间不可以写代码
·适合于JS代码量比较大的情况
JavaScript控制输入输出
<script>
prompt('我是prompt,用户输入info');
alert('我是alert,弹出显示msg');
console.log('我是console,控制台显示msg');
</script>
简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
·值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string，number，boolean，undefined，null
·引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
堆和栈
堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
复杂数据类型存放到堆里面
Web APIS
API
API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
API和Web API总结
1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2.WebAPI主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3.WebAPI一般都有输入和输出（函数的传参和返回值），WebAPl很多都是方法（函数）
4.学习WebAPI可以结合前面学习内置对象方法的思路学习
DOM文档对象模型
DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
获取元素
ID获取
根据ID获取 : var timer=document.getElementById('time');
例子： <div id="time">2021-03-14</div>
<script>
//1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
//2.get获得element元素by通过驼峰命名法
//3.参数id是大小写敏感的字符串
//4.返回的是一个元素对象
var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);
//5.console.dir打印我们返回的元素对象更好的查看里面的属性和方法
console.dir(timer);
</script>
标签名获取
根据标签名获取 : var lis=document.getElementsByTagName('1i');
//1、返回的是获取过来元素对象的集合以伪数组的形式存储的
//2、还可以获取某个元素（父元素）内部所有指定标签名的子元素。
//element.getElementsByTagName('标签名'); *element代表获取全部
第一种 获取某个元素（父元素）内部所有指定标签名的子元素
//var ol=document.getElementsByTagName('ol');//[ ol]
//console.1og(ol[0].getElementsByTagName('1i'));
第二种 获取某个元素（父元素）内部所有指定标签名的子元素
//var ol=document.getElementById('ol');
//console.1og(o1.getElementsByTagName('1i'));
//注意：父元素必须是单个对象（必须指明是哪一个元素对象）.获取的时候不包括父元素自己。
HTML5新增的方法获取
1.document.getElementsByClasslName('类名'); //根据类名返回元素对象集合
2.document.querySelector('选择器'); //根据指定选择器返回第一个元素对象 需要加符号
3.document.querySelectorAll('选择器'); //根据指定选择器返回 需要加符号
特殊元素获取
<script>
//1.获取body元素
var bodyEle=document.body;
console.1og(bodyEle);
console.dir(bodyEle);
//2.获取html元素
//var htmlEle=document.html;
var htmlEle=document.documentElement;
console.1og(htmlE1e);
</script>
事件基础
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解：触发—响应机制。 事件三要素：事件源 事件类型 事件处理程序
<button id="btn">唐伯虎</button>
<script>
//点击一个按钮，弹出对话框
// 1.事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
// （1）事件源事件被触发的对象谁按钮
var btn=document.getElementById('btn');
// （2）事件类型如何触发什么事件比如鼠标点击（onclick）还是鼠标经过还是键盘按下
// （3）事件处理程序通过一个函数赋值的方式完成
btn.onclick=function(){
alert('点秋香');
}
/* btn 事件源 onclick 事件类型 function(){} 事件处理程序*/
</script>
鼠标事件
操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。
注意以下都是属性
改变元素内容
<script>
//innerText和innerHTML的区别
//1.innerText不识别html标签非标准 去除空格和换行
div.innerText='<strong>今天是：</strong>2019';
//2.innerHTML识别html标签W3C标准 保留空格和换行的
div.innerHTML='<strong>今天是：</strong>2019';
//这两个属性是可读写的可以获取元素里面的内容
var p=document.queryselector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
修改元素属性值
<script>
//修改元素属性src
//1.获取元素
var ldh=document.getElementById('1dh');
var zxy=document.getElementById('zxy');
var img=document.queryselector('img');
//2.注册事件处理程序
zxy.onclick=function(){
img.src='images/zxy.jpg';
img.title='张学友思密达';
}
ldh.onclick=function(){
img.src='images/1dh.jpg';
img.title='刘德华';
}
</script>
修改表单属性
<script>
//1.获取元素
var btn=document.querySelector('button');
var input=document.queryselector('input');
//2.注册事件处理程序
btn.onclick=function(){
//input.innerHTML='点击了'; 这个是普通盒子比如div标签里面的内容
//表单里面的值文字内容是通过value来修改的input.value='被点击了';
//如果想要某个表单被禁用不能再点击disabled我们想要这个按钮button禁用
btn.disabled=true;
//this 指向的是事件函数的调用者btn
this.disabled=true;
}
</script>
样式属性修改
我们可以通过JS修改元素的大小、颜色、位置等样式。
1.element.style行内样式操作 修改样式比较少时使用
2.element.className类名样式操作 修改样式较多时使用
注意：
1.Js里面的样式采取驼峰命名法比如 fontSize、backgroundColor 驼峰命名法
2.Js修改sty1e样式操作，产生的是行内样式，css权重比较高
3.className会直接更改元素的类名，会覆盖原先的类名。
自定义属性的定义
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute（属性）获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如<div data-index=“1"></div>
或者使用JS设置
element.setAttribute('data-index',2)
自定义属性的操作
element.getAttribute(‘属性’);
1.获取属性值
·element.属性 获取属性值。
·element.getAttribute('属性');
区别：
·element.属性 获取内置属性值（元素本身自带的属性）
·element.getAttribute('属性'); 主要获得自定义的属性（标准）我们程序员自定义的属性
例子：
<div id="demo"index="1"></div>
<script>
var div=document.queryselector('div');
//1.获取元素的属性值
//（1）element.属性
console.log(div.id);
//（2）element.getAttribute（'属性'）get得到获取attribute属性的意思我们程序员自己添加的属性我们称为自定义属性index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
2.设置元素属性值
//（1）element.属性=‘值’
div.id='test';
div.className='navs';
//（2）element.setAttribute('属性',值)；主要针对于自定义属性
div.setAttribute('index',2);
div.setAttribute('class','footer');
//class 特殊这里面写的就是class不是className
3.移除属性
//removeAttribute（属性）
div.removeAttribute('index');
节点操作
节点概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
·元素节点nodeType为1
·属性节点nodeTypb为2
·文本节点nodeType为3（文本节点包含文字、空格、换行等）
注意：一般操作元素节点
节点层级
1.父级节点
node.parentNode
·parentNode属性可返回某节点的父节点，注意是最近的一个父节点
·如果指定的节点没有父节点则返回null
2.子节点
parentNode.chilaNodes（标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
****注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。****
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用 childNodes
var ul=document.querySelector（'ul'）;
for（vari=0；i<ul.childNodes.length；i++）{
if（ul.childNodes[i].nodeType==1）{
//ul.childNodes[i]是元素节点
console.1og（ul.childNodes[i]）;
}
parentNode.children（非标准） ***建议使用***
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
子节点操作
parentNode.firstElementChild
firstE1ementChild 返回第一个子元素节点，找不到则返回null。
parentNode.lastElementChild
1astElementChild返回最后一个子元素节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9以上才支持。
<script>
var ol=document.queryselector（'o1'）;
//1.firstchild第一个子节点不管是文本节点还是元素节点
console.1og（o1.firstchild）;
console.1og（o1.lastchild）;
//2.firstElementchild 返回第一个子元素节点
console.1og（o1.firstElementchild）;
console.1og（o1.1astElementchild）;
//3.实际开发的写法既没有兼容性问题又返回第一个子元素
console.1og（o1.children[0l）;
console.1og（o1.children[3]）;
</script>
兄弟节点
创建节点、插入节点
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.所有元素全部清除样式（干掉其他人）
2.给当前元素设置样式（留下我自己）
3.注意顺序不能颠倒，首先干掉其他人，再设置自己
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
//1.获取所有按钮元素
var btns=document.getElementsByTagName('button');
//btns得到的是伪数组里面的每一个元素btns[i]
for(var i=0;i< btns.length;i++){
btns[i].onclick=function(){
//（1）我们先把所有的按钮背景颜色去掉干掉所有人
for(vari=0;i<btns.length;i++){
btns[i].style.backgroundColor='';
//（2）然后才让当前的元素背景颜色为pink留下我自己
}
this.style.backgroundColor='pink';
}
}
//2.首先先排除其他人，然后才设置自己的样式这种排除其他人的思想我们成为排他思想
</script>
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
