【無標題】JavaScript入門

JS

1.JS引入方式

?<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- 內部腳本 --><!-- 運行時界面彈出警告框 hello JS --><script>alert('hello JS');</script><!-- 外部腳本 --><script src="../js/demo.js"></script></head><body><script>alert('hello JS');</script></body></html><script>alert('hello JS');</script>

2.JS基本語法

書寫語法

區分大小寫：與java一樣，變量名,函數名以及其他一切東西都是區分大小寫的
每行結尾的分號可有可無
注釋：

單行注釋：//

多行注釋：/* */

大括號代表代碼塊

?if(count==3){alert("111");}

輸出語句

使用window.alert()寫入警告框

使用docment.write()寫入HTML輸出

使用console.log()寫入瀏覽器控制器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基本語法</title></head><body></body><script>// alert("js");?/* alertalert*/?window.alert("JS");document.write("js");console.log("js01");</script></html>

變量

使用var關鍵字來聲明變量
JS是一門弱類型語言，變量可以存放不同類型的值

?var a=10;a="zhangsan";

變量名需要遵守規則：

組成字符可以是任何字母，數字，下劃線（_）或美元符號（$）

數字不能開頭

建議使用駱峰命名

?<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>變量</title></head><body></body><script>var a=10;a="zhangsan";alert(a);?// 特點1：作用域比較大 全局變量// 特點2：可以重復定義 覆蓋前一個{var x=1;var x="A";}alert(x);??// let:局部變量 不能重復定義{let y=1;alert(y);}alert(y);?// const:常量 不能改變const p=3.14;p=3.15;alert(p);</script></html>

數據類型

JavaScript中分為：原始類型和引用類型

原始類型：

number：數字
string：字符串，單雙引號都可
boolean：布爾。true，false
null：對象為空
undefined：當聲明的變量為初始化時，該變量的默認值是undefined

使用typeof運算符可以獲取數據類型

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>數據類型</title></head><body></body><script>// numberalert(typeof 3);alert(typeof 3.14);?// stringalert(typeof "A");alert(typeof 'hello');?// booleanalert(typeof true);alert(typeof false);?// objectalert(typeof null);??// undefinedvar a;alert(typeof a);??</script></html>

運算符

算術運算符：+，-，*，/，%，++,--
賦值運算符：=，+=，-=，*=，/=，%=
比較運算符：>,<,>=,<=,!=,==,===
邏輯運算符：&&，||，！
三元運算符：條件表達式？true_value:false_value

==會進行類型轉換，===不會進行類型轉換

?var age=20;var _age="20";?alert(age==_age);//truealert(age===_age);//false

3.函數

介紹：函數（方法）是被設計為執行特定任務的代碼塊。

定義：JavaScript函數通過function關鍵字進行定義，語法為：

?function functionName(參數a,b){//要執行的代碼}

注意：

形式參數不需要類型，因為Javascript是弱類型語言。

返回值也不需要定義類型，可以在函數內部直接使用return返回即可

調用：函數名稱（實際參數列表）

定義方式二：

? var functionName=function(參數1，2...){return a+b;}

使用：

4.對象

JS對象：Array String JSON BOM DOM

Array

JavaScript中Array對象用于定義數組。

定義：

var 變量名=new Array(元素列表);//方式一    var arr= new Array(1,2,3,4);
var 變量名 = [元素列表];//方式二   var arr=[1,2,3,4];

訪問：

arr[索引]=值;//   arr[10]="hello";

屬性：

length:設置或返回數組中元素的數量

方法：

forEach():遍歷數組中每個有值的元素，并調用異常傳入的函數

push():將新元素添加到數組的末尾，并返回新的長度

splice():從數組中刪除元素

?arr.forEach(function(e){console.log(e);})?// ES6 箭頭函數：(...) => {...}  簡化函數定義arr.forEach((e)=>{console.log(e);})?// push:添加元素到數組末尾arr.push(7,8,9);console.log(arr);?// splice:刪除元素arr.splice(2,2);console.log(arr);

String

String字符串創建方法有兩種：

?var 變量名=new Stirng("...");var 變量名="...";

屬性：

length:字符串的長度

方法：

charAt():返回在指定位置大的字符

indexOf():檢索字符串

trim():去除字符串兩邊的空格

substring():提取字符串中兩個指定的索引號之間的字符

var str=new String("hello");
var str="hello";
// length
console.log(str.length);
// charAt
console.log(str.charAt(1));
// indexOf
console.log(str.indexOf("lo"));
// trim
var s=str.trim();
console.log(s);// substring(start,end)   開始索引，結束索引（含頭不含尾）
console.log(s.substring(0,4));

JSON

自定義對象：

定義格式：

var 對象名{屬性名1：屬性值1,屬性名2：屬性值2,函數名稱：function(形參列表){}
}

調用格式：

對象名.屬性名; //consle.log(user.name);
對象名.函數名(); //user.eat();

var user={name:"Tom",age:10,gender:"male",eat:function(){alert("吃飯~");}}alert(user.name);user.eat();

JSON——基礎語法：

定義：

?var 變量名='{"key1":value,"key2":value2}';var jsonstr='{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';

JSON字符串轉為JS對象：

?var jsObject=JSON.parse(userStr);

JS對象轉為JSON字符串：

?var jsonstr=JSON.stringify(jsObject);var jsonstr= '{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';alert(jsonstr.name);//undefined?// 將JSON字符串轉為JS對象var obj=JSON.parse(jsonstr);alert(obj.name);?// 將JS對象轉換為JSON字符串alert(JSON.stringify(obj));

BOM

概念：Browser Object Model 瀏覽器對象模型，允許JavaScript與瀏覽器對話，JavaScript將瀏覽器的各個組成部分封裝為對象。

組成：

Window：瀏覽器窗口對象
Navigator：瀏覽器對象
Screen：屏幕對象
History：歷史記錄對象
Location：地址欄對象

window
介紹：瀏覽器窗口對象
獲取：直接使用window，其中window.可以省略。
?window.alert("Hello Window");alert("Hello Window");
屬性

history:對history對象的只讀引用。

location：對于窗口或框架的Location對象。

navigator：對Navigator對象的只讀引用。

方法：

alert()：顯示帶一段消息和一個確認按鈕的警告框

confirm()：顯示帶一段消息以及確認按鈕和取消按鈕的對話框

setInterval()：按鈕指定的周期（以毫秒記）來調用函數或計算表達式

setTimeout()：在指定的毫秒數后調用函數或計算表達式

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/87594.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/87594.shtml
英文地址，請注明出處：http://en.pswp.cn/web/87594.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！