Web前端開發與設計06-JavaScript基礎

時間 2020-03-03

標籤 web 前端開發設計 javascript 基礎欄目 HTML 简体版

原文原文鏈接

學習要點

JavaScript核心語法
JavaScript程序調試
JavaScript函數

爲何學習JavaScript

應用場景

嵌入動態文本於HTML頁面，對瀏覽器事件作出響應。
讀寫HTML元素。
在數據被提交到服務器以前驗證數據。
檢測訪客的瀏覽器信息。
控制cookies，包括建立和修改等。
基於Node.js技術進行服務器端編程。

本次課程應用之一：表單驗證

本次課程應用之二：頁面動態效果

JavaScript簡介

javascript的發展歷程

Netscape（網景）公司在開發出LiveScript腳本語言，當時的目的是在瀏覽器中使用該腳本操縱頁面上的元素完成頁面的特殊效果。
LiveScript後期由NetScape和Sun公司共同完成，並且LiveScript腳本語言遵守的一個基本原則就是儘量的像java，後命名爲javascript。
微軟在IE 3.0 並搭載了一個 JavaScript 的克隆版，叫作 Jscript。
在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工做組肯定統一標準：ECMA-262，規範了腳本語言的定義及使用方式，並將遵循該規範的腳本語言稱爲ECMAScript 。javascript

簡而言之：ECMAScript是一種標準，JavaScript是遵循ECMAScript標準的一種實現。html

版本及瀏覽器支持：https://www.w3school.com.cn/js/js_versions.aspjava

Javascript的基本特色

腳本語言：JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript能夠直接執行。
基於對象：JavaScript是一種基於對象的腳本語言,它不只能夠建立對象,也能使用現有的對象。（後面章節介紹）
簡單:JavaScript語言中採用的是弱類型的變量類型,對使用的數據類型未作出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。
跨平臺：JavaScript只依賴於瀏覽器而與操做系統無關，目前JavaScript已被大多數的瀏覽器所支持。編程

JavaScript的組成

JavaScript的基本結構

結構

<script type="text/javascript">
    <!--
    JavaScript語法
    -->
</script>

其中，type="text/javascript"能夠省略，瀏覽器默認腳本語言即爲JavaScript。數組

使用JavaScript方式

javascript語言若是直接編寫在html文件上，瀏覽器將會將他的內容看成html代碼執行，而不是javascript代碼。常見的引入javascript的方式有三種：瀏覽器

內嵌javascript腳本
引入外部的javascript文件
在事件中編寫javascript(不推薦)。
模塊化引入（Vue.js等框架引入）

一、使用<script>標籤內嵌JavaScript腳本
二、外部JS文件服務器

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

三、直接在HTML標籤中使用JavaScript代碼
<input type="button" value="彈出消息框" onclick="javascript:alert('歡迎你！')">cookie

JavaScript核心語法

變量

JavaScript是一種弱類型語言，沒有明確的數據類型，也就是說，在聲明變量時，不須要指定變量的類型，變量的類型由賦給變量的值決定。
一、語法：app

var 合法的變量名；

合法的變量名：變量名能夠由數字、字母、下劃線和「$」符號組成，區分大小寫。可是首字母不能是數字，而且不能使用關鍵字命名。
二、變量的使用：框架

2.1 先聲明再賦值

var width;
width = 5;

2.2 同時聲明和賦值變量

var dogName= 「bobo」;
var x, y, z = 10;

2.3 不聲明直接賦值

width=5;

變量能夠不經聲明而直接使用，但這種方法很容易出錯，也很難查找排錯，不推薦使用。

2.4 JavaScript關鍵字

數據類型

String對象

一、定義

var str = 「this is a string」;
var str = ‘this is a string’;
var oneChar=」a」;

注：JavaScript不對字符或字符串加以區別。
二、屬性
語法：字符串對象.length

var str="this is JavaScript";
var strLength=str.length; //長度是18

三、方法

四、示例代碼

var str="this is JavaScript";
var selectFirst=str.indexOf("Java");
var selectSecond=str.indexOf("Java",12);

selectFirst和selectSecond返回值各是多少？

Typeof運算符

一、typeof檢測變量的返回值
二、typeof運算符返回值以下：

undefined：變量被聲明後，但未被賦值
string：用單引號或雙引號來聲明的字符串
boolean：true或false
number：整數或浮點數
object：javascript中的對象、數組和null

三、示例代碼

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>typeof的功能和用法演示</title>
    <script type="text/javascript">
        document.write("<h2>對變量或值調用typeof運算符返回值：</h2>");
        var width, height = 10, name = "rose";
        var date = new Date();   //得到時間日期對象
        var arr = new Array();   //定義數組
        document.write("width: " + typeof (width) + "<br>");
        document.write("height: " + typeof (height) + "<br>");
        document.write("name: " + typeof (name) + "<br>");
        document.write("date: " + typeof (date) + "<br>");
        document.write("arr: " + typeof (arr) + "<br>");
        document.write("true: " + typeof (true) + "<br>");
        document.write("null: " + typeof (null));
    </script>
</head>
<body>
</body>

數組

一、定義
相同數據類型的一個或多個值的集合。數組用一個名稱存儲一系列值，用下標區分數組中的每一個值，下標從0開始。
二、建立數組

var 數組名稱 = new Array（size）；

例如：

var fruit = new Array(5);

三、爲數組元素賦值
3.1直接賦值：

var fruit = new Array(「apple」,」orange」,」peach」,」bananer」);

3.2分別爲數組元素賦值：

var fruit = new Array(4);
fruit[0] = 「apple」;
fruit[1] = 「orange」;
fruit[2] = 「peach」;
fruit[3] = 「bananer」;

四、方括號定義和賦值數組元素：
var fruit = [「apple」,」orange」,」peach」,」bananer」];

五、訪問數組元素

經過下標訪問。

六、數組經常使用屬性和方法

示例：

<script type="text/javascript">
    var fruit = "apple,orange, peach,bananer";
    var arrList = fruit.split(",");//字符串分割成數組
    var str = arrList.join("-");//使用「-」鏈接數組元素
	document.write("分割前："+fruit+"<br>");
	document.write("使用\"-\"從新鏈接後"+str);
</script>

運算符號

邏輯控制語句

一、條件結構

1.1 if結構

if(條件表達式)
{
   //JavaScript代碼;
}
else
{
  //JavaScript代碼;
}

1.2 switch結構

switch (表達式)
{  case 常量1 : 
 	   JavaScript語句1;
	   break;
 	case 常量2 : 
 	   JavaScript語句2;
 	   break;
 	...
 	default : 
      JavaScript語句3;    
}

二、循環結構

2.1 for循環

for（初始化；條件；迭代）{
    //javascript語句
}

2.2 do-wihile循環

do{
    //javascript語句
}while( 條件);

2.3 while循環

while（條件）{
    //javascript語句
}

2.4 for-in循環

for（變量 in 數組）{//變量爲數組下標
    //javascript語句
}

循環中斷

break ：中斷整個循環。
continue：退出當前循環。

註釋

單行註釋

//單行註釋內容

多行註釋

/*
多行註釋內容
*/

輸入/輸出

一、警告（alert）
語法：

alert(「提示信息」);

示例：

var name=」andy」;
var str1=」My name is andy」;
alert(「hello world!」);
alert(「個人名字叫」+name);
alert(str1);

注意：警告對話框是當前運行的網頁彈出的，在對該對話框作處理以前，當前網頁不可用，後面的代碼也不會被執行。只有進行處理（點擊確認或者直接關閉），網頁纔會繼續顯示後面的內容。

二、提示（prompt）
彈出一個提示對話框，等待用戶輸入一行數據。
語法：

prompt(「提示信息」,」輸入框的默認信息」);
prompt(「提示信息」);

示例：

prompt(「你最喜歡的顏色」,」紅色」);

該方法返回值能夠存儲到變量中：

var color= prompt(「你最喜歡的顏色」,」紅色」);

若是省略第二個參數，對話框的輸入文本框會顯示「undefined」,通常以下處理，第二個參數設爲空字符串：

prompt(「你最喜歡的顏色」,」」);

語法的約定

一、代碼區分大小寫

JavaScript關鍵字永遠小寫。
內置對象，例如Math和Date則以大寫字母開頭。
對象名稱一般小寫，若是多個單詞組成，第一個單詞首字母小寫，後面單詞首字母大寫。

二、變量、對象和函數的名稱：注意JavaScript區分大小寫。
三、分號：規範性——每一行JavaScipt語句結束使用「;」。

JavaScript程序調試

調試方法

一、使用瀏覽器調試工具斷點調試。

二、瀏覽器Console控制檯輸出變量調試。

alert（）輸出變量方法
console.log()輸出變量方法

Chorme斷點調試

Chrome輸出變量調試

JavaScript函數

相似於面向對象編程語言的方法，是執行特定功能的JavaScript代碼塊。經過函數名調用函數。

經常使用系統函數

parseInt ("字符串")

將字符串轉換爲整型數字。從字符串位置0開始檢查，判斷是不是一個數字，若是不是則返回NaN，不在執行其餘操做，若是該字符是有效數字，則該函數將查看1處的字符，同時進行檢測，一直到發現非有效字符爲止。
例如:

parseInt ("86") //返回整型值86
parseInt ("78.89") //返回整型值78
parseInt ("4567abcd") //返回整型值4567
parseInt ("this") //返回NaN

parseFloat("字符串")

將字符串轉換爲浮點型數字

如:

parseFloat("34.45") //將字符串「34.45」轉換爲浮點值34.45
parseInt ("4567color") //返回4567
parseInt ("78.89") //返回78.89
parseInt ("12.13.14") //返回12.13
parseInt ("this123") //返回NaN

isNaN()

用於檢查其參數是不是非數字

isNaN(x)

若是x是非數值，返回ture，不然返回false。
一般用於檢測parseInt（）和parseFloat（）的結果，以判斷它們表示的是不是合法的數字。

類型轉換函數應用

<script type="text/javascript">
var op1=prompt("請輸入第一個數:","")
var op2=prompt("請輸入第二個數:","")
var p1=parseInt(op1);
var p2=parseInt(op2);
var result=p1+p2;
document.write(p1+"+"+p2+"="+result);
</script>

自定義函數

定義函數

function 函數名 ( 參數1,參數2,參數3,… ) {
//JavaScript語句;
[return 返回值]
}

調用函數

函數調用通常和表單元素的事件一塊兒使用，調用格式：

事件名＝ "函數名( )" ;

演示示例

一、無參函數輸出Hello world。

二、有參函數輸出Hello world。

匿名函數

匿名函數，即沒有函數名
一、定義匿名函數

var showFun = function (count) { 
for(var i=0;i<count;i++){
document.write("<h2>Hello World</h2>");	
}
};

二、調用匿名函數

<input name="btn" type="button」 
value="請輸入顯示HelloWorld的次數" 
onclick="showFun(prompt('請輸入顯示HelloWorld的次數:',''))"/>

變量的做用域

一、全局變量：影響範圍——定義後的所有語句、函數以及<script>標籤
二、局部變量：影響範圍——方法內
三、示例
在prompt()彈出的輸入框中輸入12，頁面輸出什麼內容？爲何？斷點調試。

var i=20;

function first(){
var i=5;
for(var j=0;j<i;j++){
document.write("    "+j);
}
}

function second(){
var t=prompt("輸入一個數","")
if(t>i){
document.write(t);}
else{
document.write(i);}
first();
}
… …
<body onload="second()">