App下載

JavaScript基礎(chǔ)入門

猿友 2021-01-27 10:36:59 瀏覽數(shù) (5080)
反饋

JavaScript簡介

JavaScript(Java腳本)是一種基于對象（Object）和事件驅(qū)動（ Event Driven）并具有安全性能的解釋型腳本語言，目的是能夠在客戶端的網(wǎng)頁中增加動態(tài)效果和交互能力，實現(xiàn)了用戶與網(wǎng)頁之間的一種實時的、動態(tài)的交互關(guān)系。

JS組成

JS組成：ECMAScript（JS的核心）、DOM（文檔對象模型）、BOM（瀏覽器對象模型）

  • ECMAScript：主要定義了 JS 的語法
  • DOM：一套操作頁面元素的 API，DOM 可以把 HTML 看做是文檔樹，通過 DOM 提供的 API 可以對樹上的節(jié)點進(jìn)行操作
  • BOM：一套操作瀏覽器功能的 API，通過 BOM 可以操作瀏覽器窗口

JS用途

主要用于網(wǎng)頁特效、服務(wù)端開發(fā)、命令行工具、桌面程序、APP、控制硬件—物聯(lián)網(wǎng)、游戲開發(fā)

JavaScript的書寫位置

1、寫在行內(nèi)

 <input type="button" value="按鈕" onclick="alert('Hello World')" />

2、寫在 script 標(biāo)簽中

<script>
alert('Hello,world!');
</script>
由<script>...</script>包含的代碼就是JavaScript代碼，他將直接被瀏覽器執(zhí)行。

3、寫入外部 js 文件中，在頁面引入

<script type="text/javascript" src="/js/Hello.js"></script>

把代碼放在單獨的文件中更有利于維護(hù)代碼，并且多個頁面可以各自引用同一個 .js 文件。

基本語法

JavaScript 語法和 Java 相似，每個語句以;結(jié)束，語句塊用{···}。 注意：JavaScript 嚴(yán)格區(qū)分大小寫。

變量的使用

變量的概念： 一個變量就是分配了一個值的參數(shù)。使用變量可以方便的獲取或者修改內(nèi)存中的數(shù)據(jù) 變量的聲明： 在聲明變量時使用關(guān)鍵字 var，要注意關(guān)鍵字與變量名之間的空格，也可以在一行中聲明多個變量，以逗號分隔變量。

var age;
var age, name, sex; age = 10; name = ‘zs’;

注意： 變量名必須是一個 JavaScript 標(biāo)識符，應(yīng)遵循以下標(biāo)準(zhǔn)命名規(guī)則：

  • 第一個字符必須是字母、下劃線（_）或者美元符（$）
  • 后面可以跟字母、下劃線、美元符、數(shù)字，但不能是其他符號
  • 在被申明的范圍內(nèi)，變量的名稱必須是唯一的
  • 不能使用保留關(guān)鍵字作為標(biāo)識符

變量的賦值： 在 JavaScript 中，使用=對變量進(jìn)行賦值?？梢园讶我鈹?shù)據(jù)類型賦值給變量，同一個變量可以反復(fù)賦值，而且可以是不同的數(shù)據(jù)類型的變量，但是只能用var申明一次。要顯示變量，可以用console.log(x)，打開 Chrome 的控制臺就可以看到結(jié)果。

var age; age = 18;
var age = 18；

注釋

以//開頭直到行末的字符被視為注釋，注釋是給開發(fā)人員看的，JavaScript 引擎會自動忽略。 另一種塊注釋是用/*···*/把多行字符包裹起來，視為注釋。 例如：

<html>
<head>
<script> //這是一行注釋
alert('Hello,world!');
/*從這里開始是塊注釋
?
塊注釋結(jié)束*/
</script>
</head>
<body>
···
</body>
</html>

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

JS 的數(shù)據(jù)類型分為兩大類

  • 簡單數(shù)據(jù)類型（基本數(shù)據(jù)類型）：boolean、number、string、null、undefined（、symbol）
  • 復(fù)雜數(shù)據(jù)類型：object

微信截圖_20210127093500


number

JavaScript 不區(qū)分整數(shù)和浮點數(shù)，統(tǒng)一用 number 表示，以下都是合法的 number 類型：

123;//整數(shù)123 0.456;//浮點數(shù)0.456 1.2345e3;//等同于1234.5 -99;//負(fù)數(shù) NaN;//當(dāng)無法計算結(jié)果是使用NaN表示 Infinity;//表示無限大

number 存在精度問題：

0.2 + 0.1 = 0.30000000000000004 0.1 + 0.2 !== 0.3 //true

所以最好不要判斷浮點數(shù)是否相等

string

用于表示由零個或多個 16 位 Unicode 字符組成的字符序列，即字符串。字符串是以單引號'或雙引號"括起來的任意文本，比如'abc'、"xyz"等等。單引號和雙引號只是一種表示方式，不是字符串的一部分，所以，字符串'abc'中只有 a、b、c 這3個字符。 特點： 不可變的 當(dāng)重新為一個字符串賦值時，實際上是重新開辟內(nèi)存空間，例如：

var lang=“Java”; lang=lang+“Script”;

以上代碼是先創(chuàng)建一個空間存放字符串 “Java”，接著在運行到下一行代碼時，在內(nèi)存中重新開辟一個空間，存放的是"JavaScript"，變量 lang 指向新開辟的空間。這些操作都是后臺發(fā)生的，影響網(wǎng)站性能，所以一般代碼中不要寫大量的字符串拼接。

null和undefined

null表示一個“空”的值，他和0以及空字符串’‘不同，0是一個數(shù)值，’'表示長度為0的字符串，而 null 示空。 undefined 表示“未定義”。

boolean

布爾值和布爾代數(shù)的表示完全一樣，一個布爾值只有 true 和 false 兩種值，區(qū)分大小寫?？梢灾苯佑?true 和 false 表示布爾值，也可以通過布爾運算算出來：

true;//這是一個true值
false;//這是一個false值
2>1;//這是一個true值
2>=3;//這是一個false值

轉(zhuǎn)為boolean值

  • null
  • undefined
  • “”
  • NaN
  • 0

注意：布爾值經(jīng)常用在條件判斷句中。

typeof運算符

獲取變量類型，返回的值是string類型 結(jié)果有：

  • “undefined”
  • “boolean”
  • “string”
  • “number”
  • “object”
  • “function”
typeof 10     //"number"
typeof  "10"  //"string"
?
function fn(){
...
}
typeof fn   //"function"
//age未聲明
typeof age    //"undefined"
?
typeof null   //"object"
typeof undefined //"undefined"

JavaScript對象

一、object 對象

  1. Object 類型，我們也稱為一個對象。是 JavaScript 中的引用數(shù)據(jù)類型。
  2. 它是一種復(fù)合值，它將很多值聚合到一起，可以通過名字訪問這些值。
  3. 對象也可以看做是屬性的無序集合，每個屬性都是一個名/值對。
  4. 對象除了可以創(chuàng)建自有屬性，還可以通過從一個名為原型的對象那里繼承屬性。
  5. 除了字符串、數(shù)字、true、false、null 和 undefined 之外，JS 中的值都是對象。

二、創(chuàng)建對象 創(chuàng)建對象的方式有兩種

第一種：
var obj = new Object();
obj.name = "###";
obj.age = 15;
第二種：
var obj = {
name:"###",
age:15
}

三、對象屬性的訪問

訪問屬性的兩種方式：對象.屬性名 或者 對象[“屬性名”]

四、數(shù)組

數(shù)組也是對象的一種。數(shù)組是一種用于表達(dá)有順序關(guān)系的值的集合的語言結(jié)構(gòu)。

創(chuàng)建數(shù)組 =====注意：不同于 java 數(shù)組長度可變 var users = new Array(3); users[0]=3; users[1]=9; users[2]=5; users[3]=999; 數(shù)組內(nèi)的各個值被稱作元素。每一個元素 都可以通過索引（下標(biāo)）來快速讀取。索引是從零開始的整數(shù)。

函數(shù)

函數(shù)對任何語言來說都是核心的概念。通過函數(shù)可以封裝任意多條語句，而且可以在任何地方、任何時候調(diào)用執(zhí)行。ECMAScript 中的函數(shù)由function關(guān)鍵字來聲明，后跟一組參數(shù)以及函數(shù)體。 語法：

function functionName(arg0,arg1...){
    statement
}

示例：

function sayHi(name,message){
    alert("Hello "+name+","+message);
}
sayHi("ly","how are you?");//函數(shù)的調(diào)用

一些自帶的函數(shù)

微信截圖_20210127093303

返回值 ECMAScript 中的函數(shù)定義時可以有返回值，也可以沒有返回值。當(dāng)函數(shù)執(zhí)行完的時候，并不是所有時候都要把結(jié)果打印。我們期望函數(shù)給我一些反饋（比如計算的結(jié)果返回進(jìn)行后續(xù)的運算），這個時候可以讓函數(shù)返回一些東西。也就是返回值。函數(shù)通過 return 返回一個返回值

返回值語法：

//聲明一個帶返回值的函數(shù)
function 函數(shù)名(形參1, 形參2, 形參...){
  //函數(shù)體
  return 返回值;
}
?
//可以通過變量來接收這個返回值
var 變量 = 函數(shù)名(實參1, 實參2, 實參3);

函數(shù)的調(diào)用結(jié)果就是返回值，因此我們可以直接對函數(shù)調(diào)用結(jié)果進(jìn)行操作。

返回值詳解： 如果函數(shù)沒有顯示的使用 return 語句 ，那么函數(shù)有默認(rèn)的返回值：undefined 如果函數(shù)使用 return 語句，那么跟再 return 后面的值，就成了函數(shù)的返回值 如果函數(shù)使用 return 語句，但是 return 后面沒有任何值，那么函數(shù)的返回值也是：undefined 函數(shù)使用 return 語句后，這個函數(shù)會在執(zhí)行完 return 語句之后停止并立即退出，也就是說 return 后面的所有其他代碼都不會再執(zhí)行。

參數(shù) ECMAScript 不介意傳遞的參數(shù)的個數(shù)，也不在乎參數(shù)的數(shù)據(jù)類型。ECMAScript 中的參數(shù)是由一個數(shù)組來表示的，函數(shù)體內(nèi)部可以通過arguments對象來訪問這個參數(shù)數(shù)組。arguments對象只是與數(shù)組類似（不是Array實例）

形參和實參：

形式參數(shù)：在聲明一個函數(shù)的時候，為了函數(shù)的功能更加靈活，有些值是固定不了的，對于這些固定不了的值。我們可以給函數(shù)設(shè)置參數(shù)。這個參數(shù)沒有具體的值，僅僅起到一個占位置的作用，我們通常稱之為形式參數(shù)，也叫形參。 實際參數(shù)：如果函數(shù)在聲明時，設(shè)置了形參，那么在函數(shù)調(diào)用的時候就需要傳入對應(yīng)的參數(shù)，我們把傳入的參數(shù)叫做實際參數(shù)，也叫實參。
var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y實參，有具體的值。函數(shù)執(zhí)行的時候會把x,y復(fù)制一份給函數(shù)內(nèi)部的a和b，函數(shù)內(nèi)部的值是復(fù)制的新值，

推薦好課：JavaScript微課、ES6微課


JavaScript

1 人點贊