JavaScript 藝術之美(一)序言和 JavaScript 語法

来源:https://www.cnblogs.com/biandong/archive/2018/04/17/8869816.html
-Advertisement-
Play Games

零、前言 錯過了今年雙十一、雙十二噹噹圖書網的半價優惠,挺遺憾,但不買書心裡又癢癢的,後來在12月13號晚上以79折買了一些JavaScript的經典書籍:《JavaScript DOM編程藝術(第2版)》、《 JavaScript高級程式設計(第3版)》、《鋒利的jQuery(第2版)》和幾本其他 ...


零、前言

錯過了今年雙十一、雙十二噹噹圖書網的半價優惠,挺遺憾,但不買書心裡又癢癢的,後來在12月13號晚上以79折買了一些JavaScript的經典書籍:《JavaScript DOM編程藝術(第2版)》、《 JavaScript高級程式設計(第3版)》、《鋒利的jQuery(第2版)》和幾本其他編程的書,因為之前JavaScript掌握得不是很好,所以得靠著幾本書來提高我對JavaScript的掌握度。
要學會一門技術的途徑挺多的:學校授課、網路(線上)視頻課程、看相關書籍等等,我比較喜歡看書和逛相關博客,視頻課程次之(雖然我從未把一套網路課程學個徹底),我的總結是這樣的:看視頻效果是最好的,但是不做筆記和練習代碼基本上是學多少忘多少,再就是看視頻時會犯困和走神等等(好在可以回放),看書雖然有些地方會一時半會兒無法理解,不過多看幾遍就能看懂的,大不了上某度找找答案何嘗不是一件好事?看書好在可以在書上勾勾畫畫、做做筆記,忘了隨時想翻就翻,還可以當一本新華字典用,先用2.0倍加速把視頻過一遍,在用0.5倍速度把書里的相關章節嚼上幾遍,嚼的同時上機實戰,這門技術不掌握也難啊(理想中狀態)!
扯了這麼多,回到正題,最近我對前端的熱度直線增長,提高我的JavaScript水平是必須的,通過看書來提高是必須的,哪叫我買下了這些書呢,記筆記和練習也是必須的,因為買不起筆記本也懶得動筆,所以我把博客當成我的學習筆記本,把從書里(也包括相關博客、視頻)學到的JavaScript系列知識總結整理後寫進博客,同時也同步到github里,方便日後查閱和鞏固,也達到了共用的目的。然後我給我的這系列JavaScript博文暫時命名為“JavaScript藝術之美”,以章節的形式來總結知識,然後會不定期的更新系列博文以及糾正之前博文中的錯誤和新方法。當然這系列博文也會通過目錄方式用超鏈接聯繫起來方便跳轉,
每次更新的博文也會同步到Github上:https://github.com/bcdon/JavaScript_study

一、JavaScript 簡史

百度百科很全,移步:JavaScript 百度百科

二、在 HTML 中插入 JavaScript

// 法1.直接使用
<script>...</script>
// 法2.使用外部文件
<script src="myScript.js"></script>
// 法3.老傳統
<script type="text/javascript">...</script>
  • 現代瀏覽器以及 HTML5 中的預設腳本語言是 JavaScript,所以沒必要設置 type="text/javascript"。
  • script 標簽可位於 HTML 的 body 或 head 部分,最好的做法是放在html文檔最後,</body> 之前。

三、註釋

// 法1.單行註釋
/* 法2.多行註釋第一行
    第二行 */
<!-- 法3.html風格,單行註釋,一般不推薦

四、變數

  • 人們把那些會發生變化的東西稱為變數,把值存入變數的操作稱為賦值,使用 var 關鍵詞來聲明變數。
  • JavaScript允許直接對變數賦值而無需事先聲明,如果對某個變數賦值之前未聲明,賦值操作將自動聲明該變數。
// 變數聲明
    var name1;
    var name2;
// 用一條語句一次聲明多個變數
    var name1, name2;
// 先聲明後賦值
    var name1, name2;
    name1 = "value1";
    name2 = "value2";
// 一石二鳥,聲明同時賦值
    var name1 = "value1";
    var name2 = "value2";
// 也可以這樣,最佳做法
    var name1 = "value1", name2 = "value2";
    
  • 在JavaScript 里變數和其他語法元素的名字都是區分字母大小寫的
  • JavaScript 語法不允許變數名中包含空格或除美元符號"$"外的標點符號。
  • JavaScript 變數名允許包含字母、數字、下劃線和美元符號“$”,第一個字元不允許是數字,能以 $ 和 _ 符號開頭(不過我們不推薦這麼做)

駝峰式和下劃線規範:

聲明變數用下劃線鏈接多個單詞,函數名、方法名和對象屬性名命名首選駝峰格式

五、數據類型

在聲明變數的同時聲明變數的數據類型,這種做法稱為 類型聲明,必須明確類型聲明的語言稱為強類型語言,JavaScript不需要進行類型聲明,因此它是一種弱類型語言。

1.字元串

字元串由零個或多個字元構成,必須包在單引號或雙引號內:

var mood = "happy";
var mood = 'happy';

有的情況下需要在字元串里對字元進行轉義,在JavaScript里用反斜線對字元串進行轉義:

var mood = 'don\'t ask';

2.數值

JavaScript 只有一種數字類型。數字可以帶小數點(浮點數),也可以不帶(整數):

var x1 = 34.00;        //使用小數點來寫
var x2 = 34;              //不使用小數點來寫

在有關數值的前面加上一個減號“-”表示他是一個負數:

var x1 = -34.00;          //負浮點數
var x2 = -34;             //負整數

極大或極小的數字可以通過科學(指數)計數法來書寫:

var y = 123e5;             // 12300000
var z = 123e-5;           // 0.00123

3.布爾值

布爾(邏輯)只有兩個可選值:true 或 false。

var x = true;
var y = false;

六、數組

數組是指用一個變數表示一個值的集合,集合中的每個值都是這個數組的一個元素。
數組可以用關鍵字 Array 聲明,同時還可以指定數組初始元素個數(數組的長度):

var my_array = Array(4);      //指定長度,不必須
var my_array1 = Array();      //不指定長度

向數組中添加元素操作稱為填充:

var cars = new Array();
cars[0] = "Audi";    //數組的下標是從0開始計數的
cars[1] = "BMW";
cars[2] = "Volvo";

聲明數組的同時對他進行填充,用逗號把各個元素隔開:

var cars = new Array("Audi","BMW","Volvo");

甚至用不著明確表明是在創建數組,需用一對方括弧把各個元素的初始值括起來:

var cars = ["Audi","BMW","Volvo"];

數組元素不必非得是字元串:

var cars = ["Audi", 1998, false];   // 3種數據類型,依次為 字元串、數值、布爾值
// 還可以是變數
var name1 = "John";
cars[0] = name1;  // 把cars數組的第一個元素賦值為字元串"John"
// 數組元素的值還可以是另一個數組的元素
var name1 = ["Audi","BMW","Volvo"];
cars[1] = name1[2];      // 把name1數組的第3個元素值"Volvo"賦給cars的第二個元素

數組還可以包含其他數組,數組中的任何一個元素都可以把一個數組作為它的值:

var cars = ["Audi", 1998, false];
var name1 = [];
name1[0] = cars; // name1數組的第一個元素值是cars數組

通過name1數組獲得cars數組裡的某個元素:name1[0][0] 的值是字元串"Audi",name1[0][1] 的值是數值 1998,name1[0][2] 的值是布爾值 false。

關聯數組:

可以通過在填充數組時為每個新元素明確地給出下標來改變這種預設行為,在新元素給出下標時不必局限於使用整數數字,可以用字元串:

var cars = new Array();
cars["name"] = "Audi";
cars["year"] = 1998;
cars["living"] = false;

在JavaScript中,所有的變數實際上都是某種類型的對象。

七、對象

JavaScript 中的所有事物都是對象:字元串、數字、數組、日期,等等。對象是擁有屬性和方法的數據,對象也是使用一個名字表示一組值,每個值都是對象的一個屬性:

person=new Object();   // 創建對象使用Object關鍵字
person.firstname="Bill";  // 使用點號獲取屬性
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

花括弧語法創建對象:

var person={firstname="Bill",lastname="Gates",age=56};

屬性是與對象相關的值,方法是能夠在對象上執行的動作。
下麵用person對象填充cars數組,使用 cars[0].firstname得到值"Bill":

var cars = new Array();
var person={firstname="Bill",lastname="Gates",age=56};
cars[0] = person;

下麵將cars數組也聲明為對象:

var cars = {};
var person={firstname="Bill",lastname="Gates",age=56};
cars.firstCars = person;

使用 cars.firstCars.firstname得到值"Bill",依次類推。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • css之路 ...
  • Web界面設計是由Bill Scott編著、電子工業出版社出版的一部圖書,在Web已經進入嶄新的時代的今天,界面的設計顯得非常重要,本書就是基於獨一無二的Web環境下、在創建豐富體驗的過程中設計Web界面的最佳實踐、模式和原理。 本書既是一本Web界面設計指南,又是一本Web界面實例參考,適合Web ...
  • 不藉助插件怎樣在移動設備上實現動畫效果?怎樣快速搭建HTML電子郵箱?怎樣製作跨PC和移動設備顯示的應用界面?怎樣利用最新的JavaScript框架提高應用的響應速度?怎樣有效利用CoffeeScript和Sass開發和維護客戶端代碼?如何發揮Git管理版本庫的功效?本書包含42種Web開發技巧,從 ...
  • 通過學習本書,讀者很快就能明白為什麼PHP、Apache和MySQL會迅速成為開發動態網站最流行的方式,本書將為讀者理解這3個核心組件如何獨立工作和協同工作奠定良好的基礎,引導讀者充分利用它們提供的各種功能。 Web開發入門經典:使用PHP6、Apache和MySQL首先通過兩個項目介紹瞭如何利用這 ...
  • Web性能權威指南是谷歌公司高性能團隊核心成員的權威之作,堪稱實戰經驗與規範解讀完美結合的產物。《Web性能權威指南》目標是涵蓋Web開發者技術體系中應該掌握的所有網路及性能優化知識。全書以性能優化為主線,從TCP、UDP和TLS協議講起,解釋瞭如何針對這幾種協議和基礎設施來優化應用。然後深入探討了 ...
  • 本例子是直接寫在一個react組件中的 不過方法還是原生的方法 不多說 直接上代碼 比如我們有一個 url: 'www.zhangfeng.com?id=1&name=zhangfeng&age=18' handleUrl() { // 獲取一個一個url後面的參數 這裡用到了字元串的截取方法sub ...
  • 昨天一朋友和我聊到JS中的非同步和同步, 後來從非同步和同步的問題中得出了函數的另一面, 覺得挺不錯, 特此分享一下 ==== 追夢子: 聊天是同步還是非同步 小A: 非同步 小A: 和你聊還可以和別人聊 追夢子: 那得看怎麼聊, 小A: 那你也沒法說我錯 追夢子: 你要是等另一個人回答後再回,也就是你一句 ...
  • n CSS簡介 CSS:Cascading Style Sheets 層疊樣式表 CSS的主要目的:是給HTML標記添加各種各樣的表現(格式、樣式)。比如:文字樣式、背景、文本樣式、鏈接樣式。 提示:CSS是給HTML標記加的樣式:JS是給HTML標記加的行為。HTML標記是最先出現的。 HTML超 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...