js基礎

時間 2019-11-29

標籤基礎欄目 JavaScript 简体版

原文原文鏈接

一. JS介紹javascript

1. 定義一個變量的形式: java

var a;程序員

2. Js是前臺語言,用於頁面的交互, 不能操做數據庫es6

PHP,ASP,JSP 能夠操做數據庫, 可以進行增刪改查. Node.js除外正則表達式

3. Js的組成有三個部分數據庫

ECMAScript: JavaScript的語法標準. 包括變量, 表達式, 運算符, 函數, if語句, for語句等等數組

DOM: 操做網頁上元素的API. 好比讓一個盒子移動, 變色, 輪播圖等等.瀏覽器

BOM: 操做瀏覽器部分功能的API. 好比讓瀏覽器自動滾動.dom

二. Js代碼函數

1. Js引入

方法1: 在頁面中能夠直接在body的標籤中放入以下標籤對:

// js的代碼段

</script>

方法2: 引入js文件

2.語法

a. js 對縮進換行空格不敏感

注意每一條語句末尾都要有分號, 爲了之後壓縮文件

b. 單行註釋用 //單行註釋

多行註釋用 /*多行註釋*/

3. js中輸出信息的方式

a. 彈出警告框: alert語句

alert("哇哈哈");

</script>

b. 控制檯輸出: console.log()

console表示"控制檯", log表示"輸出", 控制檯是程序員調試程序的地方,

程序員常常使用這條語句輸出一些東西來測試程序是否正確

c. 用戶輸入:prompt()語句

prompt()就是專門用來彈出可以讓用戶輸入的對話框, 代碼以下:

var a = prompt("今天是什麼天氣???")

console.log(a);

</script>

上面的代碼中,用戶輸入的內容將被傳遞給變量a

prompt()語句中無論輸入什麼內容, 都是字符串類型.

d. alert 和 prompt的區別:

alert("從前有座山"); //直接使用,不須要變量

var a = prompt("請輸入一個數字"); //必須用變量接收用戶輸入的數值

4. 變量

a. 變量的聲明和賦值

var a = 100;

b. 變量的類型

變量裏面能夠存數字,字符串等. 變量會自動根據存儲內容的類型來決定本身的類型.

數字型:number

若是一個變量裏存放了數字,那麼這個變量就是數值型的

var a = 100; //定義了一個變量, 而且賦值100

console.log(typeof a); // 輸出a 變量的類型, typeof()表示獲取變量的類型

字符串型:string

用單引號或雙引號括起來的字符

var a = "abc";

var b = "123321";

var c = ""; //空字符串

console.log(typeof a, typeof b, typeof c);

c. 連字符和加號的區別

鍵盤上的+ 多是連字符, 也多是數字的加號

console.log("我"+"愛"+"你"); //連字符, 把漢字連在一塊兒, 輸出:我愛你

console.log("我+愛+你"); // 原樣輸出: 我+愛+你

console.log("我"+521); // 輸出:我521

console.log(1+2+3); // 先計算並輸出結果, 輸出6

總結: 若是兩邊都是數值, 此時是加號, 不然就是連字符(用來鏈接字符串)

d. 變量值的傳遞(賦值)

語句: a = b; //把b的賦值給a, b值不變

e. 變量格式的轉換

parseInt()能夠將字符串轉成數字, 例如parseInt("5");

parseInt()還具備如下的特徵:

帶有自動淨化的功能: 只保留字符串最開頭的數字, 後面的中文自動消失

例如: console.log(parseInt("2018你真帥")); 輸出結果:2018

帶有自動截斷小數的功能:取整, 不是四捨五入

例如:

var a = parseInt(5.8) + parseInt(4.7);

console.log(a); // 輸出：9

var a = parseInt(5.8 + 4.7);

console.log(a); // 輸出：10

三. 數據類型:

數據類型包括:基本數據類型和引用數據類型;

基本數據類型是簡單的數據段, 引用數據類型指的是有多個值構成的對象

當咱們把賦值給一個變量的時候, 解析器首先要確認的就是這個值是基本類型仍是引用類型

1. 基本數據類型:

a. number

var a = 123;

console.log(typeof a) //輸出number

//特殊狀況: infinity(無限大)是number類型

var a1 = 5/0;

console.log(a1) // 顯示 infinity

console.log(typeof a1) //number

b. string

var str = "123"

console.log(typeof str) // string

c. boolean

var b1 = false;

console.log(typeof b1) //boolean

d. null

var c1 = null; //空對象

console.log(typeof c1) //object

e. undefined

var d1; //只有聲明,沒有賦值,表示變量未定義

console.log(typeof d1) //undefined

2. 引用數據類型

Function

Object

Array

String

Date

四. 運算符

1. 賦值運算符

=, +=, -=, *=, /=, %=

2. 算數運算符

+, -, *, /, %, ++, --

3. 比較運算符

==, ===(等同於:值和類型均相等), !=, !==, >, <, >=, <=

注意: ==(!=)比較的是值, ===(!==)比較的是值和數據類型. 例如:

var s = "1";

var n = 1;

console.log(s == n); //true

console.log(s === n); //false

4. 字符串拼接和字符串運算的特殊狀況

a. 字符串類型的數值和數值類型相減結果是數值. 例如:

var a = "3";

var b = 1;

console.log(a-b); //1

b. NaN(not a number)是一個number的類型

var b1 = "one";

var b2 = "two";

ret = b1*b2

console.log(ret, typeof(ret)) //NaN number

c. 字符串拼接

var name = "伊拉克";

var am = "美軍";

//字符串拼接

var str = "3月20日," + name + "戰爭爆發,以" + am + "爲主的部隊擊潰了軍隊";

console.log(str);

//es6 的模板字符串, tab鍵上面的反引號``, 添加變量名使用${變量名}

var str1 = "3月20日,${name}戰爭爆發,以${am}爲主的部隊擊潰了軍隊";

console.log(str1);

五. 數據類型轉換

1. 數值類型轉字符串類型

a. 隱式轉換

var n1 = 123;

var n2 = "123";

var n3 = n1+n2;

console.log(n3); // 123123

console.log(typeof n3); //string

b.強轉換的兩種方法: String(), .toString()

var n1 = 123;

var str1 = String(n1);

console.log(str1, typeof str1); //123 string

var num = 234;

str2 = num.toString()

console.log(str2, typeof str2); //123 string

2. 將字符串類型轉換成數值類型: Number(), parseInt(), parseFloat()

var strNum = "789.123wasdfj"

var str = "666"

console.log(Number(strNum),Number(str)) //NaN 666

console.log(parseInt(strNum)) //789

console.log(parseFloat(strNum)); //789.123

3. 任何數據類型均可以轉成boolean類型

//不是0的都是真

var b1 = "123"; //true

var b2 = 0; //false

var b3 = -123; //true

var b4 = Infinity; //true

var b5 = NaN; //false

var b6; //false

var b7 = null; //false

六. 流程圖控制

1. if, if-else, if-else if-else

a. if語句, 例如:

var ji = 20;

if (ji >= 10){

console.log("恭喜你,吃雞成功")

}

console.log("hello world"); //這裏的代碼也會執行

b. if-else例句:

var ji = 20;

if (ji >= 10){

console.log("恭喜你吃雞成功")

}else{

console.log("很遺憾") //這行代碼不執行

}

c. if-else if-else例句:

if(true){

//知足條件執行這行代碼

}else if(true){

//知足條件執行這行代碼

}else if(true){

//知足條件執行這行代碼

}else{

//知足條件執行

}

2. 邏輯與(&&), 邏輯或(||)

a. 模擬若是總分 > 400分而且數學成績 >89 分就會被清華錄取,例如

var sum = 405;

var math = 90;

if(sum > 400 && math >89){

console.log("清華大學錄取")

}else{

alert("未被錄取")

}

b. 模擬若是總分 > 500 分或者英語大於 85分被複旦大學錄取,例如

var sum = 530;

var english = 90;

if(sum > 500 || english >85){

console.log("被複旦大學錄取")

}else{

aler("未錄取")

}

c. switch語句

var game_score = "better";

switch(game_score){

case "good":

console.log("玩得很好")

break; // break表示退出, 若是不寫就直接到碰見下一個break才退出

case "better":

console.log("玩的通常般")

break;

case "best":

console.log("恭喜吃雞")

break;

default:

console.log("很遺憾")

}

4. while循環, do-while循環

a. while循環例如:

var i = 1; //初始化循環變量

while(i <= 9){ //判斷循環條件

console.log(i);

i = i+1; //改變循環條件

}

練習:1-100之間全部2的倍數

var i = 1;

while(i <= 100){

if(i%2 == 0){

console.log(i)

}

b. do-while循環

//無論有沒有知足while中的條件, do裏面的代碼都會先執行一次

var i = 3; //初始化循環變量

do{

console.log(i)

i++; //改變循環條件

}while(i < 10) //判斷循環條件

5.for循環

for(var i=1; i<=10; i++){

console.log(i)

}

練習:1-100 之間全部的數的和打印出來

sum = 0

for (var i=1; i<=100; i++){

sum += 1;

}

console.log(sum);

練習:在瀏覽器中輸出直角三角形

for(var i = 1; i <= 6; i++){

for(var j=1; j<=i; j++){

document.write("*");

}

document.write("<br>");

}

練習: 瀏覽器中輸出等腰直角三角形

for(var i = 1, i<=6; i++){ //控制行數

//控制空格數

for(var s=i; s<6; s++){

document.write(" ")

}

for(var j=1; j<=2*i-1; j++){

document.write("*")

}

document.write("<br>")

}

七. 經常使用內置對象

js中全部的事物都是對象: 字符串,數值, 數組, 函數......此外js容許自定義對象

js提供多個內置對象: String, Date, Array等等

對象是帶有屬性和方法的特殊數據類型

1. 數組對象

數組的建立形式有2種方式:

a. 字面量方式建立, 推薦使用

var colors = ["red","green","pink"];

b. 構造函數建立, 使用new關鍵詞

var colors = new Array();

數組的賦值

var arr = [];

//經過下標進行賦值

arr[0] = 123;

arr[1] = "哈哈哈";

arr[2] = "嘿嘿";

數組的經常使用方法和示例

方法或者屬性描述

concat() 鏈接兩個或多個數組,而且返回結果

var north = ['北京','山東','天津'];

　　　　var south = ['東莞','深圳','上海'];

　　　　var newCity = north.concat(south);

　　　　console.log(newCity); // ["北京", "山東", "天津", "東莞", "深圳", "上海"]

join() 把數組的全部元素放入一個字符串裏

var score = [98,78,76,100,0];

　　　　var str = score.join('|');

　　　　console.log(str); // 98|78|76|100|0

toString() 把數組轉換成字符串, 並返回結果

str1 = score.toString();

　　　　 console.log(str1); // "98,78,76,100,0"

slice(start,end)選取數組的一部分,並返回一個新的數組

var arr = ['張三','李四','王文','趙六'];

　　　　var newArr = arr.slice(1,3);

　　　　console.log(newArr); // ["李四", "王文"]

pop() 刪除數組的最後一個元素, 並返回刪除的元素

var color2 = ['black', 'pink', 'deep blue'];

el = color2.pop();

console.log(el); //deep blue

console.log(color2); //['black', 'pink']

push() 向數組末尾添加一個或多個元素, 並返回新的長度

arr.push('小馬哥');

　　　　 console.log(arr); // ["張三", "李四", "王文", "小馬哥"]

reverse() 反轉數組的元素順序

var names = ['alex','wusir','xiaoma','angle'];

　　　　names.reverse();

　　　　console.log(names); // ["angle", "xiaoma", "wusir", "alex"]

sort() 對數組的元素進行排序按字母從a--z

var names = ['alex','wusir','xiaoma','angle'];

　　　　names.sort(names);

　　　　console.log(names) // ["alex", "angle", "wusir", "xiaoma"]

shift() 刪除並返回數組的第一個元素

var color2 = ['black', 'pink', 'deep blue'];

el = color2.shift();

console.log(el); //black

console.log(color2);//{'pink', 'deep blue']

unshift() 向數組的開頭添加一個或者多個元素,並返回新的長度

var color2 = ['black', 'pink', 'deep blue'];

new_length = color2.unshift('hot pink');

console.log(color2); //{['hot pink','black','pink', 'deep blue']

console.log(new_length); // 4

Array.isArray 判斷對象是否爲數組

var color2 = ['black', 'pink', 'deep blue'];

console.log(Array.isArray(color2)); //true

length 數組的一個屬性,設置或返回數組元素的個數

var color2 = ['black', 'pink', 'deep blue'];

console.log(color2.length); //3

2. 字符串對象

charAt() 返回指定索引的字符串

var str = 'hello';

　　　　var charset = str.charAt(1);

　　　　console.log(charset); // e

concat() 返回字符串,表示兩個或多個字符串的拼接

var str1 = 'al';

　　　　var str2 = 'ex';

　　　　console.log(str1.concat(str2,str1)); // alexal

replace(a,b) 字符串b 替換a

var a = '1234567755';

　　　　var newStr = a.replace('4567','****');

　　　　console.log(newStr); // 123****755

indexOf() 返回某個指定的字符串值在字符串中首次出現的位置,若是沒有返回-1

var str = 'world';

　　　　console.log(str.indexOf('o')); // 1

　　　　console.log(str.indexOf('a')); // -1

slice() 返回start到end -1之間的字符串, 索引從0開始

var str = '正能量';

　　　　 console.log(str.slice(1,2)); // 能

split() 把字符串分割爲字符串數組

var str = '個人天呢，a你在說什麼呢？a哈哈哈';

　　　　 console.log(str.split('a')); // ["個人天呢，", "你在說什麼呢？", "哈哈哈"]

substr(start,end)字符串截取, 顧頭不顧尾

var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';

　　　　 console.log(str.substr(0,4)); // 個人天呢

toLowerCase() 返回一個新的字符串,該字符串字母都變成了小寫

var str = 'XIAOMAGE';

　　　　 console.log(str.toLowerCase()); // xiaomage

toUpperCase() 返回一個新的字符串,字符串的全部字母變大寫

var str = 'xiaomage';

　　　　 console.log(str.toUpperCase()); // XIAOMAGE

match() 查找到一個或多個正則表達式的匹配

search() 查找與正則表達式相匹配的值

toString() 將number類型轉換成字符串類型

var num = 1234.1234;

var str = num.toString();

console.log(str);

3. 日期對象

建立日期對象, 只有構造函數這一種方式, 使用new關鍵字

var myDate = new Date();

經常使用語法:

Date() 根據當地時間返回日期和時間

console.log(Date());//Thu Sep 27 2018 10:07:43 GMT+0800 (中國標準時間)

getDate() 根據本地時間返回指定日期對象的月份中的第幾天(1-31)

console.log(myDate.getDate());//27

getMonth() 根據本地時間返回指定日期對應的月份(0-11)

#注意 0表示1月

console.log(myDate.getMonth());//8

getFullYear() 根據本地時間返回指定日期對象的年份(返回4位數)

console.log(getFullYear());//2018

getDay() 根據本地時間返回指定日期對象的星期幾的第幾天(0-6)

#0表明星期日

console.log(getDay());//4

getHours() 根據本地時間對象返回指定時間對象的小時(0-23)

console.log(myDate.getHours())//14

getMinutes() 根據本地時間對象返回指定時間對象的分鐘(0-59)

console.log(myDate.getMinutes())//8

getSeconds() 根據本地時間對象返回指定時間對象的秒(0-59)

console.log(myDate.getSeconds())//24

toLocalString() 返回本地時間

console.log(myDate.toLocalString())

#使用循環定時器在頁面中顯示動態時間

setInterval(function(){

document.getElementById("timer").innerText = Date().toLocalString();

},1000)

4. math(算數)對象

#經常使用內置對象

Math.floor() 向下取整,地板函數

var x = 1.789;

var new_x = Math.floor(x);

console.log(new_x)//1

Math.ceil() 向上取整,天花板函數

var x = 1.789;

var new_x = Math.ceil(x);

console.log(new_x)//2

Math.max() 取多個值中的最大值

console.log(Math.max(3,2,1,4,5,2))//5

Math.min() 取多個數的最小值

console.log(Math.min(3,2,1,4,5,2))//1

Math.random() 獲取0-1之間的隨機數

console.log(Math.random())//0.669789427291309

#獲取100--300之間的隨機數

min---max 之間的隨機數: min+Max.random()*(max-min)

var start = 100;

var end = 300;

var num = start+Math.random()*(end-start);

console.log(Math.floor(num))

八. 函數

函數的定義:函數就是將一些語句進行封裝,而後經過調用的形式,執行這些語句

1. 函數的定義

function 函數名(){

//函數體

}

2. 函數的調用

函數名();

3. 函數的參數

函數定義時的形參

function f(arg1,arg2){

console.log(arg1+arg2);

};

函數定義時的實參

f(100,200);

4. 返回值

function f(arg1,arg2){

return arg1+arg2;

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。