cgb2106-day09-有解無憂

文章目錄

- 一,JS物件
- - --1,內置物件
  - --2,自定義物件
- 二,DOM
- - --1,概述
  - --2,測驗
- 三,JSON
- - --1,概述
  - --2,測驗
- 四,把HTML代碼和JS代碼分離
- - --1,創建js檔案
  - --2,修改html檔案,引入js檔案
- 五,Vue
- - --1,概述
  - --2,入門案例
  - --3,總結
  - --4,改造入門案例
  - --5，總結

一,JS物件

–1,內置物件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS 物件</title>
		<script>
			<!-- Window物件 -->
			//當整個網頁都加載完,才會被執行的功能
			window.onload = function(){
				console.log(typeof 100); 
			}
			//彈出框
			window.alert(100);
			//確認框
			window.confirm("你說對嗎?");
			//輸入框
			var a = window.prompt("請輸入數字");
			console.log(typeof a); //string
			//string型別的數字轉成number型別的數字
			var b = parseInt(a);
			console.log(typeof b); //number
			
			//window.document回傳document物件,代表整個網頁檔案.
			window.document.write('hello js');
			window.document.getElementById();
			window.document.getElementsByTagName();
			window.document.getElementsByClassName();
			window.document.getElementsByName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

–2,自定義物件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS 物件</title>
		<script>
			/* 2.自定義JS物件 方式2:*/
			var p = {
				//動態的系結屬性,逗號隔開多個屬性
				name : "jack" ,
				age : 10 ,
				//動態的系結函式
				eat : function(){
					// this用來呼叫這個物件的資源
					console.log(this.name);
				}
			}
			console.log(p);
			console.log(p.name);//呼叫屬性
			p.eat(); //呼叫函式
			/* 2.自定義JS物件 方式1:*/
			function Car(){}//宣告物件
			var c = new Car();//創建物件
			//動態的系結屬性
			c.color='red';
			c.price=9.9;
			console.log(c.color); //呼叫屬性
			console.log(c.price); 
			//動態的系結函式
			c.back=function(){
				console.log("back...."); 
			}
			c.back(); //呼叫函式
			console.log(c); 
			
		
			
		</script>
	</head>
	<body>
	</body>
</html>

二,DOM

–1,概述

本質就是把網頁檔案看做一個Document檔案物件. 提供了一套API, 可以操作網頁中的所有元素
Document檔案物件:
提供方法:
getElementById(id屬性的值)—只能獲取到一個
getElementsByName(name屬性的值)—獲取到多個,并存入陣列
getElementsByClassName(class屬性的值)—獲取到多個,并存入陣列
getElementsByTagName(標簽名的值)—獲取到多個,并存入陣列
write(想要瀏覽器展示的資料)
提供屬性:innerHTML–獲取內容

–2,測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 DOM決議網頁檔案</title>
		<script>
			function fun(){
				// 1. 通過id的值,獲取元素
				var x = document.getElementById("a");
				console.log(x);//列印了元素
				console.log(x.innerHTML); //獲取內容
				x.innerHTML = "我變了"; //設定內容
				// 2. 通過class的值,獲取元素
				var y = document.getElementsByClassName("b");
				console.log(y); //得到陣列
				console.log(y[1].innerHTML); //根據下標獲取元素里的內容
				y[2].innerHTML=' hello dom';//根據下標修改元素里的內容
				//TODO  3. 通過name的值,獲取元素
				//TODO  4. 通過標簽名,獲取元素
			}
		</script>
	</head>
	<body>
		<div onclick="fun()"> 我是div1 </div>
		<div> 我是div2 </div>
		<span id="a"> 我是span </span>
		<p class="b"> 我是p1 </p>
		<p class="b"> 我是p2 </p>
		<p class="b"> 我是p3 </p>
		<a name="c"> 我是a1 </p>
		<a name="c"> 我是a2 </p>
	</body>
</html>

三,JSON

–1,概述

本質就是一個字串,用來規定了服務器和瀏覽器之間資料互動的格式.
JSON是一個輕量級的資料交換格式.
格式: {“name”:“jack”,“age”:“18”}

–2,測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 json字串</title>
		<script>
			//3. 定義json陣列
			var c = '[{"name":"rose","age":"20"},{"name":"jack","age":"26"}]' ;
			//4. 把json字串和js物件互轉---JSON工具
			//4.1 json字串 轉成 js物件:::為了方便的呼叫屬性,函式
			var jsobj = JSON.parse(c);
			console.log(jsobj);
			console.log(jsobj[1].age);//獲取物件身上的屬性值
			console.log(jsobj[0].name);//獲取物件身上的屬性值
			//4.2 js物件 轉成 json字串:::為了對字串進行操作,給服務器發送資料
			var json2 = JSON.stringify(jsobj);
			console.log(json2);
			console.log(json2.concat(123));
			console.log(c);
			console.log(c.substr(5));//按照下標截取字串
			
			//2. 定義json物件
			var b = '{"name":"jack","age":"18"}' ;//是JSON字串,用來互動資料的格式
			var b2 = {name:"jack",age:18} ;//是JS物件,封裝了屬性函式
			console.log(b);
			console.log(b.length);//獲取長度
			console.log(b.concat(10000));//拼接字串
			//1. 定義json字串
			var a =  '"name":"張三"';
			console.log(a);
			console.log(a.length);//獲取長度
			console.log(a.concat(123));//拼接字串
			console.log(a.substr(3));//按照下標截取字串
		</script>
	</head>
	<body>
	</body>
</html>

四,把HTML代碼和JS代碼分離

在這里插入圖片描述

–1,創建js檔案

//3. 定義json陣列
var c = '[{"name":"rose","age":"20"},{"name":"jack","age":"26"}]' ;
//4. 把json字串和js物件互轉---JSON工具
//4.1 json字串 轉成 js物件:::為了方便的呼叫屬性,函式
var jsobj = JSON.parse(c);
console.log(jsobj);
console.log(jsobj[1].age);//獲取物件身上的屬性值
console.log(jsobj[0].name);//獲取物件身上的屬性值
//4.2 js物件 轉成 json字串:::為了對字串進行操作,給服務器發送資料
var json2 = JSON.stringify(jsobj);
console.log(json2);
console.log(json2.concat(123));
console.log(c);
console.log(c.substr(5));//按照下標截取字串

//2. 定義json物件
var b = '{"name":"jack","age":"18"}' ;//是JSON字串,用來互動資料的格式
var b2 = {name:"jack",age:18} ;//是JS物件,封裝了屬性函式
console.log(b);
console.log(b.length);//獲取長度
console.log(b.concat(10000));//拼接字串
//1. 定義json字串
var a =  '"name":"張三"';
console.log(a);
console.log(a.length);//獲取長度
console.log(a.concat(123));//拼接字串
console.log(a.substr(3));//按照下標截取字串

–2,修改html檔案,引入js檔案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 json字串</title>
		
		<!-- 引入外部的js檔案 -->
		<script src="1.js"></script>
		
	</head>
	<body>
	</body>
</html>

五,Vue

–1,概述

Vue是一個漸進式的前端框架. 漸進式是指按需配置

–2,入門案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 Vue的入門案例</title>
		<!-- 1, 匯入vue.js,用vue的功能 -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2,準備資料渲染區,{{msg}} 叫插值表達著,是vue的固定語法,獲取msg變數的值-->
		<div id="app"> {{msg}}  </div>
		<!-- 3,匯入vue.js,vue就提供了Vue的工具,想用就new -->
		<script>
			// 3.1, 準備資料(js物件)
			var a = { 
				msg :"hello vue~" 
			}
			//3.2, 把資料渲染到掛載點
			var com = {
				// el屬性是用來描述元素(掛載點),  data屬性是具體要展示的資料
				el : "#app" ,   //通過css提供的id選擇器,選中了id=app的元素
				data : a  //即將把a的資料渲染在掛載點
			}
			//3.3, 準備Vue物件
			new Vue(com);
		</script>
	</body>
</html>

–3,總結

在這里插入圖片描述

–4,改造入門案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 Vue的入門案例</title>
		<!-- 1, 匯入vue.js,用vue的功能 -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2,準備資料渲染區,{{msg}} 叫插值表達著,是vue的固定語法,獲取msg變數的值-->
		<div id="app"> {{msg}}  </div>
		
		<!-- 3,匯入vue.js,vue就提供了Vue的工具,想用就new -->
		<script>
			//準備Vue物件, 把資料渲染到掛載點
			new Vue({
				// el屬性是用來描述元素(掛載點), 通過css提供的id選擇器,選中了id=app的元素
				el : "#app" ,   
				// data屬性是具體要展示的資料,即將把資料渲染在掛載點
				data : { 
					msg :"hello vue~" 
				}  
			});
		</script>
	</body>
</html>

–5，總結

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292201.html

標籤：其他

上一篇：JavaScript之爆肝匯總【萬字長文?值得收藏】

下一篇：使用 HTML、CSS 和 JavaScript 制作的隨機密碼生成器