瀏覽器分成兩部分:渲染引擎和 JS 引擎
瀏覽器本身并不會執(zhí)行JS代碼,而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 。JS 引擎執(zhí)行代碼時(shí)逐行解釋每一句源碼(轉(zhuǎn)換為機(jī)器語言),然后由計(jì)算機(jī)去執(zhí)行,所以 JavaScript 語言歸為腳本語言,會逐行解釋執(zhí)行。
JavaScript 包括 ECMAScript、DOM、BOM
ECMAScript 是由ECMA 國際( 原歐洲計(jì)算機(jī)制造商協(xié)會)進(jìn)行標(biāo)準(zhǔn)化的一門編程語言,這種語言在萬維網(wǎng)上應(yīng)用廣泛,它往往被稱為 JavaScript 或 JScript,但實(shí)際上后兩者是 ECMAScript 語言的實(shí)現(xiàn)和擴(kuò)展。
ECMAScript:ECMAScript 規(guī)定了JS的編程語法和基礎(chǔ)核心知識,是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn)。
文檔對象模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進(jìn)行操作(大小、位置、顏色等)。
BOM (Browser Object Model,簡稱BOM) 是指瀏覽器對象模型,它提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口,比如彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等。
<input type="button" value="點(diǎn)我試試" onclink="javascript:alert('Hello World')" />
<script>
alert('Hello World!');
</script>
<script src="my.js"></script>
// 單行注釋
/*
多行注釋
*/
方法 | 說明 | 歸屬 |
alert(msg); | 瀏覽器彈出警示框 | 瀏覽器 |
console.log(msg); | 瀏覽器控制臺打印輸出信息 | 瀏覽器 |
prompt(info); | 瀏覽看彈出輸入框,用戶可以輸入 | 瀏覽器 |
//聲明變量同時(shí)賦值為18
var age = 18;
//同時(shí)聲明多個(gè)變量時(shí),只需要寫一個(gè) var, 多個(gè)變量名之間使用英文逗號隔開。
var age = 18, address ='火影村',salary = 15000;
12345
情況 | 說明 | 結(jié)果 |
var age; console.log(age); | 只聲明,不賦值 | undefined |
console.log(age) | 不聲明 不賦值 直接使用 | 報(bào)錯(cuò) |
age = 10;console.log(age); | 不聲明 只賦值 | 10 |
JavaScript **是一種弱類型或者說動態(tài)語言。**這意味著不用提前聲明變量的類型,在程序運(yùn)行過程中,類型會被自動確定。
var age = 10; //這是一個(gè)數(shù)字型
var areYouOk = '使得'; //這是一個(gè)字符串
12
var x = 6; //x為數(shù)字
var x = "Bill"; //x為字符串
JS 把數(shù)據(jù)類型分為兩類:
簡單數(shù)據(jù)類型 | 說明 | 默認(rèn)值 |
Number | 數(shù)字型,包含整型值和浮點(diǎn)型值,如21,0.21 | 0 |
Boolean | 布爾值類型,如true,false ,等價(jià)于1和0 | false |
Undefined | var a; 聲明了變量a但是沒有賦值,此時(shí)a=undefined | undefined(未定義的) |
string | 字符串類型,如“張三” | “” |
Null | var a = null;聲明了變量a為空值 | null |
JavaScript 數(shù)字類型既可以用來保存整數(shù)值,也可以保存小數(shù)(浮點(diǎn)數(shù))。
var age = 12; //整數(shù)
var Age = 21.3747; //小數(shù)
最常見的進(jìn)制有二進(jìn)制、八進(jìn)制、十進(jìn)制、十六進(jìn)制。
// 1.八進(jìn)制數(shù)字序列范圍:0~7
var num1 = 07; //對應(yīng)十進(jìn)制的7
var Num2 = 019; //對應(yīng)十進(jìn)制的19
var num3 = 08; //對應(yīng)十進(jìn)制的8
// 2.十六進(jìn)制數(shù)字序列范圍:0~9以及A~F
var num = 0xA;
consol.log(Number.MAX_VALUE);
consol.log(Number.MIN_VALUE);
alert(Infinity); //Infinity(無窮大)
alert(-Infinity); //-Infinity(無窮小)
alert(NaN); //NaN - Not a Number ,代表任何一個(gè)非數(shù)值
這個(gè)方法用來判斷非數(shù)字,并且返回一個(gè)值,如果是數(shù)字返回的是false,如果不是數(shù)字返回的是true
var userAge = 21;
var isOk = isNan(userAge);
console.log(isOk); //false,21不是一個(gè)非數(shù)字
var userName = "andy";
console.log(isNan(userName)); //true,"andy"是一個(gè)非數(shù)字
字符串型可以是引號中的任意文本,其語法為 “雙引號” 和 "單引號’’
var strMsg = "我愛北京天安門~"; //使用雙引號表示字符串
var strMsg = '我愛北京'; //使用單引號表示字符串
因?yàn)?HTML 標(biāo)簽里面的屬性使用的是雙引號,JS 這里我們更推薦使用單引號。
JS可以用 單引號嵌套雙引號,或者用 雙引號嵌套單引號(外雙內(nèi)單,外單內(nèi)雙)
var strMsg ='我是一個(gè)“高富帥”' //可以用 ' ' 包含 " "
var strMsg2 ="我是'高富帥'" //可以用" " 包含 ''
類似HTML里面的特殊字符,字符串中也有特殊字符,我們稱之為轉(zhuǎn)義符。
轉(zhuǎn)義符都是 \ 開頭的,常用的轉(zhuǎn)義符及其說明如下:
轉(zhuǎn)義符 | 解釋說明 |
\n | 換行符,n是newline |
\ \ | 斜杠\ |
\ ’ | ’ 單引號 |
\ ‘’ | ‘’ 雙引號 |
\ t | tab 縮進(jìn) |
\ b | 空格,b是blank的意思 |
字符串是由若干字符組成的,這些字符的數(shù)量就是字符串的長度。通過字符串的 length 屬性可以獲取整個(gè)字符串的長度。
//通過字符串的length屬性可以獲取整個(gè)字符串的長度
var strMsg = "我是高富帥!";
alert(strMsg.length); //顯示6
注意:字符串 + 任何類型 =拼接之后的新字符串
//1 字符串相加
alert('hello' + ' ' + 'World'); //hello World
//2 數(shù)值字符串相加
alert('100' + '100'); //100100
//3 數(shù)值字符串+數(shù)值
alert('12'+12); //1212
//4 數(shù)值+數(shù)值
alert(12+12); //24
var age = 18;
console.log('我今年'+age+'歲');
console.log('我今年'+age+'歲'); //引引加加,最終也是上面的形式
⑤字符串拼接加強(qiáng)
console.log('Pink老師' + 18); //只要有字符就會相連
var age = 18;
// console.log('Pink老師age歲了'); //這樣不行,會輸出 "Pink老師age歲了"
console.log('Pink老師' + age); // Pink老師18
console.log('Pink老師' + age + '歲啦'); // Pink老師18歲啦
var flag = true;
console.log(flag + 1); // 2 true當(dāng)加法來看當(dāng)1來看,flase當(dāng)0來看
// 如果一個(gè)變量聲明未賦值,就是undefined 未定義數(shù)據(jù)類型
var str;
console.log(str); //undefined
var variable = undefined;
console.log(variable + 'Pink'); //undefinedPink
console.log(variable + 18); //NaN
1.undefined 和 字符串 相加,會拼接字符串
2.undefined 和 數(shù)字相加,最后結(jié)果是NaN
var space = null;
console.log(space + 'pink'); //nullpink
console.llog(space + 1); // 1
var num = 18;
console.log(typeof num) // 結(jié)果 number
不同類型的返回值
類型 | 例 | 結(jié)果 |
string | typeof “小白” | “string” |
number | typeof 18 | “number” |
boolean | typeof true | “boolean” |
undefined | typeof undefined | “undefined” |
null | typeof null | “object” |
字面量是在源代碼中一個(gè)固定值的表示法,通俗來說,就是字面量表示如何表達(dá)這個(gè)值。
通過控制臺的顏色判斷屬于哪種數(shù)據(jù)類型
黑色 | 字符串 |
藍(lán)色 | 數(shù)值 |
灰色 | undefined 和 null |
使用表單、prompt 獲取過來的數(shù)據(jù)默認(rèn)是字符串類型的,此時(shí)就不能直接簡單的進(jìn)行加法運(yùn)算,而需要轉(zhuǎn)換變量的數(shù)據(jù)類型。通俗來說,就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另外一種數(shù)據(jù)類型。
我們通常會實(shí)現(xiàn)3種方式的轉(zhuǎn)換:
方式 | 說明 | 案例 |
toString() | 轉(zhuǎn)成字符串 | var num = 1; alert(num.toString()); |
String()強(qiáng)制轉(zhuǎn)換 | 轉(zhuǎn)成字符串 | var num = 1; alert(String(num)); |
加號拼接字符串 | 和字符串拼接的結(jié)果都是字符串 | var num =1; alert(num+“我是字符串”); |
//1.把數(shù)字型轉(zhuǎn)換為字符串型 toString() 變量.toString()
var num = 10;
var str = num.toString();
console.log(str);
//2.強(qiáng)制轉(zhuǎn)換
console.log(String(num));
方式 | 說明 | 案例 |
parselnt(string)函數(shù) | 將string類型轉(zhuǎn)成整數(shù)數(shù)值型 | parselnt(‘78’) |
parseFloat(string)函數(shù) | 將string類型轉(zhuǎn)成浮點(diǎn)數(shù)數(shù)值型 | parseFloat(‘78.21’) |
Number()強(qiáng)制轉(zhuǎn)換函數(shù) | 將string類型轉(zhuǎn)換為數(shù)值型 | Number(‘12’) |
js 隱式轉(zhuǎn)換(- * /) | 利用算術(shù)運(yùn)算隱式轉(zhuǎn)換為數(shù)值型 | ‘12’-0 |
// 1.parseInt()
var age =prompt('請輸入您的年齡');
consolo.log(parseInt(age)); //數(shù)字型18
consolo.log(parseInt('3.14')); //3取整
consolo.log(parseInt('3.94')); //3,不會四舍五入
consolo.log(parseInt('120px')); //120,會去掉單位
// 2.parseFloat()
console.log(parseFloat('3.14')); //3.14
consolo.log(parseFloat('120px')); //120,會去掉單位
// 3.利用Number(變量)
var str ='123';
console.log(Number(str));
console.log(Number('12'));
// 4.利用了算術(shù)運(yùn)算 - * / 隱式轉(zhuǎn)換
console.log('12'-0); // 12
1.注意 parseInt 和 parseFloat ,這兩個(gè)是重點(diǎn)
2.隱式轉(zhuǎn)換是我們在進(jìn)行算數(shù)運(yùn)算的時(shí)候,JS自動轉(zhuǎn)換了數(shù)據(jù)類型
方法 | 說明 | 案例 |
Boolean()函數(shù) | 其他類型轉(zhuǎn)成布爾值 | Boolean(‘true’); |
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('小白')); //true
console.log(Boolean(12)); //true
運(yùn)算符(operator)也被稱為操作符,是用于實(shí)現(xiàn)賦值、比較和執(zhí)行算數(shù)運(yùn)算等功能的符號
JavaScript 中常用的運(yùn)算符有:
概念:算術(shù)運(yùn)算使用的符號,用于執(zhí)行兩個(gè)變量或值的算術(shù)運(yùn)算。
運(yùn)算符 | 描述 | 實(shí)例 |
+ | 加 | 10 + 20 =30 |
- | 減 | 10 - 20 =-10 |
* | 乘 | 10 * 20 =200 |
/ | 除 | 10 / 20 =0.5 |
% | 取余數(shù)(取模) | 返回出發(fā)的余數(shù) 9 % 2 =1 |
浮點(diǎn)數(shù)值的最高精度是17位小數(shù),但在進(jìn)行算數(shù)計(jì)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù)
var result = 0.1 +0.2; //結(jié)果不是0.3,0.30000000000000004
console.log(0.07 * 100); //結(jié)果不是7,而是7.000000000000001
所以不要直接判斷兩個(gè)浮點(diǎn)數(shù)是否相等
遞增(++)
遞減(- -)
放在變量前面時(shí),我們稱為前置遞增(遞減)運(yùn)算符
放在變量后面時(shí),我們稱為后置遞增(遞減)運(yùn)算符
注意:遞增和遞減運(yùn)算符必須和變量配合使用。
++num num = num + 1
使用口訣:先自加,后返回值
var num = 10;
alert (++num + 10); // 21
先自加 10+1=11,返回11,此時(shí)num=11
num ++ num = num +1
使用口訣:先返回原值,后自加
var num = 10;
alert(10 + num++); // 20
比較運(yùn)算符是兩個(gè)數(shù)據(jù)進(jìn)行比較時(shí)所使用的運(yùn)算符,比較運(yùn)算后,會返回一個(gè)布爾值(true / false)作為比較運(yùn)算的結(jié)果。
運(yùn)算符名稱 | 說明 | 案例 | 結(jié)果 |
< | 小于號 | 1 < 2 | true |
> | 大于號 | 1 > 2 | false |
>= | 大于等于號(大于或者等于) | 2 >= 2 | true |
<= | 小于等于號(小于或者等于) | 3 <= 2 | false |
== | 判等號(會轉(zhuǎn)型) | 37 == 37 | true |
!= | 不等號 | 37 != 37 | false |
=== !== | 全等 要求值和數(shù)據(jù)類型都一致 | 37 === ‘37’ | false |
符號 | 作用 | 用法 |
= | 賦值 | 把右邊給左邊 |
== | 判斷 | 判斷兩邊值是否相等(注意此時(shí)有隱士轉(zhuǎn)換) |
=== | 全等 | 判斷兩邊的值和數(shù)據(jù)類型是否完全相同 |
console.log(18 == '18'); //true
console.log(18 === '18'); //false
邏輯運(yùn)算符是用來進(jìn)行布爾值運(yùn)算的運(yùn)算符,其返回值也是布爾值
邏輯運(yùn)算符 | 說明 | 案例 |
&& | “邏輯與”,簡稱"與" and | true && false |
|| | “邏輯或”,簡稱"或" or | true || false |
! | “邏輯非”,簡稱"非" not | !true |
邏輯與:兩邊都是 true才返回 true,否則返回 false
邏輯或:兩邊都為 false 才返回 false,否則都為true
邏輯非:邏輯非(!)也叫作取反符,用來取一個(gè)布爾值相反的值,如 true 的相反值是 false
var isOk = !true;
console.log(isOk); // false
//邏輯非(!)也叫作取反符,用來取一個(gè)布爾值相反的值,如 true 的相反值是 false
短路運(yùn)算的原理:當(dāng)有多個(gè)表達(dá)式(值)時(shí),左邊的表達(dá)式值可以確定結(jié)果時(shí),就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值
console.log(123 && 456); //456
console.log(0 && 456); //0
console.log(123 && 456 && 789); //789
console.log(123 || 456); //123
console.log(0 || 456); //456
console.log(123 || 456 || 789); //123
var num = 0;
console.log(123 || num++);
// 先返回在加,相當(dāng)于 (123 || 0)
console.log(num); // 123
概念:用來把數(shù)據(jù)賦值給變量的運(yùn)算符。
賦值運(yùn)算符 | 說明 | 案例 |
= | 直接賦值 | var usrName = ‘我是值’ |
+= ,-= | 加,減一個(gè)數(shù)后再賦值 | var age = 10; age+=5;//15 |
*=,/=,%= | 成,除,取模后再賦值 | var age = 2; age*=5; //10 |
var age = 10;
age += 5; // 相當(dāng)于 age = age + 5;
age -= 5; // 相當(dāng)于 age = age - 5;
age *= 10; // 相當(dāng)于 age = age * 10;
優(yōu)先級 | 運(yùn)算符 | 順序 |
1 | 小括號 | () |
2 | 一元運(yùn)算符 | ++ – ! |
3 | 算數(shù)運(yùn)算符 | 先 * / 后 + - |
4 | 關(guān)系運(yùn)算符 | >, >= , < , <=, |
5 | 相等運(yùn)算符 | ,!=,=,!== |
6 | 邏輯運(yùn)算符 | 先 && 后 ||(先與后或) |
7 | 賦值運(yùn)算符 | = |
8 | 逗號運(yùn)算符 | , |
1.一元運(yùn)算符里面的邏輯非優(yōu)先級很高
2.邏輯與 比 邏輯或 優(yōu)先級高
3.練習(xí)題
console.log( 4 >= 6 || '人' != '阿凡達(dá)' && !(12 * 2 == 144) && true) // true
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); //false
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); //true
var c = 2 === "2";
console.log(c); //false
var d = !c || b && a ;
console.log(d); //true
流程控制主要有三種結(jié)構(gòu),分別是順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu),這三種結(jié)構(gòu)代表三種代碼執(zhí)行的順序
JS 語言提供了兩種分支結(jié)構(gòu)語句:JS 語句 switch語句
// 條件成立執(zhí)行代碼,否則什么也不做
if (條件表達(dá)式) {
//條件成立執(zhí)行的代碼語句
}
案例:進(jìn)入網(wǎng)吧
彈出一個(gè)輸入框,要求用戶輸入年齡,如果年齡大于等于 18 歲,允許進(jìn)網(wǎng)吧
var usrAge = prompt('請輸入您的年齡:');
if(usrAge >= 18)
{
alert('您的年齡合法,歡迎來到老子網(wǎng)吧享受學(xué)習(xí)的樂趣!');
}
// 條件成立,執(zhí)行if里面代碼,否則執(zhí)行else里面的代碼
if(條件表達(dá)式)
{
//[如果]條件成立執(zhí)行的代碼
}
else
{
//[否則]執(zhí)行的代碼
}
案例:判斷閏年
接收用戶輸入的年份,如果是閏年就彈出閏年,否則彈出是平年
算法:能被4整除且不能整除100的為閏年(如2004年就是閏年,1901年不是閏年)或者能夠被 400 整除的就是閏年
var year = prompt('請輸入年份');
if (year % 4 == 0 && year % 100 !=0 || year % 400 ==0)
{
alert('這個(gè)年份是閏年');
}
else
{
alert('這個(gè)年份是平年');
}
if(條件表達(dá)式1)
{
語句1;
}
else if(條件表達(dá)式2)
{
語句2;
}
else if(條件表達(dá)式3)
{
語句3;
}
else
{
//上述條件都不成立執(zhí)行此處代碼
}
案例:接收用戶輸入的分?jǐn)?shù),根據(jù)分?jǐn)?shù)輸出對應(yīng)的等級字母 A、B、C、D、E
其中:
var score = prompt('請您輸入分?jǐn)?shù):');
if (score >= 90) {
alert('寶貝,你是我的驕傲');
} else if (score >= 80) {
alert('寶貝,你已經(jīng)很出色了');
} else if (score >= 70) {
alert('你要繼續(xù)加油嘍');
} else if (score >= 60) {
alert('孩子,你很危險(xiǎn)');
} else {
alert('可以再努力點(diǎn)嗎,你很棒,但還不夠棒');
}
如果表達(dá)式1為true,則返回表達(dá)式2的值,如果表達(dá)式1為false,則返回表達(dá)式3的值
案例:數(shù)字補(bǔ)0
用戶輸入數(shù)字,如果數(shù)字小于10,則在前面補(bǔ)0,比如01,09,
如果數(shù)字大于10,則不需要補(bǔ),比如20
var figuer = prompt('請輸入0~59之間的一個(gè)數(shù)字');
var result = figuer < 10 ? '0' + figuer : figue
alert(result);
switch(表達(dá)式){
case value1:
//表達(dá)式等于 value1 時(shí)要執(zhí)行的代碼
break;
case value2:
//表達(dá)式等于value2 時(shí)要執(zhí)行的代碼
break;
default:
//表達(dá)式不等于任何一個(gè)value時(shí)要執(zhí)行的代碼
}
// 用戶在彈出框里面輸入一個(gè)水果,如果有就彈出該水果的價(jià)格, 如果沒有該水果就彈出“沒有此水果”
var fruit = prompt('請您輸入查詢的蘋果');
switch (fruit) {
case '蘋果':
alert('蘋果的價(jià)格為3.5元/千克');
break;
case '香蕉':
alert('香蕉的價(jià)格為3元/千克');
break;
default:
alert('沒有這種水果');
}
在程序中,一組被重復(fù)執(zhí)行的語句被稱之為循環(huán)體,能否繼續(xù)重復(fù)執(zhí)行,取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句,被稱之為循環(huán)語句
for(初始化變量;條件表達(dá)式;操作表達(dá)式)
{
//循環(huán)體
}
1.輸入10句"娘子晚安哈!"
//基本寫法
for(var i = 1; i<=10; i++ )
{
console.log('娘子晚安哈');
}
// 用戶輸入次數(shù)
var num = prompt('請輸入次數(shù):');
for(var i = 1; i<= num ;i++)
{
console.log('娘子晚安哈');
}
2.求1-100之間所有整數(shù)的累加和
// 求1-100所以的整數(shù)和
var sum = 0;
for (var i = 1; i <= 100; i++) {
var sum = sum + i;
}
console.log(sum);
3.求1-100之間所有數(shù)的平均值
// 3.求1-100之間所有數(shù)的平均值
var sum = 0;
for (var i = 1; i <= 100; i++) {
var sum = sum + i;
}
console.log(sum / 100);
4.求1-100之間所有偶數(shù)和奇數(shù)的和
// 4.求1-100之間所有偶數(shù)和奇數(shù)的和
var sum1 = 0;
var sum2 = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
sum1 = sum1 + i;
} else {
sum2 = sum2 + i;
}
}
console.log('偶數(shù)和為' + sum1);
console.log('奇數(shù)和為' + sum2);
5.求1-100之間所有能被3整除的數(shù)字的和
// 5.求1-100之間所有能被3整除的數(shù)字的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
sum += i;
}
}
console.log(sum);
6.要求用戶輸入班級人數(shù),之后依次輸入每個(gè)學(xué)生的成績,最后打印出該班級總的成績以及平均成績。
var num = prompt('請輸入班級總的人數(shù):'); // num 班級總的人數(shù)
var sum = 0; // 總成績
var average = 0; // 平均成績
for (var i = 1; i <= num; i++) {
var score = prompt('請輸入第' + i + '個(gè)學(xué)生的成績');
//這里接收的是str,必須轉(zhuǎn)換為數(shù)值
sum = sum + parseFloat(score);
}
average = sum / num;
alert('班級總的成績是:' + sum);
alert('班級總的平均成績是:' + average);
7.一行打印5個(gè)星星
我們采取追加字符串的方式,這樣可以打印到控制臺上
var star = '';
for (var i = 1; i <= 5; i++) {
star += '☆';
}
console.log(star);
循環(huán)嵌套是指在一個(gè)循環(huán)語句中再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu),例如在for循環(huán)語句中,可以再嵌套一個(gè)for 循環(huán),這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán)。
for(外循環(huán)的初始;外循環(huán)的條件;外形循環(huán)的操作表達(dá)式){
for(內(nèi)循環(huán)的初始;內(nèi)循環(huán)的條件;內(nèi)循環(huán)的操作表達(dá)式){
需執(zhí)行的代碼;
}
}
核心:
var star = '';
for(var j = 1;j<=5;j++)
{
for (var i = 1; i <= 5; i++)
{
star += '☆'
}
//每次滿5個(gè)星星就加一次換行
star +='\n'
}
console.log(star);
要求用戶輸入行數(shù)和列數(shù),之后在控制臺打印出用戶輸入行數(shù)和列數(shù)的星星
var star = '';
var row = prompt('請輸入行數(shù)');
var col = prompt('請輸入列數(shù)');
for (var j = 1; j <= col; j++) {
for (var i = 1; i <= row; i++) {
star += '☆';
}
star += '\n';
}
console.log(star);
var star = '';
var row = prompt('請輸入行數(shù)');
var col = prompt('請輸入列數(shù)');
for (var i = 1; i <= row; i++) {
for (var j = i; j <= col; j++) {
star += '☆';
}
star += '\n';
}
console.log(star);
while(條件表達(dá)式){
//循環(huán)體代碼
}
執(zhí)行思路:
注意:
從1歲到99歲
var age = 0;
while (age <= 100) {
age++;
console.log('您今年' + age + '歲了');
}
var figure = 1;
var sum = 0;
while (figure <= 100) {
sum += figure;
figure++;
}
console.log('1-100的整數(shù)和為' + sum);
do {
//循環(huán)體代碼-條件表達(dá)式為true的時(shí)候重復(fù)執(zhí)行循環(huán)一代碼
}while(條件表達(dá)式);
執(zhí)行思路:
需求:彈出一個(gè)提示框, 你愛我嗎? 如果輸入我愛你,就提示結(jié)束,否則,一直詢問
do {
var love = prompt('你愛我嗎?');
} while (love != '我愛你');
alert('登錄成功');
continue 關(guān)鍵字用于立即跳出本次循環(huán),繼續(xù)下一次循環(huán)(本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次)。
例如,吃5個(gè)包子,第3個(gè)有蟲子,就扔掉第3個(gè),繼續(xù)吃第4個(gè)第5個(gè)包子
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('這個(gè)包子有蟲子,扔掉');
continue; // 跳出本次循環(huán),跳出的是第3次循環(huán)
}
console.log('我正在吃第' + i + '個(gè)包子呢');
}
break 關(guān)鍵字用于立即跳出整個(gè)循環(huán)
例如,吃5個(gè)包子,吃到第3個(gè)發(fā)現(xiàn)里面有半個(gè)蟲子,其余的也不吃了
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整個(gè)for 循環(huán),跳到整個(gè)for下面的語句
}
console.log('我正在吃第' + i + '個(gè)包子呢');
}
數(shù)組(Array)是指一組數(shù)據(jù)的集合,其中的每個(gè)數(shù)據(jù)被稱作元素,在數(shù)組中可以存放任意類型的元素。數(shù)組是一種將一組數(shù)據(jù)存儲在單個(gè)變量名下的優(yōu)雅方式。
//普通變量一次只能存儲一個(gè)值
var num = 10;
//數(shù)組一次可以存儲多個(gè)值
var arr =[1,2,3,4,5];
JavaScript 中創(chuàng)建數(shù)組有兩種方式:
var 數(shù)組名 = new Array();
var arr = new Array(); //創(chuàng)建一個(gè)新的空數(shù)組
// 1.利用數(shù)組字面量方式創(chuàng)建空的數(shù)組
var 數(shù)組名 =[];
// 2.使用數(shù)組字面量方式創(chuàng)建帶初始值的數(shù)組
var 數(shù)組名 =['小白','小黑','小黃','瑞奇'];
// 3.數(shù)組中可以存放任意類型的數(shù)據(jù),例如字符串,數(shù)字,布爾值等
var arrStus =['小白',12,true,28.9];
索引 (下標(biāo)) :用來訪問數(shù)組元素的序號(數(shù)組下標(biāo)從 0 開始)
//定義數(shù)組
var arrStus = [1,2,3];
//獲取數(shù)組中的第2個(gè)元素
alert(arrStus[1]);
我們可以通過 for 循環(huán)索引遍歷數(shù)組中的每一項(xiàng)
// 數(shù)組索引訪問數(shù)組中的元素
var arr = ['red','green', 'blue'];
console.log(arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue
// for循環(huán)遍歷數(shù)組
var arr = ['red','green', 'blue'];
for (var i = 0; i < arr.length; i++){
console.log(arrStus[i]);
}
使用“數(shù)組名.length”可以訪問數(shù)組元素的數(shù)量(數(shù)組長度)
var arrStus = [1,2,3];
alert(arrStus.length); // 3
注意:
1.請將 [“關(guān)羽”,“張飛”,“馬超”,“趙云”,“黃忠”,“劉備”,“姜維”]; 數(shù)組里的元素依次打印到控制臺
var arr = ["關(guān)羽","張飛","馬超","趙云","黃忠","劉備","姜維"];
// 遍歷 從第一個(gè)到最后一個(gè)
for(var i = 0; i < arr.length; i++ ) {
console.log( arr[i] );
}
2.求數(shù)組 [2,6,1,7, 4] 里面所有元素的和以及平均值
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
average = sum / i; //此時(shí)i為5
// average = sum / arr.length;
console.log('和為' + sum);
console.log('平均值為' + average);
3.求數(shù)組[2,6,1,77,52,25,7]中的最大值
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = arr[0];
var temp;
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
temp = max;
max = arr[i];
arr[i] = temp;
}
}
console.log('最大值為' + max);
方法二:
var arrNum = [2,6,1,77,52,25,7];
var maxNum = arrNum[0]; // 用來保存最大元素,默認(rèn)最大值是數(shù)組中的第一個(gè)元素
// 從0 開始循環(huán)數(shù)組里的每個(gè)元素
for(var i = 0;i< arrNum.length; i++){
// 如果數(shù)組里當(dāng)前循環(huán)的元素大于 maxNum,則保存這個(gè)元素和下標(biāo)
if(arrNum[i] > maxNum){
maxNum = arrNum[i]; // 保存數(shù)值到變量 maxNum
}
}
4.將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素轉(zhuǎn)換為字符串
思路:就是把里面的元素相加就好了,但是注意保證是字符相加
var arr = ['red','green','blue','pink'];
var str ='';
for(var i = 0; i < arr.length; i++){
str += arr[i];
}
console.log(str);
// redgreenbluepink
5.將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’] 轉(zhuǎn)換為字符串,并且用 | 或其他符號分割
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var separator = '|';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + separator;
}
console.log(str);
// red|green|blue|pink
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
其中索引號是 4,5,6 的空間沒有給值,就是聲明變量未給值,默認(rèn)值就是 undefined
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);
1.新建一個(gè)數(shù)組,里面存放10個(gè)整數(shù)( 1~10), 要求使用循環(huán)追加的方式輸出: [1,2,3,4,5,6,7,8,9,10]
var arr = [];
for (var i = 0; i < 10; i++){
arr[i] = i + 1;
}
console.log(arr);
2.將數(shù)組 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素選出來,放入新數(shù)組
實(shí)現(xiàn)代碼1:
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 定義一個(gè)變量 用來計(jì)算 新數(shù)組的索引號
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 給新數(shù)組
newArr[j] = arr[i];
// 索引號 不斷自加
j++;
}
}
console.log(newArr);
實(shí)現(xiàn)代碼2:
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 給新數(shù)組
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
將數(shù)組[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后,形成一個(gè)不包含 0 的新數(shù)組。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for(var i = 0; i <arr.length; i++){
if(arr[i] != 0){
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
//老師代碼
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = []; // 空數(shù)組的默認(rèn)的長度為 0
// 定義一個(gè)變量 i 用來計(jì)算新數(shù)組的索引號
for (var i = 0; i < arr.length; i++) {
// 找出大于 10 的數(shù)
if (arr[i] != 0) {
// 給新數(shù)組
// 每次存入一個(gè)值,newArr長度都會 +1
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的內(nèi)容反過來存放
// 把舊數(shù)組索引號的第4個(gè)取過來(arr.length - 1),給新數(shù)組索引號第0個(gè)元素(newArr.length)
var arr = ['red','green','blue','pink','purple'];
var newArr = [];
for (var i = arr.length -1; i>=0; i--){
newArr[newArr.length] = arr[i];
}
console.log(newArr);
冒泡排序
將數(shù)組 [5, 4, 3, 2, 1]中的元素按照從小到大的順序排序,輸出: 1,2,3,4,5
var arr = [5,4,3,2,1];
for (var i = 0; i < arr.length-1; i++){ //外層循環(huán)管趟數(shù),5個(gè)數(shù)共交換4躺
for (var j = 0; j <= arr.length - i - 1; j++){
//里層循環(huán)管每一趟交換的次數(shù)
//前一個(gè)和后面一個(gè)數(shù)組元素相比較
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
匯總結(jié)束,希望對各位朋友有幫助,覺得還不錯(cuò)的給個(gè)點(diǎn)贊支撐支撐
前,一個(gè)典型的前端項(xiàng)目技術(shù)框架的選型主要包括以下三個(gè)方面:
JS模塊化框架。(Require/Sea/ES6 Module/NEJ)
前端模板框架。(React/Vue/Regular)
狀態(tài)管理框架。(Flux/Redux)
系列文章將從上面三個(gè)方面來介紹相關(guān)原理,并且嘗試自己造一個(gè)簡單的輪子。
本篇介紹的是 JS模塊化 。
JS模塊化是隨著前端技術(shù)的發(fā)展,前端代碼爆炸式增長后,工程化所采取的必然措施。目前模塊化的思想分為CommonJS、AMD和CMD。有關(guān)三者的區(qū)別,大家基本都多少有所了解,而且資料很多,這里就不再贅述。
模塊化的核心思想:
拆分 。將js代碼按功能邏輯拆分成多個(gè)可復(fù)用的js代碼文件(模塊)。
加載 。如何將模塊進(jìn)行加載執(zhí)行和輸出。
注入 。能夠?qū)⒁粋€(gè)js模塊的輸出注入到另一個(gè)js模塊中。
依賴管理 。前端工程模塊數(shù)量眾多,需要來管理模塊之間的依賴關(guān)系。
根據(jù)上面的核心思想,可以看出要設(shè)計(jì)一個(gè)模塊化工具框架的關(guān)鍵問題有兩個(gè):一個(gè)是如何將一個(gè)模塊執(zhí)行并可以將結(jié)果輸出注入到另一個(gè)模塊中;另一個(gè)是,在大型項(xiàng)目中模塊之間的依賴關(guān)系很復(fù)雜,如何使模塊按正確的依賴順序進(jìn)行注入,這就是依賴管理。
下面以具體的例子來實(shí)現(xiàn)一個(gè)簡單的 基于瀏覽器端 的 AMD 模塊化框架(類似NEJ),對外暴露一個(gè)define函數(shù),在回調(diào)函數(shù)中注入依賴,并返回模塊輸出。要實(shí)現(xiàn)的如下面代碼所示。
define([ '/lib/util.js', //絕對路徑 './modal/modal.js', //相對路徑 './modal/modal.html',//文本文件], function(Util, Modal, tpl) { /* * 模塊邏輯 */ return Module; })
1. 模塊如何加載和執(zhí)行
先不考慮一個(gè)模塊的依賴如何處理。假設(shè)一個(gè)模塊的依賴已經(jīng)注入,那么如何加載和執(zhí)行該模塊,并輸出呢?
在瀏覽器端,我們可以借助瀏覽器的 script 標(biāo)簽來實(shí)現(xiàn) JS模塊文件 的引入和執(zhí)行,對于 文本模塊文件 則可以直接利用 ajax 請求實(shí)現(xiàn)。
具體步驟如下:
第一步,獲取 模塊文件的絕對路徑 。
要在瀏覽器內(nèi)加載文件,首先要獲得對應(yīng)模塊文件的完整網(wǎng)絡(luò)絕對地址。由于 a標(biāo)簽 的href屬性總是會返回絕對路徑,也就是說它具有把相對路徑轉(zhuǎn)成絕對路徑的能力,所以這里可以利用該特性來獲取模塊的絕對網(wǎng)絡(luò)路徑。需要指出的是,對于使用相對路徑的依賴模塊文件,還需要遞歸先獲取當(dāng)前模塊的網(wǎng)絡(luò)絕對地址,然后和相對路徑拼接成完整的絕對地址。代碼如下:
var a = document.createElement('a'); a.id = '_defineAbsoluteUrl_'; a.style.display = 'none';document.body.appendChild(a);function getModuleAbsoluteUrl(path) { a.href = path; return a.href; }function parseAbsoluteUrl(url, parentDir) { var relativePrefix = '.', parentPrefix = '..', result; if (parentDir && url.indexOf(relativePrefix) === 0) { // 以'./'開頭的相對路徑 return getModuleAbsoluteUrl(parentDir.replace(/[^\/]*$/, '') + url); } if (parentDir && url.indexOf(parentPrefix) === 0) { // 以'../'開頭的相對路徑 return getModuleAbsoluteUrl(parentDir.replace(/[\/]*$/, '').replace(/[\/]$/, '').replace(/[^\/]*$/, '') + url); } return getModuleAbsoluteUrl(url); }
第二步, 加載和執(zhí)行模塊文件 。
對于JS文件,利用 script 標(biāo)簽實(shí)現(xiàn)。代碼如下:
var head = document.getElementsByTagName('head')[0] || document.body; function loadJsModule(url) { var script = document.createElement('script'); script.charset = 'utf-8'; script.type = 'text/javascript'; script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { /* * 加載邏輯, callback為define的回調(diào)函數(shù), args為所有依賴模塊的數(shù)組 * callback.apply(window, args); */ script.onload = script.onreadystatechange = null; } }; }
對于文本文件,直接用 ajax 實(shí)現(xiàn)。代碼如下:
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'), textContent = ''; xhr.onreadystatechange = function(){ var DONE = 4, OK = 200; if(xhr.readyState === DONE){ if(xhr.status === OK){ textContent = xhr.responseText; // 返回的文本文件 } else{ console.log("Error: "+ xhr.status); // 加載失敗 } } } xhr.open('GET', url, true);// url為文本文件的絕對路徑xhr.send(null);
2. 模塊依賴管理
一個(gè)模塊的加載過程如下圖所示。
狀態(tài)管理
從上面可以看出,一個(gè)模塊的加載可能存在以下幾種可能的狀態(tài)。
加載(load)狀態(tài),包括未加載(preload)狀態(tài)、加載(loading)狀態(tài)和加載完畢(loaded)狀態(tài)。
正在加載依賴(pending)狀態(tài)。
模塊回調(diào)完成(finished)狀態(tài)。
因此,需要為每個(gè)加載的模塊加上狀態(tài)標(biāo)志(status),來識別目前模塊的狀態(tài)。
依賴分析
在模塊加載后,我們需要解析出每個(gè)模塊的絕對路徑(path)、依賴模塊(deps)和回調(diào)函數(shù)(callback),然后也放在模塊信息中。模塊對象管理邏輯的數(shù)據(jù)模型如下所示。
{ path: 'http://asdas/asda/a.js', deps: [{}, {}, {}], callback: function(){ }, status: 'pending' }
依賴循環(huán)
模塊很可能出現(xiàn)循環(huán)依賴的情況。也就是a模塊和b模塊相互依賴。依賴分為 強(qiáng)依賴 和 弱依賴。 強(qiáng)依賴 是指,在模塊回調(diào)執(zhí)行時(shí)就會使用到的依賴;反之,就是 弱依賴 。對于 強(qiáng)依賴,會造成死鎖,這種情況是無法解決的。但 弱依賴 可以通過現(xiàn)將一個(gè)空的模塊引用注入讓一個(gè)模塊先執(zhí)行,等依賴模塊執(zhí)行完后,再替換掉就可以了。 強(qiáng)依賴 和 弱依賴 的例子如下:
//強(qiáng)依賴的例子 //A模塊 define(['b.js'], function(B) { // 回調(diào)執(zhí)行時(shí)需要直接用到依賴模塊 B.demo = 1; // 其他邏輯});//B模塊define(['a.js'], function(A) { // 回調(diào)執(zhí)行時(shí)需要直接用到依賴模塊 A.demo = 1; // 其他邏輯});
// 弱依賴的例子 // A模塊 define(['b.js'], function(B) { // 回調(diào)執(zhí)行時(shí)不會直接執(zhí)行依賴模塊 function test() { B.demo = 1; } return {testFunc: test} });//B模塊define(['a.js'], function(A) { // 回調(diào)執(zhí)行時(shí)不會直接執(zhí)行依賴模塊 function test() { A.demo = 1; } return {testFunc: test} });
3. 對外暴露define方法
對于define函數(shù),需要遍歷所有的未處理js腳本(包括 內(nèi)聯(lián) 和 外聯(lián) ),然后執(zhí)行模塊的加載。這里對于 內(nèi)聯(lián) 和 外聯(lián) 腳本中的define,要做分別處理。主要原因有兩點(diǎn):
內(nèi)斂腳本不需要加載操作。
內(nèi)斂腳本中define的模塊的回調(diào)輸出是不能作為其他模塊的依賴的。
var handledScriptList = []; window.define = function(deps, callback) { var scripts = document.getElementsByTagName('script'), defineReg = /s*define\s*\(\[.*\]\s*\,\s*function\s*\(.*\)\s*\{/, script; for (var i = scripts.length - 1; i >= 0; i--) { script = list[i]; if (handledScriptList.indexOf(script.src) < 0) { handledScriptList.push(script.src); if (script.innerHTML.search(defineReg) >= 0) { // 內(nèi)斂腳本直接進(jìn)行模塊依賴檢查。 } else { // 外聯(lián)腳本的首先要監(jiān)聽腳本加載 } } } };
上面就是對實(shí)現(xiàn)一個(gè)模塊化工具所涉及核心問題的描述。
var windowHeight = window.innerHeight
console.log(windowHeight)
?
var windowWidth = window.innerWidth
console.log(windowWidth)
window.alert('我是一個(gè)提示框')
var boo = window.confirm('我是一個(gè)詢問框')
console.log(boo)
var str = window.prompt('請輸入內(nèi)容')
console.log(str)
console.log(window.location.href)
window.location.href = './index.html'
// 這個(gè)就會跳轉(zhuǎn)頁面到后面你給的那個(gè)地址
window.location.reload()
console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
console.log(window.navigator.appName)
console.log(window.navigator.appVersion)
console.log(window.navigator.platform)
window.onload = function () {
console.log('頁面已經(jīng)加載完畢')
}
<html>
<head>
<meta charset="UTF-8" />
<script>
// 這個(gè)代碼執(zhí)行的時(shí)候,body 還沒有加載
// 這個(gè)時(shí)候我們就獲取不到 body 中的那個(gè) div
// 就需要使用 window.onload 事件
window.onload = function () {
// 這個(gè)函數(shù)會在頁面加載完畢以后在執(zhí)行
// 那么這個(gè)時(shí)候頁面的 DOM 元素都已經(jīng)加載了,我們就可以獲取 div 了
}
</script>
</head>
<body>
<div></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div></div>
<script>
// 這個(gè)代碼執(zhí)行的時(shí)候,body 已經(jīng)加載完畢了
// 在這里就可以獲取到 div,寫不寫 window.onload 就無所謂了
window.onload = function () {
// 這個(gè)函數(shù)會在頁面加載完畢以后在執(zhí)行
// 那么這個(gè)時(shí)候頁面的 DOM 元素都已經(jīng)加載了,我們就可以獲取 div 了
}
</script>
</body>
</html>
window.onscroll = function () {
console.log('瀏覽器滾動了')
}
window.onscroll = function () {
console.log(document.body.scrollTop)
console.log(document.documentElement.scrollTop)
}
window.onscroll = function () {
console.log(document.body.scrollLeft)
console.log(document.documentElement.scrollLeft)
}
var timerId = setTimeout(function () {
console.log('我執(zhí)行了')
}, 1000)
console.log(timerId) // 1
var timerId = setInterval(function () {
console.log('我執(zhí)行了')
}, 1000)
var timerId = setTimeout(function () {
console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
?
var timerId2 = setInterval(function () {
console.log('間隔定時(shí)器')
}, 1000)
?
console.log(timerId) // 1
console.log(timerId2) // 2
var timerId = setTimeout(function () {
console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
clearTimeout(timerId)
var timerId2 = setInterval(function () {
console.log('間隔定時(shí)器')
}, 1000)
coearInterval(timerId2)
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。