python 全棧開發，Day50(Javascript簡介,第一個JavaScript代碼,數據類型,運算符,數據類型轉換,流程控制,百度換膚,顯示隱藏)

時間 2019-11-18

標籤 python 開發 day50 day javascript 簡介第一個代碼數據類型運算符轉換流程控制百度顯示隱藏欄目 Python 简体版

原文原文鏈接

1、Javascript簡介

Web前端有三層：

HTML：從語義的角度，描述頁面結構javascript
CSS：從審美的角度，描述樣式（美化頁面）css
JavaScript：從交互的角度，描述行爲（提高用戶體驗）html

JavaScript歷史背景介紹

布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。前端

一開始JavaScript叫作LiveScript，可是因爲當時Java這個語言特別火，因此爲了傍大牌，就更名爲JavaScript。如同「北大」和「北大青鳥」的關係。「北大青鳥」就是傍「北大」大牌。java

同時期還有其餘的網頁語言，好比VBScript、JScript等等，可是後來都被JavaScript戰勝了，因此如今的瀏覽器中，只運行一種腳本語言就是JavaScriptpython

JavaScript和ECMAScript的關係

ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）制定的標準。程序員

JavaScript是由公司開發而成的，問題是不便於其餘的公司拓展和使用。因此歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名爲ECMAScript。es6

簡單來講，ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）。就是說，你JavaScript學完了，Flash中的程序也就垂手可得了。web

ECMAScript在2015年6月，發佈了ECMAScript 6版本，語言的能力更強（也包含了不少新特性）。可是，瀏覽器的廠商不能那麼快去追上這個標準。面試

JavaScript的發展：蒸蒸日上

http://2004.sina.com.cn/

http://2008.sina.com.cn/

http://2012.sina.com.cn/

上面三個網站能夠感覺一下網頁技術的發展。

2003年以前，JavaScript被認爲「牛皮鮮」，用來製做頁面上的廣告，彈窗、漂浮的廣告。什麼東西讓人煩，什麼東西就是JavaScript開發的。因此瀏覽器就推出了屏蔽廣告功能。

2004年，JavaScript命運開始改變，那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。而且，那時候人們逐漸開始提高用戶體驗了。Ajax有一些應用場景。好比，當咱們在百度搜索框搜文字時，輸入框下方的智能提示，能夠經過Ajax實現。好比，當咱們註冊網易郵箱時，可以及時發現用戶名是否被佔用，而不用調到另一個頁面。

2007年喬布斯發佈了第一款iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。
JavaScript在移動頁面中，也是不可或缺的。而且這一年，互聯網開始標準化，按照W3C規則三層分離，JavaScript愈來愈被重視。

2010年，人們更加了解HTML5技術，HTML5推出了一個東西叫作Canvas（畫布），工程師能夠在Canvas上進行遊戲製做，利用的就是JavaScript。

2011年，Node.js誕生，使JavaScript可以開發服務器程序了。

現在，WebApp已經很是流行，就是用網頁技術開發手機應用。手機系統有iOS、安卓。好比公司要開發一個「攜程網」App，就須要招聘三隊人馬，好比iOS工程師10人，安卓工程師10人，前端工程師10人。共30人，開發成本大；並且若是要改版，要改3個版本。如今，假設公司都用web技術，用html+css+javascript技術就能夠開發App。也易於迭代（網頁一改變，全部的終端都變了）。

雖然目前WebApp在功能和性能上的體驗遠不如Native App，可是「WebApp慢慢取代Native App」頗有多是將來的趨勢。

JavaScript入門易學性

JavaScript對初學者比較友好。
JavaScript是有界面效果的（好比C語言只有白底黑字）。
JavaScript是弱變量類型的語言，變量只須要用var來聲明。而Java中變量的聲明，要根據變量的類型來定義。

好比Java中須要定義以下變量：

int a;
float a;
double a;
String a;
boolean a;

而JavaScript中，只用定義一個變量：

var a;

JavaScript不用關心其餘的一些事情（好比內存的釋放、指針等），更關心本身的業務。

JavaScript是前臺語言

JavaScript是前臺語言，而不是後臺語言。

JavaScript運行在用戶的終端網頁上，而不是服務器上，因此咱們稱爲「前臺語言」。JavaScript就是一個簡單的製做頁面效果的語言，就是服務於頁面的交互效果、美化、絢麗、不能操做數據庫。

後臺語言是運行在服務器上的，好比PHP、ASP、JSP等等，這些語言都可以操做數據庫，都可以對數據庫進行「增刪改查」操做。Node.js除外。

JavaScript的組成

JavaScript基礎分爲三個部分：

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。主要操做這個！
BOM：操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。

PS：JS機械重複性的勞動幾乎爲0，基本都是創造性的勞動。而不像HTML、CSS中margin、padding都是機械重複勞動。

JavaScript的特色

（1）簡單易用：可使用任何文本編輯工具編寫，只須要瀏覽器就能夠執行程序。

（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。

（3）基於對象：內置大量現成對象，編寫少許程序能夠完成目標

2、第一個JavaScript代碼

在頁面中，咱們能夠在body標籤中放入<script type="text/javascript"></script>標籤對

<script type="text/javascript">

</script>

alert語句

<script type="text/javascript">
       alert("hello");
</script>

alert（英文翻譯爲「警報」）的用途：彈出「警告框」。

網頁效果：

js的引入方式

也和css相似，也是三種

行內式、內接式、外接式

行內式

onclick表示點擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!--行內js onclick 事件名-->
    <div onclick="alert(111)"></div>
</body>
</html>

View Code

訪問網頁，點擊紅色區域，就會有提示框

內接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <!--內接式-->
    <script type="text/javascript">
        alert(222);
    </script>
</head>
<body>
    <div></div>
</body>
</html>

View Code

訪問網頁，直接就有提示框了

外接式

建立文件夾，名字爲js。在目錄中建立文件index.js，內容以下：

alert(333);

訪問網頁，直接輸出提示框

語法規則

學習程序，是有規律可循的，就是程序是有相同的部分，這些部分就是一種規定，不能更改，咱們成爲：語法。

（1）JavaScript對換行、縮進、空格不敏感。

備註：每一條語句末尾要加上分號，雖然分號不是必須加的，可是爲了程序從此要壓縮，若是不加分號，壓縮以後將不能運行。

（2）全部的符號，都是英語的。好比括號、引號、分號。

（3）JavaScript的註釋：

　　單行註釋：

// 我是註釋

　　多行註釋：

/*
    多行註釋1
    多行註釋2
*/

備註：sublime中，單行註釋的快捷鍵是ctrl+/，多行註釋的快捷鍵是ctrl+shift+/。

JavaScript在網頁中輸出信息的寫法

彈出警告框：alert("")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('今每天氣好晴朗');
    </script>
</head>
<body>

</body>
</html>

View Code

網頁效果：

控制檯輸出：console.log("")

console.log("")表示在控制檯中輸出。console表示「控制檯」，log表示「輸出」。

控制檯在Chrome瀏覽器的F12中。控制檯是工程師、程序員調試程序的地方。程序員常用這條語句輸出一些東西，來測試程序是否正確。

百度前端，面試必問：你見過百度網頁的console嗎？把那段話說一遍。

訪問百度首頁，f12打開控制檯，點擊console

這裏面的2個問題，答案大概是。

1.說一些前端的技術，主要講ajax。這個用的很是多

2.說明你的學習能力，如何強大。

用戶輸入：prompt()語句

prompt()就是專門用來彈出可以讓用戶輸入的對話框。

代碼以下：

<script type="text/javascript">
        var a = prompt('今天是什麼天氣？');
        console.log(a);
</script>

上方代碼中，用戶輸入的內容，將被傳遞到變量 a 裏面。

效果以下：

f12打開控制檯查看結果。黑色表示是字符串，藍色表示數字

prompt()語句中，用戶無論輸入什麼內容，都是字符串。

alert和prompt的區別：

alert("從前有座山");                //直接使用，不須要變量
var a = prompt("請輸入一個數字");   // 必須用一個變量，來接收用戶輸入的值

直接量：數字和字符串

「直接量」即常量，也稱爲「字面量」。看見什麼，它就是什麼。

簡單的直接量有2種：數字、字符串。

（1）數值的直接量的表達很是簡單，寫上去就好了，不須要任何的符號。例如：

alert(886);  //886是數字，因此不須要加引號。

（2）字符串也很簡單，但必定要加上引號。能夠是單詞、句子等。

alert('hello');

變量

變量的定義和賦值

var a = 100;

var是英語「variant」變量的縮寫。後面要加一個空格，空格後面的東西就是「變量名」，

定義變量：var就是一個關鍵字，用來定義變量。所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面必定要有空格隔開。
變量的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變量。
變量名：咱們能夠給變量任意的取名字。

PS：在JavaScript中，通常都是用var來定義變量，這和C、Java等語言不一樣(有興趣的同窗能夠看一下es6)

變量要先定義，才能使用。好比，咱們不設置變量，直接輸出：

<script type="text/javascript">
        console.log(a);
</script>

控制檯將會報錯：

正確寫法：

var a;   // 定義
a = 100;  //賦值
console.log(a);  //輸出100

控制檯輸出100，藍色的字體，表示數字。

有經驗的程序員，會把定義和賦值寫在一塊兒：

var a = 100;    //定義，而且賦值100
console.log(a);  //輸出100

在es6中使用let聲明變量，好比：

let c = 13;
console.log(c);

變量的命名規範

變量名有命名規範：只能由英語字母、數字、下劃線、美圓符號$構成，且不能以數字開頭，而且不能是JavaScript保留字。

下列的單詞，叫作保留字，就是說不容許當作變量名，不用記：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

大寫字母是可使用的，而且大小寫敏感。也就是說A和a是兩個變量。

var A = 250;    //變量1
var a = 888;    //變量2

變量的類型

變量裏面可以存儲數字、字符串等。變量會自動的根據存儲內容的類型不一樣，來決定本身的類型。

數值型：number

若是一個變量中，存放了數字，那麼這個變量就是數值型的

var a = 100;            //定義了一個變量a，而且賦值100
console.log(typeof a);  //輸出a變量的類型

typeof()表示「獲取變量的類型」，語法爲：

typeof 變量

在JavaScript中，只要是數，就是數值型(number)的。不管整浮、浮點數（即小數）、不管大小、不管正負，都是number類型的。

字符串型：string

var a = "abcde";
var b = "路飛";
var c = "123123";
var d = "哈哈哈哈哈";
var e = ""; //空字符串

console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);

控制檯輸出：

連字符和加號的區別

鍵盤上的+多是連字符，也多是數字的加號。以下：

console.log("我" + "愛" + "你");   //連字符，把三個獨立的漢字，鏈接在一塊兒了
console.log("我+愛+你");           //原樣輸出
console.log(1+2+3);             //輸出6

總結：若是加號兩邊都是數值，此時是加。不然，就是連字符（用來鏈接字符串）。

es6使用tab鍵上面的反引號

{}表示一個佔位符

var first = '我';
console.log(`${first}愛你`);

變量值的傳遞（賦值）

語句：

a = b;

把b的值賦給a，b不變。

將等號右邊的值，賦給左邊的變量；等號右邊的變量，值不變。

舉個特殊的例子：

var a = "3";
var b = 2;
console.log(a-b);

效果：（注意，字符串 - 數值 = 數值）

變量格式轉換

用戶的輸入

咱們在上面的內容裏講過，prompt()就是專門用來彈出可以讓用戶輸入的對話框。重要的是：用戶無論輸入什麼，都是字符串。

`parseInt()`：字符串轉數字

parseInt()能夠將字符串轉數字。parse表示「轉換」，Int表示「整數」（注意Int的拼寫）。例如：

字符串轉數字的方法：

parseInt("5");

parseInt()還具備如下特性：

（1）帶有自動淨化的功能；只保留字符串最開頭的數字，後面的中文自動消失。例如：

console.log(parseInt("2018你真帥！！"));

網頁查看console

若是後面還有數字，也會只保留最開頭的數字，好比：

console.log(parseInt("22歲的唐慧茹帶着5歲的兒子去逛街"));

網頁查看console

（2）自動帶有截斷小數的功能：取整，不四捨五入。

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);

網頁查看console

var a = parseInt(5.8 + 4.7);  //先計算結果,再取整
console.log(a);

網頁查看console

3、數據類型

數據類型包括：基本數據類型和引用數據類型

基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。

當咱們把變量賦值給一個變量時，解析器首先要確認的就是這個值是基本類型值仍是引用類型值

1.基本數據類型

number - 數字

var a = 123;
//typeof 檢查當前變量是什麼數據類型
console.log(typeof a);
//特殊狀況
var a1 = 5/0;
console.log(a1);
console.log(typeof a1); //Infinity 無限大. number類型

網頁查看console

string - 字符串

var str  = '123'
console.log(typeof str);

網頁查看console

boolean - 布爾值

var b1 = false;
console.log(typeof b1);

網頁查看console

null

var c1 = null;//空對象. object
console.log(c1);

網頁查看console

undefined

var d1;
//表示變量未定義
console.log(typeof d1);

網頁查看console

2.引用數據類型

Function
Object
Array
String
Date

後面課程會講解。

4、運算符

js中的運算符跟python中的運算符有點相似，但也有不一樣。所謂運算,在數學上，是一種行爲，經過已知量的可能的組合，得到新的量。

1.賦值運算符

以var x = 12,y=5來演示示例|

2.算數運算符

var a = 5,b=2

i++返回的是自增以前的值，++i返回的則是自增後的值

var i = 1;
var x = i++;  //先對x賦值,再對i自增。此時i爲2，但賦給x的是1
console.log(i);
console.log(x);

網頁查看console

var i = 1;
var x = ++i;  //先自增,再賦值。此時i爲2，x也是2
console.log(i);
console.log(x);

網頁查看console

3.比較運算符

var x = 5;

舉例：

var x = 5;
if (x === 5){
    console.log('值相等,類型也相等');
}else if (x == '5'){
    console.log('值相等');
}else {
    console.log('不匹配');
}

網頁查看console

4.特殊狀況

字符串拼接+字符串運算特殊狀況。python中有拼接字符串中更簡便的辦法，其實在js中也有，你們能夠百度引擎搜索es6模板字符串。（擴展）

var  firstName  = '小';
var lastName = '馬哥';
var name = '伊拉克';
var am = '美軍';
// 字符串拼接
var str = "2003年3月20日,"+name+"戰爭爆發，以美軍爲主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭後，"+am+"又一次取得的大規模壓倒性軍事勝利。"
var fullStr = str;
console.log(fullStr);

var fullName = firstName +" "+ lastName;
console.log(fullName);

網頁查看console

不能對字符串進行數字運算只能拼接。純數字的字符串除外！

var a1 = '1';
var a2 = '2';
console.log(a1+a2)； //12

網頁查看console

注意：只要有一個字符串，遇到加號就表示拼接

NaN. ==== not a number 是number類型

var b1 = 'one';
var b2  = 'two';

// NaN. ==== not a number 是number類型
console.log(typeof(b1*b2))；

網頁查看console

5、數據類型轉換

語言中咱們的數據類型有不少，在某個頁面中展現的數據類型也不一樣，好比說電話號碼我就要求number的類型，而輸入姓名的時候就要求string類型的。那麼在適當的狀況下咱們能夠將數據類型進行轉換。

1.將數值類型轉換成字符串類型

隱式轉換

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隱式轉換
console.log(n3);
console.log(typeof n3);

網頁查看console

因爲n2是字符串，遇到加號時，只要有一個字符串，那麼就表示拼接字符串

因此最終結果是123123，它的類型是字符串

強制類型轉換

var n1 = 123;
// 強制類型轉換String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())；

網頁查看console

2.將字符串類型轉換成數值類型

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2);

// parseInt()能夠解析一個字符串 而且返回一個整數
// 只保留字符串最開頭的數字,後面的直接忽略
console.log(parseInt(stringNum));
//浮點數
console.log(parseFloat(stringNum));

網頁查看console

3.任何數據類型均可以轉換爲boolean類型

var b1 = '123';
var b2 = 0; //false
var b3 = -123;

var b4 = Infinity;
var b5 = NaN;

var b6; //undefined
var b7 = null;

// 非0既真
console.log(Boolean(b1));
console.log(Boolean(b2));
console.log(Boolean(b3));
console.log(Boolean(b4));
console.log(Boolean(b5));
console.log(Boolean(b6));
console.log(Boolean(b7));

View Code

網頁查看console

6、流程控制

1.if 、if-else、多層if-else

{}表示一個做用域

if

var ji  = 20;
if(ji >= 20){
    console.log('恭喜你，吃雞成功，大吉大利')
}
alert('alex');//下面的代碼還會執行

網頁查看console

if-else

var ji  = 20;
if(ji>=20){
    console.log('恭喜你，吃雞成功，大吉大利');
}else{
    console.log('很遺憾 下次繼續努力');

}

網頁查看console

多層if-else

if (true) {
   //執行操做
}else if(true){
    //知足條件執行            
}else if(true){
   //知足條件執行        
}else{
  //知足條件執行
}

2.邏輯與&&、邏輯或||

&& 兩個條件都成立的時候才成立

//1.模擬  若是總分 >400 而且數學成績 >89分 被清華大學錄入
//邏輯與&& 兩個條件都成立的時候 才成立
if(sum>400 && math>90){
    console.log('清華大學錄入成功')
}else{
    alert('高考失利')
}

只要有一個條件成立的時候才成立

//2.模擬 若是總分>400 或者你英語大於85 被複旦大學錄入
//邏輯或  只有有一個條件成立的時候 才成立
if(sum>500 || english>85){
    alert('被複旦大學錄入')
}else{
    alert('高考又失利了')
}

3.switch

var gameScore = 'better';
switch(gameScore){
//case表示一個條件 知足這個條件就會走進來 遇到break跳出。break終止循環。若是某個條件中不寫 break，那麼直到該程序遇到下一個break中止
    case 'good':
        console.log('玩的很好');
        //break表示退出
        break;
    case  'better':
        console.log('玩的老牛逼了');
        break;
    case 'best':
        console.log('恭喜你 吃雞成功');
        break;

    default:
        console.log('很遺憾');
}

網頁查看console

注意：

若是不寫break，它不會結束，會繼續執行下面的代碼。因此每個條件，必須加break！
不然會出現case 穿透現象

看一個case 穿透現象

var gameScore = 'better';
switch(gameScore){
//case表示一個條件 知足這個條件就會走進來 遇到break跳出。break終止循環。若是某個條件中不寫 break，那麼直到該程序遇到下一個break中止
    case 'good':
        console.log('玩的很好');
        //break表示退出
        break;
    case  'better':
        console.log('玩的老牛逼了');
        //break;
    case 'best':
        console.log('恭喜你 吃雞成功');
        break;

    default:
        console.log('很遺憾');
}

View Code

網頁查看console

4.while循環

循環三步走：

1.初始化循環變量

2.判斷循環條件

3.更新循環變量

var i = 1; //初始化循環變量

while(i<=9){ //判斷循環條件
    console.log(i);
    i = i+1; //更新循環條件
}

查看網頁console，就會看到1~9的數字，我就不截圖了。

練習：將1-100全部是2的倍數在控制檯中打印。使用while循環

var i = 1; //初始化循環變量
var sum = 0;
while(i<=100){ //判斷循環條件
    if ((i % 2) == 0){  //和2取餘,爲0表示偶數
        // console.log(i);  //打印偶數
        sum += i;  //計算總和
    }
    i = i+1; //更新循環條件
}
console.log(sum);  //打印最終結果

View Code

結果爲2550

5.do_while

do_while不多用，瞭解一下便可

//無論有沒有知足while中的條件do裏面的代碼都會走一次
var i = 3;//初始化循環變量
do{

    console.log(i);
    i++;//更新循環條件

}while (i<10); //判斷循環條件

查看網頁console

6.for循環

for(var i = 1;i<=10;i++){  //i的初始值爲1,i<=10,i自增1
    console.log(i);
}

網頁查看console，會輸出1~10

課堂練習：

1~100之間的偶數

for(var i = 1;i<=100;i++){
    if(i%2==0){
        //是偶數
        console.log(i);
    }
}

1-100之間全部數之和

var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j;
}
console.log(sum);

雙重fo循環

for(var i=1;i<=3;i++){
            
 　　for(var j=0;j<6;j++){
        document.write('*');
    }
            
   document.write('<br>');
 }

訪問網頁，效果以下：

小做業：

1.在瀏覽器中輸出直角三角形

效果：

*  
** 
***
****
*****
******

代碼：

for(var i=1;i<=6;i++){
    for(var j=1;j<=i;j++){
        //寫入到網頁body標籤中
        document.write("*");
    }
    document.write('<br>');  //寫入換行標籤
}

View Code

2.在瀏覽器中輸出

          *  
         ***  
        ***** 
       ******* 
      ********* 
     ***********

代碼：

for(var i=1;i<=6;i++){ //行數
    //控制咱們的空格數
    for(var s=i;s<6;s++){
        //body寫入空格
        document.write('&nbsp;');
    }
    for(var j=1;j<=2*i-1;j++){
        document.write('*');
    }
    document.write('<br>'); //換行符
}

View Code

7、百度換膚

訪問百度首頁，登陸以後，有一個換膚功能

點擊換膚以後，從網頁上面，抓取3張背景圖

建立目錄images，將2個圖片到images目錄中

下面是用js代碼，來完成點擊一個小圖片，實現換背景皮膚的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        body{
            width: 100%;
            /*默認背景圖片*/
            background: url(./images/1.jpg) no-repeat center 0;
            /*把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域*/
            background-size: cover;
        }
        .box{
            width: 100%;
            /*div向下移動40px*/
            padding-top: 40px;
            /*背景顏色,0.3設置透明度*/
            background-color: rgb(255,0,0,0.3);
            /*圖片居中顯示*/
            text-align: center;
        }
        .box img{
            width: 200px;
        }
    </style>

</head>
<body>
<div class="box">
    <!--每一個圖片設置id，方便js獲取對象-->
    <img src="./images/1.jpg" alt="" id="pic1">
    <img src="./images/2.jpg" alt="" id="pic2">
    <img src="./images/3.jpg" alt="" id='pic3'>
</div>

<script type="text/javascript">
    //文檔加載完成以後（dom元素 圖片 音視頻）
    window.onload = function(){
        //獲取文檔dom元素對象
        var oImg1 = document.getElementById('pic1');
        // var oImg2 = document.getElementById('pic2');
        // getElementsByTagName的返回值一個集合,經過索引就能夠取值
        //這裏表示取索引爲1的img標籤
        var oImg2 = document.getElementsByTagName('img')[1];
        var oImg3 = document.getElementById('pic3');

        // console.log(oImg1);

        // 事件對象.事件名 = 執行的動做
        //onclick表示點擊事件
        oImg1.onclick = function(){
            // this表示當前事件發生者
            console.log(this);
            document.body.style.backgroundImage = "url(./images/1.jpg)";
            this.style.width = '300px';
            oImg2.style.width = '200px';
            oImg3.style.width = '200px';
        }
        oImg2.onclick = function(){
            document.body.style.backgroundImage = "url(./images/2.jpg)";
            this.style.width = '300px';
            oImg1.style.width = '200px';
            oImg3.style.width = '200px';
        }
        oImg3.onclick = function(){
            document.body.style.backgroundImage = "url(./images/3.jpg)";
            this.style.width = '300px';
            oImg1.style.width = '200px';
            oImg2.style.width = '200px';
        }
    }
</script>

</body>
</html>

View Code

網頁效果：

若是<script type="text/javascript"></script>放到head標籤裏面，必需要加window.onload = function(){}

不然你寫的js代碼會不生效。

window.onload表示，網頁加載完畢以後，才讓js執行。可是這樣有一個缺點：

若是網絡很差，那麼頁面就沒法操做，好比登陸。必需要等到全部資源，好比圖片，音頻，加載完畢，才能操做。

後面會有解決方法的。

Document表示文檔對象。每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。
使用Document對象，能夠從腳本中對 HTML 頁面中的全部元素進行訪問。

按f12，打開網頁控制檯，輸入命令document

點擊#document，就能夠展開document對象，它能夠獲取整個html中的全部元素。

獲取body元素，使用命令 document.body

獲取style屬性，使用 document.body.style

這裏面列出了全部css能夠操做的方法，好比display,color,font-size....等等

改樣式，必需要用到style

這裏能夠直接換膚，輸入命令

document.body.style.backgroundImage = "url('./images/2.jpg')"

網頁，當即顯示唐嫣的照片

這就是換膚的原理，經過修改html標籤來實現的。

獲取全部的img元素

返回的結果是一個集合，經過元素能夠取值，好比取第2個圖片

使用命令 document.getElementsByTagName('img')[1]

獲取id爲pic2的標籤

8、顯示隱藏

點擊按鈕，讓div隱藏，再次點擊，就顯示div

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .show{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <button>隱藏</button>
        <div class="show" id="box"></div>
    </div>
    
    <script>
        window.onload = function(){
            // 獲取div對象
            var box =  document.getElementById('box');
            // 標誌位
            var isShow = true;
            // 即便只有一個botton,也要使用[0]來獲取，onclick表示點擊事件
            document.getElementsByTagName('button')[0].onclick = function(){
                //this表示當前事件發生者，也就是你點擊的標籤
                console.log(this);
                // 當標誌位爲true時
                if (isShow) {
                    //修改box的css屬性，display:none，表示隱藏
                    box.style.display = 'none';
                    //修改按鈕的文字
                    this.innerText = '顯示';
                    //設置標誌位爲false
                    isShow = false;
                }else{
                    //display = 'block'，表示顯示內容
                    box.style.display = 'block';
                    this.innerText = '隱藏';
                    isShow = true;
                }
            }
        }
    </script>
    
</body>
</html>

View Code

網頁效果：

今日做業：

1.微信商學院，完成剩餘部分

2.使用for循環，輸出直角三角形和等腰三角形

3.練習百度換膚和顯示隱藏

4.預習明天的 內置對象

微信商學院

官方連接

http://daxue.qq.com/wechat

上半部分效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

python 全棧開發，Day50(Javascript簡介,第一個JavaScript代碼,數據類型,運算符,數據類型轉換,流程控制,百度換膚,顯示隱藏)

1、Javascript簡介

Web前端有三層：

JavaScript歷史背景介紹

JavaScript和ECMAScript的關係

JavaScript的發展：蒸蒸日上

JavaScript入門易學性

JavaScript是前臺語言

JavaScript的組成

JavaScript的特色

2、第一個JavaScript代碼

alert語句

js的引入方式

行內式

內接式

外接式

語法規則

單行註釋：

多行註釋：

JavaScript在網頁中輸出信息的寫法

彈出警告框：alert("")

控制檯輸出：console.log("")

用戶輸入：prompt()語句

直接量：數字和字符串

變量

變量的定義和賦值

變量的命名規範

下列的單詞，叫作保留字，就是說不容許當作變量名，不用記：

變量的類型

數值型：number

字符串型：string

連字符和加號的區別

變量值的傳遞（賦值）

變量格式轉換

用戶的輸入

parseInt()：字符串轉數字

3、數據類型

1.基本數據類型

number - 數字

string - 字符串

boolean - 布爾值

null

undefined

2.引用數據類型

4、運算符

1.賦值運算符

2.算數運算符

3.比較運算符

4.特殊狀況

5、數據類型轉換

1.將數值類型轉換成字符串類型

隱式轉換

強制類型轉換

2.將字符串類型轉換成數值類型

3.任何數據類型均可以轉換爲boolean類型

6、流程控制

1.if 、if-else、多層if-else

if

if-else

多層if-else

2.邏輯與&&、邏輯或||

&& 兩個條件都成立的時候 才成立

只要有一個條件成立的時候 才成立

3.switch

4.while循環

5.do_while

6.for循環

雙重fo循環

7、百度換膚

8、顯示隱藏

　　單行註釋：

　　多行註釋：

`parseInt()`：字符串轉數字

&& 兩個條件都成立的時候才成立

只要有一個條件成立的時候才成立