前端基礎：JavaScript（篇一）

目錄

JavaScript概述

JavaScript歷史：

須知：

基本語法

變量

代碼

運行

數據類型

1、數值型(number)：

代碼?

運行?

2、布爾型(boolean)：

?代碼?

運行

?3、字符串型：

代碼??

運行

4、?undefined類型

代碼??

運行

?5:、Object類型

代碼?

運行

算術運算符? ?+ - * / % ++ --

加法運算

代碼

運行

減法運算

代碼

運行

乘法運算

代碼

運行

賦值運算

-=

代碼

運行

=(賦值)

代碼

運行

比較運算符

==(比較值是否相等)

代碼

運行

===(比較值是否相等,還需要比較兩個類型是否一致)

代碼

運行

邏輯運算符

條件運算符

控制語句

選擇結構

循環結構

函數

定義函數

調用

代碼

運行?

代碼

運行

代碼

運行

全局函數

? 確認對話框

代碼

運行

? 輸入對話框

代碼

運行

? parseInt(arg)

代碼

運行

? parseFloat(arg)

代碼

運行

? typeof (arg)

代碼

運行

? eval(arg)

代碼

運行

JavaScript概述

JavaScript歷史：

JavaScript原名叫live Script,是由美國網景開發的一種用于對網頁操作的腳本語言。

網頁操作(圖片切換)

腳本語言（不需要編譯? sql,html,css,javaScript,由某種解釋器直接可以運行的）

live Script 也是面向對象的

后來sun公司與網景公司合作，將名字改為JavaScript

JavaScript與Java是兩種不同的語言

JavaScript是嵌入在網頁中，對網頁進行各種操作的，是一種腳本語言

Java是一種后端高級語言，是需要編譯的

須知：

html是網頁的基本內容（標簽，文本）

css是網頁外觀（樣式）

JavaScript/js是網頁的行為，為網頁添加各種動態操作效果。

ES TS 面向對象結構搭建

基本語法

avaScript腳本寫在一組<script>標簽中，此標簽可以放在head中或body中，一般習慣放在 head中，還可以將腳本寫在外部的.js文件中，在html頁面中導入外部的.js文件

對話框 alert(‘welcome!’); 提示對話框

console.log();

變量

js聲明變量 ?java語言強類型語言 python js是弱類型語言
變量沒有類型，直接使用var關鍵字聲明即可，值有類型，給變量賦了什么值，變量就是什么類型的。

代碼

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;a = "cba";a = true; alert(a);</script></head><body></body>
</html>

運行

數據類型

1、數值型(number)：

其中包括整型數和浮點型數。

代碼?
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> //數值型 包括整數和浮點數  var c = 10;alert(typeof(c));//typeof(c) 返回變量c的數據類型 c = 10.5;alert(typeof(c));	alert(c+)5;</script></head><body></body>
</html>
運行?

typeof(c) 返回變量c的數據類型

alert(c+)5;?

ERROR

2、布爾型(boolean)：

即邏輯值，true或flase。

?代碼?
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> var a = true;var b = "abc";//布爾型 true falsealert(a==b);if(1){alert(111);} </script></head><body></body>
</html>
運行

?3、字符串型：

由單個或多個文本字符組成。字符串是用單引號或雙引號來說明的。 （使用單引號來輸入包含引號的字符串。）

代碼??
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> //字符串型 "abc" 'a' var s1="abcd";var s2='abcde';alert(typeof(s1));alert(typeof(s2));</script></head><body></body>
</html>
運行

4、?undefined類型

聲明了一個變量，卻沒有為變量初始化賦值，值不明確?

代碼??
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> //undefined類型  var x;alert(x);alert(x==undefined);</script></head><body></body>
</html>
運行

?5:、Object類型

js也是面向對象的語言，前期我們主要使用內置的對象，我們不自己定義對象?

代碼?
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>  //object對象類型   var date = new Date();alert(date.getFullYear());alert(s1.charAt(2));</script></head><body></body>
</html>
運行

算術運算符? ?+ - * / % ++ --

加法運算

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(a+b);//加法運算alert(a+c);//連接 105alert(a+c*1);</script></head><body></body>
</html>
運行

減法運算

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(a-b);//減法運算alert(a-c);//減法運算 10-"5" 隱式將字符串"5"轉為數值類型alert(a-"a");//NoN not a number</script></head><body></body>
</html>
運行

乘法運算

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(a*b);//乘法運算alert(a*c);//乘法運算</script></head><body></body>
</html>
運行

賦值運算

-=

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";a-=c;alert(a);</script></head><body></body>
</html>
運行

=(賦值)

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>for (var i = 0; i < 10; i++) {console.log(i);}</script></head><body></body>
</html>
運行

比較運算符

==(比較值是否相等)

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(b==c);</script></head><body></body>
</html>
運行

===(比較值是否相等,還需要比較兩個類型是否一致)

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(b===c);</script></head><body></body>
</html>
運行

邏輯運算符

條件運算符

var result = (條件表達式)?結果1:結果2

當條件成立返回?后的內容，否則返回:后的內容

控制語句

選擇結構

1.單一選擇結構（if）

2.二路選擇結構（if/else）

3.多路選擇結構（switch）

循環結構

1.由計數器控制的循環（for）

2.在循環的開頭測試表達式（while）

3.在循環的末尾測試表達式（do/while）

4.break continue

函數

定義函數

基本語法：

function functionName([arguments]){

? ? ?javascript statements

? ? ?[return expression]

}

function: 表示函數定義的關鍵字;

functionName:表示函數名;

arguments:表示傳遞給函數的參數列表，各個參數之間用逗號隔開，可以為空;

statements: 表示實現函數功能的函數體;

return expression:表示函數將返回expression的值，同樣是可選的的語句。

調用

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){alert("你好")} </script></head><body><input type="button" value="測試" onclick="test()"/></body>
</html>
運行?

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(a,b){alert(a+":"+b);} function test(a,b){return a+b;}var c = test("1",true); alert(c);</script></head><body> </body>
</html>
運行

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(a,b){return a+b;}var c = test(1,"5");alert(c);</script></head><body></body>
</html>
運行

全局函數

? 確認對話框

確認-true 取消-false

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//確認對話框 確認-true 取消-falsevar res = confirm("您確定要退出嗎");alert(res);</script></head><body></body>
</html>
運行

? 輸入對話框
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//輸入對話框var name = prompt("請輸入姓名？");alert(name);</script></head><body></body>
</html>
運行

? parseInt(arg)

把括號內的內容轉換成整數之后的值。如果括號內是字符串， 則字符串開頭的數字部分被轉換成整數，如果以字母開頭，則返回 “NaN” 。

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//parseInt(n) var a = "5";//var a = "5.5";alert(5+parseInt(a));</script></head><body></body>
</html>
運行

整數

浮點數

? parseFloat(arg)

?將參數轉為浮點數

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//parseFloat(n)  var a = "5.5";alert(5+parseFloat(a)); </script></head><body></body>
</html>
運行

? typeof (arg)

返回arg值的數據類型。

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//typeof(arg);  var a = new Date();alert(typeof(a));</script></head><body></body>
</html>
運行

? eval(arg)

可運算某個字符串。

代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//eval(s) var a = "5.5";var s = "2+3+a*2";var res = eval(s);alert(res);  </script></head><body></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = "5.5";var s = "alert(a)";eval(s); </script></head><body></body>
</html>
運行

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/41276.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/41276.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/41276.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

TCP的pop網絡模式

TCP的pop網絡模式

TCP的pop網絡模式 1、tcp連接的狀態有以下11種 CLOSED&#xff1a;關閉狀態LISTEN&#xff1a;服務端狀態&#xff0c;等待客戶端發起連接請求SYN_SENT&#xff1a;客戶端已發送同步連接請求&#xff0c;等待服務端相應SYN_RECEIVED&#xff1a;服務器收到客戶端的SYN請請求&…
閱讀更多...
MySQL 基本語法講解及示例（下）

MySQL 基本語法講解及示例（下）

第六節&#xff1a;如何檢索資料 在本節中&#xff0c;我們將介紹如何使用SQL語句檢索數據庫中的資料&#xff0c;具體包括選擇特定列、排序、條件過濾以及組合排序等操作。我們以一個名為student的表格為例&#xff0c;演示不同的檢索方法。 初始表格 student student_idname…
閱讀更多...
修復harbor的/account/sign-in\?globalSearch=b不登錄可以查詢鏡像的問題

修復harbor的/account/sign-in\?globalSearch=b不登錄可以查詢鏡像的問題

Nginx的location指令不能直接匹配查詢參數&#xff0c;所以需要通過其他方式來處理。這里是一個使用if指令結合查詢參數來實現的方法。該方法會在請求路徑中帶有特定查詢參數時返回404。 使用if指令匹配查詢參數 打開Nginx配置文件&#xff1a; sudo vim /etc/nginx/sites-ava…
閱讀更多...
Python中frozenset，秒變不可變集合，再也不用擔心多線程了！

Python中frozenset，秒變不可變集合，再也不用擔心多線程了！

目錄 1、Frozenset基礎介紹 ?? 1.1 Frozenset定義與創建 1.2 不可變集合特性 1.3 與Set的區別對比 2、Frozenset操作實踐 ?? 2.1 初始化與添加元素嘗試 2.2 成員測試: in & not in 2.3 集合運算: 并集、交集、差集 2.4 使用場景示例: 字典鍵、函數參數默認值 …
閱讀更多...
登錄設計(實戰項目)-1個手機號多用戶身份登錄

登錄設計(實戰項目)-1個手機號多用戶身份登錄

一. 背景&#xff1a; 該需求是一個互聯網醫院的預約單場景&#xff0c;護士在小程序上申請患者查房預約單&#xff0c;醫生在小程序上對預約單進行接單&#xff0c;護士開始查房后填寫查房小結&#xff0c;客戶需要對用戶信息進行授權&#xff0c;醫生查房后進行簽字&#xff…
閱讀更多...
勁爆！華為享界兩款新車曝光，等等黨有福了

勁爆！華為享界兩款新車曝光，等等黨有福了

文 | AUTO芯球 作者 | 雷慢 勁爆啊&#xff0c;北汽的一份環境影響分析報告&#xff0c; 不僅曝光了享界S9的生產進展&#xff0c; 還泄露了自家的另兩款產品&#xff0c; 第一款是和享界S9同尺寸的旅行車&#xff0c; 我一看&#xff0c;這不是我最喜歡的“瓦罐”嗎&…
閱讀更多...
v-html 空格/換行不生效

v-html 空格/換行不生效

接口返回的內容如下&#xff1a;有空格有換行&#xff0c;但 使用v-html無效 需加css樣式 white-space: pre-wrap; <div class"pretty-html" v-html"Value"></div>.pretty-html {white-space: pre-wrap; /* 保留空格和換行&#xff0c;并允許…
閱讀更多...
掌握麥肯錫精英的6個技巧，你也能成為1%的精英！

掌握麥肯錫精英的6個技巧，你也能成為1%的精英！

不知道大家有沒有想過&#xff0c;我們和那些全球頂尖精英的差距可能只有1%&#xff0c;只是99%的人還不知道這件事。 今天給大家推薦一本好書&#xff0c;《你和麥肯錫精英的差別只有1%》。優思學院發現&#xff0c;在我們的六西格瑪、精益管理的學生中很多人對自己沒有自信。…
閱讀更多...
軟通動力子公司鴻湖萬聯最新成果SwanLink AI亮相世界人工智能大會

軟通動力子公司鴻湖萬聯最新成果SwanLink AI亮相世界人工智能大會

7月4日&#xff0c;2024世界人工智能大會暨人工智能全球治理高級別會議&#xff08;WAIC 2024&#xff09;在上海拉開帷幕&#xff0c;軟通動力董事長兼首席執行官劉天文受邀出席開幕式。其間&#xff0c;軟通動力攜子公司鴻湖萬聯深度參與到大會各項活動中&#xff0c;并全面展…
閱讀更多...
C語言_結構體初階（還未寫完）

C語言_結構體初階（還未寫完）

結構體的聲明 1. 什么是結構&#xff1f;結構是一些值的集合&#xff0c;這些值稱為成員變量。結構的每個成員可以是不同類型的變量 數組&#xff1a;一組相同類型元素的集合 結構體&#xff1a;一組不一定相同類型元素的集 2. 結構的聲明 struct tag //tag根據實際情況給名字…
閱讀更多...
Spring注解@Qualifier

Spring注解@Qualifier

Autowired 注解是 Spring 依賴注入。但是有些場景下僅僅靠這個注解不足以讓Spring知道到底要注入哪個 bean。 默認情況下&#xff0c;Autowired 按類型裝配 Spring Bean。 如果容器中有多個相同類型的 bean&#xff0c;則框架將拋出 NoUniqueBeanDefinitionException&#xff0…
閱讀更多...
數字化產科管理平臺全套源碼，java產科電子病歷系統源碼

數字化產科管理平臺全套源碼，java產科電子病歷系統源碼

數字化產科管理平臺全套成品源碼&#xff0c;產科電子病歷系統源碼&#xff0c;多家大型婦幼專科醫院應用案例。源碼完全授權交付。 數字化產科管理平臺&#xff08;智慧產科系統&#xff09;是為醫院產科量身定制的信息管理系統。它管理了孕婦從懷孕開始到生產結束42天以內的一…
閱讀更多...
數據庫MySQL學習筆記

數據庫MySQL學習筆記

數據庫MySQL學習筆記 主要記錄常見的MySQL語句學習過程&#xff0c;增刪改查。 -- 顯示所有數據庫 SHOW DATABASES;-- 創建新數據庫 CREATE DATABASE mydatabase;-- 使用數據庫 USE mydatabase;-- 顯示當前數據庫中的所有表 SHOW TABLES;-- 創建新表 CREATE TABLE users (id …
閱讀更多...
BERT--學習

BERT--學習

一、Transformer Transformer&#xff0c;是由編碼塊和解碼塊兩部分組成&#xff0c;其中編碼塊由多個編碼器組成&#xff0c;解碼塊同樣也是由多個解碼塊組成。 編碼器&#xff1a;自注意力 全連接 多頭自注意力&#xff1a;Q、K、V 公式&#xff1a; 解碼塊&#xff1…
閱讀更多...
【Hive實戰】 HiveMetaStore的指標分析

【Hive實戰】 HiveMetaStore的指標分析

HiveMetaStore的指標分析&#xff08;一&#xff09; 文章目錄 HiveMetaStore的指標分析&#xff08;一&#xff09;背景目標部署架構 hive-site.xml相關配置元數據服務的指標相關配置 源碼部分&#xff08;hive2.3系&#xff09;JvmPauseMonitor.javaHiveMetaStore的內部類HMS…
閱讀更多...
【anaconda】—“conda info“命令后conda配置和環境信息的理解

【anaconda】—“conda info“命令后conda配置和環境信息的理解

文章目錄 conda配置和環境信息的理解 conda配置和環境信息的理解 安裝anaconda成功后&#xff0c;打開cmd&#xff0c;輸入"conda info"命令&#xff0c;結果顯示如下&#xff1a; conda的配置和環境信息的輸出。以下是對每個字段的解釋&#xff1a; active environm…
閱讀更多...
H2 Database Console未授權訪問漏洞封堵

H2 Database Console未授權訪問漏洞封堵

背景 H2 Database Console未授權訪問&#xff0c;默認情況下自動創建不存在的數據庫&#xff0c;從而導致未授權訪問。各種未授權訪問的教程&#xff0c;但是它怎么封堵呢&#xff1f; -ifExists 很簡單&#xff0c;啟動參數添加 -ifExists &#xff0c;它的含義&#xff1a…
閱讀更多...
中電金信:加快企業 AI 平臺升級，構建金融智能業務新引擎

中電金信:加快企業 AI 平臺升級，構建金融智能業務新引擎

在當今數字化時代的浪潮下&#xff0c;人工智能&#xff08;AI&#xff09;技術的蓬勃發展正為各行業帶來前所未有的變革與創新契機。尤其是在金融領域&#xff0c;AI 模型的廣泛應用已然成為提升競爭力、優化業務流程以及實現智能化轉型的關鍵驅動力。然而&#xff0c;企業在積…
閱讀更多...
【C++ 】解決 C++ 語言報錯：Null Pointer Dereferenc

【C++ 】解決 C++ 語言報錯：Null Pointer Dereferenc

文章目錄 引言 在 C 編程中&#xff0c;空指針解引用&#xff08;Null Pointer Dereference&#xff09;是一種常見且危險的錯誤。當程序試圖通過空指針訪問內存時&#xff0c;會導致程序崩潰或產生不可預期的行為。本文將詳細探討空指針解引用的成因、檢測方法及其預防和解決…
閱讀更多...
微信新寵！淘寶扭蛋機小程序，讓購物更添樂趣

微信新寵！淘寶扭蛋機小程序，讓購物更添樂趣

在移動互聯網飛速發展的今天&#xff0c;微信小程序以其便捷性、即用即走的特點&#xff0c;迅速成為了用戶日常生活中不可或缺的一部分。而在眾多小程序中&#xff0c;一款名為“淘寶扭蛋機”的新晉“網紅”&#xff0c;正以其獨特的玩法和豐富的驚喜&#xff0c;為購物體驗增…
閱讀更多...
最新文章

Copyright @ 2022~2023