JavaScript教程 - 從入門到使用

HTML是房子，CSS是裝修，JavaScript是生活

前程往事

HTML教程 - 從入門到使用

CSS教程 - 從入門到使用（此處不完善）

jQuery教程 - 從入門到使用

環環相扣

基礎使用

事件分類

變量

表單

JavaScript 是一種輕量級的編程語言，可插入 HTML 頁面，然後由所有的瀏覽器執行 ~

放置區域

在實際開發中，我們的Js內部文件一般都存放的位置在 head標籤內，主要便於維護管理

head標籤內
body標籤內
body標籤後

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>開始的開始</title>
	<script>
		js可置於head標籤內
	</script>
</head>
<body>
	<script>
		js可置於body標籤內
	</script>
</body>
	<script>
		js可置於body標籤後
	</script>
</html>

引用方式

內嵌代碼

此處內嵌代碼表示js方法存在於當前html~

示例

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>內嵌代碼</title> 
  <script>
	function firstFunction(){
		// 找到元素
		x=document.getElementById("first");  
		// 改變內容
		x.innerHTML="Hello JavaScript!";  
	}
</script> 
 </head> 
 <body> 
  <button id="first" onclick="firstFunction()">調用內嵌JS方法</button>  
 </body>
</html>

外部文件

一般在正式的環境中我們都會採用外部文件的形式去存儲js文件，主要原因有以下三點

安全性 - 防止代碼直接暴露，讓惡意開發者利用已方未發現漏洞造成損失
維護性 - 針對開發者而言，項目越來越大，那麼可維護性就很重要，方便我們第一時間定位問題
緩存 - 多頁面引用同一js文件時，僅需加載一次即可；否則多頁面同時在各自頁面加載同一邏輯，從性能和維護方面並不可取

示例

外部js：first.js

	function firstFunction(id){
		document.getElementById(id).innerHTML="Hello JavaScript!"
	}

html調用

調用外部js方法一般需先在head標籤區間內進行js文件引入
引入方式：<script type=“text/javascript” src=“對應文件目錄/first.js”></script
PS：只有引用了js文件，方可調用對應js文件內的方法 ~

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>引用外部js文件</title> 
  <script type="text/javascript" src="對應文件目錄/first.js"></script> 
 </head> 
 <body> 
  <button id="first" onclick="firstFunction(first)">調用外部JS方法</button>  
 </body>
</html>

基礎使用

設置數據

默認設置方式 - script標籤內支持寫入html標籤、內容以及各類事件方法

這裏有一些特殊，需要記住要插入內容屬性，必須在完全載入頁面前調用write（）和writeln（）方法。如果任何一個方法是在頁面載入後調用的，它將抹去頁面的內容，顯示指定的內容 ~

<script >
	document.write("<h1>變更內容</h1>");
	document.write("變更內容");
</script>

通過id的函數方法設置 - 只針對控件本身

<script >
	document.getElementById("id").innerHTML="變更內容";
</script >

示例

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>開始的開始</title>
</head>
<body>	
	<p id="first">默認無修改狀態</p>
	<button type="button" onclick="firstWayFunction()">默認設置方式</button>
	<button type="button" onclick="secondWayFunction()">通過id設置</button>
</body>
<script>
	function firstWayFunction(){
		document.write(Date());
	}
</script>
<script>
	function secondWayFunction(){
		// 找到元素
		x=document.getElementById("first");  
		// 改變內容
		x.innerHTML="Hello JavaScript!";  
  //開發中常寫： document.getElementById("first").innerHTML="Hello JavaScript!"
	}
</script>
</html>

方法分類

自我封裝 - 類似下方 myFunction()
分無參方法、有參方法
系統默認封裝 - 類似下方 alert(‘系統封裝功能!’)

內嵌示例

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>開始的開始</title>
</head>
<body>	
	<p id="first">默認無修改狀態</p>
	<button type="button" onclick="myFunction1()">自己封裝無參方法</button>
	<button type="button" onclick="myFunction2('liu','18')">自己封裝有參方法</button>
	<button type="button" onclick="alert('系統封裝功能!')">觸動系統已封裝方法</button>
</body>
<script>
	function myFunction1(){
		document.getElementById("first").innerHTML="Hello JavaScript!";  
	}
	
	function myFunction2(name,age){
		document.getElementById("first").innerHTML="I,m " + name + ", I,am" + age;  
	}
</script>
</html>

外部js示例

此處js示例看起來不同於之前的方式，主要是完全給新手看的，引用下方的js文件後會在html加載之初，直接就在當前頁面寫入 ’外部文件‘ 四個字 ~

1.新建script目錄，然後創建out.js文件

out.js

	document.getElementById('demo').innerHTML = "外部文件";

2.html內引用外部的js文件，如文內 script/out.js 就是對應js文件地址

<!DOCTYPE html>
<script type="text/javascript" src="script/out.js"></script> 
<html>
  
  <head>
    <meta charset="utf-8">
    <title>外部文件</title>
  </head>
  
  <body>
    <p id="demo"></p>
  </body>

</html>

事件分類

事件處理可以說是js的主要功能，一般我們會在控件內設置id，之後通過document.getElementById(“id”) 這種反射機制去獲取到控件操作權，在此場景一般我們可以根據業務需求去實現自己的功能

注：關於事件的 jQuery使用方法，在此文中出現的場景更多一些 ~

常見事件

使用方式

一般我們在對應標籤內加入對應的事件標籤，然後寫入邏輯即可，如下方的點擊事件、觸摸事件（事件要靈活的在各標籤使用，不要被思想侷限，開闊點、開闊點 ~ ~）

  //這裏首先點擊button會重寫p標籤內容，然後當鼠標移動到p標籤內容後數據又會被重寫
  <button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button> 
  <p id="demo" onmouseover="getElementById('demo').innerHTML='開始的開始'"></p>

示例

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>Test</title> 
 </head> 
 <body> 
  <button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button> 
  <p id="demo" onmouseover="getElementById('demo').innerHTML='開始的開始'"></p>  
 </body>
</html>

變量

聲明位置

開發中正常的變量聲明，我們一般都會放在頭部！
注：變量可以在使用後聲明，也就是變量可以先使用再聲明

正常的

<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
document.getElementById("demo").innerHTML = x + " " + y;
</script>

亦可

<script>
var x = 5; // 初始化 x
y = 7; // 初始化 y
document.getElementById("demo").innerHTML = x + " " + y;
var y；
</script>

常規

<script>
var name="Jack";
document.write(name+ "<br>");
</script>

空值

preson：未設置屬性 undefined
people：設置屬性 null
undefined == null

<script>
var person;
var people=null
document.write(person + "<br>");
document.write(car + "<br>");
</script>

數組

方式一

<script>
var data = new Array();
data[0] = "F";
data[1] = "L";
data[2] = "Y";
for (i=0;i<data.length;i++){
	document.write(data[i] + "<br>");
}
</script>

方式二

<script>
var data = ["F","L","Y"];
for (i=0;i<data.length;i++){
	document.write(data[i] + "<br>");
}
</script>

對象

<script>
var person=
{
	firstname : "Jack",
	lastname  : "Tom",
	id        :  6666
};
//倆種設值方式均可
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

表單

作用：校驗form表單的數據問題，如是否有值、值的格式是否正確等
建議：提前瞭解Html中from表單的屬性含義
注意：在表單提交中要注意

核心方法

	// 獲取某表單內的某個屬性
	var x=document.forms["表單名"]["input輸入框名"].value;
	//關於校驗的行爲，在獲取對應表單數據之後if、else處理即可

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function checkoutForm() {
    var x = document.forms["myForm"]["age"].value;
    if (x == null || x == "") {
        alert("需要輸入年齡");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="一般爲url" onsubmit="return checkoutForm()" method="post">
年齡: <input type="text" name="age">
<input type="submit" value="提交">
</form>

</body>
</html>

JavaScript教程 - 從入門到使用

環環相扣

放置區域

引用方式

內嵌代碼

外部文件

基礎使用

設置數據

方法分類

事件分類

常見事件

使用方式

變量

聲明位置

常規

空值

數組

對象

表單

Java零散知識記錄

Android進階之路 - DDMS調試之旅

jQuery教程 - 從入門到使用

JavaScript教程 - 從入門到使用

HTML教程 - 從入門到使用

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

linux以太網驅動總結