文章目錄
- 重點 難點!! 一,JS的函式
- --1,定義函式呼叫函式
- --2,函式傳參
- --3,函式的回傳值
- --4,總結
- 二,JS物件
- --1,內置物件
- --2,自定義物件方式1
- --3,自定義物件方式2
- 三,Json
- --1,概述
- --2,語法
- 四,DOM
重點 難點!! 一,JS的函式
–1,定義函式呼叫函式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JS函式</title>
<script>
//練習1:封裝函式,求陣列里偶數的和
// function sum(){ //方式1
let sum = function(){ //方式2
//1,創建陣列
let arr = [1,2,3,4,5,6,7,8];
//2,遍歷陣列
let sum2=0;//定義變數,記錄和
//for(let i=0;i<arr.length;i++){
for(let i in arr){//i是下標,arr[i]是資料
//3,過濾偶數
if(arr[i] % 2 === 0){
//4,求和
sum2+=arr[i];
}
}
console.log(sum2);
}
//1,創建函式
//方式1:
function add(){
console.log("add..被呼叫成功!");
}
//方式2:
var a = function(){
console.log("a..被呼叫成功!");
}
//2,呼叫函式
add();
a();
</script>
</head>
<body>
<button onclick="sum()">點我,獲取資料</button>
</body>
</html>
–2,函式傳參
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JS函式</title>
<script>
//改造練習1:封裝函式,求陣列里偶數的和
// function sum(){ //方式1
let sum = function(arr){ //方式2
//2,遍歷陣列
let sum2=0;//定義變數,記錄和
//for(let i=0;i<arr.length;i++){
for(let i in arr){//i是下標,arr[i]是資料
//3,過濾偶數
if(arr[i] % 2 === 0){
//4,求和
sum2+=arr[i];
}
}
console.log(sum2);
}
//呼叫函式
let a =[4,5,6,7,8,89,10];
sum(a);
//1,創建函式
function print(x){
console.log(x);
}
function add(x,y){
console.log(x+y);
}
//2,呼叫函式
print('abc');
add(1,2);
</script>
</head>
<body>
</body>
</html>
–3,函式的回傳值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JS函式</title>
<script>
//練習2:模擬set設定值 / get獲取值
//創建函式
//set()把呼叫者傳來的引數設定值
let name = '';
function set(x){
name = x;//設定值
}
//get()把值回傳給呼叫者
function get(){
return name ;
}
//呼叫函式
set('jack'); //設定值
let name2 = get();//獲取值
console.log(name2);
//練習1:創建函式,求1~10的和并回傳
function save(){
let sum =0;
for(let i=1;i<=10;i++){
sum += i;
}
//誰要呼叫這個函式,誰即將保存著return的值
return sum;
}
let a2 = save();
console.log(a2);
//1,創建函式--通過return把結果回傳給呼叫者
let add = function(x,y,z){
//通過return把結果回傳給呼叫者
return x+y+z;
}
//2,呼叫函式
let a = add(1,2,3);
console.log(a);
</script>
</head>
<body>
</body>
</html>
–4,總結
二,JS物件
–1,內置物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js物件</title>
<script>
//1,JS的內置物件
function test1(){
//String物件的功能
let a = 'javascript';
console.log( a.length ); //獲取字串的長度
console.log( a.toUpperCase() ); //全轉大寫
let b = a.substring(1,5); //截取字串[1,5)
console.log( b );
console.log( a.concat('hello ~') ); //拼串
//Math物件
console.log( Math.PI );//π的值
console.log( Math.random() ); //亂數0~1
console.log( Math.random() * 10 );
console.log( Math.round(1.9) );//對小數的處理,round四舍五入
console.log( Math.round(1.1) );//對小數的處理,round四舍五入
//Array物件
let c = [3,2,4,5,2];
console.log( c );
console.log( c.toString() );//列印陣列里的資料
console.log( c.sort() ); //對陣列排序,默認從小到大
//window物件--可以省略
window.alert(100);//彈出框
window.prompt(); //輸入框
window.confirm() ;//確認框
//DOM
Document d = window.document;
//JSON
}
</script>
</head>
<body>
<!--2,呼叫函式 -->
<button onclick="test1()">單擊按鈕</button>
</body>
</html>
–2,自定義物件方式1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js物件!!!!</title>
<script>
//練習:創建Car物件
function Car(){}
let c = new Car();
//動態的添加屬性或者函式
c.color='red';
c.start=function(){
return '啟動成功!'
}
//模擬tostring(),回傳屬性的值
c.tostring=function(){
//this代表當前的物件
return "["+this.color+"]" ;
}
console.log(c);
//呼叫屬性或者函式
let str = c.tostring();
console.log(str);
let res = c.start();
console.log(res);
console.log( c.color );
//方式1!!:
//1,宣告物件
function Person(){}
//2,創建物件
var p = new Person();
//3,動態的給物件系結屬性
p.name="rose";
p.age=20;
console.log(p);//Person {name: 'rose', age: 20}
//4,動態的給物件系結函式
p.study = function(){
console.log(100);
}
console.log(p);//?
//5,呼叫物件的功能
console.log( p.name );
console.log( p.age );
p.study();
//方式2!!!!:
</script>
</head>
<body>
<button>點我,獲取資料</button>
</body>
</html>
–3,自定義物件方式2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js物件!!!!</title>
<script>
//練習:創建JS物件對并呼叫
let person= {
name : "蔡徐坤",
like : "唱跳rap",
play : function(a){
return a;
}
}
console.log(person.name+person.like);
let a = person.play('籃球');
console.log(a);
//1,創建JS物件
let student = {
//屬性名 : 屬性值
name : "jack" ,
age : 18 ,
//函式名 : 函式宣告
coding : function(){
console.log(100);
}
,
tostring:function(){
return this.name+","+this.age ;
}
}
//2,呼叫物件的功能
let res = student.tostring();
console.log(res);
student.coding();
console.log(student.name + student.age);
//{name: 'jack', age: 18, coding: ?}
console.log(student);
</script>
</head>
<body>
</body>
</html>
三,Json
–1,概述
是一種輕量級的 資料互動 格式.本質上就是一個字串(文本).
作用: 用來完成 前后端 資料 互動的 格式 , 存盤和管理 資料.
–2,語法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JSON串</title>
<!-- json用來把 前后的資料 進行互動 -->
<script>
//解決方案:如果能把一個json字串轉成js物件,就能通過物件呼叫屬性啦--JSON物件
var c = '[{"name":"jack","age":"20"},{"name":"rose","age":"22"}]'
var jsobj = JSON.parse(c);//把json串轉成js物件
console.log(jsobj);//得到一個陣列
console.log(jsobj[0].name);//呼叫物件的屬性,jack
console.log(jsobj[1].name);//呼叫物件的屬性,rose
//3,json陣列
console.log(c);
//需求:把json串里的 jack 和 rose獲取到
console.log(c.substring(10,14));//jack
console.log(c.substring(37,41));//rose
//2,json物件
var b = '{"name":"18","age":"20"}';
console.log(b);
console.log(b.length);//獲取長度
console.log(b.concat(100));//拼接
console.log(b.substring(1,5));//截取
//1,json字串
var a = '"name":"熊大"' ;
console.log(a);
console.log(a.length); //獲取長度
console.log( a.concat(123) ); //拼接
console.log( a.substring(2,6) ); //截取[2,6)
</script>
</head>
<body>
</body>
</html>
四,DOM
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/376445.html
標籤：其他