JavaScript需知
一、web网页标准
1.- **`HTML`**是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
2.- **`CSS`**是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
3.- **javascript**是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）
二、JavaScript的概述
1. JavaScript主要用于HTML的页面，嵌入在HTML的源码中。
2. JavaScript是因特网上最流行的脚本语言，它存在于全世界所有的Web浏览器中，能够增强用户与Web站点和Web应用程序之间的交互。
3. **JS是弱类型语言**，没有类型声明，它的变量不必具有一个明确的类型。
4. **JS是脚本语言**。换句话说，能够用来编程的并且直接执行源代码的语言，就是脚本语言。
5. JS也是解释性的语言。何为解释性语言？是在运行的时候将程序直接翻译成机器语言。
6. JS是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言，可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
7. HTML5的出现更是突出了JavaScript的重要性，例如HTML5的绘图支持、本地存储、离线应用、客户端通信等，都大量使用了JavaScript。
三、JavaScript的历史
- JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发（这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。）。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。
四、JavaScript能干什么
1. 常见的网页效果【表单验证，轮播图......】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
五、JavaScript的基本使用
在 HTML 中使用 JS 可以用以下几种方式实现：
- 行内式
- 内嵌式
- 外部引用 js 文件
行内式：可以在 html 元素中直接用使用 js 语句，但是一般都是调用函数或简短的语句。
<input type="button" value="Click Me!" οnclick="alert('Hellow World')">
内嵌式：
<script> alert('Hello World'); </script>
外部js文件，最常见的方式：
<script src="my.js"></script>
六、js事件
onclick // 鼠标点击左键
ondbclick // 鼠标双击
oncontextmenu // 鼠标点击右键
mousedown // 鼠标按键被按下
mouseup // 松开鼠标按键
onselect // 文本被选中
oncopy // 元素内容被复制
onmouseenter // 鼠标移动到事件监听的元素内（不区分子元素）
onmouseover // 鼠标移动到有事件监听的元素或它的子元素内
onmouseleave // 鼠标离开元素外（不区分子元素）
onmouseout // 鼠标离开元素，或它的子元素外
onfocus // 获得鼠标焦点(点击input输入框)
onblur // 失去鼠标焦点（进入其他input输入框）
onmousemove // 鼠标移动
onmouseup // 鼠标弹起
onmousedown // 鼠标按下
七、查找HTML DOM元素
getElementById()
This is new Element
// 页面文档从上往下加载，需要将 script 代码写在下边
var dom = document.getElementById('new');
// 显示id为new的对象中内容
console.log(dom);
// 可以打印我们返回的元素对象，更好的查看里边的属性和方法
console.dir(dom);
八、变量的使用
1.声明变量 var a; a=10;
2.初始化变量 var a = 10; var name = ' momo '；
3.变量的命名规范
由字母、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for,while,this,name
区分大小写
变量名必须有意义
小驼峰命名法，如：myName
建议不要用$作为变量名
4.查看变量
alert(变量名) // 弹出框显示
console.log(变量名) // 控制台显示
document.write(变量名) // HTML 页面上显示
7.数据类型
1.数字类型 [ number ] NaN 是非数字
2.字符串型[string] var str= '这是个字符串';
3.布尔型 [ Boolean ] 只有两值 true 或 false ;
4.undefined 未定义 null 空值
5.数组和对象
8.循环结构
for循环 例:0加到100 var sum =0;for(var i = 1; i<=100; i++){sum+=i;}
while循环 例:用while0加到100 var num=1; while(num<=100){console.log(num);num++;}
do while 循环 do {// 循环体 } while(条件表达式)
break 关键字用于直接跳出循环
continue 关键字用于立即跳出本次循环，进入下一次循环
九、数组
1.创建数组
var arr = new Array(); var arr = []; var arr = [1, 2, 3, 'Pink', True];
2.访问数组元素
var arr1 = ['张三', '李四', '王五', '淑芬']; // 索引号： 0 1 2 3 console.log(arr1); // 输出整个数组所有元素 console.log(arr1[0]); // 使用 数组名[索引号] 获取数组数组内指定元素的值
3.遍历数组
arr= ['a', 'b', 'c', 'd']; for (var i = 0; i <= 3; i++) { console.log(arr[i]); }
4.数组长度属性 length
arr= ['a', 'b', 'c', 'd']; console.log(arr.length); // 输出4
利用 length 添加新的数组元素
arr = ["a", "b", "c", "d"]; arr[arr.length] = 'e'; console.log(arr[arr.length - 1]); //输出结果e
10.函数
1.函数定义
function 函数名( ) { //JavaScript语句; }
2.函数的调用
标签元素.onclick = function(){ //js语句，函数要执行的内容 }
3.带参函数
function 函数名(参数1，参数2) { //JavaScript语句; } 事件名＝"函数名( 参数1，参数2 )"
4.匿名函数(没有函数名)
var fn = function(参数1，参数2) { //JavaScript语句; } 事件名＝"fn( 参数1，参数2 )" ;
5.自执行函数(无需调用自动执行)
( function() { //JavaScript语句; }() )
11.返回值
函数通过return将值返回调用它的地方
function fn(){ return '你调用我了，我是fn'; } var str = fn();//调用fn()得到值：你调用我了，我是fn，同时赋值给str console.log(str);//你调用我了，我是fn
