本人在JavaScript语言上有着独特的见解，最近发现JavaScript有点火，闲来无事给大家写写关于这个脚本语言的教程，前面都是些关于JavaScript的导读，为了节约时间可以直接看代码教学，有任何不足之处还请大家多多海涵，欢迎后台私信一起讨论。
一、入门导读
1.1 web 网页标准
- HTML:是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
- CSS:是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
- JavaScript:是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）
1.2 javascript简单概述
JavaScript（通常缩写为JS）是一种高级的解释型的编程语言，是一门基于原型、函数的先行语言。同时支持面向对象编程，命令式编程，以及函数编程。它提供语法来操控文本、数组、日期以及正则表达式等。它已经由ECMA（欧洲电脑制造商协会）ECMAScript通过实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
上面提到了脚本语言，那何为脚本语言？
脚本语言就是能够用来编程的并且直接执行源代码的语言，就是脚本语言。而且值得注意的是JS是弱类语言，没有类型声明，它的变量不必具有一个明确的类型。
1.3 javascript的历史
网景公司的创始人马克.安德森认为HTML需要一种让网页设计师和兼职程序员可以很容易地使用它来组装图片和插件之类的组件，且代码可以直接编写在网页标记中。
此时，34岁的系统程序员Brendan Eich（布兰登.艾克）登场了。1995年4月，网景公司录用了他。
Brendan Eich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。Brendan Eich本人也是这样想的，以为进入新公司后，会主要与Scheme语言打交道。
仅仅一个月之后，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。
Brendan Eich被指定为这种"简化版Java语言"的设计师。
但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。所以，Javascript语言实际上是两种语言风格的混合产物———（简化的）函数式编程+（简化的）面向对象编程。这是由Brendan Eich（函数式编程）与网景公司（面向对象编程）共同决定的。
最初命名为Mocha，1995年9月在Netscape Navigator 2.0的Beta版中改名为LiveScript，同年12月，Netscape Navigator 2.0 Beta 3中部署时被重命名为JavaScript，当时网景公司与昇阳电脑公司组成的开发联盟为了让这门语言搭上Java这个编程语言“热词”，因此将其临时改名为JavaScript，日后这成为大众对这门语言有诸多误解的原因之一。
1.4 JavaScript的组成
JavaScript分别由三部分组成，分别是ECMAScript、BOM、DMO；
- ECMAScript: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
- BOM (Browser Object Model): 浏览器对象模型
- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。
- 比如： 弹出框、浏览器跳转、获取分辨率等
- DOM (Document Object Model): 文档对象模型
- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。
- 比如： 增加个 div，减少个 div，给div 换个位置等
总结：JS 就是通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果
二、javascript基本使用
2.1 JS的嵌入方式
- 行内式
<input type="button" value="Click Me!" onclick="alert('Hellow World')"> //行内式，可以在 html 元素中直接用使用 js 语句，但是一般都是调用函数或简短的语句。
- 内嵌式
<script> alert('Hello World'); </script> //内嵌式，一般用于实现比较小的功能，代码不长的情况
- 外部引用JS文件
<script src="my.js"></script> //外部JS文件，最常见的方式 //注意外部引入的JS文件中<script>标签内写的代码无效
2.2 JS注释
//在JS中注释方法与java相同，分别是单行注释与多行注释 // 单行注释 /* 多行注释 */
2.3 输出语句的使用
alert("hello world！"); // 浏览器弹出框 console.log("hello world！"); // 浏览器控制台打印输出信息 prompt("hello world！"); // 浏览器弹出输入框，用户可以输入 confirm();//消息确认框 document.write("hello world！");//在网页中输出内容，常用于向网页输出一段文字
2.4 JS中的事件
onclick // 鼠标点击左键 ondbclick // 鼠标双击 oncontextmenu // 鼠标点击右键 mousedown // 鼠标按键被按下 mouseup // 松开鼠标按键 onselect // 文本被选中 oncopy // 元素内容被复制 onmouseenter // 鼠标移动到事件监听的元素内（不区分子元素） onmouseover // 鼠标移动到有事件监听的元素或它的子元素内 onmouseleave // 鼠标离开元素外（不区分子元素） onmouseout // 鼠标离开元素，或它的子元素外 onfocus // 获得鼠标焦点(点击input输入框) onblur // 失去鼠标焦点（进入其他input输入框） onmousemove // 鼠标移动 onmouseup // 鼠标弹起 onmousedown // 鼠标按下
//例如点击事件的用法 <button onclick = "alert('123')">点我</button>//点击后弹窗显示123 //还可以放入自己所写的函数例如 <button onclick = "a();">点我</button> a()====>函数 function a(){ //js代码 }
2.5 JS 中的变量定义
变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。Js 是一种弱类型或者说动态语言，不用提前声明变量的类型，变量的类型会自动判断。即使赋值之后，变量的类型根据重新赋值的数据类型同样进行改变。统一用的是“var”,赋值给var的是什么类型var就是什么类型。
//例如： var age = 12;//number数值型 var str1 = '这是个字符串';//string字符串型 var flag=true;//Boolean布尔型 //true运算中代表1 false代表2 //null空值型 console.log(null+ 'pp'); // 会拼接字符串 nullpp console.log(null + true); // 会输出 1 var a; console.log(a);//undefined未定义,一个声明后没有被赋值的变量会有一个默认值 undefined
2.5.1 undefiundefined 和 null 的区别
只设置了null作为表示"无"的值。根据C语言的传统，null被设计成可以自动转为0。JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined和null在if语句中，都会被自动转为false
2.5.2变量名的规范
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for,while,this,name
- 区分大小写
- 变量名必须有意义
- 小驼峰命名法，如：myName
- 建议不要用$作为变量名（后期会讲解，“$"与jQuery有关）
2.5.3 查看类型与转换
虽然var可以接收所有类型那怎么知道接收的是什么类型呢？
可以通过typeof()查看数据类型
var num = 1; console.log(typeof num);//控制台打印的就是number
转换类型
//转换成字符串 var num = 1; alert(num.toString()); // 无法用 .toString() 方法转换 undefined 和 null alert(String(num)); // 可以转换 undefined 和 null //转换成数值型 parseInt(num); parseInt('3.14'); // 取整为3 parseInt('90px'); // 去掉单位（只取int遇到字符串自动中断） parseInt('rem120px') // 字符串转换后变为 NaN parseInt(undefined) // undefined 转换后变为 NaN parseInt(null) // 转换后为0 parseInt(true) // 布尔型转换后变为 1 或 0 //转换成浮点型 parseFloat(3); // 还是输出3，不会自带小数点，3.0也是一样
2.6 选择结构
2.6.1 if 单分支与双分支和多分支
if (条件表达式) { // 执行语句 }//单分支 if (条件表达式) { // 执行语句 } else { // 执行语句 }//双分支 if (条件表达式1) { // 执行语句1 } else if (条件表达式2) { // 执行语句2 } else { // 执行语句3 }//多分支
2.6.2 三元运算符
条件表达式 ? 表达式1 : 表达式2 //输入一个 0~59 数字，如果小于10，则在数字前边补0 var time = prompt('请输入一个0~59的数字'); console.log(time<10 ? '0' + time : time);
2.6.3 Switch结构
switch(表达式){ case value1: // 执行语句1 break; case value2: // 执行语句2 break; default: // 如果无条件满足，最终执行语句 }
2.7 循环结构
2.7.1 for 循环
for(初始化变量; 条件表达式; 操作表达式){ // 循环体 } //例如输出一百句你好 for(var i = 1; i<=100; i++){ console.log('你好'); }
2.7.2 while 循环
while(条件表达式){ // 循环体 } //例如从1加到100 var num=1; while(num<=100){ console.log(num); num++; }
2.7.3 do while循环
do { // 循环体 } while(条件表达式) //和 while 循环比，do while 循环至少需要执行一次，然后进行判断是否终止循环。
2.8 函数
// 声明函数 function 函数名(){ // 函数内部代码，又称为函数体 } // 调用函数，直接调用 函数名(); //或者在事件后面调用 <button onclick = "函数名();">点我</button>
2.9案例
例：将1~100 累加封装成函数
function sum(){ var sum = 0; for(var i=1; i<=100; i++){ sum = sum+i; } console.log(sum); } sum();
例：打印三角形
<script > var wh=prompt("请输入需要打印行数"); for(var xw=1;xw<=wh;xw++){ for(var j=0;j<xw;j++){ document.write(" "+"*"+" "); } document.write("<br>"); } </script>
例：输入时间返回上/下午
<script> var wh=prompt("请输入当前的小时数：",""); switch(wh){ case "12": case "13": case "14": case "15": case "16": case "17": case "18": document.write("<h2>下午好!❤</h2>"); break; case "19": case "20": case "21": case "22": case "23": document.write("<h2>晚上好!❤</h2>"); break; default: document.write("<h2>❤早上好❤</h2>"); } </script>
