html自學筆記與面試會問到問題

第一章
1.1什么是JavaScript？

一各跨平臺的腳本語言

1.2ECMA特點：

由三大部分組成：核心語法(關鍵字、核心對象、語法)、DOM、BOM

1.3 取余運算（又叫取模運算）：

取余：整除后，除不盡的余數！如對89取余，結果為17（即：商3余17）
1%3=1 ；2%3=2 注：如果前面的數小于后面的數，則值為前面的數
2%1=0 ；2%2=0 注：如果能被整數，則值為零！
例如：為抵抗洪水，戰士連續作戰89小時，編程計算共多少天零多少小時？
var total=89;alert(“共計”+parseInt(total/24)+“天”+“零，”+total%24+“小時”);alert(total%24);
共3天零17小時

1.4在JS中“=”代表的意思：表示賦值運算！

Eg:  
<script>
var x=100; var y=99;
x=y;
document.write(x); 顯示結果99
document.write(y); 顯示結果99
</script>

1.5、什么是變量？

變量：就是內存的一塊空間。

（注：內存，即內部的存儲器。硬盤，外部的存儲器。硬盤讀取數據的速度，表較慢。）
1.5.1查看變量的數據類型用（typeof）

例如：var  name="xiaoming";   var res=typeof  name;  
document.write(res); 顯示結果 string.

1.6、類型轉換：不同的數據類型之間做運算

var num=5;  document.write(num +1); 顯示結果 6
var num="5"; document.write(num+1); 顯示結果51;
var num="5"; document.write(num-1); 顯示結果4;var num="5"; document.write(+num+1);
(*注在一個字符串前面，帶上正負號，可以將該字符創轉換為數字)

1.6.1 各類型相互轉化實例：

    var num="5"; 
var e=parseInt(num);  document.write(e); 顯示結果5var e=parseFloat(num);  document.write(e);顯示結果5var e=Number(num);  document.write(e);顯示結果5

1.6.2浮點類型之間的加減法：

var num=0.2; 
var nu=0.1;document.write(num+nu);   顯示結果0.30000000000000004var num=0.2; 
var nu=0.1;document.write(num*nu); 顯示結果0.020000000000000004
var num=0.2; 
var nu=0.1;document.write(num/nu);顯示結果2

1.6.3NaN關系運算

 var a=”xiaomi”;var b=”123a”;
document.write(Number(a)==Number(b));顯示結果false;

(*注 Nan不是數字，document.write(Number(a)Number(b));一個不是數字的東西另一個不是數字大的東西！)
1.7、運算符
=== 表示絕對等于 == 等于（會做轉化，然后做運算）！=不等于

例如：var x=100;var y=”100”
alert(x=y);結果是true;
alert(x===y);結果是false；
例如：alert(true==1)；結果是true;
alert(true===1)；結果是false；
例如：alert(true ！=1)；結果是false;
例如：alert(true ！==1)；結果是true;  （注*：==兩個等號之間進行了類型的轉換！）

1.8、自增和自減（a++與++a的區別：）

a+ =1;  等價于   a= a+1
a++;等價于  a+ =1; 也就等于a= a+1 ++a;等價于a+ =1;（前置自增，就是++a，表示先對變量a加1，再使用變量的值）
a++;等價于a+ =1;（后置自增，就是a++，表示先使用變量的值，在對變量a加1）

1.8.1加法

例如:var k=2;
alert(k+ ++k + k++ + ++k +k)
解：var k=2;
alert(k+ ++k + k++ + ++k +k)|
var k=2;
alert(2+ 3 + 3 + ++k +k)       先將第三個變為3
|
var k=4;
alert(2+ 3 + 3 + 5 +k)
|
var k=5;
alert(2+ 3 + 3 + 5 +5)

1.8.2減法

var k=2;
alert(k- --k-k--+--k-k)
2-1-1+-1—1=0
1.9、位運算
1.9.1按位與
（&，當兩者都為“真”的時候，結果才為“真”，當其中一個為“假”的時候，結果才為“假”。）
例如： var a=1; 			 0000 0001;var b=2;  			 0000 0010;
var c=a&b;         0000 0000;
alert(c);            結果：0；

1.9.2按位或

例如： var a=1; 			 0000 0001;var b=3;  			 0000 0011;
var c=a|b;         0000 0011;
alert(c);            結果：1；
1.9.3移位運算
例如：
var c=2;var d=c<<3;   //2*2*2*2
alert(d);        結果顯示16

1.10、十進制、八進制、十六進制

1.10.1十進制
a=10或15；

1.10.2八進制

a=076;    //6+7*8=62
a=065;    //5+6*8=53

1.10.3十六進制

 var a=0xAF5;                //5+15*16+10*16^2
alert(a);顯示結果2805；

1.10.4其他顯示

var a=094；alert(a);   顯示結果94；
（注：因為十位為9，不是八進制以內的數字（0-7））

第二章
2.1、程序的三大機構：順序、選擇、循環
2.2、IF語句

if(判斷條件，布爾類型){//注*：在if的（）里面，必須是一個邏輯運算表達式
條件成立后的執行代碼
}else{
否則執行。。。。
}

例如：輸入年份，計算某一年是否是閏年。
解：閏年產生的條件：被4整除，非整百年，或者被400整除。
<head>
<meta charset="utf-8">
<title></title>
<script>
function jsuan(){var year=input.value;if((year%4==0 && year%100!=0) || year%400==0){alert("是閏年！");}else{alert("不是閏年！");}
}
</script>
</head>
<body>年份：<input type="text" id="input"/><button οnclick="jsuan()"  >計算</button>
</body>
2.3、Switch語句
例：當輸入一個數字時，顯示對應的星期（如，輸入1，顯示星期一）
<HTML>
<head>
<meta charset="utf-8">
<title></title>
<script>
function jsuan(){var n=Number(input.value);switch(n){case 1:alert("星期一");break;case 2:alert("星期二");break;case 3:alert("星期三");break;case 4:alert("星期四");break;case 5:alert("星期五");break;case 6:alert("星期六");break;case 7:alert("星期日");break;default :alert("您輸入有誤");}
}
</script>
</head>
<body>請您輸入數字：<input type="text" id="input"/><button οnclick="jsuan()"  >計算</button>
</body>
</HTML>

2.4、Console.log()控制臺打印，常用來測試中運用！測試中不常用alert()；
2.5、if…else ：如果…否則
if…else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼

例如：輸入分數，判斷成績等級

請選擇一個月份： 1 2 3 4 5 6 7 9 10 11 12 計算

2.8、轉義字符
2.8.1引號：
用來在控制臺輸出一句帶引號（單引號‘’或者“”）的一段話。
例如：在瀏覽器其中的Console中輸入：console.log(““Hello word””);
則顯示結果為：“Hello word”
2.8.2換行：\n
例如：console.log(““Hello word”\n—小明”);
顯示結果 “Hello word”
—小明
2.8.2Tab鍵：\t
2.9、綜合練習題
例如：根據一個數字日期，判斷這個日期是這一年的第幾天？
例如20170211，計算后的結果為42

請輸入一個數字日期：計算

3.1、while循環
例如：當你的月薪為10000時，每年會長1.05，50年后你的工資為多少？循環打印出來

3.2、for循環

3.3、打印100以內的奇數
例：

3.4、求100以內的偶數的和

3.5、求1-1/2+1/3-1/4…1/100的和

3.5、打印出1000-2000年中所有的閏年，并以每行10個的形式顯示

3.6、打印出如下三角形(1)

3.7、打印出如下三角形(2)
#
##
###

還可以用p標簽換行

3.8、計算100的結成100！=100999897…1

3.9、計算100-999直接的水仙花

顯示結果
153 370 371 407
3.10、打印九九乘法表

1X1=1
1X2=2 2X2=4
1X3=3 2X3=6 3X3=9
1X4=4 2X4=8 3X4=12 4X4=16
1X5=5 2X5=10 3X5=15 4X5=20 5X5=25
1X6=6 2X6=12 3X6=18 4X6=24 5X6=30 6X6=36
1X7=7 2X7=14 3X7=21 4X7=28 5X7=35 6X7=42 7X7=49
1X8=8 2X8=16 3X8=24 4X8=32 5X8=40 6X8=48 7X8=56 8X8=64
1X9=9 2X9=18 3X9=27 4X9=36 5X9=45 6X9=54 7X9=63 8X9=72 9X9=81

第三章函數
一、函數的概念
二、使用函數好處
封裝
三、如何使用函數、像函數輸入數據（參數）
例如：

四、編寫一個函數，計算三個數的大小，按從小到大的順序輸出

五、函數中的return關鍵字
Return關鍵字，用來然函數返回結果，如果沒有return，執行完后，將會返回undefined
例如：編寫一個函數，生成4位數字的驗證碼

六、變量的聲明提升
即所有聲明變量或聲明函數都會被提升到當前函數的頂部。

注：如果將上面的m2（），提到m1（）的位置，將會報錯，這就與變量的聲明提升有關！！
6.1.、計編寫一個函數、在頁面輸出一個N行M列的表格，表格內容填充1-100的隨機數字

6.2.、計求m-n之間的和

6.3.、計圓的面積

6.4.、編寫函數digit(num,k),函數的功能是：求整數num從右邊開始的第k位數字的值，如果num位數不足k位，則返回0；

6.5.、編寫一個函數，計算任意兩個數字之間所能組成的奇數個數，數字必須是個位數。比如：計算0-3之間能組成的奇數是01,03,13,21,23,31

6.6.、作用域：起作用的范圍
作用域分為兩種：局部作用域和全局作用域！
6.7、局部變量：在一個函數內部定義的變量，稱之為局部變量，它的作用范圍，只針對函數內部有效。
6.8.、全局變量：在頂層函數的外部，定義的變量，叫做全局變量（添加在Windows對象的變量，叫做全局變量）
變量不寫var默認全局變量。
6.9.、堆和棧的概念
堆：
棧：指的是一種先進后出的存儲結構
7.0.、面試題(下列內容將會打印出什么？)
var n=10;
function test(){
console.log(n); //undefied
var n;
console.log(n); //20
}
test();
解釋：變量的聲明提升原則：提升至該作用域的最前面
var n=10;
function test(){
var n=20;
console.log(n); //undefied
var n=20;
console.log(n); //20
}
test();

7.1.、遞歸
7.1.1、例如：遞歸計算100的階乘！

7.1.2、遞歸計算裴波那契數列
例如：假設有一對兔子，三個月成年，到了第三個月，就可以生下一對小兔子。問，第N個月，總共會有多少兔子？
解析：
月份 1 2 3 4 5 6 7 8 9 10 11 12
兔子數
1 1 2 3 5 8 13 21 34 55 89 144

7.1.3、遞歸計算兩個數的最大公約數

8、構造函數
8.1、定義：new一個對象
第四章數組

1、數組：
一組數據、通常情況下，這一組數據的類型是一致的。
1.1、作用：
就是一個容器，將多個數據保存下來。
1.2、數組的創建方式：
第一種用json形式創建： var a=[10,23,56];
第二種用構造函數創建：var b=new Array(10);
注：*當傳入一個參數，并且參數類型為數字，則表示數組的長度；
當傳入多個，則表示數據。如下：

打印結果：5,35,66,88
4
1.3、數組的下標：

注意：*下標不可以大于數組的長度-1
1.4、練習：
1、當一個數組為空時，怎么往里面放入數據？

1.5、數組的遍歷：
輸出50到100之間的隨機數，并且求其平均數：

1.6定義一個含有30個整型元素的數組，按順序分別賦予從2開始的偶數；然后按順序每5個數求出一個平均值，放在另一個數組中并輸出

1.7 、for…in循環

1.8 、二維數組

練習：通過循環按行順序為一個5*5的二維數組a賦1到25，然后輸出該數組的坐下半角

顯示結果：
Array(5)0: (5) [1, 2, 3, 4, 5]
1: (5) [6, 7, 8, 9, 10]
2: (5) [11, 12, 13, 14, 15]
3: (5) [16, 17, 18, 19, 20]
4: (5) [21, 22, 23, 24, 25]
1
6 7
11 12 13
16 17 18 19
21 22 23 24 25

1.9 、數組的值傳遞和引用傳遞（或者叫值的復制和地址的復制）
1.9.1 堆和棧
例1：

打印結果：10
例2：

打印結果：16, 22, 38
注：在計算機內存中，有一種特殊的變量，它會保存另一個變量的內存地址，我們管這種變量，就叫做指針，也叫做引用，也可以叫快捷方式！

1.9 、引用類型和對象
如果把對象比作文件，引用類型就是快捷方式
注：所有的對象是放在堆內存里面的。
1.10 、隨機點名
1、第一種顯示方式

隨機點名

1.10 、數字驗證碼（練習）

1.15、練習
15.1編寫函數map[arr]把數組中的每一位數都增加30%

15.2編寫函數has(arr,60)判斷數組中是否存在60這個元素，返回布爾類型。

15.3編寫函數norepeat(arr)將數組的重復元素去掉，并返回新的數組

15.4 有一個從小到大排序好的數組。先輸入一個數，要求按原來的規律將它插入數組中。

第五章ES5
1.1、ES5概念
1.2、嚴格模式
在代碼的開頭部分，增加一行
“use strict”;
例如：

1.3、數組新增的方法

1.4、字符串（String）
字符串常見的API:
chartAt:獲取指定位置的字符
indexOf:獲取指定字符串內容第一次出現的位置
substring 和slice截取字符串內容
split根據指定的字符創內容，將字符創進行分割，并以數組的形式返回
replace替換

1.5、查找和替換
例題：寫一個小程序，要求替換下面一段文字里面的內容，替換后的字段要有顏色的改變

請輸入要替換的內容：請輸入替換后的內容：替換

Java是世界上最受人歡迎的語言，Java語言在程序開發語言中位居第一。

1.6、ASCII碼和字符集
charCodeAt\fromCharCode
例1：

打印結果：100；
例2：

打印結果：n；
第六章Math
1.、Math內置對象的常見API
1.1Math的向上取整
Math.ceil(1.6);顯示2
Math.ceil(1.00001);顯示2
1.2Math的向下取整
Math.floor(1.9999999);顯示1

Math.floor(-1.9999999);顯示2
1.2Math的求最大值和最小值
Math.max(12,23,45,100);//顯示結果100
Math.max(12,23,45,100);//顯示結果12
1.3Math的隨機數
Math.random();
如;打印0-10之間的隨機數parseInt(Math.random()100);
1.4Math的四舍五入
Math.round(1.8);//顯示結果2
Math.round(1.3);//顯示結果1
1.5Math的平方根
Math.sqrt(9);//顯示結果3
2、三角函數
var left=0;
while(left<100){
y=振幅Math.sin(left*Math.PI/180)
}
3、勾股定理
Math.pow(a,2) +Math.pow(b.2)=Math.pow(c,2);
其中，a和b表示直角邊，c表示斜邊
4、橢圓公式
Math.pow(x/a,2) +Math.pow(y/b,2) =1;
5、曲線方程
y=ax^2 + bx + c
6、隨機數的設定范圍
例如：寫一個小程序，顯示1到20之間的隨機數。