1.JS書寫的位置強(qiáng)調(diào): 1.最常用 內(nèi)嵌JS --- 學(xué)習(xí)期間用 外部JS --- 開發(fā)部署最多使用 现拒,使用時(shí)叮阅,為了 不讓 js 文件 被 爬蟲 抓取,會(huì) 寫一堆比較復(fù)雜的 js 動(dòng)態(tài) 加載 其他的外部js頁面 行內(nèi)JS 一般不會(huì)直接 寫到 html中逗鸣,而是 通過 webapi 來 動(dòng)態(tài)創(chuàng)建:献 ! 2.小坑: script標(biāo)間 一旦 使用了 src屬性 來引用外部 js文件的話撒璧,標(biāo)簽中間的js代碼 就不會(huì)被執(zhí)行了M父稹!卿樱!2 JS的注釋 /* 注意: a.注釋 一般用在 內(nèi)嵌JS 和 外部JS中 b.用處:對代碼業(yè)務(wù)做備注說明 -- 給其他開發(fā)者看 + 也給自己看A藕Α! 面試用的著繁调,代碼如果有注釋萨蚕,會(huì)專業(yè)度更高! */
? // 1. 單行注釋
? alert('我是班長~~~');
? /* 2. 多行注釋
? 我是班長
? 我還沒吃早飯
? 因?yàn)闆]有女朋友幫忙買
? */
3 js常用的輸入與輸出 //1. 【輸出 函數(shù)】 -- 輸出內(nèi)容給 瀏覽器用戶? ? ----------------------------------------
? //1.1 alert 消息彈出框? -- 主要是給 瀏覽器用戶 看
? // ?? 用法 alert('要輸出的內(nèi)容~~')
?
? //alert('521,死定了~~~~');
? //1.2 console.log 控制臺(tái)輸出 -- 主要是給 開發(fā)者 看
? // ? ? ? ? ? ? ?? 內(nèi)容會(huì)輸出到 瀏覽器的 控制臺(tái) 選項(xiàng)卡中~~~ (通過 f12 可以打開瀏覽器的控制臺(tái))
? console.log('中午回不了家蹄胰,晚上得開會(huì)~~~~');
? //1.3 documnet.write 輸出內(nèi)容到body -- 主要用來 輸出局部的 html 代碼
? // ?? 注意:使用頻率非常低岳遥,基本上不用!TU:迫亍!
?
? document.write('<h1>晚上回家估計(jì)被反鎖~~~所以先去訂間房~~~</h1>');
? //2. 輸入 函數(shù) -- 接收瀏覽器用戶輸入的內(nèi)容? -------------------------------------------
? //2.1 prompt 內(nèi)容輸入框 -- 接收瀏覽器用戶輸入的內(nèi)容
? // ?? prompt('提示用戶要輸入的內(nèi)容~~~')
? // ?? 會(huì)返回用戶 輸入的內(nèi)容? -- 講變量時(shí) 再介紹
?
? // prompt('請輸入班長女朋友的電話號(hào)碼:');
? //2.2 confirm 確認(rèn)選擇框 -- 接收 瀏覽器用戶 確認(rèn)/取消 按鈕的選擇
? // ?? confirm('提示用戶的消息~~~') ?
? // ?? 會(huì)返回用戶 選擇的結(jié)果? -- 講變量時(shí) 再介紹
?
? confirm('班長宾袜,你確認(rèn)要把自己女朋友的電話號(hào)碼給他嗎捻艳?');
</script>
4 直接量和數(shù)據(jù)類型 //1.因?yàn)?使用 代碼 來做的業(yè)務(wù),大部分 都是 包含數(shù)據(jù)的庆猫,所以 需要 數(shù)據(jù)(直接量) 和 儲(chǔ)存數(shù)據(jù)(變量等) 的 語法H瞎臁!月培!
? //2.直接量(數(shù)據(jù))-- 直接 可以被 js引擎(瀏覽器) 解析的數(shù)據(jù) 就是 直接量`易帧!
? console.log(110);
? console.log(35);
? console.log(18.5);
?
? console.log('我愛你杉畜,老婆~~~');
? console.log('知道了~~~ 我也愛你哦~~~~');
? console.log("爸爸媽媽纪蜒,我也愛你們~~~");
? console.log('i love u ~~~');
? console.log('110');
?
? console.log(true);
? console.log(false);
?
? // console.log(james);
? //3.數(shù)據(jù)類型:由于 JS中的 數(shù)據(jù) 有多種,所以 為他們分了類別寻行,這些了別的統(tǒng)稱:數(shù)據(jù)類型
? //3.1 數(shù)值類型 Number
? // ? ? ?? 作用:用來 在 js中 表示? 各種 數(shù)字 -> 整數(shù)(整型數(shù)值) , 小數(shù)(浮點(diǎn)數(shù)) 匾荆,負(fù)數(shù)
? console.log(110);
? console.log(112);
? console.log(520);
?
? console.log(1.314); // 加了小數(shù)點(diǎn) 的小數(shù)
? console.log(-1); // 負(fù)數(shù)
?
? //a. 數(shù)值類型的 取值范圍 -- 因?yàn)閮?nèi)存是有限的拌蜘,數(shù)字是無限的杆烁,所以 在js中 已經(jīng)規(guī)定好數(shù)字范圍!
? // ? 最大值 和 最小值
? console.log('最大值為:');
? console.log(Number.MAX_VALUE); // 最大值:js能夠顯示的 最大值
?
? console.log('最小值為:');
? console.log(Number.MIN_VALUE); // 最小值:js能夠顯示的 最小值
? //? 無窮大 和 無窮小 ---- 因?yàn)?數(shù)學(xué) 的范疇中 數(shù)字 是無限的简卧,所以 JS中 使用 無窮大和無窮小來表示 這個(gè)兩個(gè)概念
? console.log(Infinity); //Infinity 無窮大
? console.log(-Infinity); //-Infinity 無窮小
? //3.2 數(shù)值類型里 兩個(gè)特殊的地方
? //a. Infinity 和 任何數(shù)值運(yùn)算 結(jié)果都是 Infinity
? console.log(Infinity + 1);
?
? //b. JS中 由于 處理的機(jī)制問題兔魂,相除時(shí),可能得到 的無窮循環(huán)小數(shù) 只會(huì) 顯示 15-17 位
? console.log(10 / 3);
5字符串類型 //1. 在 js 中 如果要表達(dá) 一句話~~~ 就需要 使用 到字符串類型了>倜洹N鲂!!铜涉!? ? ? //? 凡是 使用 ''? 或者? "" 包裹起來的 智玻,都是 字符串類型 的數(shù)據(jù)
? console.log('我是鄒老師,今天上課第一天芙代,很開心班上有100多人5跎荨!纹烹!竟然還有 會(huì) 散打 的~~~竟然還戴眼鏡~~~');
? console.log("我是班長页滚,我有女朋友~~~~!");
?
? //2. 字符串嵌套使用
? // console.log('i love u ~~~"); // 報(bào)錯(cuò):因?yàn)?js引擎 無法找到 結(jié)束字符串用的 '
? // console.log("i hate u ~~~~'); // 報(bào)錯(cuò):因?yàn)?js引擎 無法找到 結(jié)束字符串用的 "
? // 注意:可以 在 ' ? ""? '
? console.log('我愛你铺呵,"小蠻腰" ~~~~'); // 沒報(bào)錯(cuò):因?yàn)?js 引擎 找到了 結(jié)束字符串用的 '裹驰,中間的 " " 被當(dāng)做字符串的一部分
? console.log("我愛你,'小蠻腰' ~~~~"); // 沒報(bào)錯(cuò):因?yàn)?js 引擎 找到了 結(jié)束字符串用的 '片挂,中間的 " " 被當(dāng)做字符串的一部分
? // 思考:打印 一句話 內(nèi)容為 : ? 我是天真爛漫的小天使幻林,是"裙姐"的好朋友
? console.log('我是天真爛漫的小天使,是"裙姐"的好朋友');
? // -----【強(qiáng)調(diào):】開發(fā)時(shí)宴卖,一般使用【單引號(hào)】來表示字符串
?
? //3.字符串的轉(zhuǎn)義符
? //? 轉(zhuǎn)義符:字符串中 有時(shí)候 需要 使用到一些特殊的效果滋将,那么就需要 特殊的命令 來 告訴 js引擎,特殊的命令 就叫做 轉(zhuǎn)義符
? // ? ? ? ? 【轉(zhuǎn)義符的 核心 就是? \】 症昏,后面可以匹配一些指定的 字母 帶代表 特殊命令K婷觥!肝谭!
? //? 常見轉(zhuǎn)義符: ?
? // ? ? ? ? ?? 換行 \r (相當(dāng)于 Html 里的 p標(biāo)簽)? 或者 \n(相當(dāng)于 html里的 br標(biāo)簽)
? // ? ? ? ? ?? \' ? 代表 一個(gè) 單引號(hào)
? // ? ? ? ? ?? \" ? 代表 一個(gè) 雙引號(hào)
? // ? ? ? ? ?? \t ? 制表符(tab鍵)
? // ? ? ? ? ?? \\ ? 帶包 一個(gè) \
?
? // 思考:打印一句話: 我愛你
? // ? ? ? ? ? ? ? ?? 但是我不敢說
? // ? ? ? ? ? ? ? ?? 說了\怕你\打我
07布爾值類型 //1.在 JS 中 經(jīng)常會(huì)遇到 要 表示 兩種對立狀態(tài):對錯(cuò)掘宪,是否,好壞攘烛,男女........? ? ? //? 【布爾值數(shù)據(jù)類型】:專門用來表示? 兩種 對立狀態(tài)? ? ? //? ? ? ? 只有兩個(gè)值:true? 和 false
? console.log(true);
? console.log(false);
?
? //2.擴(kuò)展:
? //? true? 本質(zhì)上 就是 1
? //? false 本質(zhì)上 就是 0
?
? // js 執(zhí)行時(shí)魏滚,true 和 false? 都會(huì)被轉(zhuǎn)成 1 和 0 來 保存 及 運(yùn)行
08typeof 檢測數(shù)據(jù)類型
//1.typeof? ? ? //? 用法:? ? ? //? ? ? a. tpyeof 直接量? -> 直接量的 數(shù)據(jù)類型名字? ? ? //? ? ? b. typeof(直接量)? -> 直接量的 數(shù)據(jù)類型名字
? // ? ?? c. typeof 返回的 類型名字 也是? 字符串類型的數(shù)據(jù)
?
? console.log( typeof '內(nèi)容是啥?要不要選擇大寶劍'); // string
? console.log( typeof "班長坟漱,要不要來一個(gè)大寶劍鼠次?"); // string
? console.log( typeof "\t\n\\"); // string
? console.log( typeof ''); // string
? console.log( typeof '110'); // 加了引號(hào),就是 字符串!P瓤堋成翩! -> string
?
? console.log(typeof(110)); // number
? console.log(typeof 1.1); // number
? console.log(typeof -101); // number
?
? console.log(typeof true); // boolean
? console.log(typeof false); // boolean
09變量 //1.需求:要 在 內(nèi)存中 開辟一個(gè)空間,保存 瀏覽器用戶 輸入的 數(shù)據(jù)? ? ? var bzGfNumber = prompt('請輸入班長的女朋友的電話號(hào)碼:'); // 將用戶 輸入的值 保存到 【變量空間】? ? ? console.log(bzGfNumber); // 打印【變量空間】里保存的值
? //2.什么是變量:本質(zhì)上 就是 內(nèi)存里的 一塊空間 , 變量名 就是 這個(gè)空間的 代號(hào)~~~
? // ? ? ? ? ? ? 通俗的說 就是 一個(gè)容器(盒子)赦役,往里面 可以保存 一個(gè)蘋果B榈小!
?
? //2.1 變量的 聲明---------------------------------------------
? // ?? 語法 : var 變量名;
? // ? ? ? ? ?? 變量名 = 值; // 聲明后掂摔,賦值
? // ?? a.聲明變量术羔,但沒有賦值 之前,變量中的默認(rèn)值為 undefined
? //
? var bzBFNumber; // 在內(nèi)存中開辟一個(gè)空間 乙漓,默認(rèn)值為 undefined
? console.log(bzBFNumber); // undefined
? bzBFNumber = 1123310819;
? console.log(bzBFNumber); // 1123310819
?
? //2.2 變量的 聲明賦值 ? ----------------------------------------
? // ?? 語法: var 變量名 = 值级历;
? var bzrBFNumber = 18620909999;
? console.log(bzrBFNumber);
? //強(qiáng)調(diào) :一個(gè)變量 只能 存 1 個(gè) 數(shù)據(jù)
?
? //2.3 訪問和設(shè)置 變量里的值 -------------------------------------
? // a. 訪問變量:只需要 使用 變量名就可以了!4孛搿鱼喉!
? var usrName = '小蒼蒼';
? console.log(usrName);
? // alert(usrName);
?
? // b. 修改變量空間里的值 -- 本質(zhì)上 是 覆蓋了 原來 變量空間里的值
? usrName = '小波波';
? console.log(usrName);
? //2.4 小坑:變量名 和 字符串容易弄混
? var a = 110;
? console.log('a'); // -> a
? console.log(a); // -> 110
10變量的拓展 //1.不使用 var 關(guān)鍵字,也能聲明變量 ---- 強(qiáng)調(diào):不推薦使用G鞴邸?盖荨!皱坛! --------------------------------? ? ? ? var a = 110;? ? ? ? a = 120; // 修改 已經(jīng)存在的 變量的值1嗦!剩辟!? ? ? ? console.log(a);? ? ? ?
?? b = 250; // JS 引擎 檢查之后 發(fā)現(xiàn) 頁面上沒有 叫做 b 的變量掐场,所以 就 自動(dòng)創(chuàng)建了一個(gè) 變量b!!!
?? console.log(b);
?? //1.1 注意:不使用 var 關(guān)鍵字 來聲明變量時(shí),變量聲明和賦值 必須在一行7妨浴P芑А!
?? // c; //報(bào)錯(cuò): c is not defined
?? c = 11;
?? console.log(c);
?
?? //2.批量聲明變量
?? var a,b,c;
?? a = 1;
?? b = 2;
?? c = 3;
?? //3.批量聲明變量并賦值
?? var a = 1,b = 2, c = 3;
?? //4.變量給變量賦值 -------------------------------------------------
?? //? 注意:變量之間賦值:本質(zhì)上 是將 變量 a 的值 復(fù)制一份 給 了 變量 b
?? var usrName = '小波波';
?? var usrName2 = usrName;
11變量的命名規(guī)范//1.變量的 命名規(guī)則 --- 規(guī)則 相當(dāng)于 法律吭服,違反了 就會(huì) 要收到嚴(yán)懲H卤ぁ!? ? //a. 變量名 只能用 英文字母 數(shù)字? _? $? 四種構(gòu)成? ? var usrName234;? ? var _name;? ? var $xiaobai;? ? var __3234234aabc$$$111aaabb;
//b. 變量名 不能用 數(shù)字開頭
// var 23aa; // 報(bào)錯(cuò)
?
//c. 不能是 js系統(tǒng)關(guān)鍵字 或 保留關(guān)鍵字 (凡是 在vscode中成 藍(lán)色的字都是 關(guān)鍵字 -- var)
// var var = 1;
//2.變量的 命名規(guī)范? -- 規(guī)范艇棕,相當(dāng)于 道德蝌戒,違反了 不用坐牢,但是 邊上的人可能 鄙視 指責(zé)你U恿稹北苟!
//a. 命名要有意義
var usrName;
var abc; // 沒有意義,不推薦
?
//b. 駝峰命名法 :當(dāng) 變量名由多個(gè) 單詞構(gòu)成打瘪,首字母 小寫友鼻,后面的 每個(gè)單詞 首字母 大寫傻昙!
var usrLoverName;
var usrDogAge;
//注意:
// ?? js中的 變量名 區(qū)分大小寫
var a = 1;
var A = 2;
12交換兩個(gè)變量的值//1. 將 兩個(gè) 變量 中保存的 值 交換位置? ? ? var a = '蘋果';? ? ? var b = '梨子';? ? ? console.log(a,b);
? // a = b;
? // b = a;
?
? //1.1 將 a 的值 保存到 臨時(shí)變量中
? var temp = a; ? // temp = 蘋果? a = 蘋果? b = 梨子
? //1.2 將 b 的值 保存到 a 中
? a = b; ? ? ? ?? // temp = 蘋果? a = 梨子? b = 梨子
?
? //1.3 將 臨時(shí)變量 的值 保存到 b 中
? b = temp; ? ? ? // temp = 蘋果? a = 梨子? b = 蘋果
?
? console.log(a,b);
13算數(shù)運(yùn)算符//加減乘除? ? ? //1. 加法? ? ? console.log( 1 + 1);
? var res = 1 + 1;
? console.log(res);
?
? //2. 減法 除法 /? 乘法 *
?
? //3. 取余(取模)? % -> 用來 獲取兩個(gè)數(shù)? 除不盡的值
? var res = 10 % 3; // 3 -> 1
? console.log('10 / 3 的 余數(shù)為:' + res);
? //4.神奇的+號(hào)
? //4.1 在兩邊 都是 數(shù)值類型 的情況下,進(jìn)行 求和 運(yùn)算彩扔,返回 兩個(gè)數(shù)的和
? var res = 1 + 1;
? //4.2 當(dāng)兩邊 有任意一邊 為 字符串時(shí)屋匕,會(huì)先將 另一邊 自動(dòng)轉(zhuǎn)成字符串,然后 將 兩個(gè) 字符串 拼接字一起 返回一個(gè) 新的字符串
? var str = '我愛' + '你~~';
? console.log(str);
?
? //補(bǔ)充:如果變量 的值 為 字符串借杰,那么 也會(huì)起到 拼接字符串的 作用
? var qunJie = '裙姐黑';
? var kunGe = '坤哥jian~~';
? var str = qunJie + kunGe +',天下無敵~~~';
? console.log(str);
14會(huì)魔法的Math//1. Math中的 PI ,保存了 一個(gè) 圓周率 的數(shù)值? ? ? console.log(Math.PI); // 3.141592653589793
? //2. 求絕對值
? console.log(Math.abs(-10));
?
? //3. 天花板函數(shù) ceil? -- 整數(shù)位 + 1进泼,小數(shù)位 去掉
? // ? ? ? ? ? ? ? ? ? 注意:只針對 有小數(shù)的 數(shù)值蔗衡,如果是整數(shù),返回原來的值
?
? console.log(Math.ceil(1.111));// 2
? console.log(Math.ceil(2.01));// 3
? console.log(Math.ceil(100.0000001));// 101
?
? console.log(Math.ceil(100));// 100
?
? //4. 地板函數(shù) floor --- 整數(shù)位 不變乳绕,小數(shù)位 去掉
? console.log(Math.floor(1.111));// 1
? console.log(Math.floor(2.01));// 2
? console.log(Math.floor(100.0000001));// 100
? //5. 四舍五入函數(shù) round --- 小數(shù)位 >= 0.5 ,小數(shù)位去掉绞惦,整數(shù)位 +1
? // ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? < 0.5 ,小數(shù)位去掉洋措,整數(shù)位 不變
? console.log(Math.round(1.111));// 1
? console.log(Math.round(2.01));// 2
? console.log(Math.round(100.5));// 101
?
? //6.求最大值
? var num1 = 99;
? var maxNum = Math.max(2,4,78,1,0,num1,5,9,7);
? console.log('maxNum=' + maxNum);
? //7.求最小值
? var num1 = 99;
? var minNum = Math.min(2,4,78,1,0,num1,5,9,7);
? console.log('minNum=' + minNum);
15使用js生成隨機(jī)數(shù) //1.計(jì)算機(jī)中 幾乎所有的 隨機(jī)生成的數(shù) 都是 偽隨機(jī)數(shù)济蝉! ---? 有規(guī)律可循!菠发!
? //2.使用 JS 生成 隨機(jī)數(shù) 很簡單王滤, Math.random() 會(huì) 返回一個(gè) 0 - 1 之間的 隨機(jī)小數(shù)
? //? 取值范圍: 大于等于0 ,小于 1? --> [0,1)
? var ranNum = Math.random();
? console.log(ranNum);
?
? //3.生成 0 - 100 之間的隨機(jī)數(shù)(包含小數(shù)點(diǎn))
? var ranNum = Math.random() * 100;
? console.log(ranNum);
?
? //4.生成 0 - 100 之間的 隨機(jī)整數(shù)W茵Q阆纭!
? var ranNum = Math.random() * 100;
? ranNum = Math.floor(ranNum); // 將 生成的 隨機(jī)數(shù) 傳入 floor方法糜俗,返回去掉 小數(shù)點(diǎn)的 整數(shù) 踱稍,從新 賦值給 ranNum 變量
? console.log(ranNum);