當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/8 javascript 42 豆豆

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

1.js概述

js屬于腳本語言，屬于弱類型的編譯性語言

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

3.ECMAScript基本核心部分

1)、js的編譯環境：

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

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

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

2)、js的基本使用

1.在cmd控制臺輸出js語句執行

2.在瀏覽器輸出js語句使用

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

? 這種方式只能本機調試，無法給用戶使用

3.嵌套在html頁面中，通過瀏覽器解析頁面的同時來解析js語句（必要掌握）

3.1嵌套在html標簽中使用

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

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

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

<!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('你好啊')

創建一個base.js文件，要求通過該js文件在引入的html頁面中生成一個button按鈕，并且讓該按鈕可以點擊，點擊的時候會在控制臺輸出

<!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('你好')"+">點擊</button>"); // 方式二 // document.write("<button id='btn'>點擊</button>") // document.getElementById('btn').onclick=function() { // console.log('你好啊'); // } // 方式三 document.write("<button onclick='aa()'>點擊</button>") var aa = function() {console.log('你好') }

不能有三重引號

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

瀏覽器內的引擎

內容排版引擎：解析html和css

js引擎：解析js

3.3js的變量和常量

? 變量是在程序中的一段內存地址，而且長度是不固定的，存儲的數據可以隨時改變的

在js中變量的聲明如下：

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

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

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

在js中變量名的申明事項：

1.變量名必須是字母，數字，下劃線以及$符號組成。

2.變量名稱不能以數字開頭

3.變量名稱區分大小寫

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

? 小駝峰命名法：userName

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

在js中變量的值有哪些？

js中五種基本數據類型

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

2.number 數字類型 var a=10;

3.boolean 布爾型 var a =true;

4.unll 空 var a= null;

5.undefined 未定義類型 var a;

練習：申明三個變量，用來描述某個人的姓名，性別、年齡，再申明一個變量輸出，在控制臺輸出

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

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">/*** 注解：首先聲明三個變量：姓名，年齡，性別**/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(變量名)

數據類型之間的轉換

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

null和undefined沒有tostring()方法。

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

2.將其他類型轉換成數字類型:Number(變量名)

NaN:非數字,通常會在類型轉換中出現,是指將其他類型轉化成數字類型的過程中,轉化的結果不是一個數字,就會提示NaN

string轉Number

1.如果string的值是數字的話，會將左邊的0去掉直到出現非零數開始后面的數計算

2.如果string的值出現了字母或者是其他非數字的標點符號，那么轉換的接貨為NaN

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

boolean轉Number

如果是true，轉成Number則為1,；如果是false轉成Number則為0

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

3.1null轉成boolean是false

3.2undefined轉成boolean也是false

3.3數字類型Number轉成Boolean的話，非零數返回true，零（0）返回false

3.4空字符串轉成Boolean，返回false，其他非空字符串返回true

數據類型轉換練習

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 其他類型轉成字符串型var age = 20;age = age.toString(age);console.log(typeof age) //Stringvar flag = true;flag = flag.toString(flag); //stringconsole.log(typeof flag);// 其他類型轉成數字型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,不是數字型var n = null;n = Number(n); console.log(n); //0// 其他類型轉成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 常量名稱=常量值;

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

報錯信息：Assignment to constant variable——常量已經初始化，不可再賦值

運算符

算術運算符：

比較運算符：

賦值運算符：把等號右邊的值賦給左邊

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

字符串運算符：

練習：珠穆朗瑪峰高8848米，收到氣壓影響，普通飛機每小時飛行高度為200米，超音速飛機每小時飛行高度為350,米，戰斗機每小時飛行高度為500米，求普通飛機，超音速飛機，戰斗機分別花費多少小時可以飛過珠穆朗瑪峰？

<!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> // 因為是氣壓原因。所以三類飛機的速度下降了，說明飛機的速度是一個變量用var // 普通飛機 var o = 200; // 超音速飛機 var s = 350; // 戰斗機 var f = 500; // 珠穆朗瑪峰高度的高度不會變，所以是一個常量，使用const // 珠穆朗瑪峰高度 const H = 8848;// 普通飛機需要的時間 var ro =H/o; // 超音速飛機需要的時間 var ss = H/s; // 戰斗機需要的時間 var sf =H/f;console.log('普通飛機飛過珠穆朗瑪峰需要：'+ro+'\n超音速飛過珠穆朗瑪峰需要：'+ss+'\n戰斗機飛過珠穆朗瑪峰需要'+sf);

條件運算符

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

邏輯運算符

給定 x=6 以及 y=3

運算符描述例子

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

&&和&的區別：

? &&如果判斷表達式1為false之后，直接返回false不會判斷表達式2；

? &如果表達式1不成立，還是會繼續去判斷表達式2

交換兩個變量的方式：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>位運算</title><script type="text/javascript">// 要求不使用第三方變量，完成兩個變量之間的互換效果//任何數^(亦或)一個數兩次得到的是它本身// 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；任何一個數亦或兩次得到的是它本身

js錯誤調試：

在js中，如果出現錯誤，js會終止該錯誤的語句塊，會繼續執行其他語句塊

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

可在控制臺的sources查看錯誤

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： three.js 07-06 之 Spr
下一篇：跟班学习JavaScript第二天———