🍅 Java學習路線思維導圖： Java學習路線思維導圖
🍅 Java學習路線總結：搬磚工逆襲Java架構師
🍅 Java經典面試題大全：10萬字208道Java經典面試題總結(附答案)
🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪
🍅 掃描主頁左側二維碼，加入群聊，一起學習、一起進步
🍅 歡迎點贊 👍 收藏 ?留言 📝
目錄
一、百度百科
二、簡單表格
1、代碼實體
2、效果展示
三、表格中添加樣式
1、代碼實體
2、效果展示
四、長表格
1、代碼實體
2、效果展示
五、表格嵌套
1、代碼實體
2、效果展示
六、輸出日志
1、alert
2、document.write()
3、console.log()
七、JavaScript代碼撰寫位置
1、代碼實體
2、效果展示
八、基本語法
九、【粉絲福利】
【送書啦】
【賺取積分方式】哪吒社區內發帖、點贊、評論都可贏取積分！
以下圖書，四選一！
一、百度百科
JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的編程語言，雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式、宣告式、函式式編程范式，
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，但實際上它的語法風格與Self及Scheme較為接近，
JavaScript的標準是ECMAScript ，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES2015，
二、簡單表格
1、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
使用table標簽來創建一個表格
-->
<table border="1" width="20%" align="center">
<!--tr來表示表格中的一行-->
<tr>
<!--在tr中使用td表示一個單元格，有幾個td就有幾個單元格-->
<td>哪吒</td>
<td>哪吒社區</td>
<td>打卡</td>
<td>Java</td>
</tr>
<tr>
<td>JavaScript</td>
<td>vue</td>
<td>react</td>
<!--
使用rowspan來縱向的合并單元格
-->
<td rowspan="2">angular</td>
</tr>
<tr>
<td>比比東</td>
<td>云韻</td>
<td>納蘭嫣然</td>
</tr>
<tr>
<td>斗皇</td>
<td>斗圣</td>
<!--
使用colspan來橫向的合并單元格
-->
<td colspan="2">斗帝</td>
</tr>
</table>
</body>
</html>
2、效果展示
三、表格中添加樣式
1、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
/*設定一個寬度*/
width: 500px;
/*設定居中*/
margin: 50px auto;
/*設定一個邊框*/
/*border: 1px solid black;*/
/*border-spacing可以用來設定表格邊框之間的距離*/
border-spacing: 100px;
/*
* border-collapse可以用來設定表格的邊框的合并
* 如果將值設定collapse，則table和td的邊框將會自動合并為一個
* 當設定了邊框合并以后，border-spacing將自動失效
*/
border-collapse: collapse;
}
td,th{
/*設定邊框*/
border: 1px solid black;
}
tbody > tr{
background-color: #bfa;
}
</style>
</head>
<body>
<!-- table是一個塊元素 -->
<table>
<!--
我們在創建一個表格時，如果沒有使用thead tbody tfoot這些標簽時，
瀏覽器會自動在頁面中添加tbody，并且將所有的tr都放到tbody中
所以實際上tr并不是table子元素，而是tbody的子元素
-->
<tr>
<!--在html中還為我們提供了一個th標簽，專門用來表示表頭的單元格-->
<th>學號</th>
<th>姓名</th>
<th>年齡</th>
<th>社區</th>
</tr>
<tr>
<td>1</td>
<td>哪吒</td>
<td>18</td>
<td>CSDN</td>
</tr>
<tr>
<td>2</td>
<td>比比東</td>
<td>21</td>
<td>武魂殿</td>
</tr>
<tr>
<td>3</td>
<td>云韻</td>
<td>19</td>
<td>云嵐宗</td>
</tr>
</table>
</body>
</html>
2、效果展示
四、長表格
HTML中還為我們提供了三個標簽，用來將表格分成三個部分，
<thead>
<tbody>
<tfoot> 我們可以將對應部分的tr，放到指定的標簽，使用這三個標簽創建的表格，在列印時，會在每頁都列印表格的頭部和底部，無論撰寫到什么位置，thead中的內容，永遠都會顯示在表格的頭部，而tfoot中的內容，永遠都會顯示在表格的底部，
1、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<!--表格的頭部-->
<thead>
<tr>
<td>姓名</td>
<td>社區</td>
<td>社區人數</td>
<td>合計</td>
</tr>
</thead>
<!--表格的底部-->
<tfoot>
<tr>
<td></td>
<td></td>
<td>合計</td>
<td>55400</td>
</tr>
</tfoot>
<!--表格的主要內容-->
<tbody>
<tr>
<td>哪吒</td>
<td>哪吒社區</td>
<td>50000</td>
<td>50000</td>
</tr>
<tr>
<td>比比東</td>
<td>武魂殿</td>
<td>2000</td>
<td>2000</td>
</tr>
<tr>
<td>云韻</td>
<td>云嵐宗</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>雅妃</td>
<td>米特爾家族</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>美杜莎</td>
<td>蛇人部落</td>
<td>3000</td>
<td>3000</td>
</tr>
</tbody>
</table>
</body>
</html>
2、效果展示
五、表格嵌套
在一個表格中也可以嵌套其他的表格，在很久以前，我們經常使用表格在頁面中進行布局，此時就需要使用大量的表格的嵌套，表格布局，布局起來非常的簡單，但是維護起來非常的麻煩，所以現在已經很少有人用，表格的列數由td最多的那個tr來決定，
1、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="30%">
<tr>
<td height="100" colspan="2"></td>
</tr>
<tr>
<td height="100" width="20%"></td>
<td height="100">
<table border="1" width="100%" height="100%">
<tr>
<td>哪吒</td>
</tr>
<tr>
<td>跟著哪吒學Java</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120" colspan="2"></td>
</tr>
</table>
</body>
</html>
2、效果展示
六、輸出日志
1、alert
控制瀏覽器彈出一個警告框
alert("大家好，我是哪吒！");
2、document.write()
頁面中輸出一個內容
document.write()可以向body中輸出一個內容
document.write("請大家關注哪吒社區");
3、console.log()
向控制臺輸出一個內容
console.log()的作用是向控制臺輸出一個內容
console.log("請大家加入我的微信交流群，不定期還有抽獎送書活動
七、JavaScript代碼撰寫位置
可以將js代碼撰寫到外部js檔案中，然后通過script標簽引入，
寫到外部檔案中可以在不同的頁面中同時參考，也可以利用到瀏覽器的快取機制，
script標簽一旦用于引入外部檔案了，就不能在撰寫代碼了，即使撰寫了瀏覽器也會忽略， 如果需要則可以在創建一個新的script標簽用于撰寫內部代碼，
可以將js代碼撰寫到標簽的onclick屬性中，當我們點擊按鈕時，js代碼才會執行，雖然可以寫在標簽的屬性中，但是他們屬于結構與行為耦合，不方便維護，不推薦使用，
1、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
alert("我是內部的JS代碼");
</script>
<!--
可以將js代碼撰寫到script標簽
<script type="text/javascript">
alert("我是script標簽中的代碼！！");
</script>
-->
</head>
<body>
<!--
可以將js代碼撰寫到標簽的onclick屬性中
當我們點擊按鈕時，js代碼才會執行
雖然可以寫在標簽的屬性中，但是他們屬于結構與行為耦合，不方便維護，不推薦使用
-->
<button onclick="alert('大家好，我是哪吒');">哪吒</button>
<!--
可以將js代碼寫在超鏈接的href屬性中，這樣當點擊超鏈接時，會執行js代碼
-->
<a href="javascript:alert('哈哈，你真厲害');">博客專家</a>
<a href="javascript:;">CSDN</a>
</body>
</html>2、效果展示
八、基本語法
- 多行注釋
- 單行注釋
- JavaScript中嚴格區分大小寫
- JavaScript中每一條陳述句以分號(;)結尾
- 如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源，
- 而且有些時候，瀏覽器會加錯分號，所以在開發中分號必須寫
- JavaScript中會忽略多個空格和換行，所以我們可以利用空格和換行對代碼進行格式化
-
字面量，都是一些不可改變的值
-
變數 變數可以用來保存字面量，而且變數的值是可以任意改變的，變數更加方便我們使用，所以在開發中都是通過變數去保存一個字面量，而很少直接使用字面量，可以通過變數對字面量進行描述
-
識別符號 在JS中所有的可以由我們自主命名的都可以稱為是識別符號
例如：變數名、函式名、屬性名都屬于識別符號
命名一個識別符號時需要遵守如下的規則：
1.識別符號中可以含有字母、數字、_、$
2.識別符號不能以數字開頭
3.識別符號不能是ES中的關鍵字或保留字
4.識別符號一般都采用駝峰命名法
首字母小寫，每個單詞的開頭字母大寫，其余字母小寫helloWorld xxxYyyZzz，
JS底層保存識別符號時實際上是采用的Unicode編碼，所以理論上講，所有的utf-8中含有的內容都可以作為識別符號，
九、【粉絲福利】
送書啦，大家期待已久的Vue！
本次活動送書規則：
【送書啦】
1、社區積分榜前5名，隨機抽取一名幸運者
2、社區積分榜6-15名，隨機抽取一名幸運者
3、社區積分榜16-30名，隨機抽取一名幸運者
【賺取積分方式】哪吒社區內發帖、點贊、評論都可贏取積分！
🍅 社區入口：哪吒社區
以下圖書，四選一！
1、Vue.js全家桶零基礎入門到進階專案實戰
2、Java高并發編程指南
3、億級流量Java高并發與網路編程實戰
4、Web前端性能優化
添加微信，備注1024，贈送Java學習路線思維導圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/348416.html
標籤：其他