文章目錄
- 一,JS的陣列
- --1,概述
- --2,測驗
- 二,JS函式
- --1,概述
- --2,測驗
- 三,JS物件
- --1,概述
- --2,測驗內置物件
- --3,!!!自定義物件
- 四,DOM
- --1,概述
- --2,測驗
一,JS的陣列
–1,概述
1,特點: 長度可變,資料型別可以存的非常豐富.
2,創建:
var a = new Array(1,2,3,4.1);
var a = [1,2,3,4.1];
3,遍歷:
//i是下標,a[i]是資料
for(var i=0;i<a.length;i++){}
for(var i in a){}
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js陣列</title>
<script>
//JS陣列的特點:存的資料型別豐富,也有下標0,也有length,隨時改長度
//1.創建陣列的方式一:
var a = new Array();
console.log(a);
console.log(a.length);//獲取陣列的長度
var b = new Array(1,1.1,true,'hello');
console.log(b);
console.log(b.length);
console.log(b[2]);
console.log(b[3]);
console.log(b[4]);//undefined!!!
//2.創建陣列的方式二:
var c = [];
console.log(c.length);//0
c = [1,1.1,true,'abc'];
console.log(c.length);//4
c[99]=true;
console.log(c);
console.log(c.length);//100
//3.遍歷陣列
for(var i=0;i<c.length;i++){
//i是下標,c[i]是通過下標獲取c陣列里的資料
console.log(c[i]);
}
//java的foreach:for (Object o : y) {o是資料}
for (var o in c) {//forin,o是下標
console.log(c[o]);
}
</script>
</head>
<body>
</body>
</html>
二,JS函式
–1,概述
和java里的方法一樣,也是有()的標記,也可以有引數串列,也可以有回傳值
//定義函式
function a(引數名){ return b; }
var a = function(引數名){return b; }
//呼叫a函式,并傳入引數,并用c記錄回傳值
var c = a(傳參);
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js函式</title>
<script>
//練習: 設計函式,并提供回傳值和引數串列
//需求:列印指定陣列中的所有資料
function tostring(a){
var s = "";//定義變數,記錄資料拼接后的字串
for(var i in a){//i是下標,a[i]是資料
//把每個資料拼接成字串,空格隔開
s = s + a[i]+" ";
}
return s;//把結果回傳給呼叫者
}
//呼叫函式,并準備引數arr,并用result接受函式回傳來的結果
var arr = new Array("abc",1.1,"jack",666);
var result = tostring(arr);
console.log(result);
//練習: 設計函式,并提供回傳值(通過return回傳結果)
var x = function(){
return "hello js";//把結果回傳給呼叫者
}
//呼叫了x(),并用y保存了函式的回傳值
var y = x();
console.log(y);
//2,創建JS函式方式2:
//創建
var get = function(){
console.log('get()被呼叫!');
}
//呼叫
get();
//練習:統計1~10的偶數個數(使用陣列和函式)
var count = function(){
var a =[1,2,3,4,5,6,7,8,9,10];
var b = 0;//記錄個數
for(var i in a){//i是下標,a[i]表示陣列里的資料
if(a[i] % 2 == 0){//判斷資料a[i]是不是偶數
b++;//求個數
}
}
console.log(b);
}
count();
//1,創建JS函式方式1:
//創建
function save(){
console.log('save()被呼叫成功!');
}
//呼叫
save();
//練習:統計1~10的總和(使用陣列和函式)
function sum(){
var a =[1,2,3,4,5,6,7,8,9,10];//創建陣列
var b = 0;//定義變數,記錄和
for(var i in a){//forin遍歷陣列,i是下標
//把每個資料a[i]求和
b = b + a[i];
}
console.log(b);
}
</script>
<style>
/* 給按鈕添加背景色 */
button{
background-color: pink;
border-color: pink;
}
</style>
</head>
<body>
<!-- 單擊按鈕,觸發了js中定義好的sum() -->
<button onclick="sum();">點我,求和</button>
</body>
</html>
三,JS物件
–1,概述
分成兩類: 內置物件 , 自定義物件!!!
內置物件: String Array Math…JSON Document
–2,測驗內置物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js物件</title>
<script>
//2, Array 和 Math 的功能
function b(){
console.log( Math.PI );//獲取π的值
//獲取亂數,默認產生0~1
console.log( Math.random()*10 );
//四舍五入
var x = Math.round(2.8);
console.log(x);
//創建陣列
var a = new Array(8,3,1,5,2);
console.log(a);
//把陣列里的資料拼接成字串
var b = a.toString();
console.log(b);
//對陣列排序
var c = a.sort();
console.log(c);//[1, 2, 3, 5, 8]
}
//1.string的功能
function a(){
var a = "hello";
//求字串的長度
console.log(a.length);
//拼接字串
var b = a + "world";
console.log(b);
var c = a.concat("world");
console.log(c);
//全轉大寫
var d = a.toUpperCase();
console.log(d);
//截取字串,含頭不含尾[1,3)
var e = a.substring(1,3);
console.log(e);
}
</script>
</head>
<body>
<div onclick="b()">單擊,觸發b函式</div>
<div ondblclick="a()">雙擊,觸發a函式</div>
</body>
</html>
–3,!!!自定義物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 自定義js物件</title>
<script>
//!!!!! 創建JS物件的方式2:
//語法: var 物件名={k:"v",k:"v",k:function(){}}
//改造Person2物件
var person2={
name:"jack",
study:function(){
console.log('study()已被呼叫');
}
}
//呼叫物件的屬性--要么列印要么賦值
console.log(person2.name);
//呼叫物件的函式
person2.study();
//改造Car2物件
var car2 = {
pinpai:"黃大發" ,
price:9.9
}
console.log(car2);
//呼叫物件的屬性
console.log(car2.pinpai);
console.log(car2.price);
//創建JS物件的方式1:
//練習:創建Car物件,設計屬性和函式并完成呼叫!
function Car(){}
var c = new Car();
console.log(c);
//設定屬性并呼叫
c.pinpai="黃大發";
c.price=9.9;
console.log(c);
console.log(c.pinpai);
console.log(c.price);
//設定函式并呼叫
c.run=function(x){
return x+10;
}
var y = c.run(100);
console.log(y);
//1,宣告物件
function Person(){}
//2,創建物件
var p = new Person();
console.log(p);
//3,設定屬性
p.name="jack";
console.log(p);
//4,設定函式
p.study=function(){
console.log(100);
}
//5,呼叫屬性
console.log(p.name);
//6,呼叫函式
p.study();
</script>
</head>
<body>
</body>
</html>
四,DOM
–1,概述
是用來 利用JS代碼,操作HTML的每個元素的
利用document物件,
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 DOM</title>
<!-- DOM就是用一套API來快速的通過js代碼獲取元素 -->
<script>
function get(){
//1,獲取id="a"的元素的內容
//獲取document物件
//按照id獲取元素getElementById("id屬性的值")
var x = document.getElementById("a");
console.log(x);
}
</script>
</head>
<body>
<button onclick="get()">按鈕</button>
<div id="a">我是div1</div>
<div id="b">我是div2</div>
<span class="c">我是span1</span>
<span class="c">我是span2</span>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/356792.html
標籤：java
下一篇：凜冬已至，雪花演算法會了嗎？