cgb2108-day11-有解無憂

文章目錄

- 一,JS練習
- - --1,測驗
- 二,DOM
- - --1,概述
  - --2,測驗
- 三,JSON
- - --1,概述
  - --2,測驗
  - - 創建js檔案,存放js代碼
    - 創建html網頁檔案,引入js代碼
- 四,Vue
- - --1,概述
  - --2,入門案例
  - --3,總結
  - 4,改造入門案例
- 五,Vue的運算子
- - --1,測驗

一,JS練習

–1,測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//創建JS物件:	
			let an2 = {
				name : "大黃", //添加屬性
				eat : function(x){ //添加函式
					console.log('正在吃'+x);
				}
			}
			console.log(an2.name); //呼叫屬性
			an2.eat('rou');//呼叫函式
			
			
			function Animal(){}
			let an = new Animal();
			an.name="大黃"; //添加屬性
			an.eat=function(x){ //添加函式
				console.log('正在吃'+x);
			}
			console.log(an.name);//呼叫屬性
			an.eat('s');//呼叫函式
			
			//練習JS函式:模擬concat()拼接字串 
				// function concat(a){
				var concat = function(a){
					let str = 'hello';
					return str+a;//回傳結果給呼叫者
				}
				//呼叫函式
				var res = concat('jack');
				console.log(res);
		</script>
	</head>
	<body>
	</body>
</html>

二,DOM

–1,概述

全稱是檔案物件模型,是JS提供的一種用來快速決議 HTML網頁的技術.
利用Document物件提供的API操作元素
常用功能:

getElementById(id屬性的值)--通過id屬性的值獲取元素(只能獲取到一個)
getElementsByName(name屬性的值)--通過name屬性的值獲取元素(獲取到多個,存入陣列)
getElementsByClassName(class屬性的值)--通過class屬性的值獲取元素(獲取到多個,存入陣列)
getElementsByTagName(標簽名的值)--通過標簽名獲取元素(獲取到多個,存入陣列)
write(資料)--向網頁輸出指定資料
innerHTML--獲取元素的內容
innerText--獲取元素的內容

–2,測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 dom技術</title>
		<script>
			// 1,創建函式
			function fun(){
				//先獲取Document物件,再呼叫物件的API
				// 練習1: 選中id="d",獲取內容
				var a = window.document.getElementById('d');
				console.log(a); //獲取到的元素
				console.log(a.innerHTML); //獲取了內容
				console.log(document.getElementById('d').innerHTML);//獲取了內容
				// 練習2: 選中我是p2元素,并獲取內容
				var x = document.getElementsByName("b");
				console.log(x);
				console.log( x[2] );//獲取下標為2的元素
				console.log( x[2].innerHTML );//獲取下標為2的元素 的內容
				// 練習3: 選中我是p2元素,并修改內容
				//document.getElementsByName("b")[2].innerHTML='<h1>我變了...</h1>';
				document.getElementsByName("b")[2].innerText='<h1>我變了...</h1>';
				//總結:innerText無法決議HTML標簽.innerHTML是可以決議HTML標簽的
				// 練習4: 選中我是div3元素,并修改內容
				document.getElementsByClassName("a")[1].innerHTML='我也變了...';
				// 練習5: 選中我是div3元素,并修改樣式
				document.getElementsByTagName("div")[2].style.color="red";
			}
		</script>
	</head>
	<body>
		<div id="d" onclick="fun()">我是div1</div>
		<div class="a">我是div2</div>
		<div class="a">我是div3</div>
		<div name="b">我是div4</div>
		<p name="b">我是p1</p>
		<p name="b">我是p2</p>
		<p name="b">我是p3</p>
		<p class="a">我是p4</p>
	</body>
</html>

三,JSON

–1,概述

規定了瀏覽器和服務器互動資料的格式,本質上就是一個字串.
好處: 輕量級,簡潔明了
語法:

–2,測驗

在這里插入圖片描述

創建js檔案,存放js代碼

//1,定義json字串--發送給服務器
var a = '"name":"tony"' ;//json串
var b = '{"name":"jack","age":"20"}' ;//json物件
var c = '[{"name":"rose","age":"20"},{"name":"jerry","age":"10"}]' ;//json陣列
console.log(a.length);//求長度
console.log(b.concat('123'));//拼接字串
//練習1:獲取c里的資料 rose 10
var jsobj = JSON.parse(c); //把JSON串變成JS物件
console.log(jsobj);
console.log(jsobj[0]);
console.log(jsobj[0].name);//rose
console.log(jsobj[1].age);//10
//---把兩種資料互轉,利用JSON工具類---
//2,JSON的parse():json字串->js物件,好處是:方便的決議物件的屬性
var obj = JSON.parse(b);
console.log(obj);
console.log(obj.name);//物件的屬性
console.log(obj.age);//物件的屬性
//3,JSON的stringify():js物件->json字串,好處是:方便的對字串操作,還可以發送給服務器
var car = {name:"BMW",price:9.9} ;
var str = JSON.stringify(car);
console.log(str);
console.log(str.length);//求字串的長度
//TODO json串和js物件的區別?語法不同+資料的決議方式不同
var d = { name:"tony" , age:20 }//js物件
console.log(d.name);//獲取了d物件的name屬性的值

創建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,概述

基于JavaScript的漸進式前端框架
基于JavaScript : 本質上就是封裝了js代碼, 提供vue.js檔案
漸進式 : vue框架的功能很豐富的, 自己選擇用哪些功能.
前端框架 : 只是提供了一套完善的功能,指定軟體的流程
特點:
輕量級 + MVVM思想 + 資料驅動/雙向系結 + 組件化

–2,入門案例

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 vue入門案例</title>
		<!--
	1.引入vue.js檔案,src指定js檔案的位置(先找到和自己同級的資源)
		-->
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<!-- 2.準備資料渲染區:是指在指定位置展示vue提供的資料
		 {{ }} 插值運算式,{{msg}}獲取vue提供的msg的值
		 -->
		<div id="app"> {{msg}} </div>
		
		<!-- 3.創建Vue物件,使用vue準備資料,讓第二步獲取資料 -->
		<script>
			var a = { //js物件
				msg:'hello vue~~~'
			}
			new Vue({
				el:"#app" , 
				data: a
			})
		</script>
	</body>
</html>

–3,總結

在這里插入圖片描述

4,改造入門案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 vue入門案例</title>
		<!--
	1.引入vue.js檔案,src指定js檔案的位置(先找到和自己同級的資源)
		-->
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<!-- 2.準備資料渲染區:是指在指定位置展示vue提供的資料
		 {{ }} 插值運算式,{{msg}}獲取vue提供的msg的值
		 -->
		<div id="app"> {{msg}} </div>
		{{msg}} 
		<!-- 3.創建Vue物件,使用vue準備資料,讓第二步獲取資料 -->
		<script>
			new Vue({
				//el屬性是:掛載點,即將把資料展示在指定位置(css選擇器)
				el:"#app" , //id選擇器,用#獲取id的值
				//data屬性是:用來準備資料
				data:{ //js物件
					msg:'hello vue~~~'
				}
			})
		</script>
	</body>
</html>

五,Vue的運算子

–1,測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 vue的運算子</title>
		<!-- 1.引入vue.js -->
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<!-- 2.準備資料渲染區 -->
		<div id="app">
			加法:{{2+3}}
			減法:{{2-3}}
			乘法:{{2*3}}
			除法:{{3/2}}
			
			三元運算子:{{age > 18 ? '成年人' : '未成年' }}
		</div>
		<!-- 3.創建Vue物件 -->
		<script>
			new Vue({
				el:"#app", //掛載點,指定資料要在哪兒展示
				data:{
					age:20
				}
			})
		</script>
	</body>
</html>

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

標籤：其他

上一篇：常用滑鼠、鍵盤事件及事件物件

下一篇：①萬字《詳解canvas api畫圖》小白前端入門教程（建議收藏）