Javascript 和 HTML、CSS一樣，是Web前端開發所必須的三個模塊。另外，JavaScript也是Vue、Ext、jQuery等框架的基礎語言，所以JavaScript的學習是至關重要的。其實，學了C++語言，學了Java，感覺JavaScript的基礎語法整理上比較類似於Java，所以那些輸入輸出選擇循環語句的基礎語法，就不記下來了，畢竟代碼天天在寫，也不會忘。

我跟之前總結HTML、CSS一樣，同樣是站在本科應用層的角度，重點是比較常用的語法搭配，其次是那些有花裏胡哨的功能語法，省略那些可以被新功能所替代的舊方法。

HTML部分：點擊這裏

CSS部分：點擊這裏

本文目錄：

第一部分：最常用的語法

常用調試方法、常用獲取HTML組件的八種方法、數據類型、按鈕方法綁定、數組/循環、數組的常用方法、字符串常用方法、配合HTML組件

第二部分：其他小功能

定時執行函數、動態更新時間組件、正則表達式、輸入欄提示文本、異常處理、滾動標題、JSON、模擬Java類、使用JS添加HTML組件、表格數據添加

第一部分：最常用的語法

常用調試方法

alert('hello zwz');//彈框
console.log('hello zwz!');//調試窗口
document.getElementById('c').innerHTML = 'hello zwz';//覆蓋輸出到HTML元素
//不覆蓋可以把= 改成 += 即可

常用獲取HTML組件的八種方法

<input id="did" class="dclass" name='dname' value="aaa"/>
//以上爲HTML
var did = document.getElementById('did');//根據ID查找 唯一
var dclass = document.getElementsByClassName('dclass')[0]; //根據class查找 不唯一
var ddiv = document.getElementsByTagName('input')[0]; //根據標籤名查找 不唯一
var dclass2 = document.getElementsByName('dname')[0]; //根據name查找 不唯一
var b = document.querySelector('#did').value; //id
var c = document.querySelector('.dclass').value;//class
var d = document.querySelector('input').value; // 標籤
var e = document.querySelectorAll('input')[0].value; //所有的標籤集合

數據類型

JavaScript是一種弱類型的語言，在C++中，一個int類型的變量，用%f格式輸出，就會出錯，反之亦然；這是因爲整數和浮點數之間有一條不可逾越的鴻溝（個人理解）。在JavaScript中就不一樣了，var就是一個百搭類型，那些整數、浮點數、字符串，甚至對象、數組，通通可以定義。當然可以使用typeof函數來獲取當前的數據類型，就像這樣：

var a = 1;
var b = 3.14; // num.toFixed(4);保留四位
var c = 'hello zwz!';
var d = ['zwz01','zwz02','zwz03'];
var e = {
	'name':'zwz',
	'age':18
};
var leixing = typeof(a);
var num = parseFloat(string);//String轉Num

如果只是var一個變量沒有初始化，類型就是undefined；如果爲空，就是Null；如果數字計算結果不爲數字，那麼就是NaN。

按鈕方法綁定

<input type="button" value="按鈕" onclick="run()"/>

function run(){
	//運行的代碼
}

數組/循環

//一維數組
var arr = ['a1','a2','a3','a4','a5','a6'];

//二維數組
var arr = [
	['zwz01','zwz02','zwz03'],
	['zwz11','zwz12']
];
alert(arr[0][1]);//調用

//for-in循環
var a = [3,4,5,6,7];
for(var i in a){
	document.getElementById('d').innerHTML += i+'<br>';
}

數組的常用方法

字符串常用方法

配合HTML組件

//<!-- 下拉菜單 -->
var se = document.getElementById('se').value;
//<!-- 單選/多選框 -->
var form = document.getElementById('fo').lag;//lag是name屬性
for(var i = 0 ; i < form.length; i ++){
	if(form[i].checked){
		console.log(form[i].id);break;//操作
    }
    form[i].checked = 1; // 全選
    if(form[i].checked) //反選1
        form[i].checked = 0;
    else //反選2
        form[i].checked = 1;
}

第二部分：其他小功能

定時執行函數

var temp;
function run(){
	console.log('zwz的1秒過去了<br>');
}
function start(){
	temp = window.setInterval('run()',1000);
}
function stop(){
	window.clearInterval(temp);
}

動態更新時間組件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body onload="retime()">
		<div id="d"></div>
	</body>
</html>

<script>
	function retime(){
		var time = new Date();
		var year = time.getFullYear();
		var mouth = time.getMonth() + 1;
		var date = time.getDate();
		var hour = time.getHours();
		var min = time.getMinutes();
		var sec = time.getSeconds();
		
		document.getElementById('d').innerHTML = year + '年' + mouth + '月' + date + '日 ' + hour + '：' + min + '：' + sec;
		var thread = setTimeout('retime()',1000);
	}
</script>

<style type="text/css">
	div{
		height: 200px;
		width: 1200px;
		background-color: gainsboro;
	}
</style>

正則表達式

function run(){
	var input = document.getElementById('in').value;
	// console.log(typeof(input));
	if(!( /^[a-zA-Z]\w{3,15}$/.test(input))){
		console.log('輸入有誤');
	}
}

輸入欄提示文本

<input type="text" id="in" value="請輸入" />

var input = document.getElementById('in');
input.onmouseup = function(){this.focus();}
input.onfocus = function(){this.select();};

異常處理

比如我在代碼中的alert函數上多寫一個t，如果沒有異常，就會直接在瀏覽器調試頁面報錯，如果有catch語句，則會在id爲'd'的HTML元素中打印錯誤信息。

function run(){
	try{
		alertt('hello zwz');
	}catch(e){
		document.getElementById('d').innerHTML = e.message;
	}
}

滾動標題

實現的原理是每隔一小段時間，把最後一個字母放在最前面，來模擬滾動的效果。

<script>
	var str = 'hello zwz!';
	function run(){
		document.title = str;
		str = str.substring(1,str.length) + str.substring(0,1);
	}
	setInterval('run()',200);
</script>

JSON

另外有一種JSON模式需要着重學一下，這個是前端提交到後端必須要轉換的格式。

如果在後端的Java類中定義如下：（用var模擬後端Java類）

var a = {
	'people':[
		{'name':'zwz01','age':'18'},
		{'name':'zwz02','age':'19'}
	]
};

那麼，JSON模式是這樣的：

var b = '{ "people" : [' +'{ "name":"zwz01" , "age":"18" },' +'{ "name":"zwz02" , "url":"19" }'+']}';
var result1 = typeof(b);//結果爲string類型

說白了，就是拿大括號 { } 括了一下。這個時候b的數據類型是string字符串類型。

然後我們使用JSON.parse函數轉化

var c = JSON.parse(b);
var result2 = typeof(c);//結果爲object類型
alert(c.people[0].name);//引用

這就說明c是對象類型，是將字符串轉化成了對象模型。也可以直接使用裏面的元素

至於對象型轉化爲字符串，以後有機會再去查一下。

模擬Java類

function People(name,age){
	this.name = name;
	this.age = age;
	this.say = function(){
		console.log(this.name + ' is ' +this.age + ' years old!');
	}
}
var p1 = new People('zwz01',18);
p1.say();

使用JS添加HTML組件

//假設<body>中有一個id爲'u'的ul
<script>
	var LiArray = document.getElementById('u').getElementsByTagName('li');
	var aNew = document.createElement('a');
	var aNewText = document.createTextNode('百度');
	var aNewHref = document.createAttribute('href');
	aNewHref.value = 'http://www.baidu.com';
	aNew.setAttributeNode(aNewHref);
	aNew.appendChild(aNewText);
	LiArray[0].appendChild(aNew);
	
	var Body = document.body;
	var HrNew = document.createElement('hr');
	var HrColor = document.createAttribute('color');
	HrColor.value = 'red';
	HrNew.setAttributeNode(HrColor);
	Body.appendChild(HrNew);
	
</script>

表格數據添加

<body>
	<table id="msg" align="center">
		<caption>XXXX表</caption>
		<tr>
			<td>學號</td><td>姓名</td><td>性別</td>
		</tr>
		<input type="button" onclick="addRow()" value="添加數據"/>
	</table>
</body>

<script>
	function addRow(){
		var form = document.getElementById('msg');
		var newRow = form.insertRow();//返回新插入的行 (deleteRow(index)刪除)
		newRow.insertCell(0).innerHTML = '0413170337';
		newRow.insertCell(1).innerHTML = 'zwz';
		newRow.insertCell(2).innerHTML = 'nan';
	}
</script>

最後編輯日期 2020 年 1 月 30 日

Javascript 常用語法 Web前端基礎

第一部分：最常用的語法

常用調試方法

常用獲取HTML組件的八種方法

數據類型

按鈕方法綁定

數組/循環

數組的常用方法

字符串常用方法

配合HTML組件

第二部分：其他小功能

定時執行函數

動態更新時間組件

正則表達式

輸入欄提示文本

異常處理

滾動標題

JSON

模擬Java類

使用JS添加HTML組件

表格數據添加

認知提升的方法

C#開源的兩款功能強大的錄屏神器

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

前端 Vue yarn.lock文件：詳解和使用指南

學了一年的Android，還不會調試？你白學了！

Android入門教程（二）第一個App HelloWorld

Android入門教程（零）付費專欄課程規劃

Android 彩色上下文菜單 Context

Android 對話框組件 AlertDialog 四種常用方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結