2. 程式人生 > >01-JavaScript基礎.md

01-JavaScript基礎.md

阿新 • • 發佈：2018-12-13

學習目標:

  • 掌握程式設計的基本思維
  • 掌握程式設計的基本語法 typora-copy-images-to: media

JavaScript基礎

HTML和CSS 京東

課前娛樂

眾人皆笑我瘋癲,我笑爾等看不穿 一盤棋而已

##課前說明 目標：掌握程式設計的基本思想 掌握JavaScript的基礎語法,使用常見API(備註)完成相應案例及練習和作業 培養獨立解決問題能力 遇到問題先獨立除錯(牛X從規範和除錯開始) 能夠獨立寫出所有案例程式碼 注意：

  1. 以大多數同學的接受能力為基準，穩準狠的前行
  2. 注重基礎，以最簡單的案例說明問題，並以企業專案案例進行實踐
  3. 課上思考，課下提問。不需要深究的地方不要鑽牛角尖。
  4. 必須完成作業,基礎堅挺的同學低調,基礎薄弱同學多問 一句話送給大家:當你要放棄的時候想想當初為什麼堅持到現在！ 筆記和程式碼是”大家的”, 自己寫的才是自己的. 複製程式碼者,沒有”男朋友” 不寫程式碼者,沒有”女朋友”

##階段說明 JavaScript基礎 Web API JavaScript高階

##第一天重點內容 變數的宣告及使用 資料型別 型別轉換 運算子

##課外提示 1.敲程式碼用指法,指法配圖，堅持一週者即可熟練 2.碼農不需要練就一陽指或者二指禪 3.可以使用金山打字通，此處並非打廣告,個人建議，天天敲程式碼，不停的反覆的敲練習和作業，速度和基本功的快速提升 奉勸各位: 保護好自己的手

控制自己的右手 鍵盤指法 windows中的常用快捷鍵 快捷鍵

##瀏覽器說明 瀏覽器是指可以顯示網頁伺服器或者檔案系統的HTML檔案內容，並讓使用者與這些檔案互動的一種軟體。 通俗的講:可以顯示頁面的一個軟體, 國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最經常使用到的客戶端程式。 常用的五大瀏覽器：chrome，firefox，Safari，ie，opera 我們用chrome(谷歌瀏覽器) 瀏覽器 程式碼執行

網頁、網站和應用程式

網頁：單獨的一個頁面 網站：一些列相關的頁面組成到一起 應用程式：可以和使用者產生互動，並實現某種功能。

演示JavaScript的強大

JavaScript介紹

JavaScript是什麼

HTML CSS

JavaScript 程式語言 流程控制

Netscape在最初將其指令碼語言命名為LiveScript，後來Netscape在與Sun合作之後將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規範也借自Java。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。Java和JavaScript的關係就像張雨和張雨生的關係，只是名字很像。

​ Java 伺服器端的程式語言

​ JavaScript 執行在客戶端(瀏覽器)的程式語言

JavaScript是一種執行在***客戶端*** 的***指令碼語言*** JavaScript的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

發明者

JavaScript最初的目的

JavaScript現在的意義(應用場景)

JavaScript 發展到現在幾乎無所不能。

  1. 網頁特效
  2. 服務端開發(Node.js)
  3. 命令列工具(Node.js)
  4. 桌面程式(Electron)
  5. App(Cordova)
  6. 控制硬體-物聯網(Ruff)
  7. 遊戲開發(cocos2d-js)

JavaScript和HTML、CSS的區別

  1. HTML：提供網頁的結構，提供網頁中的內容
  2. CSS: 用來美化網頁
  3. JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果

JavaScript的組成

1496912475691

ECMAScript - JavaScript的核心

ECMA 歐洲計算機制造聯合會

網景：JavaScript

微軟：JScript

定義了JavaScript的語法規範

JavaScript的核心，描述了語言的基本語法和資料型別，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

BOM - 瀏覽器物件模型

一套操作瀏覽器功能的API

通過BOM可以操作瀏覽器視窗，比如：彈出框、控制瀏覽器跳轉、獲取解析度等

DOM - 文件物件模型

一套操作頁面元素的API

DOM可以把HTML看做是文件樹，通過DOM提供的API可以對樹上的節點進行操作

JavaScript初體驗

CSS：行內樣式、嵌入樣式、外部樣式

JavaScript的書寫位置

  • 寫在行內
<input type="button" value="按鈕" onclick="alert('Hello World')" />
  • 寫在script標籤中
<head>
  <script>
    alert('Hello World!');
  </script>
</head>
  • 寫在外部js檔案中，在頁面引入
<script src="main.js"></script>

  • 注意點

    引用外部js檔案的script標籤中不可以寫JavaScript程式碼

計算機組成

軟體

  • 應用軟體：瀏覽器(Chrome/IE/Firefox)、QQ、Sublime、Word
  • 系統軟體：Windows、Linux、mac OSX

硬體

  • 三大件：CPU、記憶體、硬碟 – 主機板
  • 輸入裝置：滑鼠、鍵盤、手寫板、攝像頭等
  • 輸出裝置：顯示器、印表機、投影儀等

1497317567484

1496916239525

變數

什麼是變數

  • 什麼是變數

    變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料

  • 為什麼要使用變數

    使用變數可以方便的獲取或者修改記憶體中的資料

如何使用變數

  • var宣告變數
var age;
  • 變數的賦值
var age;
age = 18;
  • 同時宣告多個變數
var age, name, sex;
age = 10;
name = 'zs';
  • 同時宣告多個變數並賦值
var age = 10, name = 'zs';

變數在記憶體中的儲存

var age = 18;

1496981558575

變數的命名規則和規範

  • 規則 - 必須遵守的，不遵守會報錯

    • 由字母、數字、下劃線、$符號組成，不能以數字開頭

    • 不能是關鍵字和保留字，例如：for、while。

    • 區分大小寫

  • 規範 - 建議遵守的，不遵守不會報錯

    • 變數名必須有意義
    • 遵守駝峰命名法。首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword

  • 下面哪些變數名不合法

    a	    
1
age18
18age
name
$name
_sex
&sex
theworld  theWorld

案例

  1. 交換兩個變數的值
  2. 不使用臨時變數，交換兩個數值變數的值

資料型別

簡單資料型別

Number、String、Boolean、Undefined、Null

Number型別

  • 數值字面量：數值的固定值的表示法

    110 1024 60.5

  • 進位制

十進位制
	var num = 9;
	進行算數計算時，八進位制和十六進位制表示的數值最終都將被轉換成十進位制數值。
十六進位制
	var num = 0xA;
	數字序列範圍：0~9以及A~F
八進位制
    var num1 = 07;   // 對應十進位制的7
    var num2 = 019;  // 對應十進位制的19
    var num3 = 08;   // 對應十進位制的8
    數字序列範圍：0~7
    如果字面值中的數值超出了範圍，那麼前導零將被忽略，後面的數值將被當作十進位制數值解析

  • 浮點數

    • 浮點數的精度問題
浮點數
	var n = 5e-324;   // 科學計數法  5乘以10的-324次方  
浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數
   var result = 0.1 + 0.2;    // 結果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);
   不要判斷兩個浮點數是否相等
  • 數值範圍
最小值：Number.MIN_VALUE，這個值為： 5e-324
最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
無窮大：Infinity
無窮小：-Infinity

  • 數值判斷

    • NaN：not a number
      • NaN 與任何值都不相等，包括他本身
    • isNaN: is not a number

String型別

‘abc’ “abc”

  • 字串字面量

    ‘程式猿’，‘程式媛’, “黑馬程式猿”

    ​

    思考：如何列印以下字串。 我是一個"正直"的人 我很喜歡"黑馬’程式猿’"

  • 轉義符

    1498289626813

  • 字串長度

    length屬性用來獲取字串的長度

    var str = '黑馬程式猿 Hello World';
console.log(str.length);

  • 字串拼接

    字串拼接使用 + 連線

    console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
    1. 兩邊只要有一個是字串，那麼+就是字串拼接功能
    2. 兩邊如果都是數字，那麼就是算術功能。

Boolean型別

  • Boolean字面量： true和false，區分大小寫
  • 計算機內部儲存：true為1，false為0

Undefined和Null

  1. undefined表示一個聲明瞭沒有賦值的變數，變數只宣告的時候值預設是undefined
  2. null表示一個空，變數的值如果想為null，必須手動設定

複雜資料型別

​ Object

獲取變數的型別

typeof

var age = 18;
console.log(typeof age);  // 'number'

字面量

在原始碼中一個固定值的表示法。

數值字面量：8, 9, 10

字串字面量：‘黑馬程式設計師’, “大前端”

布林字面量：true，false

註釋

單行註釋

用來描述下面一個或多行程式碼的作用

// 這是一個變數
var name = 'hm';

多行註釋

用來註釋多條程式碼

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

資料型別轉換

如何使用谷歌瀏覽器，快速的檢視資料型別？

字串的顏色是黑色的，數值型別是藍色的，布林型別也是藍色的，undefined和null是灰色的

轉換成字串型別

  • toString()

    var num = 5;
console.log(num.toString());

  • String()

    String()函式存在的意義：有些值沒有toString()，這個時候可以使用String()。比如：undefined和null

  • 拼接字串方式

    num + “”，當 + 兩邊一個操作符是字串型別，一個操作符是其它型別的時候，會先把其它型別轉換成字串再進行字串拼接，返回字串

轉換成數值型別

  • Number()

    Number()可以把任意值轉換成數值，如果要轉換的字串中有一個不是數值的字元，返回NaN

  • parseInt()

    var num1 = parseInt("12.3abc");  // 返回12，如果第一個字元是數字會解析知道遇到非數字結束
var num2 = parseInt("abc123");   // 返回NaN，如果第一個字元不是數字或者符號就返回NaN

  • parseFloat()

    parseFloat()把字串轉換成浮點數
parseFloat()和parseInt非常相似，不同之處在與
	parseFloat會解析第一個. 遇到第二個.或者非數字結束
	如果解析的內容裡只有整數，解析成整數

  • +，-0等運算

    var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取負
console.log(str - 0);

轉換成布林型別

  • Boolean()

0 ‘’(空字串) null undefined NaN 會轉換成false 其它都會轉換成true

操作符

運算子 operator

5 + 6

表示式 組成 運算元和操作符，會有一個結果

算術運算子

+ - * / %

一元運算子

一元運算子：只有一個運算元的運算子

5 + 6 兩個運算元的運算子 二元運算子

++ 自身加1

– 自身減1

  • 前置++

    var num1 = 5;
++ num1; 

var num2 = 6;
console.log(num1 + ++ num2);

  • 後置++

    var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++);

  • 猜猜看

    var a = 1; var b = ++a + ++a; console.log(b);    
var a = 1; var b = a++ + ++a; console.log(b);    
var a = 1; var b = a++ + a++; console.log(b);    
var a = 1; var b = ++a + a++; console.log(b);

    總結 前置++：先加1，後參與運算 後置++：先參與運算，後加1 上面兩個理解後，下面兩個自通 前置-- ：先減1，後參與運算 後置-- ：先參與運算，後減1 ​

邏輯運算子(布林運算子)

&& 與 兩個運算元同時為true，結果為true，否則都是false
|| 或 兩個運算元有一個為true，結果為true，否則為false
!  非  取反

關係運算符(比較運算子)

<  >  >=  <= == != === !==

==與===的區別：==只進行值得比較，===型別和值同時相等，則相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，型別不相等
var result = 55 === 55; 	// true

賦值運算子

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相當於  num = num + 5;

運算子的優先順序

優先順序從高到底
	1. ()  優先順序最高
	2. 一元運算子  ++   --   !
	3. 算數運算子  先*  /  %   後 +   -
	4. 關係運算符  >   >=   <   <=
	5. 相等運算子   ==   !=    ===    !==
	6. 邏輯運算子 先&&   後||
	7. 賦值運算子

// 練習1：
4 >= 6 || '人' != '阿凡達' && !(12 * 2 == 144) && true
// 練習2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'

表示式和語句

表示式

一個表示式可以產生一個值，有可能是運算、函式呼叫、有可能是字面量。表示式可以放在任何需要值的地方。

語句

語句可以理解為一個行為，迴圈語句和判斷語句就是典型的語句。一個程式有很多個語句組成，一般情況下;分割一個一個的語句

流程控制

程式的三種基本結構

順序結構

從上到下執行的程式碼就是順序結構

程式預設就是由上到下順序執行的

分支結構

根據不同的情況，執行對應程式碼

迴圈結構

迴圈結構：重複做一件事情

分支結構

if語句

語法結構

if (/* 條件表示式 */) {
  // 執行語句
}

if (/* 條件表示式 */){
  // 成立執行語句
} else {
  // 否則執行語句
}

if (/* 條件1 */){
  // 成立執行語句
} else if (/* 條件2 */){
  // 成立執行語句
} else if (/* 條件3 */){
  // 成立執行語句
} else {
  // 最後預設執行語句
}

案例： 求兩個數的最大數 判斷一個數是偶數還是奇數 分數轉換，把百分制轉換成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A 作業： 判斷一個年份是閏年還是平年 閏年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份 判斷一個人的年齡是否滿18歲(是否成年)

三元運算子

表示式1 ? 表示式2 : 表示式3
是對if……else語句的一種簡化寫法

案例： 是否年滿18歲 從兩個數中找最大值

switch語句

語法格式:

switch (expression) {
  case 常量1:
    語句;
    break;
  case 常量2:
    語句;
    break;
  case 常量3:
    語句;
    break;
  …
  case 常量n:
    語句;
    break;
  default:
    語句;
    break;
}

break可以省略，如果省略，程式碼會繼續執行下一個case
switch 語句在比較值時使用的是全等操作符, 因此不會發生型別轉換（例如，字串'10' 不等於數值 10）

案例： 顯示星期幾 素質教育（把分數變成ABCDE）千萬不要寫100個case喲

布林型別的隱式轉換

流程控制語句會把後面的值隱式轉換成布林型別

轉換為true   非空字串  非0數字  true 任何物件
轉換成false  空字串  0  false  null  undefined

// 結果是什麼？
var a = !!'123';

案例

var message;
// 會自動把message轉換成false
if (message) {     
  // todo...
}

迴圈結構

在javascript中，迴圈語句有三種，while、do…while、for迴圈。

while語句

基本語法：

// 當迴圈條件為true時，執行迴圈體，
// 當迴圈條件為false時，結束迴圈。
while (迴圈條件) {
  //迴圈體
}

程式碼示例：

// 計算1-100之間所有數的和
// 初始化變數
var i = 1;
var sum = 0;
// 判斷條件
while (i <= 100) {
  // 迴圈體
  sum += i;
  // 自增
  i++;
}
console.log(sum);

案例： 列印100以內 7的倍數 列印100以內所有偶數 列印100以內所有偶數的和 作業： 列印100以內的奇數 列印100以內的奇數的和

do…while語句

do…while迴圈和while迴圈非常像，二者經常可以相互替代，但是do…while的特點是不管條件成不成立，都會執行一次。

基礎語法：

do {
  // 迴圈體;
} while (迴圈條件);

程式碼示例：

// 初始化變數
var i = 1;
var sum = 0;
do {
  sum += i;//迴圈體
  i++;//自增
} while (i <= 100);//迴圈條件

案例：

求100以內所有3的倍數的和
使用do-while迴圈：輸出詢問“我愛你，嫁給我吧？”，選擇“你喜歡我嗎？(y/n):"，如果輸入為y則列印”我們形影不離“，若輸入為n,則繼續詢問

for語句

while和do…while一般用來解決無法確認次數的迴圈。for迴圈一般在迴圈次數確定的時候比較方便

for迴圈語法：

// for迴圈的表示式之間用的是;號分隔的，千萬不要寫成,
for (初始化表示式1; 判斷表示式2; 自增表示式3) {
  // 迴圈體4
}

執行順序：1243 ---- 243 -----243(直到迴圈條件變成false)

  1. 初始化表示式
  2. 判斷表示式
  3. 自增表示式
  4. 迴圈體

案例：

列印1-100之間所有數
求1-100之間所有數的和
求1-100之間所有數的平均值
求1-100之間所有偶數的和
同時求1-100之間所有偶數和奇數的和
列印正方形
// 使用拼字串的方法的原因
// console.log 輸出重複內容的問題
// console.log 預設輸出內容介紹後有換行
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);
列印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

列印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

作業：

求1-100之間所有數的乘積
求1-100之間所有奇數的和
計算1-100之間能3整除的數的和
計算1-100之間不能被7整除的數的和
// 講解思路。如果不會寫程式，可以先把數學公式準備好
本金10000元存入銀行，年利率是千分之三，每過1年，將本金和利息相加作為新的本金。計算5年後，獲得的本金是多少？
有個人想知道，一年之內一對兔子能繁殖多少對？於是就築了一道圍牆把一對兔子關在裡面。已知一對兔子每個月可以生一對小兔子，而一對兔子從出生後第3個月起每月生一對小兔子。假如一年內沒有發生死亡現象，那麼，一對兔子一年內（12個月）能繁殖成多少對？（兔子的規律為數列，1，1，2，3，5，8，13，21）

continue和break

break:立即跳出整個迴圈，即迴圈結束，開始執行迴圈後面的內容（直接跳到大括號）

continue:立即跳出當前迴圈，繼續下一次迴圈（跳到i++的地方）

案例：

求整數1～100的累加值，但要求碰到個位為3的數則停止累加
求整數1～100的累加值，但要求跳過所有個位為3的數

作業：

求1-100之間不能被7整除的整數的和（用continue） 求200-300之間所有的奇數的和（用continue） 求200-300之間第一個能被7整數的數（break）

除錯

  • 過去除錯JavaScript的方式
    • alert()
    • console.log()
  • 斷點除錯

斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式執行到這一行就會停住，然後你可以一步一步往下除錯，除錯過程中可以看各個變數當前的值，出錯的話，除錯到出錯的程式碼行即顯示錯誤，停下。

  • 除錯步驟
瀏覽器中按F12-->sources-->找到需要除錯的檔案-->在程式的某一行設定斷點
  • 除錯中的相關操作
Watch: 監視，通過watch可以監視變數的值的變化，非常的常用。
F10: 程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化。
F8：跳到下一個斷點處，如果後面沒有斷點了，則程式執行結束。

tips: 監視變數，不要監視表示式，因為監視了表示式，那麼這個表示式也會執行。

  1. 程式碼除錯的能力非常重要，只有學會了程式碼除錯，才能學會自己解決bug的能力。初學者不要覺得除錯程式碼麻煩就不去除錯，知識點花點功夫肯定學的會，但是程式碼除錯這個東西，自己不去練，永遠都學不會。
  2. 今天學的程式碼除錯非常的簡單，只要求同學們記住程式碼除錯的這幾個按鈕的作用即可，後面還會學到很多的程式碼除錯技巧。

陣列

為什麼要學習陣列

之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？

陣列的概念

所謂陣列，就是將多個元素（通常是同一型別）按一定順序排列放到一個集合中，那麼這個集合我們就稱之為陣列。

陣列的定義

陣列是一個有序的列表，可以在陣列中存放任意的資料，並且陣列的長度可以動態的調整。

通過陣列字面量建立陣列

// 建立一個空陣列
var arr1 = []; 
// 建立一個包含3個數值的陣列，多個數組項以逗號隔開
var arr2 = [1, 3, 4]; 
// 建立一個包含2個字串的陣列
var arr3 = ['a', 'c']; 

// 可以通過陣列的length屬性獲取陣列的長度
console.log(arr3.length);
// 可以設定length屬性改變陣列中元素的個數
arr3.length = 0;

獲取陣列元素

陣列的取值

// 格式：陣列名[下標]	下標又稱索引
// 功能：獲取陣列對應下標的那個值，如果下標不存在，則返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0];	// red
arr[2]; // blue
arr[3]; // 這個陣列的最大下標為2,因此返回undefined

遍歷陣列

遍歷：遍及所有，對陣列的每一個元素都訪問一次就叫遍歷。

陣列遍歷的基本語法：

for(var i = 0; i < arr.length; i++) {
	// 陣列遍歷的固定結構
}

陣列中新增元素

陣列的賦值

// 格式：陣列名[下標/索引] = 值;
// 如果下標有對應的值，會把原來的值覆蓋，如果下標不存在，會給陣列新增一個元素。
var arr = ["red", "green", "blue"];
// 把red替換成了yellow
arr[0] = "yellow";
// 給陣列新增加了一個pink的值
arr[3] = "pink";

案例

求一組數中的所有數的和和平均值
求一組數中的最大值和最小值，以及所在位置
將字串陣列用|或其他符號分割
要求將陣列中的0項去掉，將不為0的值存入一個新的陣列，生成新的陣列
翻轉陣列
氣泡排序，從小到大

函式

為什麼要有函式

如果要在多個地方求1-100之間所有數的和，應該怎麼做？

什麼是函式

把一段相對獨立的具有特定功能的程式碼塊封裝起來，形成一個獨立實體，就是函式，起個名字（函式名），在後續開發中可以反覆呼叫

函式的作用就是封裝一段程式碼，將來可以重複使用

函式的定義

  • 函式宣告
function 函式名(){
  // 函式體
}
  • 函式表示式
var fn = function() {
  // 函式體
}

  • 特點：

    函式宣告的時候，函式體並不會執行，只要當函式被呼叫的時候才會執行。 函式一般都用來幹一件事情，需用使用動詞+名詞，表示做一件事情 tellStory sayHello等

函式的呼叫

  • 呼叫函式的語法：
函式名();

  • 特點：

    函式體只有在呼叫的時候才會執行，呼叫需要()進行呼叫。 可以呼叫多次(重複使用)

程式碼示例：

// 宣告函式
function sayHi() {
  console.log("吃了沒？");
}
// 呼叫函式
sayHi();

// 求1-100之間所有數的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 呼叫
getSum();

函式的引數

  • 為什麼要有引數
function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log();
}

// 雖然上面程式碼可以重複呼叫，但是隻能計算1-100之間的值
// 如果想要計算n-m之間所有數的和，應該怎麼辦呢？
  • 語法：
// 函式內部是一個封閉的環境，可以通過引數的方式，把外部的值傳遞給函式內部
// 帶引數的函式宣告
function 函式名(形參1, 形參2, 形參...){
  // 函式體
}

// 帶引數的函式呼叫
函式名(實參1, 實參2, 實參3);

  • 形參和實參

    1. 形式引數：在宣告一個函式的時候，為了函式的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。我們可以給函式設定引數。這個引數沒有具體的值，僅僅起到一個佔位置的作用，我們通常稱之為形式引數，也叫形參。
    2. 實際引數：如果函式在宣告時，設定了形參，那麼在函式呼叫的時候就需要傳入對應的引數，我們把傳入的引數叫做實際引數，也叫實參。
var x = 5, y = 6;
fn 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
01-JavaScript基礎.md

     
 
							
							
							
學習目標:

掌握程式設計的基本思維
掌握程式設計的基本語法
typora-copy-images-to: media


JavaScript基礎
HTML和CSS   京東
課前娛樂
眾人皆笑我瘋癲,我笑爾等看不穿

##課前說明
目標：掌握程式設計的基本 



  
 

    


    
    
01 JavaScript語言基礎-概述

     
  
  
  
 概述 
 一，概念 
 JavaScript是一種直譯式指令碼語言、 Web的程式語言。所有現代的HTML頁面都使用JavaScript，用於改進設計、驗證表單、檢測瀏覽器、建立cookies等設計。 
 二，JS的組成 
 1，ECMAScript:核心部分，定義JavaScript的語法 



  
 

    


    
    
javascript基礎語法-01

     
 
                javascript基礎語法
javascript中的事件處理
使用javascript實現表單驗證（重點）


JavaScript簡介
JavaScript主要是嵌入HTML語法之中，實現頁面動態效果處理的程式語言。


javascript基礎語法（重點）

首先Jav 



  
 

    


    
    
JavaScript基礎 鼠標放上觸發事件onmouseover  鼠標移開觸發事件onmouseout

     
 type   感悟   doc   博客   use   div   true   用途   class    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。——————————————————————— 



  
 

    


    
    
JavaScript基礎 顯示/隱藏效果 點擊圖片,DIV顯示,圖片更換,點擊更換後的圖片,DIV隱藏

     
 努力學習   不出   圖片   視頻教程   .cn   clas   ==   display   推薦    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。————————————————————— 



  
 

    


    
    
JavaScript基礎 event(For IE) 顯示鼠標點擊處的坐標值 距離窗口的距離 距離網頁的距離 距離屏幕的距離

     
 wid   onclick   height   屬性   ide   一個   script   點擊   ont    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。————————————————— 



  
 

    


    
    
JavaScript基礎 在鼠標點擊處生出圖片(鼠標在哪點，圖片在哪顯示)

     
 blue   pos   child   abs   -1   func   部分   ima   推薦    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。——————————————————————— 



  
 

    


    
    
JavaScript基礎 超鏈接調用js的空鏈接 void(0)

     
 doc   charset   普通人   清心   image   com   blog   body   調用    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。—————————————————— 



  
 

    


    
    
JavaScript基礎 substr(2, 3)  2是起始的index的值 3是提出來3個字符

     
 subst   bstr   博文   htm   bst   firefox   傳智播客   src   部分    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。—————————————————— 



  
 

    


    
    
JavaScript基礎 submit按鈕配合form的onsubmit實現表單的提交與驗證

     
 java   asc   body   bmi   是我   技術   pos   true   value    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。————————————————————— 



  
 

    


    
    
JavaScript基礎 submit按鈕結合onclick事件 實現表單的提交與驗證

     
 ret   vs2015   基礎   result   oct   學習資源   charset   簡單   添加    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。———————————————— 



  
 

    


    
    
JavaScript基礎 a標記 使用onclick事件阻止默認跳轉 onclick事件 與 跳轉 ,onclick事件優先執行。

     
 傳智   技術部   推薦   turn   utf   傳智播客   ctype   div   type    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。————————————————————— 



  
 

    


    
    
JavaScript基礎 下拉列表 點擊按鈕 顯示當前選項的索引值

     
 element   type   -type   html+css   set   cnblogs   列表   對象   clas    鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。————————— 



  
 

    


    
    
javascript基礎 方法

     
 bsp   技術分享   分享   img   .com   技術   asc   方法   調用   

兩者的區別：定時器隔一段時間執行一次，延遲器只執行一次




在html中直接調用此方法會返回null


 


  
 javascript基礎 方法 



  
 

    


    
    
javascript基礎知識整理（不定時更新）

     
 nsh   firefox   可用   splice   mage   true   size   -1   對數    
1.js中真與假的定義：
　　真：true，非零數字，非空字符串，非空對象
　　假：false，數字零，空字符串，空對象（null），undefined
2.使用for循環對json進 



  
 

    


    
    
[JS] javascript基礎語法

     
 原因   方法   間接   war   init   err   ring   tag   是否   1.javascript是什麽
　　js是具有面向對象能力的,解釋性的程序設計語言.
 
2.js的類型
　　[基本類型]:string number boolean
　　[復合類型]:對象(對象,函數,數 



  
 

    


    
    
Javascript基礎簡單匯總（一）：元素獲取

     
 問題   元素節點   all   push   傳說   length   []   nbsp   文檔   在頁面腳本中，如果要對頁面元素進行操作，那麽我們就要獲取到這個元素
那麽在獲取元素之前首先得要了解什麽是DOM（document object  model）
在DOM，元素是以節點的形式表示的，每 



  
 

    


    
    
javaScript------------------基礎

     
 body   meta   switch語句   技術分享   使用   整合   其余   mas   --   javaScript概述
javaScript的歷史：
 

1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名Scrip 



  
 

    


    
    
javascript基礎知識

     
 java   float   ber   break   ava   label   數據類型轉換   oat   保留   一、基本的數據類型
  基本的數據類型有五類：1、string類型  2、boolean類型  3、number類型  4、undefined類型  5、null類型
 
二、復雜的數 



  
 

    


    
    
Javascript基礎(一)

     
 color   fine   新的   單引號   bject   瀏覽器對象模型   ava   ber   array   Javascript的組成:
     ECMAScript
     BOM:瀏覽器對象模型
     DOM:文檔對象模型
Javascript的語法:
     Javascr