21JavaScript筆記（1）

小島的每一段verse發表於2021-08-17
JavaScript筆記

JavaScript

  • 基於物件和事件驅動

  • 簡單描述性語言

  • 函式優先

  • 解釋型（即時編譯型）

  • 具有安全性的指令碼語言

1.js組成

  • 核心語法（ECMAScript）：開放的、標準的指令碼語言規範，主要包含了語法，變數及運算子，邏輯控制語句等

  • 瀏覽器物件模型（BOM）：獨立於內容與瀏覽器視窗進行互動的物件，可以實現與HTML頁面的互動。

  • 文件物件模型（DOM）：訪問和操縱HTML文件。

 

2.使用js

  • 使用外部js檔案

<script src="js/write.js"></script>

 

write.js

document.write("學習《使用前端技術展現 Web 系統》課程");

 

外部指令碼檔案中不能包含<scirpt>標籤，只能包含指令碼程式碼

  • 使用內嵌js

將js函式放在<head>標籤中

<script>
<!-- JavaScript指令碼程式碼-->
</script>

 

 

  • 屬性js

特別簡短的js程式碼，可以直接在html標籤中加入

<input
  type="button"
  name="alert"
  value="警告"
  onclick="javascript: alert('我是JavaScript指令碼程式碼！');"
/>

 

瀏覽器本身並不會執行js，而是通過內建js引擎（直譯器）；來執行js程式碼。

3.js語法

  • js基礎語法

function 函式名(引數) {
  return 返回值;
}

 

js是一種弱型別語言，在宣告變數時，不需要指定變數的型別，變數的型別由值決定。用var 關鍵字宣告變數，可以直接賦值。

var height = 80;
var left,
  right,
  top,
  bottom = 20;
var info = "I’m fine!";

 

js對大小寫敏感

js資料型別包括：

字串、數字、布林、陣列、物件、空、未定義（未賦值的變數），字串需要用單引號或雙引號括起來

可以用typeof運算子來判斷一個變數的資料型別

js中所有事物都是物件

var text = { width: 80, height: 20, name: "密碼框", color: "blue" };
document.write(
        text.name + "的寬和高分別為：" + text.width + " " + text.height
);

 

  • js流程控制

js 的運算子和java非常類似

js控制流程分為if..else switch for while break continue

switch可以使用字串。java中直到jdk7才可以使用字串

js中的輸入和輸出可以分為對使用者和對網頁

針對使用者輸入、輸出：彈出警告框alert(text)、對話方塊要求使用者輸入prompt(提示，預設值)

針對網頁輸入、輸出：操作HTML元素，通過document.getElementByTag(id)獲取元素

  • js函式

類似於Java中的方法，主要是為了使程式結構清晰，程式碼複用和便於維護。

js函式直接通過函式名呼叫就行。js也預定了一些系統函式

 var input1 = prompt("請輸入第一個運算元：", "10");
        var oper = prompt("請輸入操作符（僅支援:+ - * /）：", "+");
        var input2 = prompt("請輸入第二個數：", "8");
        var rst;
        num1 = parseFloat(input1);
        num2 = parseFloat(input2);

 

4.js內建型別與物件

  • js類與物件

建立js物件：使用物件字面量

空物件：一隊花括號

var myCar = {};

 

物件的屬性：

// 汽車的名字
myCar.name = "Fiat";
// 汽車的型號
myCar.model = "500";
// 汽車的重量
myCar.weight = 850;
// 描述汽車重量的單位
myCar.wUnit = "kg";
// 汽車的顏色
myCar.color = "white";

 

物件的方法：

物件名.方法名 = function(){方法體};

myCar.start = function () {
  // 控制檯語句表明這臺車正在啟動
  console.log("汽車正在啟動......");
};

 

方法中訪問屬性：this代表當前物件

myCar.start = function () {
  console.log("在物件內部，'this'這個詞指代物件本身:" + (myCar === this));
  console.log(this.name + "正在行駛中......");
};

 

在物件宣告中定義屬性：

屬性名：值，屬性名：值，

方法名：function(){方法體},

var myCar2 = {
  /*屬性名*/ /*冒號*/ /*屬性值*/ /*屬性定義分隔符*/ name: "Fiat",
  model: "500",
  weight: 850,
  wUnit: "kg",
  color: "white" /*方法定義分隔符*/ /*冒號*/ /*函式定義*/,
  /*方法名*/ start: function () {
    console.log("名字是" + myCar.name + "的汽車正在啟動......");
  },
  drive: function () {
    console.log(this.name + "正在行駛中......");
  },
  brake: function () {
    console.log(this.name + "緊急剎車!");
  },
  stop: function () {
    console.log(this.name + "已經停穩了......");
  },
};

 

  • js陣列、字串

js陣列：Array()

定義陣列：

new Array(); 
new Array(size); 
new Array(element0,element1,...,elementN);

 

陣列屬性：length

陣列方法：big——大號字型 small——小號字型 blink——閃動字型 bold——粗體 italics——斜體 strike——刪除線 flexed——印表機文字 sub——上標 sup——下標 toLowerCase——小寫

toUpperCase——大寫 fontcolor——指定顏色 fontsize——字型大小 concat——連線字串

charAt charCodeAt——返回Unicode編碼 search——檢索索引位置 indexOf——檢索索引位置，可以指定開始位置 lastIndexOf match——類似indexOf，返回值 slice——從起始位置提取子串 substr——從開始位置提取指定長度的子串 substring——從指定位置提取子串 replace split——分割為字串陣列，第二個參數列示返回陣列的最大長度 fromCharCode——字元編碼構建字串 anchor——建立為錨 link——建立為連結 toSource——返回物件的原始碼 toString valueOf

  • 基本包裝型別Number、Date、Math、Global

js基本型別有undefined、null、boolean、number、string，其中後三種存在包裝類Boolean、Number、String，包裝類使得方法可以直接呼叫

Number包裝類：

var myNum = new Number(value);

 

Number()不是建構函式，只是普通函式

Number屬性：

MAX_VALUE MIN_VALUE NaN——非數字值 NEGATIVE_INFINITY ——負無窮大 POSITIVE_INFINITY——正無窮大 toString toFIxed——轉換為字串，按指定小數位四捨五入 toExponential——轉換為科學技術法，保留小數點後n位數字 toPrecision——格式化為指定長度 valueOf

Date：

var date = new Date();
      document.write("Date顯示：" + date + "<br>");
      document.write("Date.toUTCString顯示：" + date.toUTCString() + "<br>");
 date.setFullYear(2014, 8, 8); // 2014 年 9 月 8 日
      date.setHours(18);
      date.setMinutes(18);
      date.setSeconds(18);
document.write("設定後，Date顯示：" + date + "<br>");
      date = new Date("Jan 09, 2014, 19:19:19"); // 注意格式
      document.write("設定後，Date顯示：" + date + "<br>");
  var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();
  document.getElementById('txt').innerHTML = "現在時間為：" + h + ":" + m + ":" + s;
                setTimeout('Time()',500);

 

Math：js內建物件

Math 方法都是靜態的

Math：PI LN2 SQRT1_2——0.5的平方根 E LOG2E abs() ceil() exp() floor() max() min() random() round()

Global：是一個物件，不是一個類，既沒有構造引數，也無法例項化

Global：infinity——正無窮大 java——java.*包，一個包 NaN packages undefined

Global方法：decodeURI encodeURI decodeURIComponent encodeURIComponent escape——對字串編碼 eval——計算js字串，作為js指令碼執行 getClass——返回js物件的類 isNaN

Number()——轉換成數字 parseFloat——解析為浮點數 parseInt——解析為整數 String()——轉換為字串 unescape——解碼 isFinite——是否為無窮大

 

相關文章