主頁 > 前端設計 > JavaScript基礎(1)

JavaScript基礎(1)

2021-11-02 10:19:32 前端設計

目錄

JavaScript簡介

輸出陳述句

JS撰寫位置

JS基本語法

字面量和變數

識別符號

資料型別

字串

Number

布林值

Null和Undefined

強制型別轉換

轉換為String

轉換為Number

轉換為Boolean

其他進制的數字

運算子

算數運算子

一元運算子

自增和自減

邏輯運算子

賦值運算子

關系運算子

相等運算子

條件運算子

運算子的優先級

Unicode編碼


JavaScript簡介

一個完整的JavaScript實作包含了三個部分:ECMAScript、DOM和BOM

JS的特點:

-解釋型語言

-類似于C和Java的語法結構

-動態語言

-基于原型的面向物件

輸出陳述句

<script>
    alert("xxx");
</script>

控制瀏覽器彈出一個警告框

<script>
    document.write("xxx");
</script>

讓計算機在body中輸出一個內容

<script>
    console.log("xxx");
</script>

向控制臺輸出一個內容

JS撰寫位置

1.可以將我們js代碼撰寫到標簽的onclick屬性中,當我們點擊按鈕時,js代碼才會執行

<button onclick="alert('xxx');">按鈕</button>

2.可以將將js代碼寫在超鏈接的href屬性中,當點擊超鏈接時,會執行js代碼

<a href="javascript:alert('xxx');">超鏈接</a>

雖然可以寫在標簽的屬性中,但是屬于結構和行為耦合,不方便維護,

3.可以將js代碼寫在script標簽

<script> </script>

4.可以將js代碼撰寫到外部js檔案中,然后通過script標簽引入

<script type="text/javascript" src="xxx.js"> </script>

寫到外部檔案中可以在不同的頁面中同時參考,也可以利用到瀏覽器的快取機制

script標簽一旦用于外部檔案了,就不能再撰寫代碼了,即使撰寫了瀏覽器也會忽略,如果需要可以再創建一個新的script標簽用于撰寫內部代碼,

JS基本語法

1.js中區分大小寫

2.js每一條陳述句用;結尾

3.js中會忽略多個空格和換行,所以可以利用空格和換行進行格式化

字面量和變數

字面量,都是一些不可改變的值,字面量都是可以直接使用,但我們一般不會直接使用字面量,

變數,可以用來保存字面量,而且變數的值是可以任意改變的,在js中使用var關鍵字來宣告一個變數,

識別符號

在js中所有可以由我們自主命名的都可以稱為識別符號,例如:變數名、函式名、屬性名,

命名一個識別符號需要遵守以下規則:

1.識別符號中可以含有字母、數字、_、$

2.識別符號不能以數字開頭

3.識別符號不能是JS中的關鍵字或保留字

資料型別

資料型別指的是字面量的型別,

在JS中一共有六種資料型別

String 字串

Number 數值

Boolean 布爾

Null 空

Undefined 未定義

Object 物件

其中String、Number、Boolean、Null、Undefined屬于基本資料型別,而Object屬于參考型別

字串

String字串,在js中字串需要用引號引起來,使用雙引號或單引號都可以,但是引號不能嵌套,

var str="xxx";

Number

在js中所有的數值都是Number型別,包括整數和浮點數,

如果使用Number表示的數字超過了最大值,則會回傳一個Infinity表示正無窮,

NaN是一個特殊的數字,表示Not a Number,

如果使用js進行浮點數計算,可能得到一個不精確的數字,

布林值

布林值分為turefalse

Null和Undefined

null專門用來表示一個空的物件,null的型別是object

當宣告一個變數,但是并不給它賦值時,它的值就是undefined,

強制型別轉換

指將一個資料型別強制轉換為其他的資料型別,

轉換為String

方式一:

-呼叫被轉換資料型別的toString()方法

-該方法不會影響到原變數,它只會將轉換的結果回傳

-null和undefined這兩個值沒有toString()方法,如果呼叫會報錯

方式二:

-呼叫String()函式,并將轉換的資料作為引數傳遞個函式

-使用String()函式做強制型別轉換時,null和undefined可以轉換為"null"和"undefined"

轉換為Number

方式一:

-呼叫Number()函式

-如果是純數字的字串,則直接將其轉換為數字

-如果字串中有非數字內容,則轉換為NaN

-如果字串中是一個空串或者全是空格的字串,則轉換為0

-如果為布爾型別,則true=1,false=0

-如果Null型別,則為0

-如果Undefined型別,則為NaN

方式二:

-這種方式專門用來對付字串

-parsetInt() 把一個字串轉換為一個整數

-parseInt()可以將一個字串中的有效的整數內容取出來,然后轉換為Number

-parseFloat() 把一個字串轉換為一個浮點數

-parseFloat()作用和parseInt()類似,不同的是它可以獲得有效的小數

如果對非String使用parsetInt()或parseFloat(),它會先將其轉換為String,然后再操作,

轉換為Boolean

方式一:

-呼叫Boolean函式

-數字 ---> 布爾

-除了0和NaN,其余的都是true

-字串 ---> 布爾

-除了空串,其余都是true

-null和undefined都是false

-物件也會轉換為true

方式二:

-為任意的資料型別做兩次非運算

其他進制的數字

在js中,如果需要表示16進制數字,則要以0x開頭

如果需要8進制數字,則以0開頭

如果需要2進制數字,則以0b開頭,但有些瀏覽器不支持

像“070”這樣的字串,有些瀏覽器會當成8進制決議,有些會當成10進制決議,可以在parseInt()中傳遞一個第二個引數,來指定數字的進制,

運算子

運算子也叫運算子,通過運算子可以對一個或多個值進行運算,比如:typeof

算數運算子

+ - * / %

當對非Number型別的值進行計算時,會將這些值轉換為Number然后在運算(除了+)

任何值和NaN做運算都得NaN

+

可以將兩個字串進行連接,并回傳,

任何值和字串做加法運算,都會先轉換為字串,然后再和字串做拼串操作,我們可以利用這一點來將任意一個型別轉換為String,實際上還是呼叫了String()函式,

- * /

任何做- * /運算時都會自動轉換為Number,我們可以利用這一點做隱式的型別轉換,原理和Number()函式一樣,

一元運算子

一元運算子,只需要一個運算元

+ 正號

- 負號(對于非Number型別的值,會先將其轉換為Number,然后再運算)

可以對一個其他的資料型別使用+,來將其轉換為Number,原理和Number()一樣

自增和自減

自增分為兩種:前++和后++

前++:先加后使用 后++:先使用后加

自減同理

邏輯運算子

js中為我們提供三種邏輯運算子:! && ||

!非

-可以用來對一個值進行非運算

-如果對非布林值進行非運算,則會將其轉換為布林值,然后再取反(可以利用這點,來將一個其他的資料型別轉換為布林值)

&& 與

-可以對兩側的值進行與運算并回傳結果

|| 或

-可以對兩側的值進行或運算并回傳結果

&& ||非布林值的情況

-對于非布林值,會先將其轉換為布林值,然后再運算,并且回傳原值

賦值運算子

= 將右值賦值給左側的變數

+= 將右值加上左值并回傳給左值

-= *= /= %=

作用與“+=”同理

關系運算子

通過關系運算可以比較兩個值之間的大小關系,如果關系成立回傳true,否則為false

關系元素符有:> < >= <=

任何值與NaN做任何比較都是false

非數值情況:

-對于非數值進行比較,會將其轉換為數字然后再進行比較

-如果兩側都是字串,不會將其轉換為數字進行比較,而會比較字串中字符的Unicode

-比較字符編碼是一位一位進行比較,如果兩位一樣,則比較下一位

-如果比較的兩個字串的數字,可能會得到不可預期的結果(因此,在比較時一定要型)

相等運算子

== 判斷兩值是否相等

當使用==來比較兩值時,如果值的型別不同,則會自動進行型別轉換,將其轉換為相同的型別

undefined衍生自null,所以這兩個值做相等判斷時,會回傳true

NaN不和任何值相等,包括它本身

若要判斷一個值是否為NaN,可以通過isNaN()函式來判斷,

!= 判斷兩值是否不相等(規則和==同理)

=== 全等

-用來判斷兩個值是否全等,和相等類似,但它不會自動進行型別轉換

!== 不全等

-用來判斷兩個值是否不全等,和不等類似,同樣不會自動進行型別轉換

條件運算子

條件運算子也叫三元運算子

語法:

條件運算式?陳述句1:陳述句2;

如果條件運算式的求值結果是一個非布林值,會將其轉換為布林值再運算

運算子的優先級

Unicode編碼

在字串中使用轉義字符輸入Unicode編碼

js中使用Unicode編碼:\u四位編碼

網頁中使用Unicode編碼:&#編碼;(此處編碼需要的是10進制)

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/344269.html

標籤:其他

上一篇:vue element實作前端頁面的答題(上一題下一題,判斷對錯,點擊指示符跳轉題目,根據對錯更改指示符顏色等功能)

下一篇:javascript中的幾種回圈

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more