HTML5新特性、JS【初識JS 、JS核心語法】--學習JavaEE的day47

day47

HTML5新特性

定義文檔類型

在文件的開頭總是會有一個標簽

語言	文檔類型聲明方式
html4	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`
html5	`<!DOCTYPE html>`

新增語義化標簽

理解：就是一個個div，用于分區

標簽	描述
`<header>`	頭部標簽
`<nav>`	導航標簽
`<article>`	內容標簽
`<section>`	塊級標簽
`<aside>`	側邊欄標簽
`<footer>`	尾部標簽

<body>		<style type="text/css">header,nav,article,aside,footer,section{background-color: #87A442;text-align: center;border: black 1px solid;border-radius:20px;margin: 10px;padding: 10px;}header{height: 120px;}nav{height: 50px;}article{width: 46%;height: 120px;float: left;}aside{width: 46%;height: 120px;float: right;yu}footer{clear: both;height: 120px;}section{height: 70px;}</style><header>頭部標簽 - header</header><nav>導航標簽 - nav</nav><div><article>內容標簽 - article<section>塊級標簽 - section</section></article><aside>側邊欄標簽 - aside</aside></div><footer>尾部標簽 - footer</footer>
</body>

運行：
語義化標簽

新增表單內容

對于輸入框是有規范限制

<form action="#" method="post">日期選擇器：<input type="date"/><br/>時間選擇器：<input type="time"/><br/>郵箱輸入框：<input type="email"/><br/>數字輸入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>URL輸入框： <input type="url" list="url_list"/><datalist id="url_list"><option label="W3School" value="http://www.w3school.com.cn" /><option label="谷歌" value="http://www.google.com" /><option label="百度一下" value="http://www.baidu.com" /></datalist><br/><input type="submit" value="提交"/>
</form>

運行：
新增表單標簽

JS

初識JS

什么是javascript

Javascript是基于對象和事件驅動的腳本語言，主要是嵌入到HTML中，應用在客戶端，動態操作網頁元素，也可以作用于服務端。

特點：

交互性（表單校驗，信息提示，動態數據圖表，ajax異步提交，解析服務端響應數據等等）

安全性（不可以直接訪問本地硬盤）

跨平臺性（由瀏覽器解析執行，和平臺無關）

注意：

現在主要用在前端，一個標簽為一個對象

事件：比如前面學習的鼠標單擊事件

了解Javascript的歷史

1995-2001

Netscape vs Microsoft

硅谷商戰李彥宏

IE瀏覽器 vs 非瀏覽器

非瀏覽器獲勝

Javascript vs Java

JavaScript只需瀏覽器解析就可以執行，而java需要先編譯成字節碼文件，然后通過JVM來執行。

JavaScript是一種弱類型語言，java是強類型語言。

ps：

“100”–Java:String【Java對數據類型有嚴格的劃分】

“100”–JavaScript:String、Number、Boolean【0為false，非0為true】

一個完整 JavaScript實現由以下3個部分組成

JS核心語法
DOM – Document Object Model,文檔對象模型
BOM – Browser Object Model,瀏覽器對象模型

javascript版的HelloWorld

HTML 中的腳本必須位于標簽之間。

腳本可被放置在 HTML 頁面的和部分中。

注意：console兼容瀏覽器多，Console兼容IE瀏覽器【一般不考慮】

對于JS語句后面分號【;】可寫可不寫

console.log自動換行

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">//彈框//alert("HelloWorld...1");//控制臺輸出console.log("HelloWorld...1");</script></head><body><script type="text/javascript">//彈框//alert("HelloWorld...2");//控制臺輸出console.log("HelloWorld...2");</script></body>
</html>

運行
JS版HelloWorld

JS核心技術

JS核心語法

變量

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">/** 知識點：變量* * 語法格式：* 		var 變量名 = 值;* * 注意：* 		1.var表示變量* 		2.變量的類型隨著值的類型發生改變*/var v = 100;console.log(v);v = "abc";console.log(v);</script></body>
</html>

運行;

JS的基本數據類型

基本數據類型圖

JavaScript 數字
JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：
實例
var x1=34.00; //使用小數點來寫
var x2=34; //不使用小數點來寫

JavaScript 字符串
字符串是存儲字符（比如 “Bill Gates”）的變量。
字符串可以是引號中的任意文本。您可以使用單引號或雙引號：
實例
var carname=“Bill Gates”;
var carname=‘Bill Gates’;
單引號和雙引號支持互相包含

JavaScript 布爾
布爾（邏輯）只能有兩個值：true 或 false。
var x=true
var y=false

undefined
訪問一個不存在的變量或使用已聲明但未賦值的變量，都會得到一個值undefined，undefined類型的值只有一個undefined

Null
被賦予null值的變量通常認為已經定義了，只是不代表任何東西。

Javascript的數據類型主要分為
基本數據類型
非基本數據類型（對象）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">/** 知識點：JS的基本數據類型的使用* 分類：* 		number - 數值型* 		string - 字符串類型* 		boolean - 布爾類型* 		undefined - 未定義類型* 		null - 空類型*///number - 數值型//注意：number類型不分整數和小數var num = 100;console.log(num);//100num = 123.123;console.log(num);//123.123//string - 字符串類型//注意：string類型的值可以用單引號也可以用雙引號括起來var str = 'abc';console.log(str);str = "abc";console.log(str);//boolean - 布爾類型var bool = true;console.log(bool);//truebool = false;console.log(bool);//false//undefined - 未定義類型var v;console.log(v);v = undefined;console.log(v);//null - 空類型var xx = null;console.log(xx);</script></body>
</html>

運行：
基本數據類型

特殊點

注意：判斷引用是否是某個數據類型

Java–instanceof

JavaScript–typeof

數字類型

各種數字的結果都是number【typeof 123】

Infinity：用來代表超過了javascript處理范圍的數值。1e308

兩個正無窮大相加會是一個什么結果？

正負相加—NaN

字符串

字符串轉換問題，字符串和數字類型進行數學運算的時候，除了加法運算以外，其他都會轉換為數字類型

布爾類型

做邏輯的判斷

在javascript中，除了以下值，其他都是true

空字符串“”

null

undefined

0

NaN

false

注意：NaN == NaN嗎？如何正確判斷是否為NaN

比較運算符：

== vs ===

通過typeof對比undefined和null的區別

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">/*** 知識點：JS基本數據類型的特殊點*///number類型的特殊點//注意：Infinity表示無窮大console.log(Infinity + (-Infinity));//NaN - Not a Number//string類型的特殊點//注意：string加號是字符串拼接符，其余是算數運算符var str1 = "10";var str2 = "3";console.log(str1 + str2);//103console.log(str1 - str2);//7console.log(str1 * str2);//30console.log(str1 / str2);//3.3333333335console.log(str1 % str2);//1//boolean類型的特殊點//注意：""、0、undefined、null表示falseif(""){console.log("true");}else{console.log("false");}if(0){console.log("true");}else{console.log("false");}if(undefined){console.log("true");}else{console.log("false");}if(null){console.log("true");}else{console.log("false");}//undefined vs nullvar v1 = undefined;var v2 = null;console.log(typeof v1);//undefinedconsole.log(typeof v2);//object//== vs ===//==判斷兩個值是否相等//===判斷兩個值+類型是否相等var v3 = 10;var v4 = "10";console.log(v3 == v4);//trueconsole.log(v3 === v4);//false</script></body>
</html>

運行：
基本數據類型特殊點

數組

創建一個數組

var arr = [1,2,3];

更新數組的元素

添加數組的元素

刪除數組的元素（delete arr[1],注意，此處只是將該元素留空，數組的長度并不會發生變化）

數組的數組

var a = [[1,2,3],[4,5,6]];

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">/*** 知識點：數組*/var arr = ["小龍","小楊","小馬"];//設置指定下標上的元素arr[0] = "小喻";//獲取指定下標上的元素console.log("獲取指定下標上的元素：" + arr[0]);//小喻//獲取元素個數console.log("獲取元素個數：" + arr.length);//添加元素arr[3] = "小陳";arr[4] = "小李";arr[10] = "小牛";//刪除元素delete arr[4];console.log("--------------------");//遍歷數組 - for循環for(var i = 0;i<arr.length;i++){console.log(arr[i]);}console.log("--------------------");//遍歷數組 -- for-in//注意：遍歷有效元素的下標（undefined的元素認為是無效元素）for(var index in arr){console.log(arr[index]);}</script></body>
</html>