JS的引入及調(diào)試,常量,字面量,變量,JS中的數(shù)據(jù)類型,JS的運(yùn)算符,JS的運(yùn)算符之隱式類型轉(zhuǎn)換,強(qiáng)制類型轉(zhuǎn)換,Math的相關(guān)方法,parseInt()和parseFloat()
版權(quán)聲明:本文為博主原創(chuàng)文章荞怒,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接和本聲明挤土。
歡迎大家去我的個人技術(shù)博客看看檐束,點(diǎn)贊收藏注冊的都是好人哦~
前言--
JavaScript誕生于1995年。起初它的主要目的是處理以前由服務(wù)器端負(fù)責(zé)的一些表單驗(yàn)證般码。在那個絕大多數(shù)用戶都在使用調(diào)制解調(diào)器上網(wǎng)的時代妻率,用戶填寫完一個表單點(diǎn)擊提交,需要等待幾十秒板祝,完了服務(wù)器反饋給你說某個地方填錯了......在當(dāng)時如果能在客戶端完成一些基本的驗(yàn)證絕對是令人興奮的宫静。當(dāng)時走在技術(shù)革新最前沿的Netscape(網(wǎng)景)公司,決定著手開發(fā)一種客戶端(瀏覽器)語言券时,用來處理這種裝簡單的驗(yàn)證孤里。
**言簡意賅的講**:由于網(wǎng)速的原因,做一個簡單的表單驗(yàn)證橘洞,需要很長時間捌袜,這時頁面會出現(xiàn)空白現(xiàn)象。所以Netscape想開發(fā)一種語言炸枣,在瀏覽器端進(jìn)行驗(yàn)證虏等。(LiveScript)
當(dāng)時就職于Netscape公司的布蘭登·艾奇開始著手計劃將1995年2月發(fā)布的LiveScript同時在瀏覽器和服務(wù)器中使用。為了趕在發(fā)布日期前完成LiveScript的開發(fā)适肠,Netscape與Sun公司成立了一個開發(fā)聯(lián)盟霍衫。而此時,Netscape為了搭上媒體熱炒Java的順風(fēng)車侯养,臨時把LiveScript改名為JavaScript慕淡,所以從本質(zhì)上來說JavaScript和Java沒什么關(guān)系。(為了推廣語言)
JavaScript 是運(yùn)行在客戶端(瀏覽器)的編程語言
JavaScript是一種運(yùn)行在客戶端?的腳本語言?(解釋型語言)
JavaScript的解釋器被稱為JavaScript引擎沸毁,為瀏覽器的一部分峰髓,廣泛用于客戶端的腳本語言,最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)網(wǎng)頁上使用息尺,用來給HTML網(wǎng)頁增加動態(tài)功能携兵。
目錄:
一、JS的引入及調(diào)試
二搂誉、常量徐紧,字面量 ,變量
三、JS中的數(shù)據(jù)類型
四并级、JS的算數(shù)運(yùn)算符
五拂檩、JS的運(yùn)算符之隱式類型轉(zhuǎn)換
六、強(qiáng)制類型轉(zhuǎn)換
七嘲碧、Math的相關(guān)方法?
八稻励、parseInt()和parseFloat()
一、JS的引入及調(diào)試
首先愈涩,JavaScript望抽,以下我們簡稱JS/js,我們需要知道三個問題(吾日三省吾身)履婉,js有什么用煤篙?js是由什么組成?js代碼應(yīng)該寫在什么地方毁腿?
1.1辑奈、js的作用
JavaScript是一種專為與網(wǎng)頁交互而設(shè)計的客戶端腳本語言。
最初是為了實(shí)現(xiàn)表單驗(yàn)證
JavaScript能完成的功能多得去了已烤?
用戶交互(表單驗(yàn)證)
網(wǎng)頁特效(漂浮的廣告)
用戶記住賬戶名密碼
網(wǎng)頁游戲(圍住神經(jīng)貓)
……
1.2身害、js的組成
1.3、js的書寫位置
好了草戈,我知道js是啥了,那么js的代碼我們應(yīng)該寫在哪里侍瑟?
首先唐片,js代碼有兩種寫法,
第一種可以直接把js代碼寫在<script></script>標(biāo)簽里
例如:
<script>alert("我在script標(biāo)簽中哦")</script>
第二種可以在script標(biāo)簽中加上src的屬性涨颜,里面填上外部的js文件费韭,在外部js文件中書寫js代碼
<script src="js/index.js"></script>
注意:這個時候,script雙標(biāo)簽里面的代碼是不會生效的庭瑰。
然后我們看看script標(biāo)簽應(yīng)該寫在什么地方
1.3.1星持、在頁頭(也就是head中)
1.3.2、在頁尾
(body最后或者body閉合標(biāo)簽之外(html閉合標(biāo)簽之內(nèi)))
tip:或者放在</body>和</html之間>
1.3.3弹灭、元素事件中(寫在標(biāo)簽屬性中)
2督暂、關(guān)于js的調(diào)試方法
js有一個問題,如果前面的代碼出現(xiàn)問題穷吮,后面的代碼都不會執(zhí)行逻翁,我們就需要借助一些方法/函數(shù),來測試代碼段是否出現(xiàn)問題捡鱼。
2.1八回、document.write("world?world");
document.write()??在文檔中輸入一段內(nèi)容??document.write()??在()寫你想輸出的內(nèi)容
2.2、console.log("world?world");
console.log("world?world");??//???在控制臺輸出一段內(nèi)容??
2.3、alert();
alert();???彈出框???alert("hello?world");?//??彈出框輸出一段內(nèi)容
2.4缠诅、他們之間的區(qū)別和優(yōu)缺點(diǎn)
1溶浴、document.write()? 會在html的文檔中輸出內(nèi)容,會影響到原本的html頁面的結(jié)構(gòu)管引,根據(jù)代碼的位置不同士败,會在不同位置輸出內(nèi)容,不太可控汉匙。
而且由于閉合的文檔流使用document.write()會覆蓋文檔流拱烁,所以,在事件和異步的操作中噩翠,document.write會重置掉全部頁面中的文檔流戏自,并用write()中的內(nèi)容來替換body中的內(nèi)容。不推薦使用伤锚。
2擅笔、alert() 會在瀏覽器窗口中彈出一個彈出框,alert()會阻塞js屯援,如果alert()放在html標(biāo)簽之前猛们,alert()會導(dǎo)致后面的html頁面阻塞加載,而且alert()數(shù)量過多也會造成一定的閱讀困難狞洋。請少量使用弯淘。
3、console.log() 會在控制臺輸入內(nèi)容 吉懊,不會影響頁面結(jié)構(gòu)庐橙,不會阻塞頁面,也不會造成任何困擾借嗽,強(qiáng)烈推薦使用态鳖。
二、常量/字面量 恶导,變量
1浆竭、常量/直接量( 字面量 literal)
所有直接量(字面量),就是程序中直接顯示出來的數(shù)據(jù)????
? 100;? ? //數(shù)字? ? 的字面量
? "我是文本"? ? ? ? //字符串? 的字面量
? ?true? false? ? ? //布爾? ? 的字面量? ?
2惨寿、變量
變量 (存儲數(shù)據(jù)的容器)
2.1邦泄、變量的定義
變量定義:
var age; //var 是關(guān)鍵字,age是變量名
賦值:
? ? ? age = 20;
定義的同時賦值:
? ? ? var age=20裂垦;
可以一次定義多個變量:
? ? ? var name=“tianyufei", age=18虎韵,weight=108;
注意:變量在聲明后但沒有賦值的時候,系統(tǒng)都會給變量一個默認(rèn)值缸废,為undefined包蓝,類型為undefined驶社。
2.2變量的命名規(guī)范
JS的標(biāo)識符:
標(biāo)識符是指JS中定義的符號,例如:變量名测萎、函數(shù)名等亡电。
標(biāo)識符可以由任意的大小寫字母、數(shù)字硅瞧、下劃線(_)和美元符($)組成份乒,但是不能以數(shù)字開頭,不能是js中的保留字和關(guān)鍵字腕唧。
標(biāo)識符區(qū)分大小寫或辖,如:age和Age是不同的變量。但強(qiáng)烈不建議枣接,用同一個單詞的大小寫區(qū)分兩個變量
什么是JS的關(guān)鍵字和保留字颂暇?
關(guān)鍵字指JS語法中已經(jīng)使用過了的單詞,它們有自己本身的特殊含義但惶。
保留字指的是JS保留下來不允許用戶使用的單詞耳鸯,這些單詞盡管JS目前沒有使用,但是有可能會在之后的版本升級中用上膀曾,所以提前保留下來县爬,而我們的代碼也可能會運(yùn)行很多年,如果使用了這些保留字添谊,就有可能在某一次JS語法更新的時候出現(xiàn)bug财喳。
三、JS中的數(shù)據(jù)類型
String:字符串斩狱;
Number:數(shù)字(整數(shù)耳高,浮點(diǎn)數(shù)float)
Array:數(shù)組
Object:對象
布爾類型:Boolean? a==b
特殊類型 Null、Undefined喊废、NaN(NaN其實(shí)是屬于Number類型的一個特殊值)
? ? ? 如果alert(abc)一個不存在的變量,會直接報錯栗弟,而不是undefined污筷,可見undefined和真正的未定義還是有些區(qū)別的。因?yàn)樗且环N特殊類型乍赫。
null也是一種值瓣蛀,但邏輯含義是沒有值,它是對象Object類型
獲取變量類型的方法:
typeof 變量名;? 返回的是一個對應(yīng)數(shù)據(jù)類型的字符串("number","string")
例如:?
var a= 100;
console.log(typeof a);
JS的number類型的特殊值 NaN(非數(shù)字) Infinity (無限大/無窮大)
四雷厂、JS的算數(shù)運(yùn)算符
算術(shù)運(yùn)算符 (+,-,/,*,%);
整數(shù)的加惋增,減,乘改鲫,除诈皿,和取余就不說了林束,這個小學(xué)的數(shù)學(xué)老師會教。
還有一個優(yōu)先級的問題稽亏,小學(xué)老師應(yīng)該也教了壶冒,先乘除取余,后加減截歉。
注意:%取余后的余數(shù)一定小于除數(shù)胖腾。
? ? //小數(shù)計算 會失精度
? ? 0.1 + 0.2? ?// 0.30000000000000004? ?小數(shù)計算 會失精度
? ? 0.1 + 0.7? ?// 0.7999999999999999
// 解決辦法 toFixed(n)
var result = (0.1 + 0.7).toFixed(4);
console.log(result);
//toFixed(n) 數(shù)字的一個方法 保留n位小數(shù) 得到一個數(shù)字的字符串
五、js算數(shù)運(yùn)算符之隱式類型轉(zhuǎn)換
在Js中瘪松,各個數(shù)據(jù)類型在遇到算數(shù)運(yùn)算符后咸作,都會進(jìn)行隱式的類型轉(zhuǎn)換,這種轉(zhuǎn)換我們是看不到的宵睦, 我們只能看到轉(zhuǎn)換后的結(jié)果记罚。
字符串 遇到 "+" 會 拼接 形成新的字符串(無論字符串在前還是在后)
????// var a = "100"; // string?
? ? // var b = 3;
? ? // var c = a + b;? // "1003"? => 拼接之后會得到字符串
? ? // var c = b + a;? // "3100"
? ? // console.log(c);
? ? // console.log("100" + true); // 100true
? ? // console.log("100" + undefined); // 100undefined
? ? // console.log("100" + null); //100null
? ? // console.log("100" + NaN); //100NaN
字符串 遇到 "-,*,/,%" 會 隱式的轉(zhuǎn)化為數(shù)字("100","123") 并進(jìn)行相應(yīng)的計算,如果不是“數(shù)字”字符串("a","abc","blog","123a")状飞,就會轉(zhuǎn)換為NaN
boolean 值 遇到 算術(shù)運(yùn)算符(+,-,*,/,%) 也會 隱式的轉(zhuǎn)化為 數(shù)字? true => 1 ; false =>0
null 遇到 算術(shù)運(yùn)算符(+,-,*,/,%)? 也會 隱式的轉(zhuǎn)化為? 0
undefined不會隱式的轉(zhuǎn)化為數(shù)字毫胜,會轉(zhuǎn)換為 NaN
? ? var a = "100";
? ? var b = 3;
? ? var c = a % b;
? ? // console.log(c);? ? //? 1
? ? console.log("100" * true); // 100*1? =>100
? ? console.log("100" * undefined); // NaN? ? undefined不會隱式的轉(zhuǎn)化為數(shù)字
? ? console.log("100" * null); // 100 * 0? => 0
? ? console.log("100" * NaN); //NaN
六、強(qiáng)制類型轉(zhuǎn)換
String()?強(qiáng)制把其他類型轉(zhuǎn)化為 string ( 函數(shù)執(zhí)行之后得到 一個對應(yīng)的字符串 )
Number()?強(qiáng)制把其他類型轉(zhuǎn)化為 number 類型
//所有的非數(shù)字轉(zhuǎn)化為數(shù)字 都是NaN(boolean,null,"", => 0);
Boolean() 強(qiáng)制把其他類型轉(zhuǎn)化為 boolean 類型
(0,NaN,"",undefined,null) 轉(zhuǎn)化為boolean值 為false诬辈,凡是有內(nèi)容的轉(zhuǎn)換為boolean都會是true
注意:空格字符串(" ")和空字符串("")不同酵使,空格字符串轉(zhuǎn)換為布爾類型為true;
????var a = 1; // true
? ? var a = 2;? // true
? ? var a = Infinity; // true
? ? // var a = 0;? //false
? ? // var a = NaN; //false
? ? var a = "100a"; //true
? ? var a = " ";? //true? 空格字符串
? ? var a = "";? //false? 空字符串
? ? var a = undefined; //false;
? ? var a = null; //false;
? ? var b = Boolean(a);
? ? console.log(b)
七焙糟、Math的相關(guān)方法?
Math.random() 隨機(jī)一個0-1的隨機(jī)數(shù) [0,1) 注意 取不到 1
var num = Math.random();
Math.ceil(); 向上取整 只要包含小數(shù)就向上進(jìn)1? ? ?(ceil單詞的意思 天花板)
var a = Math.ceil(num);
Math.floor() 向下取整 只要包含小數(shù)舍去 (floor單詞的意思 地板)
?var b = Math.floor(num);
Math.round() 四舍五入 >=0.5 進(jìn) 1 , <0.5 就舍去
var b = Math.round(num);
Math.min(num1,num2,num3,num4); 最小值
var min = Math.min(9, 5, 4, 3, 1, 12, 21);
Math.max(num1,num2,num3,num4); 最大值
var max = Math.max(9, 5, 4, 3, 1, 12, 21);
Math.abs(); 取絕對值
var abs = Math.abs(-10);
Math.pow(m,n) m^n m的n次冪(次方)
var num = Math.pow(2, 10);
Math.PI 3.141592653589793
console.log(Math.PI);
以上的代碼都不會顯示結(jié)果口渔,需要用console.log輸出結(jié)果。
八穿撮、parseInt()和parseFloat()
parseInt() 把其他類型轉(zhuǎn)化為整型(整數(shù)) 把數(shù)據(jù)中 第一個非數(shù)字 之前的數(shù)提取出來 轉(zhuǎn)化為 整數(shù)
parseFloat() 把其他類型轉(zhuǎn)化為浮點(diǎn)型(小數(shù)) 把數(shù)據(jù)中 第一個非數(shù)字 之前的數(shù)提取出來 轉(zhuǎn)化為 number (保留小數(shù))
"300px" * 1 => NaN
?"300px"? =>? 300
parseInt()?
????var a = "300px"; //300
? ? var a = "3a00px"; //3
? ? var a = "b3a00px";//NaN
? ? var a = "300.5px"; // 300
? ?? var b = parseInt(a);
????console.log(b);
parseFloat()
var a = "300.5px";? //300.5
var b = parseFloat(a);
console.log(b);
parseInt也可以用來取整缺脉,可以將一個number類型的數(shù)字進(jìn)行取整,舍棄到后面的小數(shù)位悦穿,用法和Math.floor()相同