【前端】基礎總結

阿新 • • 發佈：2018-11-17

<!Doctype html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="body">
	<div class="header">
		<h1> Learning JavaScript </h1>
		<p> Time : 2018/11/15</p>
	</div> 

	<div class="container">
		<h1 id="heading"> Learning JS</h1>
		<!-- <button onclick="showDate()"> Show Date</button>
		<button onmouseover="showDate()" onmouseout="clearDate()"> Show Date </button>
		<h1 id="time"> </h1> -->

		<form method 
="post" aciton="something.php" name="myForm" onsubmit="return validateForm()">
			<div>
				<label>First Name</label>
				<input type="text" name="firstName" id="firstName"/>
			</div>
			<br/>
			<div>
				<label>Last Name</label>
				<input type 
="text" name="lastName" id="lastName" />
			</div>
			<br />

			<div>
				<label>Background</label>
				<select name="background" id="background" onchange="changeBackground(this)">
					<option value="red">Red</option>
					<option value="blue">Blue</option>
					<option value="green">Green</option>
				</select>
			</div>
			<br />
			<input type="submit" value="Submit" />
			
		</form>
	</div>

	<script>
		/* 迴圈 */
		var numbers = [1,2,3,4];
		numbers.reverse();
		numbers.forEach(function(number) {
			console.log(number);
		});

		/* 條件 */
		var a = 1;
		var b = 3;
		if(a == b) {
			console.log("This is true");
		} else {
			console.log("This is false");
		}

		var fruit = "apple";

		switch(fruit) {
			case "banana":
				alert("Hi Banana~");
				break;
			case "apple":
				alert("Hi Apple~");
				break;
			case "orange":
				alert("Hi Orange~");
				break;
			default:
				alert("Hi, there is no fruit listed");
				break;
		}

		/* 物件 */
		var person = {
			firstName: "BING",
			lastName: "W",
			age: 25,
			address: {
				city: "HZ",
				state: "Zhe Jiang"
			}
		};
		console.log(person.address.state);

		/* 物件構造器 */
		var apple = new Object(); // 構造一個空殼
		apple.color = "red";
		apple.shape = "round"; // 賦值即創造
		apple.describe = function() {
			return "An apple is the color " + this.color + " and is the shape " + this.shape;
		}

		// console.log(apple.describe());

		/* Constructor Pattern */
		function Fruit(name, color, shape) {
			this.name = name;
			this.color = color;
			this.shape = shape;
			// 定義函式
			this.describe = function() {
				return "A" + this.name + " is the color " + this.color + " and is the shape " + this.shape;
			}
		}

		// // var apple = new Fruit("apple", "red", "round");
		// var melon = new Fruit("melon", "green", "round");
		// console.log(apple.describe());

		/* 陣列 + 物件 */
		var users = [
			{ 
				name: "Ada",
				age: 30
			},
			{
				name: "Bob",
				age: 25
			},
			{
				name: "Cherry",
				age: 26
			}
		];
		console.log(users[0].name);

		/* 事件 */
		function changeText(id) {
			// alert("You clicked");
			id.innerHTML = "You Clicked";
			var heading = document.getElementById("heading");
			heading.innerHTML = "You Clicked";
		}
		function showDate() {
			var time = document.getElementById("time");
			time.innerHTML = new Date();
		}

		function clearDate() {
			var time = document.getElementById("time");
			time.innerHTML = '';
		}

		/* 表單 */
		function changeBackground(x) {
			console.log(x.value);
			// var body = document.getElementById("body");
			// body.style.background = x.value;
			var heading = document.getElementById("heading");
			heading.style.color = x.value; // JS使得介面可以動態變換
		}
		function validateForm() {
			var firstName = document.forms["myForm"]["firstName"].value;
			if(firstName == null || firstName == "") {
				alert("First Name is required");
				return false;
			}
			if(firstName.length < 3) {
				alert("First Name must be at least 3 characters");
				return false;
			}
		}

	</script>
</body>
</html>

END.

參考：
https://www.youtube.com/watch?v=vEROU2XtPR8&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX

【前端】基礎總結

<!Doctype html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <

【Python】基礎總結

# 輸入 `input("提示性資訊")` 如： `input("請輸入數字")` ## 評估函式因為 Python 沒有特別人為規定資料型別，資料型別是由計算機進行判定，所以我們 `input()` 輸入的資料均預設作為字串處理，而如果要輸入一些數字，著需要 `eval()` 評估函式對字串進行評估，

【前端】jQuery常用基礎知識點總結

目錄 jQuery概念：入口函式： jQuery選擇器：樣式操作：屬性操作：特殊動畫：事件：事件冒泡：事件委託： jQuery中的DOM操作： jQuery概念： JQuery: JavaScript Query; 這

【前端】【計算機網路原理】網路基礎總結

TCP/IP協議分層一、應用層協議：HTTP 提供了web文件的請求和傳送 SMTP提供了電子郵件報文的傳輸 FTP提供了兩個端系統之間的檔案傳輸 POP3郵局協議功能：應用層是網路應用程式以及它們的應用層協議存留的地方。資

【Unity】基礎知識結構總結

art blog 知識結構希望 article avi mod 更新人機交互前言本篇以知識結構圖的形式對Unity引擎的經常使用基礎知識內容進行了總結和梳理。假設你學了一點關於Unity引擎的知識，又認為太雜亂，那麽希望本篇會給你一些幫助。相應引擎版本號：U

【前端】react學習階段總結，學習react、react-router與redux的這些事兒

行程 clas 目前 webpack body src 控制 return 體驗前言　　借用阮一峰的一句話：真正學會 React 是一個漫長的過程。這句話在我接觸react深入以後，更有感觸了。整個react體系都是全新的，最初做簡單的應用，僅僅使用react-to

【前端】html基礎——轉載

特殊字符無序列表 disabled favicon 語法幫助 tex 標簽服務原文章地址：http://www.cnblogs.com/yuanchenqi/articles/6835654.html 一.html結構 <!DOCTYPE html

【前端】CSS基礎

isp eat jpg over css優先級地方 margin pin lar 1.CSS選擇器 1 1、id選擇器 2 3 2、class選擇器 4 5 3、標簽選擇器 6 7 4、層級選擇器（空格）

【前端】書籤應用開發總結

這是來自Learning JavaScript By Building A Boookmarker Application的筆記。首先做出來的效果是這樣的：輸入網站名和網站地址，點選提交，即可顯示在下方：點選訪問，跳轉到該網站；點選刪除則去掉該條目。資料儲

UE4 Behavior Tree 行為樹【1】基礎學習-行為書節點彙總和意義總結

是從左往右執行，要配合AIController、Nav Mesh Bounds Volume使用，和Sequence、Selector、Black Board、Task、Decorator、Service配合使用！ Sequence說明：從左往右執行，如果是Tures就迴圈下去一直執行，如

【前端】CSS基礎02-萬用字元,id,類選擇器

1:萬用字元選擇器和ID選擇器的使用: 2:類選擇器的使用,CSS類選擇器的選擇符號是"." 3:綜合demo 4:複合選擇器 4.1(既...又...)不常用 4.2 後

【前端】layui分頁總結

方式一（適合使用jstl標籤）1.首先寫一個form標籤，然後把需要的屬性隱藏<inputtype="hidden">,並獲取value值。<formmethod="get" action=""> <div style="floa

【C#基礎】基礎總結

剛開始接觸C#語言，和之前學過的VB語言相比，還是存在一些相同之處和不同之處的。剛剛看完了一部分視訊。視訊中都是對基礎知識的講解。老師很逗，講解的很細緻。 1、.

【資料庫】基礎知識總結

資料庫完整性為了維護資料庫完整性DBMS需要提供： 1. 提供定義完整性約束條件的機制 2. 提供完整性檢查方法：一般在INSERT UPDATE DELETE語句執行後開始檢查或者在事物提交之前進行檢查 3. 違約處理機制：比如拒絕，級聯或者其他操作

【Python】基礎知識

數據文件專用一切都元組內存引用傳遞 asc ilo 1. python腳本語言的第一行，目的就是指出，你想要你的這個文件中的代碼用什麽可執行程序去運行它 #!/usr/bin/python 是告訴操作系統執行這個腳本的時候，調用/usr/bin下

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

【前端】JavaScript

sea 模仿嘗試 sub word number 封裝得到整數一、JavaScript概述　　1.JavaScript的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名Script

【前端】Vue.js經典開源項目匯總

查詢可見專業 codec ssa mark 高級 coffee init Vue.js經典開源項目匯總原文鏈接：http://www.cnblogs.com/huyong/p/6517949.html 　　Vue是什麽？　　Vue.js（讀音 /vju?/, 類似

【前端】vue.js實現按鈕的動態綁定

case ctype html 們的 ast pre cal 防止得到 vue.js實現按鈕的動態綁定實現效果：實現代碼以及註釋： <!DOCTYPE html> <html> <head> <title>按鈕

【前端】前端筆試題 [1]

func 循環引用 object meid 內核 hresult 分別是存在 all 1. 請用div+css寫出文字水平垂直居中，圖片水平垂直居中的樣式及布局。2. 請用div+css寫出左側固定(width：200px)，右側自適應的頁面布

【前端】基礎總結

相關推薦