Javascipt：是一门弱类型的脚本语言，需要在网页上执行。html负责框架结构，css负责样式修饰，js负责行为交互，动态效果。前端三大件：html，css，js。javascript 和 java 之间没有任何关系。
js的三种引入方式
行内脚本页内脚本引入外部样式表
示例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 300px;height: 200px;background-color: pink;}</style><!-- 页内样式 --><script type="text/javascript">var a = '你好';alert(a);console.log("你好，世界！");//控制台打印输出：你好，世界！console.log(a);//控制台打印输出：你好</script><!-- 引入外部样式 --><script src="js/index.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 行内引入 --><div onclick="alert('你好，世界！')"></div></body></html>
Javascript
console.log("引入外部脚本文件");
打印输出结果
变量常量，数据类型，运算符
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">//es5，版。es6版本// 1.变量常量 var a = 10;var b = 20.5;var c = 'aa';var d = "你好";var e = true;//const a1 = 20;//常量//a1 = 30;//2.数据类型//第一种：原始类型，第二种：引用类型//原始类型：number,string,boolean,null,undefinedvar f;console.log(f);//3.运算符//算术运算符：+ - * / %var c1 = 20;var c2 = 3;console.log(c1 / c2);console.log(c1 % c2);var d1 = 0.1;var d2 = 0.2;var d3 = 0.3;console.log(d2 - d1);console.log(d3 - d2);//比较运算符：> < >= <= == != 额外的：=== 恒等于 !== var e1 = 1;var e2 = "1";console.log(e1 == e2); //双等号不判断数据类型console.log(e1 === e2); //不仅值要相等，数据类型也要相同//逻辑运算符：&& || ! 与java完全相同var year = ;if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {console.log("闰年");}//赋值运算符：+= -= *= /= %= ++ --，与java完全相同//示例：99乘法表for (var i = 1; i <= 9; i++) {var out = "";for (var j = 1; j <= i; j++) {out += j + "*" + i + "=" + j * i + " ";}console.log(out);}</script></head><body></body></html>
流程控制：和java完全相同
顺序结构选择结构：if if…else switch…case循环结构：while for
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">//输出所有三位数的素数for (var i = 100; i <= 999; i++) {var isSushu = true;for (var j = 2; j < i; j++) {if (i % j == 0) {isSushu = false;break;}}if (isSushu) {console.log(i + "是素数")}}</script></head><body></body></html>
数组
以下内容参考自W3school在线教程
数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
var person = ["Bill", "Gates", 62];var person = {firstName:"John", lastName:"Doe", age:46};
JavaScript 变量可以是对象。数组是特殊类型的对象。可以在相同数组中存放不同类型的变量。
myArray[0] = Date.now;myArray[1] = myFunction;myArray[2] = myCars;
关联数组：很多编程元素支持命名索引的数组。具有命名索引的数组被称为关联数组（或散列）。JavaScript 不支持命名索引的数组。在 JavaScript 中，数组只能使用数字索引。
var person = [];person[0] = "Bill";person[1] = "Gates";person[2] = 62;var x = person.length;// person.length 返回 3var y = person[0]; // person[0] 返回 "Bill"
假如使用命名索引，JavaScript 会把数组重定义为标准对象。之后，所有数组的方法和属性将产生非正确结果。
var person = [];person["firstName"] = "Bill";person["lastName"] = "Gates";person["age"] = 62;var x = person.length; // person.length 将返回 0var y = person[0]; // person[0] 将返回 undefined
数组和对象的区别在 JavaScript 中，数组使用数字索引。在 JavaScript 中，对象使用命名索引。数组是特殊类型的对象，具有数字索引。
示例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 数组可以理解为对象var a = [];//定义空数组，语法糖a[0] = 10;a[1] = "hello";a[3] = 4.5;a[20] = "你好";// 从尾部添加一个数据，pop即从尾部取出并移除a.push("push一个数据")//从头部压入一个数据，shift即从头部取出并移除a.unshift("unshift一个数据");console.log(a.length);console.log(a);//冒泡排序var b = [10,2,3,48,33,20,1,49,30];console.log("b数组排序前的结果为："+b);for(var i = 0;i<b.length;i++){for(var j = 0;j<b.length;j++){if(b[j]>b[j+1]){var t = b[j];b[j] = b[j+1];b[j+1] = t;}}}console.log("b数组排序后的结果为："+b);//裁切数组，从2~4，被裁切的原数组不变console.log(b.slice(2,4));console.log(b);//裁切后原数组改变console.log(b.splice(2,4));console.log(b);var c = new Array();//定义空数组</script></head><body></body></html>
函数
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">//定义函数参数无需写类型，都是varfunction jieCheng(n) {var result = 1;for (var i = 1; i <= n; i++) {result *= i;}return result;}console.log(jieCheng(5));</script></head><body></body></html>
对象
示例一
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">//js的面向对象//js中的对象，就是键值对的集合var a = {}; //对象，空对象，语法糖//var a = new Object();//等同的//自由对象var a1 = {name: "张三",sex: "男"};console.log(a1);//添加一个新的键值对a1.age = 30;a1["birthday"] = "2002-1-1";a1[2] = 100;console.log(a1);</script></head><body></body></html>
示例 2
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">//在js中，函数就是一个对象function Student(name, sex, age) {this.name = name;this.sex = sex;this.age = age;this.sayHello = function() {console.log(this.name + " says hello");};}var stu1 = new Student("张三", "男", 20);console.log(stu1.name);//张三console.log(stu1["sex"]);//男stu1.sayHello();//张三 says hellostu1.birthday = "2000-1-1";console.log(stu1);//添加birthday属性//移除一个属性delete stu1.birthday;console.log(stu1);//js继承机制MidSchoolStudent.prototype = new Student();function MidSchoolStudent(name, sex, age) {this.name = name;this.sex = sex;this.age = age;}//js的面向对象（封装、继承、多态）是通过原型机制来实现的，和java完全不同var stu2 = new MidSchoolStudent("李四", "女", 35);stu2.sayHello();//李四 says hello</script></head><body></body></html>
DOM
文档对象模型。Doucment Object Model。在 js 中，将每一个元素理解成一个对象。document是内置的一个对象，表示整个html文档常用dom对象的属性和方法：
tagName：innerText：返回元素的内容文本，不包括html。innerHTML：返回元素的html内容。style：就是获取元素的行内样式。className:类名称classList:类名称集合
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="mydiv" class="outer" style="color: blue;"><span>初始值</span></div><script type="text/javascript">// DOM:Document Object Model，被译为文档对象模型。// DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。// 浏览器加载并运行HTML页面后，会创建DOM结构。由于DOM中的内容被封装成了JavaScript语言中的对象，所以我们可以使用JavaScript语言通过DOM结构来访问和操作HTML页面中的内容。// Document对象提供实现定位页面元素的方法具有如下几种:// getElementById()方法:通过页面元素的id属性值定位元素。// getElementsByName()方法:通过页面元素的name属性值定位元素。// getElementsByTagName()方法:通过页面元素的元素名定位元素。// getElementsByClassName()方法:通过页面元素的class属性值定位元素。// querySelector()方法:通过CSS选择器定位第一个匹配的元素。// querySelectocAll()方法:通过CSS选择器定位所有匹配的元素。var mydiv = document.getElementById("mydiv");console.log(mydiv.tagName.toLowerCase());//divconsole.log(mydiv.innerText);//初始值console.log(mydiv.innerHTML);//<span>初始值</span>console.log(mydiv.id);//mydivmydiv.innerText = "修改初始值";mydiv.style.color = "red";console.log(mydiv.style);//输出所有的style样式：CSSStyleDeclarationmydiv.style.backgroundColor = "pink";mydiv.style["background-color"] = "skyblue";mydiv.style.width = "100px"console.log(mydiv.className);//outermydiv.className = "inner";mydiv.classList.add("a");mydiv.classList.add("b");mydiv.classList.add("c");mydiv.classList.remove("b");</script></body></html>
dom的增删改查dom对象.querySelector: 查询第一个满足指定选择器的元素。dom对象|querySelectorAll: 查询所有满足指定选择器的元素，返回类数组。
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div class="outer"></div><div class="inner"><span><div class="inner" id="aaa"></div></span></div><script type="text/javascript">//推荐使用//var md = document.querySelector(".inner");var mds = md.querySelectorAll("div");console.log(mds);</script></body></html>
示例 2
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.outer {width: 300px;height: 200px;background-color: pink;}</style></head><body><div class="outer"></div><div class="wrapper"></div><script type="text/javascript">var d = document.querySelector(".outer");//创建一个span元素对象var dom = document.createElement("span");dom.innerText = "新增元素";dom.style.color = "green";dom.style.padding = "5px 10px";dom.style.backgroundColor = "rgba(255,255,255,0.5)";//表示添加一个子元素d.appendChild(dom);var wrapper = document.querySelector(".wrapper");wrapper.appendChild(d);</script></body></html>
示例 3
父dom.appendChild(子dom): 添加一个子元素。document.createElement() :可以创建一个全新的dom对象。父dom.insertBefore(新增元素， 子dom):父dom元素插入一个子元素到"子dom"的前面。dom元素。remove()：移除自身父daom元素.removeChild(子dom)：父元素移除一个子元素
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#tbl {margin: 0 auto;border-collapse: collapse;}#tbl tr>td {border: 1px solid #ccc;padding: 30px 30px;text-align: center;}</style></head><body><table id="tbl"><tr><td>1</td><td>2</td><td>3</td></tr></table><script type="text/javascript">var tr = document.createElement("tr");for (var i = 0; i < 3; i++) {var td = document.createElement("td");td.innerText = i + 4;tr.appendChild(td);}var tr1 = document.querySelector("#tbl tr");//获取tr1的父元素var tbl = tr1.parentElement;tbl.appendChild(tr);var td1 = document.querySelector("#tbl td");var a = document.createElement("a");a.innerText = "去百度";td1.appendChild(a);</script></body></html>
DOM的四向遍历（父，子，兄，第）获取父元索: parentElement, 可以获取父元素。children：返回所有的子元素，返回值是类数组previonsElementSibling：返回前一个兄元素，如果没，则返回nullnextElementSibling:后一个弟元素，如果没有，则返回null
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script type="text/javascript">var lis = document.querySelectorAll("ul>li");var li3;for (var i = 0; i < lis.length; i++) {if (lis[i].innerText === "3") {li3 = lis[i];break;}}var li25 = document.createElement("li");li25.innerText = "2.5";var ul = li3.parentElement;//插入一个子元素到某个子元素的前面ul.insertBefore(li25, li3);var li5 = document.querySelector("ul>li:last-child");//移除自身//li5.remove();//父元素移除一个子元素ul.removeChild(li5);console.log(ul.childElementCount);//返回一个类数组，返回其所有子元素var lis = ul.children;console.log(lis);//返回前一个兄元素var li2 = li3.previousElementSibling;console.log(li2.innerText);//返回后一个弟元素var li4 = li3.nextElementSibling;console.log(li4.innerText);</script></body></html>
dom事件处理js和人进行行为交互添加事件有三种方式直接在标记内，定义onXXX事件给dom元素添加onXXX属性，与第一种指定方式效果完全相同推荐：dom元素.addEvenListener(“事件名称”，事件处理函数)，可以给一个事件添加多个属性。dom元素.removeEvenListner（“事件名称”，事件处理函数名）。事件类型click事件，单击事件，频率最高的事件，可以占到90%以上。
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">html,body {height: 100%;}body {margin: 0;overflow: hidden;}div {width: 300px;height: 200px;background-color: pink;/* 过渡 */transition: all .5s;position: absolute;top: 0;left: 0;}</style></head><body><button id="btn" type="button" onclick="changeColor()">点我</button><div></div><script type="text/javascript">var div = document.querySelector("div");/* div.onclick = function(){div.style.width = "400px";div.style.height = "300px";div.style.backgroundColor = "green";}; *///把事件取消// div.onclick = null;var timer;//添加事件监听器div.addEventListener("click", function() {var sw = document.body.offsetWidth;var sh = document.body.offsetHeight;//每隔一定的时间执行一个操作timer = setInterval(function() {//左偏移var offsetLeft = parseInt((Math.random() * sw));var offsetTop = parseInt(Math.random() * sh);div.style.top = offsetTop + "px";div.style.left = offsetLeft + "px";}, 1000);});div.addEventListener("click", function(){console.log("移动开始");});//移除事件div.removeEventListener("click",func1);function func1() {console.log("移动开始");}function changeColor() {var btn = document.querySelector("#btn");btn.style.backgroundColor = "red";//停止定时器clearInterval(timer);}</script></body></html>
dblclick:双击事件onload：window对象和img对象，可以触发keypress:按下一个键。字符
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">//页面载入结束之后 window.onload = function() {var mydiv = document.querySelector("#mydiv");console.log(mydiv);var ipt = document.querySelector("#username");ipt.addEventListener("keypress", function(e) {console.log(e.key + ":" + e.keyCode);});}</script></head><body><div id="mydiv"></div><input type="text" id="username"></body></html>
keydown/键按下事件，可以持续触发，谈起事件只触发一次
示例 1
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#chrome {width: 60px;height: 60px;background: url(img/091.png) no-repeat center center/cover;position: absolute;bottom: 0;left: calc(50% - 30px);}</style><script type="text/javascript">window.onload = function() {var chrome = document.querySelector("#chrome");//键按下document.addEventListener("keydown", function(e) {//当前元素的上偏移var currentTop = chrome.offsetTop;//当前元素的左偏移var currentLeft = chrome.offsetLeft;switch (e.key) {case 'w':chrome.style.top = currentTop - 5 + "px";break;case 'a':chrome.style.left = currentLeft - 5 + "px";break;case 's':chrome.style.top = currentTop + 5 + "px";break;case 'd':chrome.style.left = currentLeft + 5 + "px";break;}});}</script></head><body><div id="chrome"></div></body></html>
定时任务setTimeout：在指定的时间后，执行一个操作。 只执行一次。setInterval: 每隔指定的时间后，执行一个操作。键盘相关事件：onPress，onKeyDown，onKeyUp
示例一
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.mydiv {width: 300px;height: 200px;background-color: pink;/* margin-left: 100px;margin-top: 100px; */position: absolute;}</style><script type="text/javascript">window.onload = function() {var mydiv = document.querySelector(".mydiv");mydiv.addEventListener("mousedown", function(e) {console.log("鼠标按下");console.log(event.button);});mydiv.addEventListener("mouseup", function(e) {console.log("鼠标弹起");});mydiv.addEventListener("mousemove", function(e) {console.log("鼠标移动");console.log(e.pageX + ":" + e.pageY);});mydiv.addEventListener("mouseenter", function(e) {console.log("鼠标进入");//console.log(e.pageX + ":" + e.pageY);mydiv.style.backgroundColor = "green";var currentLft = mydiv.offsetLeft;var currentTop = mydiv.offsetTop;mydiv.style.left = currentLft + 5 + "px";mydiv.style.top = currentTop + 5 + "px";});mydiv.addEventListener("mouseleave", function(e) {console.log("鼠标离开");//console.log(e.pageX + ":" + e.pageY);mydiv.style.backgroundColor = "pink";var currentLft = mydiv.offsetLeft;var currentTop = mydiv.offsetTop;mydiv.style.left = currentLft - 5 + "px";mydiv.style.top = currentTop - 5 + "px";});}</script></head><body><!-- 鼠标相关事件 --><div class="mydiv" onm></div></body></html>
