一篇文章帶你入門Java Script

更新時(shí)間：2021年08月04日 10:35:13 作者：鍵盤敲爛月薪過(guò)萬(wàn)

這篇文章主要介紹了新手入門JavaScript的的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

概述

JavaScript是目前web開發(fā)中不可缺少的腳本語(yǔ)言，js不需要編譯即可運(yùn)行，運(yùn)行在客戶端，需要通過(guò)瀏覽器來(lái)解析執(zhí)行JavaScript代碼。

JS組成部分：

組成部分	作用
ECMA Script	構(gòu)成了JS核心的語(yǔ)法基礎(chǔ)
BOM	Browser Object Model 瀏覽器對(duì)象模型，用來(lái)操作瀏覽器上的對(duì)象
Dom	Document Object 文檔對(duì)象模型，用來(lái)操作網(wǎng)頁(yè)中的元素

特點(diǎn)

1.交互性（它可以做的就是信息的動(dòng)態(tài)交互）

2.安全性（不允許直接訪問(wèn)本地硬盤）

3。跨平臺(tái)性（只要可以解析js的瀏覽器都可以執(zhí)行，和平臺(tái)無(wú)關(guān)）

和Java的區(qū)別

JavaScript	Java
Netscape公司的產(chǎn)品，最初叫Livescript	Sun公司的產(chǎn)品，現(xiàn)在是Oracle公司的產(chǎn)品
直譯式腳本語(yǔ)言	需要先編譯成字節(jié)碼文件，在執(zhí)行
弱類型語(yǔ)言	強(qiáng)類型語(yǔ)言

弱類型語(yǔ)言

弱類型語(yǔ)言是一種弱類型定義的原，某一個(gè)變量被定義類型，該變量可以根據(jù)環(huán)境變化自動(dòng)進(jìn)行轉(zhuǎn)換，不需要經(jīng)過(guò)顯性強(qiáng)制轉(zhuǎn)換

強(qiáng)類型語(yǔ)言

強(qiáng)類型語(yǔ)言是一種強(qiáng)制類型定義的語(yǔ)言，一旦某一個(gè)變量被定義類型，如果不經(jīng)過(guò)強(qiáng)制轉(zhuǎn)換，則它永遠(yuǎn)就是該數(shù)據(jù)類型了

書寫位置

1.內(nèi)嵌式：

<script type="text/javascript">
    //alert是Javascript語(yǔ)言提供的一個(gè)警告框函數(shù)
    //它可以接受任意類型的參數(shù)，這個(gè)參數(shù)就是警告框的提示信息
    alert("內(nèi)嵌式")
<script>

2.外聯(lián)式：

首先新建一個(gè)文件類型為.js的文件，然后再該文件中寫js語(yǔ)句，通過(guò)script標(biāo)簽對(duì)引入到html頁(yè)面中。

<script src="js文件路徑地址">這里不能寫js語(yǔ)句</script>

3.行內(nèi)式：

直接寫在標(biāo)簽身上，是一個(gè)簡(jiǎn)寫的時(shí)間，所以又稱之為事件屬性。 onclick單機(jī)事件

<input type="button" value="點(diǎn)我呀" onclick="alert(點(diǎn)我干啥!);">
<button onlick = "alert("test");>點(diǎn)我呀！<button>

數(shù)據(jù)類型

變量是可以存放某些之的內(nèi)存的命名。

定義：存放數(shù)據(jù)，內(nèi)存可以存儲(chǔ)任意數(shù)據(jù)

JavaScript的變量類型

未定義的類型：undefined

數(shù)值類型： number (凡是數(shù)字都是數(shù)值型，不區(qū)分和小數(shù))

字符換類型：string(凡是引號(hào)包裹起來(lái)的內(nèi)容全部都是字符串)

對(duì)象類型：object(特殊數(shù)值null)

布爾類型：boolean （true,false）

函數(shù)類型：function

JavaScript里特殊的值：

undefined 未定義，所有js變量未賦予初始值的時(shí)候，默認(rèn)值都是unde空值

null 空值

關(guān)系（比較）運(yùn)算

等于： == 等于是簡(jiǎn)單的做字面值的比較

全等于： === 除了做字面值的比較之外，還會(huì)比較兩個(gè)變量的數(shù)據(jù)類型

邏輯運(yùn)算

且運(yùn)算：&&

第一種：當(dāng)表達(dá)式全為真的時(shí)候，返回最后一個(gè)表達(dá)式的值

第二種：當(dāng)表達(dá)式中，有一個(gè)為假的時(shí)候。返回第一個(gè)為假的表達(dá)式的值

var a = "abc";
var b = true;
var d = false;
var c = null;

alert(a && b);  // true
alert(b && a);  // true
alert(a && d);  // false
alert(a && c);  // null

或運(yùn)算：| |

第一種：當(dāng)表達(dá)式全為假時(shí)，返回最后一個(gè)表達(dá)式的值

第二種：只要有一個(gè)表達(dá)式為真，就會(huì)把返回第一個(gè)為真的表達(dá)式的值

alert(a || c);  // null
alert(c || d);  // false
alert(a || c);  // abc
alert(b || c);  //abc

并且&&與預(yù)算和| |或運(yùn)算有短路。

短路就是說(shuō)當(dāng)這個(gè)&&或| |運(yùn)算有結(jié)果了之后。后面的表達(dá)式不在執(zhí)行

在Javascript語(yǔ)言中，所有的變量，都可以作為一個(gè)boolean類型的變量去使用

數(shù)組

1，數(shù)組定義方式

js中數(shù)組的定義

格式：

var 數(shù)組名 = [];   //創(chuàng)建空數(shù)組

var 數(shù)組名 = [1,'abc',true]；   //定義數(shù)組同時(shí)賦值元素

alert(arr.length);  // 遍歷數(shù)組

注意：使用最大下標(biāo)值就會(huì)自動(dòng)的給數(shù)組做擴(kuò)容操作

函數(shù)

可以使用function關(guān)鍵字來(lái)定義函數(shù)

// 第一種 
var function 函數(shù)名(函數(shù)體){
    //(函數(shù)體)
 }
 // 調(diào)用函數(shù)：函數(shù)名(實(shí)際參數(shù));
//第二種
var 函數(shù)名 = function(函數(shù)體){
    //(函數(shù)體)
 }
 // 調(diào)用函數(shù)：函數(shù)名(實(shí)際參數(shù));

1，函數(shù)只有被調(diào)用后才會(huì)執(zhí)行

2，如果函數(shù)需要返回值，直接使用return返回，不會(huì)像Java一樣要考慮返回值的類型

在JavaScript語(yǔ)言中，如何定義帶有返回值的函數(shù)？

只需要在函數(shù)體內(nèi)直接使用return語(yǔ)句返回值即可！

注：再Java中函數(shù)允許重載，但是再JS中函數(shù)的重載會(huì)直接覆蓋掉上一次的定義

函數(shù)的 arguments 隱形參數(shù)（只放在function函數(shù)內(nèi)）

就是再function函數(shù)中不需要定義，但卻可以直接用來(lái)獲取所有參數(shù)的變量。我們管它叫隱形參數(shù)。

隱形參數(shù)特別像Java基礎(chǔ)的可變長(zhǎng)參數(shù)一樣。

可變長(zhǎng)參數(shù)其他是一個(gè)數(shù)組。

那么js中的隱形參數(shù)也跟Java的可變長(zhǎng)參數(shù)一樣。操作類似數(shù)組。

在js中萬(wàn)物皆對(duì)象，甚至數(shù)組字符串函數(shù)都是對(duì)象。所以這個(gè)叫做arguments的東西也是個(gè)對(duì)象，而且是一個(gè)特殊的對(duì)象，它的屬性名是按照傳入?yún)?shù)的順序來(lái)的，第一個(gè)參數(shù)的屬性名是'0'，第二個(gè)參數(shù)的屬性名是'1'，以此類推，并且它還有個(gè)length屬性，存儲(chǔ)的是當(dāng)前傳入函數(shù)參數(shù)的個(gè)數(shù)，很多時(shí)候我們把這種對(duì)象叫做類數(shù)組對(duì)象。

JS中的自定義對(duì)象（擴(kuò)展內(nèi)容）

Object形式的自定義對(duì)象

對(duì)象的定義：

var 變量名 = new Object(); //對(duì)象實(shí)例（空對(duì)象）

變量名.屬性名 = 值;    // 定義一個(gè)屬性

變量名.函數(shù)名 = function(){}  // 定義一個(gè)函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      // 對(duì)象的定義
      // var 變量名 = new Object();    //對(duì)象實(shí)例（空對(duì)象）
      // 變量名.屬性名 = 值;   // 定義一個(gè)屬性
      // 變量名.函數(shù)名 = function(){} // 定義一個(gè)函數(shù)
      var obj = new Object();
      obj.name = "111";
      obj.age = 18;
      obj.fun = function (){
        alert("姓名：" + this.name + "，年齡：" + this.age);
      }
      // 對(duì)象的訪問(wèn)：
      // 變量名.屬性 / 函數(shù)名();
      alert(obj.age)
    </script>
</head>
<body>

</body>
</html>

花括號(hào)形式的自定義對(duì)象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      // 花括號(hào)形式對(duì)象的定義：
      // var 變量名 = {   // 空對(duì)象
      //   屬性名:值,  // 定義一個(gè)屬性
      //   屬性名:值,  // 定義一個(gè)屬性
      //   函數(shù)名:function(){}  // 定義一個(gè)函數(shù)
      // };
      var obj = {
        name:"劉德華",
        age:19,
        fun : function(){
          alert("姓名：" + this.name + "，年齡：" + this.age);
        }
      };
      // 對(duì)象的訪問(wèn)：
      // 變量名.屬性 / 函數(shù)名();
      alert(obj.name);  // 訪問(wèn)var內(nèi)的局部變量
      obj.fun();  // 訪問(wèn)var內(nèi)的fun方法
    </script>
</head>
<body>

</body>
</html>

JS中的事件

什么是事件？事件是電腦輸入設(shè)備與網(wǎng)頁(yè)進(jìn)行交互的相應(yīng)。我們稱之為事件。

常用的事件：

onload：加載完成事件頁(yè)面加載完成之后，常用于做頁(yè)面js代碼初始化操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    // onload事件的方法
    function onloadFun(){
      alert("靜態(tài)注冊(cè)onload事件，所有代碼");
    }
    // onload 事件動(dòng)態(tài)注冊(cè)是固定寫法
    window.onload = function (){
      alert("動(dòng)態(tài)注冊(cè)的onload事件")
    }
  </script>
</head>
<!--靜態(tài)注冊(cè)事件onload事件
<body onload="alert('靜態(tài)注冊(cè)onload事件')">
-->
<body>
</body>
</html>

onclick：?jiǎn)螕羰录?常用于按鈕的點(diǎn)擊相應(yīng)操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
        alert("靜態(tài)注冊(cè)onclick事件");
        }
        // 動(dòng)態(tài)注冊(cè)onclick事件
        window.onload = function (){
            // 1 獲取標(biāo)簽對(duì)象
            /*
             * document 是JavaScript語(yǔ)言提供的一個(gè)對(duì)象（文檔）
             * get  獲取
             * Element  元素（就是標(biāo)簽）
             *
             * getElementById通過(guò)ID屬性獲取標(biāo)簽對(duì)象
             */
        var btnObj = document.getElementById("btn01");
        // alert(btnObj);
        // 2 通過(guò)標(biāo)簽對(duì)象.事件名 = function(){}
        btnObj.onclick = function (){
            alert("動(dòng)態(tài)注冊(cè)的onClick事件")
            }
        }
    </script>
</head>
<body>
    <!--靜態(tài)注冊(cè)onClick事件-->
    <button onclick="onclickFun();">靜態(tài)注冊(cè)</button>
    <!--動(dòng)態(tài)注冊(cè)onClick事件-->
    <button id="btn01">動(dòng)態(tài)注冊(cè)</button>
</body>
</html>

onblur：失去焦點(diǎn)事件常用于輸入框失去焦點(diǎn)后驗(yàn)證其輸入內(nèi)容是否合法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      // onblur事件會(huì)在對(duì)象失去焦點(diǎn)時(shí)發(fā)生
      // 靜態(tài)注冊(cè)失去焦點(diǎn)事件
      function onblurFun(){
        // console是控制臺(tái)對(duì)象，是由JavaScript語(yǔ)言提供，專門用來(lái)向?yàn)g覽器的控制器打印輸出，用于測(cè)試使用
        // log（）是打印的方法
        console.log("靜態(tài)注冊(cè)失去焦點(diǎn)事件");

      }

      // 動(dòng)態(tài)注冊(cè) onblur事件
       window.onload = function (){
          // 1.獲取標(biāo)簽對(duì)象
         var passwordObj = document.getElementById("password");
         // alert(passwordObj);
         // 2.通過(guò)標(biāo)簽對(duì)象.事件名 = funcion(){};
         passwordObj.onblur = function (){
           console.log("靜態(tài)注冊(cè)失去焦點(diǎn)事件");
         }
       }
    </script>
</head>
<body>
    用戶名:<input type="text" onblur="onblurFun();"><br/>
    密碼:  <input id="password" type="text"><br/>
</body>
</html>

onchange：內(nèi)容發(fā)生改變事件常用于下拉列表和輸入框內(nèi)容發(fā)生改變后操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onchangeFun(){
      alert("您的男神改變了")
    }
  </script>
</head>
<body>
請(qǐng)選擇你心目中的男神：
<select onchange="onchangeFun()">
  <option>你自己</option>
  <option>洋洋</option>
  <option>羊羊</option>
  <option>陽(yáng)陽(yáng)</option>
</select>
</body>
</html>

onsubmit：表單條件事件常用于表單提交前，驗(yàn)證所有表單項(xiàng)是否合法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 靜態(tài)注冊(cè)表單提交事件
        function onsubmitFun(){
            // 要驗(yàn)證所有表單項(xiàng)是否合法，如果有一個(gè)不合法就阻止表單提交
            alert("靜態(tài)注冊(cè)表單提交時(shí)間-----發(fā)現(xiàn)不合法")
            return false;
        }
        window.onload = function (){
            // 1 獲取標(biāo)簽對(duì)象
            var fromObj = document.getElementById("form01");
            // 2 通過(guò)標(biāo)簽對(duì)象.事件名 = function(){}
            fromObj.onsubmit = function (){
                // 要驗(yàn)證所有表單項(xiàng)是否合法，如果有一個(gè)不合法就阻止表單提交
                alert("動(dòng)態(tài)注冊(cè)表單提交事件-----發(fā)現(xiàn)不合法");

                return false;
            }
        }
    </script>
</head>
<body>
    <from action = "http://localhost:8080" method = "get" onsubmit="return false">
        <input type="submit" value="靜態(tài)注冊(cè)"/>
    </from>
    <from action = "http://localhost:8080" id="form01">
        <input type="submit" value="動(dòng)態(tài)注冊(cè)"/>
    </from>


</body>
</html>

事件的注冊(cè)又分為靜態(tài)注冊(cè)和動(dòng)態(tài)注冊(cè)兩種

事件的注冊(cè)（綁定）？

其實(shí)就是告訴瀏覽器，當(dāng)事件響應(yīng)后要執(zhí)行哪些操作代碼，叫事件注冊(cè)或事件綁定。

靜態(tài)注冊(cè)事件：通過(guò)html標(biāo)簽的事件屬性直接賦值于事件響應(yīng)后的代碼，這種方式我們叫靜態(tài)注冊(cè)。

動(dòng)態(tài)注冊(cè)事件：是指先通過(guò)js代碼得到的標(biāo)簽dom對(duì)象，然后再通過(guò)dom對(duì)象.事件名 = function(){}這種形式賦于事件響應(yīng)后的代碼，叫動(dòng)態(tài)注冊(cè)。