三、JavaScript基础

一、JS概述

Javascript是基于对象和事件驱动的脚本语言，主要应用在客户端。

- 基于对象：
** 提供好了很多对象，可以直接拿过来使用
- 事件驱动：
** html做网站静态效果，javascript动态效果
- 客户端：专门指的是浏览器

特点：

交互性（信息的动态交互）

安全性（不可以直接访问本地磁盘的文件）

跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）（java里面跨平台性，虚拟机）

JavaScript与java不同：（雷锋和雷峰塔）

js是Netscape公司（网景公司）开发的一种脚本语言，并且可在所有主要的浏览器中运行 IE、Firefox、Chorme、Opera；java是sun公司，现在oracle；

JavaScript 是基于对象的，java是面向对象

JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。

JavaScript 是一种弱类型语言，java是强类型语言。如下：（弱变量类型：定义变量的时候变量没有具体的类型.当变量被赋值的时候.变量才会有具体的数据类型.）

int i = "10";  //java里面
var i = 10;  var m = "10";  //js里面

JavaScript历史：

在早期浏览器竞争的背景下，各浏览器厂商标新立异，独树一帜，JavaScript 脚本编写者们苦不堪言
W3C、ECMA 的不懈努力下，随着Microsoft 的 IE浏览器的不断改进，一个遵奉标准、笃行规范的 Web 新世界展现在世人面前
JavaScript语言组成：

一个完整 JavaScript实现由以下3个部分组成

核心（ECMAScript） -- ECMA：欧洲计算机协会 -- 由ECMA组织制定的js的语法，语句...

文档对象模型（DOM） -- document object model：文档对象模型
浏览器对象模型（BOM） -- broswer object model: 浏览器对象模型

JavaScript基础思维导图

二、js和html的结合方式（两种）

　　第一种 --使用一个标签

<script type="text/javascript">  js代码; </script>

　　第二种 --使用script标签，引入一个外部的js文件

<!-- 创建一个js文件：abc.js -->
<script type="text/javascript" src="abc.js"></script>

　　使用第二种方式的时候，就不要在script标签里面写js代码了，不会执行

三、js的原始类型和声明变量

　　1) java的基本数据类型 byte short int long float double char boolean

　　3) js定义变量都使用关键字 var

　　2) js的原始类型（五个）

　　　　 - string: 字符串 >> var str = "abc";

　　　　- number：数字类型　　>> var m = 123;

　　　　- boolean：true和false　　 >> var flag = true;

　　　　- null　　>> var date = new Date();　　　　访问的对象不存在获取对象的引用，null表示对象引用为空，所有对象的引用也是object

　　　　- undifined　　>> var aa;　　　　变量定义了未初始化/ 访问对象不存在属性定义一个变量，没有赋值

　　4) typeof(); 查看当前变量的数据类型　　　

　　　　　　** undefined - 如果变量是 Undefined 类型的；** boolean - 如果变量是 Boolean 类型的；** number - 如果变量是 Number 类型的；** string - 如果变量是 String 类型的；** object - 如果变量是一种引用类型或 Null 类型的

<script type="text/javascript">    
            var a = "123";  //定义一个字符串
            alert(typeof(a)); //string

            var b = 123;      //定义数字
            alert(typeof(b));  //number    
            
            alert(typeof null);  //输出的是object 。null被认为是对象的占位符，但仍然算做原始数据类型

            alert(null == undefined); //输出 true  ；undefined实际上是从值null派生来的，所以显示true；undefined是声明了变量但是未赋值，null是找不到对象。如果函数或方法要返回的是对象，那么找不到                                        该对象时，返回的通常是 null。
        </script>

四、js的语句

java里面的语句
- if判断
- switch语句
- 循环for while do-while

js里面的这些语句
- if判断语句：　　=：表示赋值　　==：表示判断　
- switch语句：
  - java里面支持数据类型 string支持吗？在jdk1.7开始支持　　
  - js里面都支持
```
switch(a) {
　　case 5:
　          break;
　  case 6:
　　 　　    break;
　　default:
　　......
}    
```

循环语句for while do-while ：

while循还

var i = 5;
while(i>1) {
      alert(i);
      i--;  
}

for循坏

for(var mm=0;mm<=3;mm++) {
    alert(mm);
}

- i++ ++i 和java里面一样

五、js的运算符

+= ： x+=y; ===>x=x+y;

js里面不区分整数和小数

var j = 123;
alert(j/1000*1000);
// 123/1000*1000  在java里面int类型得到结果是0；    在js里面不区分整数和小数，123/1000=0.123 * 1000 = 123

字符串的相加和相减的操作

//如果相加，做的是字符串连接。如果相减，做的是相减的运算
var str = "456";     //把“456”换成“abc”，做相减运算，提示NAN：表示不是一个数字
//alert(str+1);    //在java里面操作的结果是4561；在js里面还是4561
alert(str-1);    //相减的时候，执行减法的运算

boolean类型也可以操作

如果设置成true，相当于这个值是1

如果设置成false，相当于这个值是0

        <script type="text/javascript">    
            var flag = true;
            alert(flag+1);      //结果：2
            var flag1 = false;
            alert(false+1);       //结果：1
        </script>

== 和 === 区别

做判断
== 比较的只是值

=== 比较的是值和类型

<script type="text/javascript">    
    var a = "9";　　//定义一个字符串
    if(a==9){      //==输出9；===输出other
        alert(9);
    }else{
        alert("other");
    }
</script>

引入知识　　　　
- 直接向页面输出的语句（可以把内容显示在页面上）　document.write("aaa"); document.wirte("<hr/>");
- 可以向页面输出变量，固定值和html代码

实现99乘法表（输出到页面上）

document.write("<table border='1' bordercolor='blue'>");
//循环行 9
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>");

　　　- document.write里面是双引号，如果设置标签的属性需要使用单引号

　　　　　　- document.write可以输出变量，还可以输出html代码

六、js的数组

什么是数组？
- 使用变量，只能存一个值；而数组可以村多个值。 var m = 10;
- java里面的数组定义 int[] arr = {1,2,3};

定义方式（三种）

第一种：

var arr = [1,2,3];      //结果：1，2，3
var arr = [1,"4",true];          //结果：1，4，true

第二种：使用内置对象 Array对象

var arr1 = new Array(5);  //定义一个数组，数组的长度是5
arr1[0] = "9";
alert(arr1);           //运行结果为：9，，，， 九后面四个逗号

第三种：使用内置对象 Array　

var arr2 = new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5

数组里面有一个属性 - length：获取到数组的长度

<script type="text/javascript">    
    var arr = [1,"4",true];
    alert(arr);
    alert(arr.length);       //3
</script>

数组长度是可变的；数组可以存放不同的数据类型的数据

七、js的函数

在java里面定义方法

public 返回类型void /int   方法名(参数列表) {
    方法体;
    返回值;
}

public int add(int a,int b) {
    int sum = a+b;
    return sum;
}

在js里面定义函数（方法）有三种方式

函数的参数列表里面，不需要写var，直接写参数名称

第一种方式：

//使用到一个关键字 function
function 方法名(参数列表) {
    方法体;
    返回值可有可无（根据实际需要）;
}

//代码
//使用第一种方式创建函数
function test() {
    alert("qqqqq");
}

//调用方法
//test();

//定义一个有参数的方法  实现两个数的相加
function add1(a,b) {
    var sum = a+b;
    alert(sum);        
}

//add1(2,3);

//有返回值的效果
function add2(a,b,c) {
    var sum1 = a+b+c;
    return sum1;
}
alert(add2(3,4,5));

第二种方式：

// 匿名函数
var add = function(参数列表) {
    方法体和返回值;
}
//代码
//第二种方式创建函数
var add3 = function(m,n) {
    alert(m+n);
}
//调用方法
add3(5,6);

第三种方式：（用的少，了解）

动态函数

使用到js里面的一个内置对象Function

var add = new Function("参数列表","方法体和返回值");

<script type="text/javascript">    
    var add = new Function("x,y","var sum; sum=x+y; return sum;");
    document.write(add(5,4));
</script>


//所以称作可变参数
<script type="text/javascript">    
    var canshu = "x,y";
    var fangfati = "var sum; sum=x+y; return sum;";
    var add1 = new Function(canshu, fangfati);
    document.write(add1(5,4));
</script>

　　　　注意：js的方法的命名：不要写单一的单词如add()，不要把下划线放在开始位置如 _add()

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

全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用

在方法外部使用，在方法内部使用，在另外一个script标签使用

<!DOCTYPE html>
<html>
    <head>    
    </head>
    <body>        
        <script type="text/javascript">
            var mm = 10;//定义一个全局变量
            document.write("在方法外部使用mm："+mm);

            function text(){
                document.write("在方法内部使用mm："+mm);
            }
            text();
        </script>
    </body>    
        <script type="text/javascript">    
            document.write("在另一个script标签使用mm："+mm);
        </script>
</html>
//运行结果：
//在方法外部使用mm：10在方法内部使用mm：10 在另一个script标签使用mm：10

局部变量：在方法内部定义一个变量，只能在方法内部使用

如果在方法的外部调用这个变量，提示出错
SCRIPT5009: “aa”未定义

ie自带了一个调试工具，ie8及其以上的版本中，键盘上 F12，在页面下方出现一个条

 1 <!DOCTYPE html>
 2 <html>
 3     <head>    
 4     </head>
 5     <body>        
 6         <script type="text/javascript">
 7             function text(){
 8                 var aa = 10;//定义一个局部变量
 9                 document.write("在方法内部使用aa："+aa);
10             }
11             text();
12 
13             document.write("在方法外部使用aa："+aa);
14         </script>
15     </body>    
16         <script type="text/javascript">    
17             document.write("在另一个script标签使用aa："+aa);
18         </script>
19 </html>

九、script标签放在的位置

script标签可以放在任何位置，但是建议把script标签放到 </body>后面

如果现在有这样一个需求：

在js里面需要获取到input里面的值，如果把script标签放到head里面会出现问题。因为html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值，因为页面还没有解析到input那一行，肯定取不到。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>    
 4         <script type="text/javascript">
 5             var input1 = document.getElementById("nameid");
 6             document.write(input1.value);
 7         </script>
 8     </head>
 9     <body>        
10         <input type="text" name="name" id="nameid" value="aaaa">
11     </body>    
12 </html>

十、js的重载

什么是重载？方法名相同，参数列表不同

　　　　java里面有重载? 肯定有

js里面是否有重载？没有

<script type="text/javascript">    
    function add(a,b){
        return a+b;
    }
    function add(a,b,c){
        return a+b+c;
    }
    function add(a,b,c,d){
        return a+b+c+d;
    }
    alert(add(2,3));  //NAN
    alert(add(2,3,4));    //NAN
    alert(add(2,3,4,5));     //14
</script>