Javaweb学习之Javascript基础

学习目的

了解Javascript的概念及应用场景
掌握Javascript的几种编写格式
掌握Javascript的基础语法（数据类型+表达式+语句）
掌握Javascript的常用对象（重点掌握）

一、JavaScript

概念
JavaScript是直接运行在浏览器上的脚本语言，简称JS。JavaScript是网景公司的布兰登艾奇（JavaScript之父）开发的，最初叫LiveScript。LiveScript的出现让浏览器更加的生动，不再是单纯的静态页面。JavaScript虽然名字中带有"Java"，但和Java没有任何关系，只是语法上类似。他们运行的位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。类似的JSP属于java语言的分支，运行在JVM之上
本质
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
JS通过识别HTML文档的基本标签，让动态效果加载到HTML的基本标签中。

事件：用户操作让浏览器发生的动作；
事件句柄："事件"的代码表示，事件句柄作为标签中的一个属性；
js：函数（或方法），与事件句柄绑定一起，真正完成事件动作的代码表示。

特点

简单、易学、易用；
跨平台，主要应用于浏览器，浏览器存在的地方即可运行，如IE、Navigator浏览器等；
符合ECMA（欧洲计算机制造协会）标准，可移植；
事件驱动式的脚本程序设计思想；
动态、交互式的操作方式。

JavaScript的作用：

交互式操作；
表单验证；
网页特效；
Web游戏
服务器脚本开发等。

遵循规范
JavaScript和JScript都遵循ECMA（欧洲计算机协会）制定的ECMA-262号标准，叫做ECMA-Script。现代的javascript和jscript都实现了ECMA-Script规范（javascript和jscript统一）。
JSP和JS的区别

JSP : JavaServer Pages，隶属于Java语言的，运行在JVM当中；
JS : JavaScript是脚本语言，运行在浏览器上。

1.1 Javascript 与 HTML

联系
CSS样式嵌套在HTML页面中，可以修饰HTML页面更加美观，更具观赏性；而JavaScript也是嵌套在HTML页面中，可以让HTML页面实现动态性和用户交互性。
特点

CSS是HTML的静态样式修饰，javaScript是HTML的动态交互修饰；
javaScript 让HTML页面更具有交互性；
JavaScript程序不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行；
javaScript的"目标程序"以普通文本形式保存，这种语言都叫做“脚本语言”（Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言）。

二、Javascript基础语法

概述
任何一门编程语言都有属于自己的代码编写风格和符合自身语言的基础语法，javascript作为一门"脚本语言"也拥有自己的语法结构和编写格式。
语法特点

JavaScript区分大小写（SQL和HTML不区分大小写）；
JavaScript脚本程序须嵌入在HTML文件中（JS天生让静态网页实现动态效果，必须嵌套，不能独立实现）；
JavaScript脚本程序中不能包含HTML标记代码（双引号）；
每行编写一条脚本语句；
语句末尾可以加分号；
JavaScript脚本程序可以独立保存为一个外部 .js文件，但其中不能包含<script></script>标签，仅有 js实现。

2.1 js编写格式

格式特点

JavaScript区分大小写（SQL和HTML不区分大小写）；
JavaScript脚本程序中不能包含HTML标记代码（双引号）；
每行编写一条脚本语句；
语句末尾可以加分号；

js的几种编写格式

<script>标签

<script>
    document.write("Hello World!!!");
</script>

<script>标签 + language属性：指定该代码块为 js代码块；

<script language="JavaScript">
    document.write("Hello World!!!");
</script>

<script>标签 + language属性 + type属性：日常使用推荐的格式；

<script language="JavaScript" type="text/JavaScript">
    document.write("Hello World!!!");
</script>

使用JavaScript协议：不常用

<a href="JavaScript:alert('Hello World!!!')">请单击</a>

<a href="#" onclick="alert('Hello World!!!')">请单击</a>

<a href="JavaScript://" onclick="alert('Hello World!!!')">请单击</a>

<script>标签 + src属性引入外部script文件，推荐

<!-- document.write("Hello World!!!"); 语句 必须保存为一个外部文件，且命名为hello.js -->
<script src="hello.js">

</script>

js的编写位置

编写在HTML的节点标签中：以标签的（事件句柄）属性来编写，该类型js的编写不会随着浏览器加载HTML文件而直接执行该js代码，而是将该js注册到对应的事件句柄中，当事件发生时才会执行js；

以<script>代码块编写在HTML的<body>中：若js函数暴露在脚本块的程序当中，js代码则在页面打开的时候就执行，并且遵守自上而下的顺序依次逐行执行（不需要依赖事件）

<body>
        <!--以下的button在js执行之前，因此会显示-->
        <input type="button" value="我是一个按钮对象1" />       

        <!--脚本块的方式-->
        <script type="text/javascript">
            /*
                暴露在脚本块当中的程序，在页面打开的时候执行，
                并且遵守自上而下的顺序依次逐行执行（这个代码的执行不需要事件）
            */
            window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载      
            window.alert("Hello JavaScript!");
        </script>

        <!--当以上js没有加载或执行完时，以下的button不会显示-->
        <input type="button" value="我是一个按钮对象" />
    </body>

以<script>代码块编写在HTML的<head>中：

<head>
        <title>HTML中嵌入JS代码的第二种方式</title>
        <!--样式块-->
        <style type="text/css">
        </style>

        <!--脚本块-->
        <script type="text/javascript">
            window.alert("head............");
        </script>

    </head>

编写在整个HTML框架之前：

<script type="text/javascript">
      // alert有阻塞当前页面加载的作用（浏览器打开即阻挡，直到用户点击确定按钮）
      window.alert("first.......");
</script>

<!doctype html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

编写在整个HTML框架之后：当js代码块编写在整个HTML框架之后时，浏览器会先将所有的HTML加载完成之后，才会拥有动态效果，整个HTML文件的执行顺序依然是从上到下逐行执行。

<!doctype html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

<!--编写在整个HTML框架之后-->
<script type="text/javascript">
    window.alert("last.......");
</script>

2.2 js数据类型

js数据类型分类

原始类型：Undefined、Number、String、Boolean、Null；
引用类型：Object以及Object的子类。

js支持的其他数据类型

JavaScript常量：包括整数型常量、浮点型常量、字符串常量，特别注意布尔常量为true和false；
数组类型：类似于java的Array数组，可存储多个不同数据类型的值，提供下标来获取数组元素。

2.2.1 原始数据类型（数值型）

基础数值型

整数型：由正负号、数字构成，包括八进制、十进制、十六进制的数据；
浮点数型：由正负号、数字和小数点构成，包括常规记数法、科学记数法的数据；
逻辑型：布尔值 true、false ；
字符串型： string类型，由单引号、双引号括起来的值
空值： null
未定义：根本不存在的对象、已定义但没有赋值的量；

Undefined类型
Undefined类型只有一个值就是 undefined。在js中，若变量定义后未赋值就直接访问，或直接访问未定义的变量，浏览器会自动提示出访问的变量为undefined。而undefined是一个具体的值。

2.2.2 引用数据类型（Object类型、大string类型）

描述
基础引用数据类型是指 Object以及Object的子类数据类型。Object类型是所有类型的超类，自定义的任何类型，默认继承Object。因此在JS当中定义的类默认继承Object类中所有的属性以及函数。
常用属性

prototype属性：最常用最主要的属性，作用是给类动态的扩展属性和函数；
constructor属性：构造器属性。

常用函数

toString()：
valueOf()：
toLocaleString()：

2.2.3 typeof运算符

描述
typeof运算符是js提供的，用于在程序的运行阶段动态的获取变量数据类型的运算符。
使用格式
typeof 变量名。

        // 求和：要求a变量和b变量的数据类型必须是数字，不能是其他类型
           function sum(a, b){
               if(typeof a == "number" && typeof b == "number"){
                   return a + b;
               }
               alert(a + "," + b + "必须都为数字！");
           }

运算结果
typeof 运算符的运算结果是以下6个字符串之一，也就是说使用了typeof运算符后的返回结果只能是以下之一，并且运算结果的字符串都是全部小写。

"undefined"：返回该数据的数据类型是undefined未定义类型；
"number"：返回该数据的数据类型是function函数类型；
"string"：返回该数据的数据类型是string字符串类型；
"boolean"：返回该数据的数据类型是boolean布尔类型；
"object"：返回该数据的数据类型是object对象类型；
"function"：返回该数据的数据类型是function函数类型。

          var i;
          alert(typeof i); // "undefined"
          
          var k = 10;
          alert(typeof k); // "number"
          
          var f = "abc";
          alert(typeof f); // "string"
          
          var d = null;
          alert(typeof d); // "object"，null属于Null类型，但是typeof运算符的结果是"object"
          
          var flag = false;
          alert(typeof flag); // "boolean"
          
          var obj = new Object();
          alert(typeof obj); // "object"
          
          // sayHello是一个函数.
          function sayHello(){            
          }
          alert(typeof sayHello); // "function"

2.2.4 NaN值

描述
NaN 表示Not a Number，不是一个数字，而是属于Number类型的一个值。当运算结果本来应该是一个数字，最后却不是一个数字的时候，运算结果则返回NaN。
isNaN() 函数

结果是true表示不是一个数字，结果是false表示是一个数字。

parseInt()函数
parseFloat()函数
Math.ceil() 函数
ceil()函数是 Math数学类当中的一个函数，用于对一个数进行向上取整。

2.2.5 Boolean布尔数据类型

描述
JS中的布尔类型永远都只有两个值：true 和 false。
Boolean函数
Boolean()函数的作用是将非布尔类型转换成布尔类型。

语法格式：
    Boolean(数据)

转换特点
有值的转为boolean都为true，无值的转为boolean都为false。

          // 规律:“有"就转换成true,"没有"就转换成false.
          alert(Boolean(1)); // true
          alert(Boolean(0)); // false
          alert(Boolean("")); // false
          alert(Boolean("abc")); // true
          alert(Boolean(null)); // false
          alert(Boolean(NaN)); // false
          alert(Boolean(undefined)); // false
          alert(Boolean(Infinity)); // true

2.2.6 String类型（小string类型）

描述
在JS当中可以使用单引号，也可以使用双引号括起的数据都是String字符串类型。
创建字符串对象

第一种：var 变量名 = "字符串值";
第二种（使用JS内置的支持类String）： var 变量名 = new String("字符串值");

特点

String是一个JS内置的类，可以直接用，String的父类是Object；
无论小string还是大String（Object是大String），他们的属性和函数都是通用的。

常用属性

length：获取字符串长度；

常用函数

indexOf（"子字符串"）：获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf（"子字符串"）：获取指定字符串在当前字符串中最后一次出现处的索引
replace（"被替换的目标字符"，"替换字符"）：替换字符，每次只能替换一个字符，或仅替换第一次出现的匹配字符；

           // 判断一个字符串中是否包含某个子字符串？
           alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含
           
           // replace (注意：只替换了第一个)
           alert("name=value%name=value%name=value".replace("%","&")); 
           
           // 继续调用replace方法，就会替换第“二”个
           // 想全部替换需要使用正则表达式
           alert("name=value%name=value%name=value".replace("%","&").replace("%", "&"));

substr（startindex，length）：截取子字符串，从指定下标开始，截取指定长度的子字符串；
substring（startindex，endindex）：截取子字符串，从指定下标开始，到指定下标结束（不包括结束下标），截取两个下标中间的字符；

           // substr(startIndex, length) // 起始下标和长度
           alert("abcdefxyz".substr(2,4)); //cdef

           // substring(startIndex, endIndex) // 注意：不包含结束下标endIndex
           alert("abcdefxyz".substring(2,4)); //cd

toLowerCase：转换小写，
toUpperCase：转换大写，
split：拆分字符串

三、 js变量

概念
js变量和java中的变量一样，都是用于接收一个不确定的数据而存在。变量是一个抽象概念，变量由变量数据类型 + 变量名组成，变量着重于其可以"变"的特点来存放不同数据类型的数据。
js变量命名规则

首字符必须是大写或小写的字母或下划线（_）或美元符号（$），类似于java命名规范（但java中首字符不能以数字开头）;
后续的字符可以是字母、数字、下划线或美元符;
变量名称不能是保留字（java中变量名不能是关键字）；
长度任意；
区分大小写；

js变量命名约定

集中置顶；
使用局部变量；
易于理解，见名知意，如userId；
避免混乱，相同字符的变量不建议使用大小写来编写两个或多个，如usrname和usrName。

变量声明 / 变量定义
js中采用 关键字var + 变量名 (+ 数值) 来声明一个变量，js定义一个变量不需要声明其数据类型，给它赋什么样的值就是什么数据类型，js可以根据数值的类型来自动区分变量的数据类型。

// js变量统一声明格式
var 变量名 (数值);

// 示例
var stdId; 
var name,sex; // 同时声明两个或多个变量
var total=3721; // 赋值 声明整数型变量
var notNull=true; // 赋值 声明布尔型变量
var name="李小龙"，sex="先生";  // 赋值 声明字符串变量
var i=j=0; // 声明时 同时给多个变量赋值

变量赋值
js变量和java变量一样，在定义时不要求直接初始化赋值（java局部变量除外），可以在后续使用时需要才赋值。

// 统一赋值方式
变量名 = 数值；

// 示例
stdId = 2004007;

3.1 js变量分类

概念
js变量可以根据变量的作用域（方式、位置）来区分，可分为全局变量和局部变量。
分类

局部变量：使用var关键字，在函数内声明，局部变量仅在当前函数内使用；
全局变量：省略var关键字，或在函数外声明，全局变量可在整个脚本中被使用，可在不同的窗口中相互引用（指定窗口名）。

示例

<Script>
    var langJS = "JavaScript"; // 函数外声明，langJS是全局变量
    test(); 
    function test() {
        var langVBS = "VBScript"; //l 函数内声明，langVBS是局部变量
        document.write("<LI>" + langJS);
        document.write("<LI>" + langVBS); 
    }
    document.write("<LI>" + langJS);
    document.write("<LI>" + langVBS); // 
</Script>

3.2 全局变量

概念
js全局变量是省略var关键字，或在函数外声明的变量。无论该变量在任何位置声明，只要没有var关键字声明，其都是全局变量。
生命周期
在浏览器打开时声明，浏览器关闭时销毁（尽量少用）。全局变量定义后会一直在浏览器的内存当中，允许不同的窗口中相互引用。
特点
耗费内存空间，能使用局部变量尽量使用局部变量。
全局变量定义

 function myfun(){
               // 没有var关键字：全局变量.
               myname = "hahahah";
               // 有var关键字：局部变量.
               newname = "dadadada";
           }
           
           // 访问函数
           myfun();        
           alert("myname = " + myname); // myname = hahahah 
           //   newname是局部变量，不能在函数外部访问
           alert("newname = " + newname); // newname = undefined

3.3 局部变量

概念
js局部变量是使用var关键字，在函数体当中声明的变量，包括一个函数的形参都属于局部变量。
生命周期
函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
特点
局部变量生命周期较短。

3.4 访问变量

遵循特点
js中的变量访问依然遵循"就近原则"，每一次访问都会访问离该函数最近的一个变量值。
访问原理
根据变量的性质不同，变量的作用域或作用范围也不同，因此变量的访问仅限于其作用域中。
示例

          // 全局变量
           var username = "jack";
           function accessUsername(){
               // 局部变量
               var username = "lisi";
               // 就近原则：访问局部变量
               alert("username = " + username);
           }

           // 调用函数
           accessUsername();
           // 访问全局变量，局部变量作用域出了函数就不认识
           alert("username = " + username);

特殊点

四、js表达式

分类

算术表达式：；
字符串表达式：；
关系（比较）表达式：；
逻辑表达式：

4.1 JS运算符

根据处理对象数目分类

单元运算符；
二元运算符；
三元运算符。

根据功能分类

赋值运算符：= 、+= 、-= 、*= 、/= 、%=（取余）
算术运算符：+ 、- 、* 、/ 、%（取余）、++（自增）、--（自减）

// 示例
// 定义全局变量
var x = 11; 
var y = 5;
// 执行函数，js的write()函数 相同于 java的print()方法
with (document) {
    write("x = 11, y = 5");
    write("<LI>x + y 是 ", x + y <br>); // js的函数之中还可以编写HTML代码
    write("<LI>x - y 是 ", x - y <br>);// js的函数之中编写 <br>标签 换行
    write("<LI>x * y 是 ", x * y <br>);
    write("<LI>x / y 是 ", x / y);
    write("<LI>x % y 是 ", x % y);
    write("<LI>++ x 是 ", ++ x);
    write("<LI>-- y 是 ", -- y);
}

var x = y = 3; 
with (document) {
    x = y++;// 自增在后：先赋值y→x，再自增y+1→y
    write("x 是 ", x, "; y 是 ", y, "<br>");
    x = ++y;// 自增在前：先自增y+1→x，再赋值y+1→y
    write("x 是 ", x, "; y 是 ", y);
}

字符串运算符：+（拼接）、+=（原类型拼接再转换）
比较运算符：== 、!= 、===（值及类型）、!==（值及类型）、< 、<= 、> 、>=

var x = 5; // x 是数值5
var y = '5'; // y 是字符串5
var z = 6; // x 是数值6
with (document) {
    write("x = 5, y = '5', z = 6");
    write("<LI>x == y 吗？", x == y);// false，数值型和字符串型
    write("<LI>x === y 吗？", x === y);// ===：比较值和类型，不同时相等false
    write("<LI>x != y 吗？", x != y);
    write("<LI>x !== y 吗？", x !== y);// !==：比较值和类型的结果取反，不同时相等true
    write("<LI>x <= z 吗？", x <= z);
    write("<LI>y <= z 吗？", y <= z);
    //类型自动转换
}

逻辑运算符： &&(短路与) 、||（短路或）、!
逐位运算符：

特殊运算符

new运算符：创建对象（实例）
格式：对象名称=new 对象类型（参数）
this运算符：表示当前对象
格式：this[.属性]
条件运算符：三元运算符
格式：<条件表达式> ? 第一个值：第二个值

运算符执行的优先顺序

类型	运算符
括号	()
一元	! 、~ 、- 、++ 、 -- 、typeof 、 void 、delete
算术	* 、/ 、+ 、 -
位位移	<< 左移、>> 右移、 >>>无符号右移
比较	< 、 <= 、> 、>= 、 == 、!=
位逻辑	&、^ 、（xor）
逻辑	&& 、 \|\|
三元条件	?
赋值	= 、+= 、-= 、 *= 、 /= 、 %= 、<<= 、>>= 、>>>= 、&= 、^= 、 \|=

4.2 void运算符

描述
void运算符是一个无返回结果的运算符（类似于Java中void类型的方法），当JS执行某一个函数之后，不希望返回任何值时，就可以使用void运算符来处理函数执行完之后的结果。
运算原理
执行表达式，但不返回任何结果.
使用格式

// void运算符语法格式：void(表达式)
// 具体使用格式：javascript:void(0)
// 其中 javascript: 作用是告诉浏览器后面是一段JS代码，javascript: 不能省略

// 示例：onclick事件执行后，不会跳转链接
<a href="javascript:void(0)" onclick="window.alert('test code')">
    既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
</a>

常见面试题

null、NaN、undefined这三个值有什么区别

            // null NaN undefined 数据类型不一致.
            alert(typeof null); // "object"
            alert(typeof NaN); // "number"
            alert(typeof undefined); // "undefined"
            
            // null和undefined可以等同.
            alert(null == NaN); // false
            alert(null == undefined); // true
            alert(undefined == NaN); // false

==号和===号的区别

            // == 是等同运算符，只判断值是否相等
            alert(1 == true); // true，此处1会调用boolean(1)转换成布尔值，因此为true
            alert(1 === true); // false
            // ===是全等运算符：既判断值是否相等，又判断数据类型是否相等
            alert(null === NaN); // false
            alert(null === undefined); // false
            alert(undefined === NaN); // false