21JavaScript筆記（1）

  • 2021 年 8 月 17 日
  • 筆記

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——是否為無窮大

 

VirMach 便宜 VPS

QNews

QNews