JavaScript-基础

day02-JavaScript

1、JavaScript简介
 （1）概念：是一门基于对象和事件驱动的语言，应用于客户端。
         基于对象：js里面提供好了一些对象，直接使用
              事件驱动：每次滑动鼠标，变换一张图片
              客户端：指的是浏览器

 （2）JavaScript特点
    1：交互性
    2：安全性 ： JavaScript不能访问本地硬盘里面的文件
    3：跨平台性： 安装支持JavaScript的浏览器都可运行JavaScript
 
 （3）Java和JavaScript区别（雷锋和雷峰塔）
   1，java是sun公司（现在是oracle）；JavaScript是网景公司
   2，java是面向对象的语言，javas是基于对象的语言
   3，java跨平台需要依靠虚拟机实现，JavaScript跨平台只需要浏览器可以运行
   4，JavaScript弱类型语言，java是强类型的语言（JavaScript内定义变量只用关键字var）
   5，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行

 （4）JavaScript由三部分组成
   1：ECMAScript（由ECMA组织制定语句，语法）
   2：BOM （broswer object model）浏览器对象模型
   3：DOM （document object model）文档对象模型

2、js和html的结合方式（两种）
 1：使用html中的标签 <script type="text/javascript"> js代码 </script>
 例：<script type="text/javascript">
   alert("aaa");
     </script>
  
 2：使用html的标签，引入外部的js文件【开发常用方式】
  <script type="text/javascript" src="js文件的路径"></script>
 注意一：script标签内引入外部js文件后，标签内的代码失效
          例：<script type="text/javascript" src="1.js">
   alert("aaa");  //引入外部js文件1.js后，此处代码不会执行
         </script>
 注意二：结束script标签 <script>，不可在开始标签内结束
 

3、js的变量声明和数据类型
 （1）js内声明变量（只使用关键字var）   var a = 10;
 （2）js的原始类型（5个）
    1，string：字符串类型  var a = "abc";
    2，number：数字类型  var b = 10;
    3，boolean：布尔类型（true false） var c = true;
    4，null：（null是特殊的引用类型，表引用对象为空）var date = null;
    5，undefined：（定义一个变量，但未赋值） var a;
 （3）typeof(变量的名称)  查看当前变量的类型   alert(typeof(a));
      （4）js的注释有两种： //单行注释  /*多行注释*/

4、js的引用类型和类型转换
      一.引用对象
 1. Object 对象：所有对象都由这个对象继承而来
 2. Boolean 对象：Boolean 原始类型的引用类型
 3. Number 对象： Number 原始类型的引用类型

 二.类型转换
  1.转换成字符串
  2.转换成数字：parseInt() 和 parseFloat()
  3.强制类型转换
      Boolean(value) - 把给定的值转换成 Boolean 型；
      Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
      String(value) - 把给定的值转换成字符串；

5、js的语句
 （1）if 语句
 var a = 10;
 if(a==10) { alert("10");} else { alert("other");}  

 （2）switch语句
 var b = 5;
 switch(b) {case 4: alert("4"); break;
       case 5: alert("5"); break;
       default: alert("other");}

 （3）while循环语句
 var i = 4;
 while(i<6) { alert(i); i++; }

 （4）for循环语句
 for(var i=0;i<3;i++) { alert(i);}

 （5）使用document.write()向页面输出内容
 1.可以向页面输出变量     例：document.write(i);
 2.可以向页面直接输出html代码  例：document.write("<br/>");
   
6、练习：向页面输出99乘法表
 （1）document.write可以直接向页面输出html代码
 （2）html中的属性和属性值之间可以使用双引号，也可以使用单引号
 例：
 document.write("<table border='1' bordercolor='blue'>");
 for(var i=1;i<=9;i++) {
  document.write("<tr>");
  for(var j=1;j<=i;j++) {
   document.write("<td>");
   document.write(j+"*"+i+"="+i*j);
   document.write("</td>");
  }
  //document.write("<br/>");
  document.write("</tr>");
 }
 document.write("</table>");

7、js的运算符
 （1）算术运算符   + - * /....
 （2）赋值运算符  +=  
 （3）比较运算符  ==  
 （4）逻辑运算符  &&  ||  !
 （5）js的运算符和java不同点：
    1.js里面不区分整数和小数   如：var a = 123/1000*1000,（js结果为123，java结果为0）
         2：字符串的相加和相减操作（js中字符串相加是将字符串拼接，但字符串相减是算术相减运算）
            若字符串不是数字进行算术相减提示NaN
  例： var b = "10";   document.write(b+1); //js结果101   document.write(b-1); //js结果9
        var c = "a";    document.write(c-1); //NaN
    3：boolean类型相加和相减的操作（若布尔值为true，视为1运算；布尔值为false，视为0运算）
  例： var flag = true;    document.write(flag+1); //js结果2 
            var flag1 = false;  document.write(flag1+1); //js结果1
    4：==和===区别（js中==仅比较值   ===既比较值又比较类型）
  例：var mm = "10";  if(mm==="10") { alert("10"); } else { alert("other"); }

8、js的数组（用来存多个值）
 （1）.定义数组的四种方式
    1：var arr1 = [];
    2：var arr2 = ["10",10,true]; //可以写任意的数据类型
    3：var arr3 = new Array(3); //定义数组名arr3，数组长度是3
    4：var arr4 = new Array(4,5,6);//定义数组名称arr4，数组元素为4 5 6
 （2）数组的长度length（在js里面数组的长度是可变的，未赋值时默认空串）
 （3）遍历数组
        例: for(var i=0;i<arr3.length;i++) {
             var a = arr3[i];
             document.write(a);
             document.write("<br/>");
            }

9、js的string对象
 （1）创建字符串： var a = "abc"; var b = new String("bb");
 （2）属性 length 字符串的长度
 （3）方法
 第一类：与html相关的方法（设置字符串的样式的方法）
   bold() 粗体显示字符串       例：document.write(a.bold());
   fontcolor() 设置字符串颜色  例：document.write(a.fontcolor("red"));
   fontsize() 设置字符串大小   例：document.write(a.fontsize(7));
        link() 将字符串显示为链接   例：document.write(a.link("99乘法表.html"));

 第二类：与java相似的方法（在java里面也有类似的方法）
 charAt() 取索引处字符，不存在返回""  例：var str = "abcdefg"; document.write(str.charAt(1));
      concat() 连接字符串                 例：document.write(str.concat(str1));
      indexOf() 获取字符索引，没有返回-1   例：var str2 = "ABCD";document.write(str2.indexOf("R"));
      split() 把字符串分割为字符串数组     例：var arr="a-b-c".split("-");document.write(arr.length);
 substr() 从起始索引号提取字符串中指定数目的字符
 substring() 提取字符串中两个指定的索引号之间的字符
 例：var str4 = "MARYJACKLUCY";  document.write(str4.substr(2,3));    //RYJ  3为长度
                                 document.write(str4.substring(2,3)); //R    索引[2,3)

10、js的Array对象
 （1）创建数组
 （2）属性length 设置或返回数组中元素的数目
     例：var arr1 = new Array(4,5,6);   document.write(arr1.length);
 （3）方法
 concat()：连接数组   例：var arr2 = [6,7,8];  document.write(arr1.concat(arr2));
 join()：指定字符分割数组
     例：  var arr = new Array(3);
           arr[0] = "mary";
           arr[1] = "jack";
           arr[2] = "lucy";
           document.write(arr.join("-"));
  pop() 删除并返回数组的最后一个元素     
          例：var arr4 = ["aa","bb"];document.write("return: "+arr4.pop());
  push() 数组末尾添加元素并返回新的长度  
          例: var arr5 = ["zhang","lisi"]; document.write("return:"+arr5.push("lucy"));
         向数组里面使用push方法添加一个数组
     例：var arr6 = ["AAA","BBB"];  var arr7 = ["CCC","DDD"];
         document.write("return: "+arr6.push(arr7));
  reverse() 颠倒数组中元素的顺序
     例：var arr8 = ["zhaoliu","wanger","niuqi"]; document.write(arr8.reverse());

11、js的Math对象
 （1）进行数学运算（使用Math.方法名称进行调用）
 （2）方法
 ceil(x) 对一个数上舍入。
 floor(x) 对一个数进行下舍入。
 round(x) 对一个数四舍五入
 random() 返回 [0，1)间的随机数
   例：var a = 10.2;
       document.write(Math.ceil(a)); //11
       document.write(Math.floor(a)); //10
       document.write(Math.round(a)); //10
       document.write(Math.random());
 document.write(Math.floor(Math.random()*10));//随机生成0-9的整数

12、js的Date对象（进行日期操作的对象）
 （1）使用Date对象  new Date();
 （2）方法
 toLocaleString() 根据本地时间格式把 Date对象转为字符串
   例： var date = new Date();  
             document.write(date.toLocaleString()); //得到当前的时间
 getFullYear()  从Date对象以四位数字返回年份
   例： document.write(date.getFullYear());
 getMonth()  从Date对象返回月份 (0 ~ 11)
   例： document.write(date.getMonth()+1);
 getDay()  从Date对象返回星期数(0 ~ 6) 星期日返回的是0
   例： document.write(date.getDay())
 getDate()  从Date对象返回月份天数(1 ~ 31)
 getHours()  得到当前的小时   例： document.write(date.getHours());
      getMinutes() 得到当前的分    例：document.write(date.getMinutes());
 getSeconds()  得到当前的秒   例：document.write(date.getSeconds());
 getTime()    得到1970年1月1日至今的毫秒数

13、js的RegRxp对象（正则表达式：规定字符串出现的规范）
  （3）使用：new RegExp("正则表达式")
    （4）方法test()   检索字符串中是否存在指定的值。
   例： var reg = new RegExp("[a]");      //创建正则表达式对象
         document.write(reg.test("lisi")); //使用正则匹配字符串

14、js的bom对象 
  （1）script标签放置位置：建议放到</body>后面
  原因：html是从上到下进行解析的，若需在head里面就获取输入项的值，因为还未解析到输入项，所以得不到值。

  （2）bom:浏览器对象模型
    1：navigator   浏览器的信息
    2：screen    屏幕的信息
    3: history   访问地址的历史信息
    4: location   利用href设置或返回完整的URL
    5: window（窗口对象，是顶层对象）
   方法：
  setInterval("执行的js代码（js的方法）",毫秒数) 在指定的时间内，重复执行js代码
  例：setInterval("alert('setinterval');",3000);
  setTimeout("执行的js代码（js的方法）",毫秒数) 在指定的时间之后执行js代码，仅执行一次
  例：setTimeout("alert('settimeout');",3000);
  clearInterval(id) 取消由setInterval()设置的 timeout
  clearTimeout(id)  取消由setTimeout()设置的 timeout

15、js的全局变量和局部变量
  （1）全局变量
  一个script标签里面定义的变量，该页面中其他的script标签里也可使用。（但须注意上下顺序）
  （2）局部变量
  js的方法内定义的变量只能在方法里面使用。
  （3）浏览器调试工具的使用 （F12调出控制台和调试信息，火狐需安装firebug插件）

16、js的全局函数（不属于任何对象，可以直接使用的函数）
 1. eval(): 把字符串当成js代码执行
      例： var str = "alert('123456');";  eval(str);
 2. isNaN() 检查某个值是否不是数字   不是数字返回true，否则返回false
 3. parseInt() 解析一个字符串并返回一个整数
      例：var str1 = "123";  alert(parseInt(str1)+1);
 4. encodeURI() 把字符串编码为URI
      例：var str2 = "abc测试中文";
     document.write(encodeURI(str2));
 5. decodeURI() 解码某个编码的 URI
      例：var decodestr2 = decodeURI(encodestr2);
          （实际开发中发送数据可能需要进行两次编码，一次解码）