作品鏈接：http://www.lxweimin.com/users/1e0f5e6f73f6/top_articles
1. JavaScript介紹
-
JavaScript是一門廣泛用于瀏覽器客戶端的腳本語言
- 腳本語言: 縮短傳統的編寫-編譯-鏈接-運行過程,解釋運行而非編譯運行
-
JavaScriptl的常見用途
- HTML DOM操作（節點操作，比如添加、修改、刪除節點）
- 給HTML網頁增加動態功能，比如動畫
- 事件處理：比如監聽鼠標點擊、鼠標滑動、鍵盤輸入
2. JavaScript的編寫輸出形式
用js寫一個helloWord
alert("hello world")
利于調試,供程序員觀看：
console.log('hello world')
3. JavaScript的基本語法
- 數據類型
- 最值
- 函數
- 對象
- 邏輯字
(1)-------------JS中常見的數據類型----------
- js中定義變量必須用var
var age = 18;//number
var money = 1.099;//number
var name = 'wpf';
var result = false;// boolean
var score = null;//object
// typeof 用于判斷變量的真實類型
console.log(age, money, name, result, score);
console.log(typeof age, typeof money, typeof name, typeof result,typeof score);
(2)字符串的拼接
- 規律: 運算是從左往右,任何類型的變量與string類型拼接都會被轉為string
var str = 10 + 10 + '10' + '10';// 201010
var str1 = '10' + 10 + '10' + 10;//10101010
var str2 = ('10' + 10) + '10' + 10;//10101010
var str3 = '10' + '10' + 10 + 10;//10101010
(3)-----------------數組------------------
- 數組中可以放任意類型的數據
var newArray = [10, -5, age, name, result, score, ['哈哈哈', 'abc', '123']]; //數組的類型 object
// 遍歷數組 方法1
for (var i = 0; i < newArray.length; i++){
console.log(newArray[i]);
}
// 遍歷數組2
for (var i in newArray) {
console.log(i, newArray[i]);
}
console.log(newArray[newArray.length - 1][0]);//哈哈哈
// 刪除最后一個元素,添加一個新的元素到數組中 pop()和push() newArray.pop();
newArray.push(['大熊貓']);
console.log(newArray);
console.log(newArray[newArray.length - 1]);//['大熊貓']
(4)------------取出數組中的最大值和最小值-----------
- 方法1
var newNumbers = [10,3,23,938];
var minNumber = Math.min.apply(null,newNumbers);
var maxNumber = Math.max.apply(null,newNumbers);
console.log(minNumber, maxNumber);
- 方法2
var minNumber = Math.min(10,32,34,4554,-9);
var maxNumber = Math.max(10,32,34,4554,-9);
console.log(minNumber, maxNumber);
（5）函數
*函數的定義格式
function 函數名（參數列表）{
// 函數體
函數沒有返回類型
}
- 加法運算
// 兩個數相加
function sum(num1, num2){ // 參數列表不需要標明類型
return num1 + num2;
}
// 調用函數
var result = sum(245, 89);
console.log(result);
// 萬能的加法函數
function sum1(numbers){
var count = 0;
for (var i = 0; i < numbers.length; i++){
count += numbers[i];
}
return count;
}
var numbers = [12,124,'23'];
var result1 = sum1(numbers);
console.log(result1);
// 內置數組 arguments
function sum2(){
var count = 0;
for(var i = 0; i < arguments.length; i++){
count += arguments[i];
}
return count;
}
var result2 = sum2(90,23,45,67,87,34);
console.log(result2);
（6）對象
- this在哪個對象中,就代表該對象
1.單一對象
var peapole = {
name:'jack',
age:18,
height:178,
friends:['rose','dog'],
eat:function (someThing){
console.log(this.name + '------吃肉'+ someThing);
},
run:function (someWhere){
console.log(this.name + '------跑' + someWhere);
}};
// 調用對象的屬性
console.log(peapole.name, peapole.friends);
// 調用對象的方法
people.eat('肉');
people.run('船上');
2.批量產生對象
方法1.
//構造函數
function Dog(){
this.name = null;
this.height = null;
this.age = null;
this.friends = [];
this.eat = function (someThing){
console.log(this.name + '------吃肉'+ someThing);
};
this.run = function (someWhere){
console.log(this.name + '------跑' + someWhere);
}
}
// 批量產生狗
var dog1 = new Dog();
var dog2 = new Dog();
// 賦值
dog1.name = 'huahua';
dog1.height = 1.33;
dog1.age = 8;
dog1.friends = ['lili','xixi'];
dog2.name = 'xniba';
dog2.height = 0.33;
dog2.age = 1;
dog2.friends = ['niuniu','lele'];
dog1.eat('meat');
dog2.eat('niunai');
console.log(dog1,dog2);
方法2
// 構造函數
function Dog(name, height, age, friends){
this.name = name;
this.height = height;
this.age = age;
this.friends = friends;
this.eat = function(someThing){
console.log(this.name + '吃' + someThing);
},
this.run = function(someWhere){
console.log(this.name + '跑' + someWhere);
}
}
// 創建新的對象
var dog3 = new Dog('nini',12,1,['haha','xixi']);
console.log(dog3);
（7）邏輯關鍵字的運用
1.|| 邏輯或
var name1 = 'null';
var name2 = 'name2';
var name3 = 'name3';
var name4 = 'name4';
var newName = null;
// 判斷
if (name1){
newName = name1;
} else if (name2){
newName = name2;
} else if (name3){
newName = name3;
} else { newName = name4;
}
// 新的做法
newName = name1 || name2 || name3 || name4;
console.log(newName);
2.&& 邏輯與
var age = 22;
if (age>20){ console.log('大學畢業');}
(age > 20) && console.log('大學畢業');
