JavaScript基础

 

JavaScript

1、JavaScript的简介

     （1）什么是JavaScript：

      是基于对象和事件驱动的语言，应用于客户端。

      基于对象：

            java是面向对象，使用对象需要创建，而js里面提供好了一些对象，直接使用

      事件驱动：

            比如每次滑动鼠标，变换一张图片

      客户端：

            指的是浏览器

     （2）JavaScript的特点（三个）

      第一个：交互性

      第二个：安全性

                  JavaScript不能访问本地硬盘里面的文件

      第三个：跨平台性

                  在java里面跨平台，通过虚拟机实现的

                  JavaScript跨平台，是只要在系统里面安装了支持JavaScript的浏览器，就可以运行JavaScript

     （3）Java和JavaScript区别（雷锋和雷峰塔）

      第一，java以前是属于sun公司，现在是oracle；而JavaScript是网景公司

      第二，java是面向对象的语言，JavaScript是基于对象的语言

      第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行

      第四，JavaScript弱类型语言，java是强类型的语言

             比如在java里面定义一个变量 int a = 10;  但int b = "10";就不正确

             在JavaScript里面定义变量都是使用一个关键字 var a = 10;  var b ="10"; var c = true;

      第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行

     （4）JavaScript由三部分组成

      第一部分：ECMAScript

由ECMA（欧洲计算机制造联合会）组织制定语句，语法

      第二部分：BOM

broswer object  model：浏览器对象模型

      第三部分：DOM

document object model：文档对象模型

2、js和html的结合方式

      有两种结合方式

     第一种：使用html中的标签 <scripttype="text/javascript"> js代码</script>

            示例代码：

             <scripttype="text/javascript">

                  alert("aaa");

             </script>

           

            ** js的注释有两种

                  //单行注释

                  /*

                  多行注释

                  */

     第二种：使用html的标签，引入外部的js文件

            <scripttype="text/javascript" src="js文件的路径"></script>

            *使用第二种方式的时候有两点注意

            注意一：不要在script标签里面写js代码了，不会执行

            注意二：结束script标签</script>，不要在标签内结束

            示例代码：

             <script type="text/javascript"src="1.js">

                  //不要在script标签里面写js代码了，不会执行

                  alert("aaa");

            </script>

3、js的变量声明和数据类型

     （1）在js里面如何声明变量，都是使用一个关键字var

              var a = 10;

     （2）js的原始类型

              在java里面有8个基本的数据类型

              js的原始类型有五个

            第一，string：字符串类型

                  var a = "abc";

            第二，number：数字类型

                  var b = 10;

            第三，boolean：布尔类型 true false

                  var c = true;

            第四，null

                  null是特殊的引用类型

                  表示对象引用为空

                  比如 var date =null;

            第五，undefined

                  表示定义了一个变量，但是没有赋值

                  vara;没有赋值

     （3）typeof(变量的名称): 查看当前变量的类型

          var a = "abc";

            alert(typeof(a));//输出string

4、js的引用类型和类型转换

引用对象：

1. Object 对象：所有对象都由这个对象继承而来

2.  Boolean 对象：Boolean 原始类型的引用类型

3.  Number 对象： Number 原始类型的引用类型

类型转换：

1. 转换成字符串

2. 转换成数字：parseInt() 和 parseFloat()

3. 强制类型转换

• Boolean(value)- 把给定的值转换成 Boolean 型；
• Number(value)- 把给定的值转换成数字（可以是整数或浮点数）；
• String(value)- 把给定的值转换成字符串；

5、js的语句

      在java里面语句有：if、switch、while、do-while、for

      java里面的switch语句，数据类型要求：是否支持string类型？在jdk1.7开始支持的

     （1）if 语句

      示例代码：

  var a = 10;

  if(a==10) {

        alert("10");

  } else {

        alert("other");

  }          

     （2）switch语句

      在java里面写法：

  switch(a){

        case10:

         break;

        case20:

         break;

        default:

        ....

      }

      JS里的代码写法：

  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()向页面输出内容

• 可以向页面输出变量         
• 可以向页面直接输出html代码

            document.write(i);

            document.write("<br/>");

6、js的运算符

（1）算术运算符

     

运算符

描述

例子

结果

+

加

     x=2

     y=2

     x+y

4

-

减

     x=5

     y=2

     x-y

3

*

乘

     x=5

     y=4

     x*y

20

/

除

     15/5

     5/2

     3

     2.5

%

求系数 (保留整数)

     5%2

     10%8

     10%2

     1

     2

     0

++

累加

     x=5

     x++

x=6

--

递减

     x=5

     x--

x=4

 

     （2）赋值运算符

运算符

例子

等效写法

=

x=y

x=y

+=

x+=y

x=x+y

-=

x-=y

x=x-y

*=

x*=y

x=x*y

/=

x/=y

x=x/y

%=

x%=y

x=x%y

 

（3）比较运算符

==：表示条件的判断，如果是=，表示赋值

运算符

描述

例子

==

等于

5==8 返回值为 false

===

等于(检查值和类型)

x=5 y="5" x==y 返回值为 true x===y 返回值为 false

!=

不等于

5!=8 返回值为 true

> 

大于

5>8 返回值为 false

< 

小于

5<8 返回值为 true

>=

大于等于

5>=8 返回值为false

<=

小于等于

5<=8 返回值为 true

 

（4）逻辑运算符

运算符

描述

例子

&&

与

x=6 y=3 (x < 10 && y > 1) 返回值为 true

||

或

x=6 y=3(x==5 || y==5) 返回值为 false

!

非

x=6 y=3 !(x==y) 返回值为 true

 

（5）js的运算符和java不同的内容

•   第一个：js里面不区分整数和小数

      * 比如 var a = 123/1000*1000,如果在java里面结果是 0

      * js里面的结果：123

 

• 第二个：字符串的相加和相减操作

      * 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN

      示例代码：

      var b = "10";

      document.write(b+1); //字符串拼接

      document.write("<hr/>");

      document.write(b-1); //真正相减的运算

 

      document.write("<hr/>");

      var c = "a";

      document.write(c-1); //NaN

 

• 第三个：boolean类型相加和相减的操作

      * 如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算

      示例代码：

      var flag = true;

      document.write(flag+1); // 2,当boolean类型是true时候，把类型当成1运算

     

      document.write("<hr/>");

      var flag1 = false;

      document.write(flag1+1); //1,当boolean类型是false时候，把类型当成0运算

 

• 第四个：==和===区别

      * ==比较的是值

      * === 比较的是值和类型

      示例代码：

      varmm = "10";

      if(mm==="10"){

            alert("10");

      }else {

            alert("other");

      }

7、js的数组

• 什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
• js里面定义数组的方式

  第一种：var arr1 = [];//空数组

  第二种：var arr2 =["10",10,true]; //可以写任意的类型

  第三种：var arr3 = new Array(3); //表示定义数组名称是arr3，数组的长度是3

            第四种：var arr4 = new Array(4,5,6);//表示定义数组名称是arr4，数组里面的值4 5 6

• 数组里面的属性：查看数组的长度 length
• 获取数组里面的值

   遍历数组得到里面的值

  //遍历

  for(vari=0;i<arr3.length;i++) {

        vara = arr3[i];

        document.write(a);

        document.write("<br/>");

  }

• 数组的长度：在js里面数组的长度可变的

            数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串

8、js的string对象

     （1）字符串对象

      *创建字符串：var a = "abc"; var b = newString("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("04-练习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 str3 = "a-b-c";

      var arr = str3.split("-");

      document.write("length:"+arr.length);

 

• substr() 从起始索引号提取字符串中指定数目的字符。
• substring() 提取字符串中两个指定的索引号之间的字符

      var str4 = "MARYJACKLUCY";

      document.write(str4.substr(2,3)); 

      //RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值

 

      document.write("<br/>");

      document.write(str4.substring(2,3));

      //R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束（不包含这个位置） [2,3)

9、js的Array对象

     （1）创建数组

     （2）属性

• length 设置或返回数组中元素的数目

      //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 arr3 = new Array(3);

      arr3[0] = "mary";

      arr3[1] = "jack";

      arr3[2] = "lucy";

      document.write(arr3);

      document.write("<br/>");

      document.write(arr3.join("-"));

• pop() 删除并返回数组的最后一个元素

      var arr4 =["aa","bb","cc"];

      //输出数组的原始的值

      document.write("old: "+arr4);

      //输出执行pop方法之后的返回值

      document.write("<br/>");

      document.write("return:"+arr4.pop());

      //输出执行pop方法之后新的数组内容

      document.write("<br/>");

      document.write("new: "+arr4);

• push() 向数组的末尾添加元素，并返回新的长度

      var arr5 = ["zhangsan","lisi","wangwu"];

    //输出数组的原始的值

      document.write("old: "+arr5)

      document.write("<br/>");

      //输出执行push()方法之后的返回值

      document.write("return:"+arr5.push("lucy"));

      //输出执行push()方法之后新的数组内容

      document.write("<br/>");

      document.write("new: "+arr5);

• 向数组里面使用push方法添加一个数组

      document.write("<hr/>");

      var arr6 =["AAA","BBB"];

      var arr7 =["CCC","DDD"];

      //输出数组arr6的原始的值

      document.write("old: "+arr6)

      //输出执行push()方法之后的返回值

      document.write("<br/>");

      document.write("return:"+arr6.push(arr7));

      //输出执行push()方法之后新的数组内容

      document.write("<br/>");

      document.write("new: "+arr6);

      //遍历数组

      for(var i=0;i<arr6.length;i++) {

            alert(arr6[i]);

      }

• reverse() 颠倒数组中元素的顺序

      var arr8 =["zhaoliu","wanger","niuqi"];

      document.write(arr8);

      document.write("<br/>");

      document.write(arr8.reverse());

10、js的Math对象

      （1）进行数学运算，在Math对象里面的方法，直接使用Math.方法名称进行调用

      （2）方法

• ceil(x) 对一个数进行上舍入。
• floor(x) 对一个数进行下舍入。
• round(x) 把一个数四舍五入为最接近的整数
• random() 返回 0 ~ 1 之间的随机数

 

      示例代码：

      var a = 10.2;

      //ceil(x) 对一个数进行上舍入。

      document.write(Math.ceil(a)); //11

 

      document.write("<hr/>");

      //floor(x) 对一个数进行下舍入。

      document.write(Math.floor(a));

 

      document.write("<hr/>");

      //round(x) 把一个数四舍五入为最接近的整数

      document.write(Math.round(a));

 

      document.write("<hr/>");

      //random() 返回 0 ~ 1 之间的随机数

      document.write(Math.random());

 

      //生成0-9之间的随机数 0.0 -- 0.9之间的值

      document.write("<hr/>");

      document.write(Math.floor(Math.random()*10));

 

11、js的Date对象

      （1）进行日期操作的对象

      （2）使用Date对象，newDate();

      （3）方法

• toLocaleString() 根据本地时间格式，把 Date对象转换为字符串。

  //得到当前的时间

  vardate = 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()
• 得到当前的分   getMinutes()
• 得到当前的秒 getSeconds()

示例代码：

  document.write(date.getHours());

  document.write("<br/>");

  document.write(date.getMinutes());

  document.write("<br/>");

  document.write(date.getSeconds());

 

• 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数

12、js的RegRxp对象

       （1）RegExp 对象表示正则表达式

       （2）正则表达式：规定字符串出现的规范

       （3）使用：newRegExp("正则表达式")

       （4）方法：

• test() 检索字符串中指定的值。如果存在匹配的字符返回true,如果不存在匹配的字符返回 false。

       （5）代码

            //创建正则表达式对象

         var reg = new RegExp("[a]");

         //创建一个字符串

            var name = "lisi";

            //使用正则对象匹配字符串

            varflag = reg.test(name);

            document.write(flag);

13、js的bom对象  

      （1）script标签放置位置

• 建议放到</body>后面
• html的解析是从上到下进行解析的，如果在head里面就获取输入项里面的值，因为还没有解析到输入项，所以肯定得不到值。

      （2）什么是bom:浏览器对象模型

       第一个：navigator 

    浏览器的信息

       第二个：screen

            屏幕的信息

       第三个: history

            访问地址的历史信息

       第四个: location

            设置url

            href 设置或返回完整的 URL

       第五个: window（***）

       window对象是窗口对象，是顶层对象

 

       方法：

       setInterval("执行的js代码",毫秒数) 在指定的时间内，重复执行js代码

            有两个参数：

            第一个参数要执行的js代码（js的方法），第二个参数是时间（毫秒数）

            代码：

            setInterval("alert('setinterval');",3000);

 

       setTimeout("执行的js代码",毫秒数) 在指定的时间之后，执行js代码，执行一次

            有两个参数：

            第一个参数要执行js代码（js的方法），第二个参数是时间（毫秒数）

            代码：

            setTimeout("alert('settimeout');",3000);

 

       clearInterval(id) 取消由 setInterval()设置的 timeout。

       clearTimeout(id) 取消由setTimeout()方法设置的timeout。

 

14、js的全局变量和局部变量

       回顾：在java里面的成员变量

      （1）全局变量

       在js里面，如果在一个script标签里面定义变量，在页面中的其他script标签里面都可以使用

      （2）局部变量

       在js的方法里面定义一个变量，这个变量只能在方法里面使用。

      （3）浏览器里面自带的调试工具

       *ie浏览器：点击键盘上f12，在页面下面出现一个条，点击控制台，出现调试的信息。

       * 火狐浏览器：点击键盘上f12，在下面出现一个条，点击控制台，出现调试的信息。

             ** 火狐浏览器里面需要安装firebug插件

       * 谷歌浏览器：点击键盘上的f12,在下面出现一个条，点击console,出现调试的信息。

 

15、js的全局函数

      （1）不属于任何对象，可以使函数

      （2）主要的函数

• eval(): 把字符串当成js代码执行

             var str = "alert('123456');";

             //alert(str);

             eval(str);

       

• isNaN() 检查某个值是否是数字

             如果是数字返回 false,如果不是一个数字返回 true。

 

• parseInt() 解析一个字符串并返回一个整数

             var str1 = "123";

             alert(parseInt(str1)+1);

 

• encodeURI() 把字符串编码为 URI

             var str2 = "abc测试中文";

             var encodestr2 = encodeURI(str2);

             document.write(str2);

             document.write("<br/>");

             document.write(encodestr2);

 

• decodeURI() 解码某个编码的 URI

             var decodestr2 = decodeURI(encodestr2);