當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

跟班学习JavaScript第一天——运算符、数据类型、ECMAScript

發(fā)布時(shí)間：2023/12/8 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了跟班学习JavaScript第一天——运算符、数据类型、ECMAScript 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.js概述

js屬于腳本語(yǔ)言，屬于弱類型的編譯性語(yǔ)言

JAVAScript=ECMAScript(es)+bom(browser object model)+dom(document object model)

3.ECMAScript基本核心部分

1)、js的編譯環(huán)境：

1.自己安裝js的解釋器 node.js

2.瀏覽器內(nèi)嵌的js(引擎)/解析器

? 注意：不同的瀏覽器的內(nèi)核是不同，所以不同的內(nèi)核的js解析器的解析效果是不一樣的。市面上常見的瀏覽器內(nèi)核有五大種：谷歌，歐朋，火狐，蘋果，IE

2)、js的基本使用

1.在cmd控制臺(tái)輸出js語(yǔ)句執(zhí)行

2.在瀏覽器輸出js語(yǔ)句使用

? 在頁(yè)面的Console直接輸出console.log(‘hi,你好啊’)

? 這種方式只能本機(jī)調(diào)試，無(wú)法給用戶使用

3.嵌套在html頁(yè)面中，通過(guò)瀏覽器解析頁(yè)面的同時(shí)來(lái)解析js語(yǔ)句（必要掌握）

3.1嵌套在html標(biāo)簽中使用

3.2將js代碼寫入到html頁(yè)面的任意位置都可以，但是要么寫在head里面，要么寫在head和body之間，盡量不要寫在body里面

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">console.log('點(diǎn)我')</script></head><body></body> </html>

3.3將js代碼寫入到一個(gè)外部文件，必須以**.js**為后綴的，然后再需要使用的頁(yè)面中引入

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="./js/t01.js" type="text/javascript" charset="utf-8"></script></head><body></body> </html>

js代碼

alert('你好啊')

創(chuàng)建一個(gè)base.js文件，要求通過(guò)該js文件在引入的html頁(yè)面中生成一個(gè)button按鈕，并且讓該按鈕可以點(diǎn)擊，點(diǎn)擊的時(shí)候會(huì)在控制臺(tái)輸出

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="./js/base.js" type="text/javascript" charset="utf-8"></script></head><body></body> </html> // 方式一 // document.write("<button onclick="+"console.log('你好')"+">點(diǎn)擊</button>"); // 方式二 // document.write("<button id='btn'>點(diǎn)擊</button>") // document.getElementById('btn').onclick=function() { // console.log('你好啊'); // } // 方式三 document.write("<button onclick='aa()'>點(diǎn)擊</button>") var aa = function() {console.log('你好') }

不能有三重引號(hào)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var c = function() {document.write("<p style='color: #008B8B;'>點(diǎn)擊我</p>")}</script></head><body><div onclick="c()">點(diǎn)我有驚喜</div></body> </html>

瀏覽器內(nèi)的引擎

內(nèi)容排版引擎：解析html和css

js引擎：解析js

3.3js的變量和常量

? 變量是在程序中的一段內(nèi)存地址，而且長(zhǎng)度是不固定的，存儲(chǔ)的數(shù)據(jù)可以隨時(shí)改變的

在js中變量的聲明如下：

? 1.聲明變量：**var 變量名; ** //var num;

? 2.給變量賦值：變量名稱=值; //num=10;

? 3.聲明變量同時(shí)賦值（常用）：var 變量名稱=值; //var num=10;

在js中變量名的申明事項(xiàng)：

1.變量名必須是字母，數(shù)字，下劃線以及$符號(hào)組成。

2.變量名稱不能以數(shù)字開頭

3.變量名稱區(qū)分大小寫

4.變量名稱建議使用駝峰命名法:DayDemo

? 小駝峰命名法：userName

5.變量名稱盡量做到見名知意

在js中變量的值有哪些？

js中五種基本數(shù)據(jù)類型

1.string 字符串型 var a=“aa”;

2.number 數(shù)字類型 var a=10;

3.boolean 布爾型 var a =true;

4.unll 空 var a= null;

5.undefined 未定義類型 var a;

練習(xí)：申明三個(gè)變量，用來(lái)描述某個(gè)人的姓名，性別、年齡，再申明一個(gè)變量輸出，在控制臺(tái)輸出

格式：姓名：xxx 性別：xxx 年齡：xx

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">/*** 注解：首先聲明三個(gè)變量：姓名，年齡，性別**/var uname ="張三";var uage = 18;var sex = "女";var s ="姓名："+uname+"性別："+sex+"年齡："+uage;uage = "wo";console.log(s);uname = true;console.log(typeof(uage) ); //boolean</script></head><body></body> </html>

獲取變量的類型：typeof 變量名或typeof(變量名)

數(shù)據(jù)類型之間的轉(zhuǎn)換

1.將其他類型轉(zhuǎn)換成String：變量名.toString()

null和undefined沒有tostring()方法。

// 數(shù)字類型轉(zhuǎn)字符型var age = 20;console.log(typeof age);var str = age.toString();console.log(typeof str);// boolean類型轉(zhuǎn)stringvar flag = true;console.log(typeof flag);var ftr = flag.toString();console.log(ftr);

2.將其他類型轉(zhuǎn)換成數(shù)字類型:Number(變量名)

NaN:非數(shù)字,通常會(huì)在類型轉(zhuǎn)換中出現(xiàn),是指將其他類型轉(zhuǎn)化成數(shù)字類型的過(guò)程中,轉(zhuǎn)化的結(jié)果不是一個(gè)數(shù)字,就會(huì)提示NaN

string轉(zhuǎn)Number

1.如果string的值是數(shù)字的話，會(huì)將左邊的0去掉直到出現(xiàn)非零數(shù)開始后面的數(shù)計(jì)算

2.如果string的值出現(xiàn)了字母或者是其他非數(shù)字的標(biāo)點(diǎn)符號(hào)，那么轉(zhuǎn)換的接貨為NaN

var s = '2020';console.log(typeof s);s=Number(s);console.log(typeof s);

boolean轉(zhuǎn)Number

如果是true，轉(zhuǎn)成Number則為1,；如果是false轉(zhuǎn)成Number則為0

3.其他類型轉(zhuǎn)為布爾類型：Boolean(變量名)

3.1null轉(zhuǎn)成boolean是false

3.2undefined轉(zhuǎn)成boolean也是false

3.3數(shù)字類型Number轉(zhuǎn)成Boolean的話，非零數(shù)返回true，零（0）返回false

3.4空字符串轉(zhuǎn)成Boolean，返回false，其他非空字符串返回true

數(shù)據(jù)類型轉(zhuǎn)換練習(xí)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 其他類型轉(zhuǎn)成字符串型var age = 20;age = age.toString(age);console.log(typeof age) //Stringvar flag = true;flag = flag.toString(flag); //stringconsole.log(typeof flag);// 其他類型轉(zhuǎn)成數(shù)字型Numbervar num = '20';console.log(typeof num); //stringnum = Number(num);console.log(typeof num); //Numberconsole.log(num); //20var fla = true;fla = Number(fla);console.log(fla); //1,true為1fla = false;fla= Number(fla);console.log(fla); //0,false為0var s; //undefineds = Number(s); console.log(s); //NaN,不是數(shù)字型var n = null;n = Number(n); console.log(n); //0// 其他類型轉(zhuǎn)成booleanvar str = '你好';str = Boolean(str);console.log(str); //truestr= '';str = Boolean(str);console.log(str); //falsestr = null;str = Boolean(str);console.log(str); //falsevar str;str = Boolean(str);console.log(str); //falsevar num= 0;num= Boolean(num);console.log(num) //falsenum= 10;num= Boolean(num);console.log(num) //truenum= -10;num= Boolean(num);console.log(num) //true</script></head><body></body> </html>

在js中常量的聲明：

const 常量名稱=常量值;

注意事項(xiàng)：常量名稱建議全部大寫，一樣建議見名知意

報(bào)錯(cuò)信息：Assignment to constant variable——常量已經(jīng)初始化，不可再賦值

運(yùn)算符

算術(shù)運(yùn)算符：

比較運(yùn)算符：

賦值運(yùn)算符：把等號(hào)右邊的值賦給左邊

x+=y：把兩者之和賦給前者

字符串運(yùn)算符：

練習(xí)：珠穆朗瑪峰高8848米，收到氣壓影響，普通飛機(jī)每小時(shí)飛行高度為200米，超音速飛機(jī)每小時(shí)飛行高度為350,米，戰(zhàn)斗機(jī)每小時(shí)飛行高度為500米，求普通飛機(jī)，超音速飛機(jī)，戰(zhàn)斗機(jī)分別花費(fèi)多少小時(shí)可以飛過(guò)珠穆朗瑪峰？

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="./js/test02.js" type="text/javascript" charset="utf-8"></script></head><body></body> </html> // 因?yàn)槭菤鈮涸颉Ｋ匀愶w機(jī)的速度下降了，說(shuō)明飛機(jī)的速度是一個(gè)變量用var // 普通飛機(jī) var o = 200; // 超音速飛機(jī) var s = 350; // 戰(zhàn)斗機(jī) var f = 500; // 珠穆朗瑪峰高度的高度不會(huì)變，所以是一個(gè)常量，使用const // 珠穆朗瑪峰高度 const H = 8848;// 普通飛機(jī)需要的時(shí)間 var ro =H/o; // 超音速飛機(jī)需要的時(shí)間 var ss = H/s; // 戰(zhàn)斗機(jī)需要的時(shí)間 var sf =H/f;console.log('普通飛機(jī)飛過(guò)珠穆朗瑪峰需要：'+ro+'\n超音速飛過(guò)珠穆朗瑪峰需要：'+ss+'\n戰(zhàn)斗機(jī)飛過(guò)珠穆朗瑪峰需要'+sf);

條件運(yùn)算符

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 條件運(yùn)算符// 表達(dá)式1 and 表達(dá)式2 ? "值1" : "值2"var runhight = 5000;var run = 500;var time = (runhight / run) > 10 && run < 100 ? "超時(shí)了" : "正常時(shí)間內(nèi)";console.log(time);</script></head><body></body> </html>

邏輯運(yùn)算符

給定 x=6 以及 y=3

運(yùn)算符描述例子

&&	and，和	(x < 10 && y > 1) 為 true
\|\|	or，或	(x>=5 \|\| y==5) 為 false
!	not，非	!(x==y) 為 true

&&和&的區(qū)別：

? &&如果判斷表達(dá)式1為false之后，直接返回false不會(huì)判斷表達(dá)式2；

? &如果表達(dá)式1不成立，還是會(huì)繼續(xù)去判斷表達(dá)式2

交換兩個(gè)變量的方式：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>位運(yùn)算</title><script type="text/javascript">// 要求不使用第三方變量，完成兩個(gè)變量之間的互換效果//任何數(shù)^(亦或)一個(gè)數(shù)兩次得到的是它本身// console.log(5^3^3); //5// var x = 10;// var y = 20;// x = x^y; //x=10^20// y=x^y; //b=10^20^20=10 // x=x^y; //x=10^20^10=20// console.log('x:'+x+'\ny:'+y);var num1 = 30;var num2 = 50;num1=num1^num2;num2=num1^num2;num1=num1^num2;console.log('num1:'+num1+'\nnum2:'+num2);</script></head><body></body> </html>

亦或：只有全1才是1，只要有0就是0；任何一個(gè)數(shù)亦或兩次得到的是它本身

js錯(cuò)誤調(diào)試：

在js中，如果出現(xiàn)錯(cuò)誤，js會(huì)終止該錯(cuò)誤的語(yǔ)句塊，會(huì)繼續(xù)執(zhí)行其他語(yǔ)句塊

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">console.log("這是第一語(yǔ)句塊的第一句");console.log("這是第一語(yǔ)句塊的第二句");console.log1("這是第一語(yǔ)句塊的第三句"); //出錯(cuò)，第三句和第四句不出現(xiàn)，但是第二個(gè)語(yǔ)句塊沒有受到影響console.log("這是第一語(yǔ)句塊的第四句");</script><script type="text/javascript">console.log("這是第二語(yǔ)句塊的第一句");console.log("這是第二語(yǔ)句塊的第二句");console.log("這是第二語(yǔ)句塊的第三句");console.log("這是第二語(yǔ)句塊的第四句");</script></head><body></body> </html>

可在控制臺(tái)的sources查看錯(cuò)誤

總結(jié)

以上是生活随笔為你收集整理的跟班学习JavaScript第一天——运算符、数据类型、ECMAScript的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： three.js 07-06 之 Spr
下一篇： gradle idea java ssm