文章目錄
- 一,JS陳述句
- --1,測驗
- 二,JS陣列
- --1,概述
- --2,測驗
- 三,JS函式
- --1,概述
- --2,測驗
- --3,練習
- 四,JS物件
- --1,測驗
一,JS陳述句
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js陳述句</title>
<script>
// 2.js的回圈陳述句
//練習3:假設你有1個億,每天花500w,能花多少天
var days = 0; //記錄天
var money = 100000000 ;//記錄錢
while(money>0){
money -= 5000000 ;//花錢
days++;//天數++
}
console.log(days);
//練習2:統計1~100的偶數和
var sum = 0;//記錄和
for(let i=1;i<=100;i++){
if(i % 2 == 0){ //過濾偶數
sum = sum + i;//修改變數
// sum += i;
}
}
console.log(sum);
//練習1:列印1~100
for(let i=1;i<=100;i++){
console.log(i);
}
// 1.js的變數和常量
var a = 2; //變數
a = 'hello';
console.log(a);//hello
const b = 10; //常量,值不能再改
// b = 20;
console.log(b);
let c = 10;//變數,有作用域
c = 20;
console.log(c);
var x = 10;
{
let x = 20; //只在{}內有效,出去就無效了
console.log("x="+x);//20
}
console.log("x="+x);//10
</script>
</head>
<body>
</body>
</html>
二,JS陣列
–1,概述
JS的陣列和java一樣,可以存盤多個資料.
區別:
1, java嚴格區分資料型別,整型陣列只能存整數…
2, JS里的陣列可以存放各種型別的資料(JS弱型別) – 靈活!!!
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js陣列</title>
<script>
// 1.創建js陣列: 資料型別豐富 + 長度可變
//方式1:
let a = new Array();
//存入資料--豐富的型別
a = new Array(1,1.6,true,'hello',null);
a[99]=0;
console.log(a);
console.log(a.length);//獲取陣列的長度
console.log(a[2]);//獲取下標為2的資料
console.log(a[a.length-1]);//獲取null元素
//方式2:
let b = [];
//存入資料
b = [1,1.6,true,'hello',null];
console.log(b);
console.log(b.length);
console.log(b[3]);
// 2.遍歷js陣列:
//普通for回圈
for (let i = 0; i < b.length; i++) {
console.log(b[i]+"========");//i是下標
}
//增強for回圈..foreach--for in
//java的寫法 for(var i : b){}
for(var i in b){
console.log(i);//i是下標
console.log(b[i]);
}
</script>
</head>
<body>
</body>
</html>
三,JS函式
–1,概述
類似于java里的方法,用來封裝一段代碼,為了提高代碼的復用性.
步驟: 1,定義函式 2,呼叫函式
定義函式使用function關鍵字
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js函式</title>
<script>
//方式1:
// 1,定義函式
function print(){
console.log("呼叫成功");
}
// 2,呼叫函式
print();
//方式2:
// 1,定義函式
var sout = function(){
console.log("呼叫成功");
}
// 2,呼叫函式
sout();
// 練習1:求1~10的總和
// function add(){ 定義JS函式的第一種方式
var add = function(){//定義JS函式的第二種方式
//1,定義陣列
var a = [1,2,3,4,5,6,7,8,9,10] ;
//2,遍歷陣列
let b = 0;//定義變數,記錄和
for(let i=0;i<a.length;i++){
b = b + a[i] ;//陣列里的資料求和
}
console.log(b);
}
// add();//呼叫函式
</script>
</head>
<body>
<!-- 滑鼠劃入時,觸發函式 -->
<button onmouseenter="add()">點我,求和</button>
</body>
</html>
–3,練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js函式</title>
<script>
//1.沒有引數沒有回傳值 的函式
// 求1~100的和
function sum(){
var a = 0;
for (var i = 1; i <=100; i++) {
a += i;
}
console.log(a);
}
//2.有引數沒有回傳值 的函式
//關鍵字 函式名(引數名,引數名){函式體}
function save(a,b){//定義函式
console.log(a+b);
}
save(1,2); //呼叫函式
// 練習1:求1~10的總和
// function add(a){//定義函式的第一種方式
var add = function(a){//定義函式的第二種方式
var b = 0;//記錄和
for (var i in a){//遍歷a陣列,i是下標
b += a[i];
}
console.log(b);
}
add(new Array(1,2,3,4));//呼叫函式
//3.有引數有回傳值 的函式
//定義函式 return
var add = function(a){//定義函式的第二種方式
var b = 0;//記錄和
for (var i in a){//遍歷a陣列,i是下標
b += a[i];
}
return b;//把計算的結果回傳給呼叫者
}
//呼叫函式
var x = add(new Array(1,2,3,4,5,6));
console.log(x);
//練習: 求1~100里的偶數和
function fun(){ //定義函式
var y = 0;//記錄和
for (var i = 1; i < 101; i++) {
if(i % 2 == 0){//過濾偶數
y += i ;//求和
}
}
return y;//把求和的結果回傳給呼叫者
}
var z = fun();//呼叫函式
console.log(z+100);
</script>
</head>
<body>
<button onclick="sum()">點我,求和</button>
</body>
</html>
四,JS物件
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JS物件</title>
<script>
// 2,創建JS物件的方式2: 比方式1簡潔
let car = {
// 資源名 : 資源的值
//設定屬性
name : "BMW" ,
price : 9.9 ,
//設定函式
start : function(){
console.log('呼叫成功!');
}
}
console.log(car);//{name: 'BMW', price: 9.9}
console.log(car.name+car.price);//呼叫屬性
car.start();//呼叫函式
// 1,創建你JS物件的方式1:比java靈活
function Person(){} //宣告物件
let p = new Person();//創建物件
//動態設定屬性
p.name='tony';
p.addr='北京';
//動態獲取屬性
console.log(p.name+p.addr);
//動態設定函式
p.eat=function(){
console.log("吃大餐");
}
console.log(p);
//呼叫函式
p.eat();
function a(){
// 1,內置物件--window物件
window.alert('100');//彈出框
window.confirm('確認');//確認框
window.prompt("請輸入");//輸入框
// window.document //屬性,獲取網頁檔案
//string物件
var x='hello';
console.log( x.length );//求長度
console.log( x.charAt(0) );//根據下標查找資料
console.log( x.concat(123) );//拼接字串
console.log( x.substring(1,3) );//截取字串[1,3)
}
a();
</script>
</head>
<body>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/316592.html
標籤：java