JavaScript葵花宝典（基础）

HTML 和 JavaScript

计划：

基础语法
关键名词
标签
CSS样式表***
JavaScript脚本（动态交互）
JQuery库（JS库）为服务器端的网页动态交互提供基础
为服务端脚本的学习提供基础（NodeJS）

一、WEB和HTTP、BS结构

HTTP协议是网络间数据传输的一种语言标准。BS结构：指应用程序的入口不再是main函数
而是每个页面或程序都可以独立运行。
B ： Browser浏览器
S ： Server服务器CS结构：客户端（client）必须安装某些软件才能与服务端通讯。

二、HTML文档结构和基本语法

HTML 像一个人
头(Head)
身体(Body)
手脚(JS)
.html文件，用浏览器打开运行看效果。
语法：所有内容以标签形式编写，但不是必须的。
如果碰到错误，会忽略。好习惯是：写规范。开发工具：HBuilder，WebStorm，Eclipse等Ctrl+R 打开运行：
是模拟一台Web服务器方式，使用HTTP协议来访问页面。http协议常见错误代码：
404 ：资源找不到（文件，图片等）
500 ：服务器端程序内部错误
405 ：请求的方法不支持（POST或GET）POST GET PUT DELETE (改、查、添、删)
浏览器是通过下载远程服务器上的静态代码来本地解释运行。
重点是：解释。

三、标签

文字：
加粗、倾斜、下划线、删除线、上标、下标、代码
超链接a标签
< a href="跳转的URL">看到的内容</a>
URL可以是相对地址也可以是绝对地址。
target属性控制跳转发生的窗口在哪。a标签还有个功能：抛锚。
< a name="锚名" >内容</a>
跳转方式使用#锚名方式来进行跳转。
< a href="#weiji">第1集</a>
< a href="../a/b/content.html#weiji">第1集</a>
< a href="https://www.baidu.com/abc/x.html#weiji">第1集</a>
UL无序，OL有序，LI是列表项图片: < img src="图片文件路径和名称">每个标签都拥有：id、class、style属性

控制: 表格和样式

< table><行><列></列>   <列></列> <列></列> <列></列></行><行><列></列>   <列></列> <列></列> <列></列></行><行><列></列>   <列></列> <列></列> <列></列></行>
< /table>
< th>是表头，< td>是单元格。
< table>< tr>< th>姓名</ th>  < th>性别< /th></ tr>< tr>< td>姓名</ td>   < td>性别< /td></ tr>< tr>< td>姓名</ td>   < td>性别</ td></ tr>
</ table>

cellpadding控制内容与边框的距离，
cellspacing控制单元格与单元格之间的距离。border控制是否拥有外框线条 0 或 1
width  height 宽和高

样式：把需要应用的样式规则，统一写在一个地方，自动套用。

1.行内样式：把样式使用style属性写在标签行内。不推荐使用。
2.内嵌样式：把样式全部写在head内的style标签内。不推荐使用。
3.外联样式：把样式全部单独写成一个.css文件，链接包含到每个需要用到的页面。
<link href="xxx/xx.css" type="text/css" rel="stylesheet"/>
推荐使用外联。

样式定义时，需要使用选择器来定义样式名。
选择器：标签选择器、ID选择器、class选择器。
标签选择器：以HTML标签名作为样式名称。自动应用
ID选择器： 以#开头，自定义名称。id="名称"才应用
class选择器:以.开头，自定义名称。class="名称" 才应用行内style>ID>class表格合并：
跨列：td colspan=跨数  删除本行中跨数-1个td
跨行：td rowspan=跨数  删除后面被跨行的相应位置的td表格的作用在HTMl中主要是用于排版布局。

DIV与CSS

一、DIV层

span是行级层。
div标签是块级层。默认是无色无边框的一块区域。边距：内边距，外边距。
内：内容与边框的距离。padding
外：这个盒子与父容器的边界的距离。marginfloat: left ;  从左向右同一行中依次排列DIV的作用：用于排版布局。

二、框架

Frameset  rows 用于横切窗口，cols用于竖切窗口，每个窗口都可以填充一个文档。
frame 的src属性用于填充文档，name属性用于为窗口取名，方便跳转。内嵌框架
iFrame src="文档名.html" name="窗口名"<noframes>你的浏览器不支持frame，请升级或更换。</noframes>
表单和CSS动画

一、表单

<form> 是类似DIV的一块区域。用于让用户填写一些信息发送到服务器端。
它可以被提交（发送）。
submit();
Action属性用于指定表单发送到服务器端的哪个程序去处理。
Method提交的方法，指定表单以什么方式发送。get post
表单内所有表单元素（框，按钮等）都可以在表单提交时被打包送走。表单元素的name是给服务器端的程序用的。
id是给客户端JS代码用的。

GET和POST提交的区别：

1、地址栏在POST提交时看不见所有参数。敏感数据提交时必须用POST。
2、GET请求URL长度有限制，255以内。POST无限制。POST隐藏无长度限制，get暴露且有长度限制。

二、表单元素
输入类：

input 单行文本
input的type有：
text    文本框
radio   单选
checkbox复选
button  普通按钮
password密码框
submit  提交按钮
reset   重置按钮
file    文件选择控件
number  数字框
date    日期选择
email   电子邮件框
range   刻度条
textarea 多行文本

选择类：

select  下拉列表
单选
复选
文件

按钮类：

普通
提交
重置

在输入类的标签上写上required属性，表示拥有非空检查。
在输入类的标签上写上placeholder属性用于指定提示文本。

JavaScript基本语法（一）

一、编写方式

<script type="text/javascript"></script>用于在HTMl页面上定义JS脚本代码，也是被解释执行，当碰到错误，会在浏览器的控制台中报错，（F12键或右键，选择检查）进入控制台找原因。

注意：

1、这个脚本标签内，所有代码必须区分大小写，JAVA的语法。
2、可以有多段Script标签，变量和函数都是通用的。

通常调试找错手段：

1、弹对话框 alert("hello")  alert(34);  在循环时不建议使用。
2、console.log("i=" + i);    输出到控制台
3、断点试调：在F12控制台窗口，Sources界面代码行号上单周开启或取消断点。

数据类型：没有强制要求，所有类型可以使用var代替。弱类型的语言。但它也有：数字，字符，布尔，日期，对象，数组。。。这些概念var x;
x = undefined;

二、变量、函数定义使用

var 变量名 = 赋值;运算符和java一样，流程控制if else switch for while do-while 相同，多一个forEach.

函数定义：

有名和无名（匿名）
function 函数名() { }  每个函数都可以看成是一个构造函数。
function(){}    匿名函数定义一般是一次性的。onload=function(){}函数的功能，一般用于封装一段代码细节。但在JS中，函数不仅仅有这个功能，
还可以作为构造函数使用。举例：定义一个构造函数，在构造函数内定义3个函数：分别演示for while do-while从1+到100.

三、文档元素的获取和改变

浏览器提供了一些内置对象：
window 窗口document 文档方法getElementById("id")createElement("div");属性body方法 appendChild(tag);location 地址拦history  历史style.backgroundPositionY = "-60px";  指定背景图的y轴定位偏移
btn.addEventListener("click", danji); 为按钮注册单击事件处理函数setInterval(fun,ms); ms 毫秒数，fun一个函数名字
clearInterval(this.youtimer);至少4条鱼赛跑，并且能停，排出名次。

JavaScript基本语法（二）

一、表单检查

每个表单都有个onsubmit属性，这个事件属性如果返回true，表单就提交，否则表单不能提交。
onsubmit="return true"  表单会提交
onsubmit="return false" 表单不能提交
onsubmit="return 检查方法的返回值()"  会怎么样？var $ = function(id) { return document.getElementById(id); }
可以封装一下获取元素的代码。

二、JS数组和字符串操作

数组操作：
定义  var a =[];
赋值  a.push(2);
取值  a[下标]
遍历  for ( var i = 0; i <c.length; i ++){console.log(c[i]);}for ( var i in c ){console.log(c[i]);}c.forEach(function(o){console.log(o);})遍历多维数组（递归）function bianli(x){x.forEach( function(o) {if ( o instanceof Array ) {bianli(o);} else {console.log("o=" + o);}});}      bianli(数组名);查找  var n = c.indexOf(2); 找到n=下标，找不到n=-1删除   先找，找到则删var n = c.indexOf(2);if ( n != -1 ){c.splice(n, 1); // 从n位置开始去掉1个元素}

字符串操作：

测长   length
拼接  concat(内容) 或 +
截取  charAt(i) 取单个     substring(n, end)  从n位置开始取到end位置，含n，不含end
替换  ss.replace("cde", "hello"); 注意：产生的新串在内存中，ss没变
查找  indexOf(要找的, 从n位置开始);

随机数

var n = parseInt(Math.random()*10); // 0~9之间整数

日期时间

var d = new Date();var y = d.getYear() + 1900;var m = d.getMonth() + 1;var day = d.getDate();var hh = d.getHours();var mm = d.getMinutes();var ss = d.getSeconds();飘移的日历

元素禁用:  disabled=true元素禁用后，表单提交时不带走它。var o = setTimeout(fun, ms) 只做一次。相当于延迟ms时间后，做一次。
clearTimeout(o);

三、使用JS控制元素

JS控制网页元素的：
显示和隐藏
CSS样式（位置，大小，颜色，边框，透明度）
值和内容
选择页面任何元素猜数字游戏JS版实现。

JavaScript基本语法（三）

isNaN(num) 测试num是否不是一个数字，不是数字返回true，是数字返falseJS的函数参数，可以不传，也可以传多个。

一、飘移的日历特效

知识要点：

DIV的显示控制（位置和尺寸）
获取当前日期时间
定时器应用

设计方法：

将日历定义为一个工厂函数，拥有一系列属性，方法。

事件冒泡: 两个物体重叠在一起时，内层的物体发生的事件，会传播到外层。
阻止事件冒泡：return false;

二、H5的画布

字、线、形状，图片，
按键事件：keyup  keydownonclick       鼠标单击
ondblclick  鼠标双击onmouseenter    鼠标进入
onmouseover     鼠标经过
onmouseleave    鼠标移出
onmouseout      鼠标移出范围内
onmousedown     鼠标按下键
onmouseup       鼠标松开键onkeyup            键盘松开一个键时
onkeydown       键盘按下一个键时onchange        录入框值发生改变或下拉框的选中值发生改变时onfocus            当获取焦点时触发
onblur          当失去焦点时触发onload          当对象加载完成时
onunload        当窗口被关掉

声音：

var a = new Audio();a.src = "js/die.wav";function bofang(){a.play();}

枚举类型:

var xxx = {key : value,key : value
};key 可以是数字或字母，如果是数字，则 xxx[数字]，如果是字母，则xxx.key访问

JavaScript基本语法（四）

isNaN(num) 测试num是否不是一个数字，不是数字返回true，是数字返falseJS的函数参数，可以不传，也可以传多个。

一、省市级联

下拉框结构：

<option value="guangdong">广东</option>var op = new Option(text, value);sheng.addEventListener("change", function(){var v = this.value;var i = this.selectedIndex; // 选中的那一项的索引alert("你选择的省=" + v + "  index=" + i);
});

清除：shi.options.length = 0;
添加：shi.options.add(op);

二、使用超链接来完成GET请求，并带参数

var url = "www.jsp?username=admin&";
url += "sheng=" + sheng.value + "&shi=" + shi.value;
console.log("url=" + url);
document.location = url;

三、H5的canvas

画布标签<canvas>

画字：

不管画什么，先必须得到画布对象的画笔对象。
can.getContext("2d");g.font = "30px 黑体";
g.fillStyle = "#cda333";
g.fillText("Hello World!", 100, 50);

画线条：

g.strokeStyle = "#ff0000";
g.beginPath();
g.moveTo(100, 100);
g.lineTo(300,100);
g.stroke();

画弧:

g.strokeStyle = "#ff0000";
g.beginPath();
g.lineWidth = 10;
console.log(Math.PI);
g.arc(280, 200, 100, 0, Math.PI * 1.5, false);
// 前2个参数是圆心，第3个是半径，第4个是起始角度，第5个是终止角度
// 一个PI为180度
g.stroke();

填充一块矩形：

g.fillRect(0, 0, can.width, can.height);// 填充一块矩形

画图片：

g.drawImage(img, x, y, w, h);    在x,y位置，画w宽，h高的图片
注意，图片加载需要时间，所以一般写在图片的onload事件中。

js迭代Array,Set,Map

Array可以使用下标，Map和Set不能使用下标，ES6引入了iterable类型，Array,Map,Set都属于iterable类型，它们可以使用for…of循环来遍历：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Arrayalert(x);
}
for (var x of s) { // 遍历Setalert(x);
}
for (var x of m) { // 遍历Mapalert(x[0] + '=' + x[1]);
}

for…of与for…in的区别：for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。
当我们手动给Array对象添加了额外的属性后，for … in循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {alert(x); // '0', '1', '2', 'name'
}var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {alert(x); // 'A', 'B', 'C'
}

更好的方式：iterable内置的forEach方法：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {// element: 指向当前元素的值// index: 指向当前索引// array: 指向Array对象本身alert(element);//'A','B','C'
});var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {alert("参数1="+element+",参数2="+sameElement);
});
//参数1=A,参数2=A
//参数1=B,参数2=B
//参数1=C,参数2=Cvar m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {alert("参数1="+value+",参数2="+key);
});
//参数1=x,参数2=1
//参数1=y,参数2=2
//参数1=z,参数2=3