JS 基础（零）：js概念、js使用、变量与常量、数据类型、运算符、语句、函数、类和继承、DOM、数组、字符串、正则表达式、Math、时间、BOM（定时器、history、location等）

一、js概念；js使用；变量与常量；数据类型；运算符；语句

1.1 概念

js:是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等

1.1.1 JavaScript是一门独立的语言

JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
JavaScript是一门独立的语言。
JavaScript是一种脚本语言，不需要编译，是解释运行的语言。
JavaScript运行需要环境，最常见的运行环境就是浏览器，现代主流的浏览器都内置了JS引擎，可以运行JavaScript代码。JS也有服务器端运行环境，我们不做讨论（Node.js、GoogleV8引擎…）。

1.1.2 JS的特点

解释运行，没有编译过程
基于对象
弱类型

1.1.3 JavaScript不得不说的历史

和JAVA的关系：语法十分相似，但其实毫无关系。
1995年5月，Netscape，LiveScript
1995年12月，改名为JavaScript
1996年8月，微软，Jscript
1997-1999年，ECMA，ECMAScript，基于已有的JavaScript和Jscript，提出了标准的Script语法规则，JavaScript和Jscript都遵循这套标准。
1999-以后，ECMAScript不断的更新

1.1.4 JS的优点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

1.2 js使用:元素绑定事件

事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数
常用事件：onclick (单击事件)
语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理

• 通过标签的onclick属性点击后触发所绑定的事件,用法为onclick=事件("函数名()")
  常用事件函数：onsole.log(): 控制台输出 alert(): 弹框 document.write() 输出，重新渲染页面
• 在script标签(type=“text/javascript”)内部编写逻辑操作页面元素节点
  <script> type="text/javascript">alert("网页警告框");</script>
• 通过script标签的src属性外联js文件，如src=“demo.js”
  <script src="index.js"></script>

1.3 变量与常量

• var声明变量；const声明常量；输入函数prompt() 保留小数toFixed()
  <script>var a=100; var b,c ;b=10,c=20 ; </script>
• JS中有数据类型，但是JS的引用是不区分类型的，所以称JS为弱类型，即，一个引用可以先指向数字类型，后再指向字符类型，还可以再指向对象类型。

1.4 数据类型

1.4.1 类型检测函数typeof(),

eg.typeof(null)特殊空对象

1.4.2 分类

• JS基本类型一共有五种
  Number、String、Boolean、undefined、null

• 数值类型中有如下几个特殊值
  JS不区分整形和浮点型，JS中的所有数值类型底层实现都是浮点型。
  Infinity 无穷大
  -Infinity 负无穷大
  NaN 非数字，非数字非常特殊，和任何值都不行等，包括本身，即NaN==NaN的值为false。可以通过isNaN()判断某值是否为NaN。
  
  数值类型是基本数据类型，但JS本身提供了对应的包装对象Number，具有和数值处理相关的属性和方法。
  Number提供的属性：
  Number.MAX_VALUE 可表示的最大数字
  Number.MIN_VALUE 可表示的最小数字
  Number.NaN 非数字值
  Number.POSITIVE_INFINITY 正无穷大
  Number.NEGATIVE_INFINITY 负无穷大

• JS中提供了字符串的包装对象String，提供了字符串处理相关的属性和方法。
  String对象提供的属性：length：字符串中字符数
  String 对象提供的方法：

• JS中提供了布尔类型的包装对象Boolean，提供了布尔类型处理的相关属性和方法。

• Undefined类型只有一个值就是undefined，表示变量未定义，当一个变量未初始化时，值为undefined。

• Null只有一个值就是null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

1.4.3 数据类型转换

• 强制转换:
  Number(null、boolean、undefined)分别返回0,1或0，nan
  .tostring()
parseFloat(param):从数据中解析整数值(过程：如果参数为非字符串类型,会自动转成字符串；从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果);
  parseint(param):提取number值，包含整数和小数部分
• 隐式转换：当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算；其他情况下，一律将操作数转number进行数学运算
• 数字：可以转为对应字符串 0转为false其他数字转为true 转为对应的Number包装对象
  字符串：空字符串转换为0，数字字符串转换为对应数字，其他字符串转换为NaN，空字符串转为false，其他字符串为true，转为对应的String包装对象。
  布尔类型：转为对应字符串，ture转为1false转为0，转为对应的Boolean包装对象。
  对象：转为字符串，如果为null则为“null”，如果对象为null则转为false，否则转为true，
  

1.5 运算符

Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
var x = 3120/1000*1000; x = 3120;而不是3000。
var x = 2.4+3.6 ; x = 6;而不是6.0
var x = “12” + 1; x = “121”;
x = “12” – 1 ; x = 11;

1.5.1 赋值；算数；复合

1.5.2 自增/自减；

                                      <ul>
                                             <li><b>在单独与变量结合时，放前和放后没有区别</b>
                                             <li><b>和其他运算符结合使用：如果是前缀：先++/-- 再进行复制或者其他运算；如果是后缀：先结合其他运算符，在进行 ++/--</b>
                                      </ul>

1.5.3 关系与比较运算符

相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等
===(全等) !==(不全等)：用来判断表达式之间的关系,结果永远是布尔值 true/false

• 使用：
  
• 字符串与字符串之间的比较:依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
  
• 其他情况: 一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
  
• 比较运算符：比较编码和数字大小,null在等值比较时不转数字0，变成NaN参与比较运算，结果永远是false
  
• 相等会进行隐氏转换比较值，全等会比较类型;null和undefined相等 但是 null和undefined不全等

1.5.4 逻辑运算符&&；||；!

1.5.5 三目运算符：a>b?console.log(‘a比b大’):console.log(‘b比a大’)

1.5.6 实例：自增运算符

<script>
    var a = 10 ;
    document.write("自增运算符和其他运算符结合使用,a=10,经过a++ + ++a + a++后输出：")
    // console.log(a++ + ++a + a++)
    document.write(a++ + ++a + a++)
</script>

1.5.7 标记的使用

console.time(‘标记’); // 开始标记
console.timeEnd(‘标记’); // 结束标记

console.log("log1"); // 打印日志
console.info("info1"); // 打印消息
// console.warn(1); // 打印警告
// console.error(1); // 打印错误

// 程序耗时统计
// 开始计时和结束计时的字符串保持一致
console.time('for'); // 计时开始
for(var i = 1; i>=10000; i++){
   
       continue;
}
console.timeEnd('for'); // 计时结束

1.6 语句

• 语句
  1. if语句：if(){};if(){}else{};if(){}else if(){}
  2. switch语句：switch(value){case 值1:事件1;break; case 值2:事件2;break;;default:事件3//所有case匹配失败后默认执行的语句}value与值1匹配全等时才执行事件
  3. while语句while(循环条件){循环体；更新循环变量};do{}while();
  4. for语句:for(定义循环变量;循环条件;更新循环变量){循环体}
  5. for while do-while 那个执行效率高？如何检测？
     

• • var x = 3;
    if(x==4)//可以进行比较运算。

    if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
    因为在Js中0或者null就是false，
    非0或者非null就是true（通常用1表示）。
    所以if(x=4)结果是true；

  <!--  for while do-while 那个执行效率高？如何检测？ -->
  
  
  <!-- if;swich -->
  <li class="example"><tag>实例1：if语句判断用户是否可以访问：<br></tag>
        <label for="if">请输入你的年龄：</label> <input type="text" name="" id="if">
        <button >提交</button>
  </li> 
  
  <li class="example"><tag>实例2：switch语句判断用户是否可以访问：<br></tag>
        <label for="switch">请输入你的年龄：</label> <input type="text" name="" id="switch">
        <button >提交</button>
  </li> 
  <li class="example"><tag>实例3：循环语句的应用：<br></tag>
        <label for="for">请输入i：</label><input type="text" name="" id="for">
        <button>提交</button>
  </li> 
  <script> 
  	var mytag = $(".example")      
  	function judge(regobj,element){
             
  	  // for(var i=0;i<mytag.length;i++){
         
  	    //        console.log(mytag[i].innerText)
  	    //        regob.test(mytag[i].innerText)? mytag[i].append(htmlobj):console.log("匹配失败")
  	    // }
  	
  	    // $(mytag).each(function(i,e){
         
  	    //        console.log(i,e)
  	    //        regobj.test(e.innerText)? e.append(element):console.log("匹配失败")                     
  	    // })
  	
  	    $.each(mytag,function(i,d){
         
  	           // console.log(i,d)
  	           regobj.test(d.innerText)? d.append(element):console.log("匹配失败")
  	    })
  	}
  	
  
  // 实例1      
           
  // 添加对象             
      var regobj1 = new RegExp("实例8.1：if语句判断用户是否可以访问：","ig")
      // var htmlobj1 = $('<span style="text-indent:4px;color:red">if语句</span>')
      // var htmlobj2 = $('<span style="text-indent:4px;color:red">青少年访问模式</span>')         
      // $("#if+button").click(function(){
         
      //        var ifage=$("#if").val()
      //        // alert(ifage)
      //        if (ifage>=18)  judge(regobj1,htmlobj1[0]);         
      //        else   judge(regobj1,htmlobj2[0]);               
      // })     
      var span = $("<span></span>")
      var jsonobj = {
         "text-indent":"4px","color":"red"} 
      $("#if+button").click(function(){
         
  		var ifage=$("#if").val()       
  		if (ifage>=18) judge(regobj1,span.html('if语句').css(jsonobj)[0])
  		else  judge(regobj1,span.html('青少年访问模式').css(jsonobj)[0])  
      })
  
  	var regobj2 = new RegExp("实例8.2：switch语句判断用户是否可以访问：","ig")
  	$("#switch+button").click(function(){
         
  	var switchage=Number($("#switch").val()) 
  	 // alert(switchage)
  	switch(switchage){
                     
  		case 26:judge(regobj2,span.html('switch语句').css(jsonobj)[0]); break;
  		case 17:judge(regobj2,span.html('青少年不可访问').css(jsonobj)[0]); break;
  		default:judge(regobj2,span.html('switch语句').css(jsonobj)[0]);
  	 }