App下載

JavaScript基礎(chǔ)入門

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

JavaScript簡(jiǎn)介

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

JS組成

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

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

JS用途

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

JavaScript的書(shū)寫位置

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 文件中，在頁(yè)面引入

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

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

基本語(yǔ)法

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

變量的使用

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

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

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

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

變量的賦值： 在 JavaScript 中，使用=對(duì)變量進(jìn)行賦值。可以把任意數(shù)據(jù)類型賦值給變量，同一個(gè)變量可以反復(fù)賦值，而且可以是不同的數(shù)據(jù)類型的變量，但是只能用var申明一次。要顯示變量，可以用console.log(x)，打開(kāi) Chrome 的控制臺(tái)就可以看到結(jié)果。

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

注釋

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

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

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

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

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

微信截圖_20210127093500


number

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

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

number 存在精度問(wèn)題：

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

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

string

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

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

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

null和undefined

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

boolean

布爾值和布爾代數(shù)的表示完全一樣，一個(gè)布爾值只有 true 和 false 兩種值，區(qū)分大小寫。可以直接用 true 和 false 表示布爾值，也可以通過(guò)布爾運(yùn)算算出來(lái)：

true;//這是一個(gè)true值
false;//這是一個(gè)false值
2>1;//這是一個(gè)true值
2>=3;//這是一個(gè)false值

轉(zhuǎn)為boolean值

  • null
  • undefined
  • “”
  • NaN
  • 0

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

typeof運(yùn)算符

獲取變量類型，返回的值是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對(duì)象

一、object 對(duì)象

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

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

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

三、對(duì)象屬性的訪問(wèn)

訪問(wèn)屬性的兩種方式：對(duì)象.屬性名 或者 對(duì)象[“屬性名”]

四、數(shù)組

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

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

函數(shù)

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

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

返回值語(yǔ)法：

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

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

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

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

形參和實(shí)參：

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

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


JavaScript

1 人點(diǎn)贊