Javascript入門
字符串
1.字符串的創(chuàng)建
1.1 字面量
//方式一: 字面量
var str = "我是字符串";
var str1 = '我是15行';
console.log(typeof str);
console.log(typeof str1);
1.2 使用構(gòu)造方法
//方式二: 使用構(gòu)造方法
var str2 = new String("我是19行");
var str3 = String("我是20行");
console.log(typeof str2);
注意： 使用字面量創(chuàng)建的字符串(方式一),是基本數(shù)據(jù)類型 购披，使用構(gòu)造方法創(chuàng)建的字符串是引用類型
2.字符串的屬性 length 字符串長度
//字符串中的屬性: length 表示字符串的長度
console.log(str.length);
console.log(str2.length);
3.字符串中方法
3.1 根據(jù)下標(biāo)獲取指定字符 charAt(index)
3.2 拼接字符串 concat(str)
3.3 替換字符串 replace
3.4 截取字符串 slice(startIndex,endIndex)
3.5 截取字符串 substring(startIndex,endIndex)
3.6 字符串分割 split(str)
3.7 字符串寫轉(zhuǎn)小寫 toLocaleLowerCase()
3.8 字符串轉(zhuǎn)大寫 toLocaleUpperCase()
// 根據(jù)下標(biāo)獲取指定字符 charAt(index) 下標(biāo)從0開始
console.log("123456".charAt(1));
// 拼接字符串 concat(str)
console.log("Hello".concat(" World"));
//替換字符串 replace 在Javascript中,replace 默認(rèn)只會 一個
console.log("aaabbbccc".replace("a","m"));
//使用正則進(jìn)行全局匹配 替換
console.log("aaabbbccc".replace(/a/g,"m"));
//截取字符串 slice(startIndex,endIndex) : [startIndex,endIndex )
console.log("0123456".slice(0,2));
//截取字符串 substring(startIndex,endIndex) : [startIndex,endIndex )
console.log("0123456".substring(0,2));
//字符串分割 split(str) : 按照指定字符 將字符串轉(zhuǎn)化為數(shù)組
var arr = "1-2-3-4".split("-");
console.log(arr);
//toLocaleLowerCase() : 將字符串大寫轉(zhuǎn)化為小寫
console.log("abcDm".toLocaleLowerCase());
//toLocaleUpperCase() : 將字符串小寫轉(zhuǎn)化為大寫
console.log("abcDm".toLocaleUpperCase());
數(shù)組
1.數(shù)組的創(chuàng)建
創(chuàng)建方式一：字面量
//方式一:字面量
var str = "我是字符串";
//在javascript 可以通過 字面量 中括號的形式創(chuàng)建數(shù)據(jù)
var arr = [1,2,3,4];
console.log(arr);
方式二：使用構(gòu)造方法
//方式二: 構(gòu)造方法
var arr1 = new Array(1,2,3,4,5);
console.log(arr1);
注意點：
//注意:1.在javascript 數(shù)組中可以存儲任意類型,建議存儲相同類型
var arr = [1,"字符串",true,NaN];
var arr = new Array(1,"字符串",true,NaN);
console.log(arr);
// 2.使用構(gòu)造方法在創(chuàng)建數(shù)組時,若只有一個參數(shù),此時表示數(shù)組的長度,若多個參數(shù),則是數(shù)組的元素
var arr = new Array(5);
console.log(arr);
//3. 在javascript中 數(shù)組不存在下標(biāo)越界
var arr = [0,1,2,3];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);
// 4. 在Javascript中瘸洛，數(shù)組時沒有長度大小限制的
var arr = new Array(2);
console.log(arr);
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
console.log(arr);
2.數(shù)組的屬性:length
//數(shù)組的length屬性
console.log(arr.length);
3.數(shù)組的訪問：數(shù)組是通過下標(biāo)進(jìn)行訪問簿训，數(shù)組的下標(biāo)初始值是0
/**
* 數(shù)組的訪問: 數(shù)組是通過下標(biāo)進(jìn)行訪問,第一下標(biāo)值是 0
*/
var arr = [0,1,2,3,4,5];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
//數(shù)組的修改也是通過下標(biāo)進(jìn)行修改
arr[0] = "我是第一個值";
console.log(arr);
//數(shù)組添加數(shù)組
arr[arr.length] = "我是最后一個";
console.log(arr);
4.數(shù)組中的方法
4.1 向數(shù)組的末尾添加一個或多個元素：push（obj）
/**
* 數(shù)組中的方法
* push(obj):向數(shù)組末尾添加一個或多個元素
*/
var arr = [1,2,3];
arr.push(4);
console.log(arr);
arr.push(5,6,7,8);
console.log(arr);
4.2 向數(shù)組前面添加一個或多個元素：unshift（obj）
/**
* 向數(shù)組前面添加一個或多個元素 unshift(obj)
*/
var arr = [1,2,3,4,5];
arr.unshift(0);
console.log(arr);
arr.unshift(-3,-2,-1);
console.log(arr);
4.3 刪除數(shù)組中最后面的元素pop()
/**
* 刪除數(shù)組中 最后面的元素 pop
*/
var arr = [1,2,3,4,5];
arr.pop();
console.log(arr);
4.4 刪除數(shù)組中最前面的元素shift()
/**
* 刪除數(shù)組中 第一個元素
*/
var arr = [1,2,3,4];
arr.shift();
console.log(arr);
4.5 批量修改數(shù)組splice（startIndex版仔，deleteCount待诅，items）
**startIndex:數(shù)組操作的開始下標(biāo) 必填 **
deleteCount：刪除的元素個數(shù) 必填
items：元素項 選填
/**
* 修改數(shù)組
* splice（startIndex惯豆，deleteCount逗噩，items）
*/
var arr = [1,2,3,4,5,6];
// 從第一個元素開始,刪除 2個元素 1,2 ---> 3 4 5 6
arr.splice(0,2);
console.log(arr);
//從指定下標(biāo)開始 刪除指定個數(shù) 使用item 從開始下標(biāo)處替換
var arr = [1,2,3,4,5,6];
arr.splice(0,2,"第一個","第二個","第三個");
console.log(arr);
了解：
1.轉(zhuǎn)義符 \
在Javascript中，一些符號都有自身的意義吓肋，此時若需要使用這個符號本身凳怨，則需要進(jìn)行轉(zhuǎn)義。
/**
* 轉(zhuǎn)義符： \
*/
var str = "\" 毛爺爺說:革命尚未成功,同志們,還需好好學(xué)習(xí),你們是89點鐘的太陽,充滿朝氣\"";
console.log(str);
2.字符串域
/**
* 字符串域 使用 `` 包裹的都是字符串
*/
var str = `"好好學(xué)習(xí),天天向上"`;
console.log(str);
3.編碼轉(zhuǎn)碼
數(shù)據(jù)提交方式一般有2種：一種是get 一種是post.
1.get提交的數(shù)據(jù)在地址欄中
2.post提交的數(shù)據(jù)在協(xié)議內(nèi)部
若存在中文是鬼，且必須要使用get提交肤舞，可能會出現(xiàn)亂碼，此時可使用JS進(jìn)行編碼然后進(jìn)行傳輸均蜜。
3.1 編碼 encodeURIComponent(str)
????在Javascript中,若有漢字或特殊符號要在URL上進(jìn)行傳輸李剖，此時可使用encodeURIComponent進(jìn)行編碼。
/**
* 編碼 encodeURIComponent(str)
*
*/
var url = "http://www.baidu.com?s=";
var keywords = encodeURIComponent("小麗");
console.log(keywords);
console.log(url+keywords);
3.2 解碼decodeURIComponent（str）：
? 在Javascript中囤耳，若字符串存在編碼篙顺，需通過decodeURIComponent進(jìn)行解碼
var key = decodeURIComponent("%E5%B0%8F%E4%B8%BD");
console.log(key);
注意點：
1.在Java中，可以通過URLEncoder類進(jìn)行字符串編碼
2.在Java中充择，可以通過URLDecoder類進(jìn)行解碼
函數(shù)
1.函數(shù)的定義
? 有特定功能的代碼塊德玫，就是函數(shù)
2.函數(shù)的語法
? 2.1 關(guān)鍵 function
? 2.2 語法
? function 函數(shù)名 （參數(shù)）{
? 代碼塊;
? return 返回值;
? }
/**
* 函數(shù)的語法： function
* function 函數(shù)名 (參數(shù)){
代碼塊;
return 返回值;
}
注意：
1.在Javascript中 函數(shù)是沒有返回值類型
2.在Javascript 中參數(shù)是沒有類型的
3. 在Javascript中 使用return 返回結(jié)果
4. 在Javascript中 調(diào)用函數(shù)時,無需傳入指定個數(shù)個參數(shù)
*/
function f1(m,n){
console.log(m);
console.log(n);
return m + n;
}
f1();
f1(1);
f1(1,2);
var s = f1(1,2);
console.log(s);
2.3 匿名函數(shù)和函數(shù)表達(dá)式
/**
* 匿名函數(shù)
* 在Javascript中,若定義一個函數(shù),不指定名稱此時 就是匿名函數(shù)
* 函數(shù)表達(dá)式 將匿名函數(shù)賦值給變量 這種是函數(shù)表達(dá)式
*/
var m = function (){
console.log("你好");
}
console.log(typeof m);
console.log(typeof f1);
3.函數(shù)的使用
3.1.通過函數(shù)名稱，傳入響應(yīng)的參數(shù)進(jìn)行調(diào)用椎麦。
3.2.定義變量可以接收函數(shù)運算返回的結(jié)果
4.arguments 參數(shù)對象
arguments 表示當(dāng)前函數(shù)運行的參數(shù)宰僧。
4.1 length : 實際參數(shù)的個數(shù)
4.2 arguments[下標(biāo)]：根據(jù)下標(biāo)獲取實際參數(shù)值
4.3 calleee(參數(shù))：callee 表示當(dāng)前函數(shù)
5.Javascript中函數(shù)的注意點
5.1.在Javascript中 函數(shù)是沒有返回值類型
5.2.在Javascript 中參數(shù)是沒有類型的
5.3.在Javascript中 使用return 返回結(jié)果
5.4.在Javascript中 調(diào)用函數(shù)時,無需傳入指定個數(shù)個參數(shù)
對象
1.對象的定義
? 是一個包含屬性和函數(shù)的特殊數(shù)據(jù)類型.
2.對象的創(chuàng)建
方式一：通過new關(guān)鍵字進(jìn)行創(chuàng)建
/**
* 對象的創(chuàng)建
* 方式一： 通過new 關(guān)鍵字進(jìn)行創(chuàng)建
*/
//此時創(chuàng)建了一個空對象
var o = new Object();
console.log(o);
//為o 對象新增了 name屬性 且值 韓梅梅
o.name = "韓梅梅";
console.log(o);
o.study = function(){
console.log("我是第20行");
}
o.study();
console.log(o);
注意：此時創(chuàng)建的對象都是空對象，沒有任何屬性和方法铃剔，需要手動添加
方式二：通過字面量
//字面量的方式
/**
* 語法：
* var 對象名 = {
屬性名: 屬性值
......
}
注意:多個之間使用,號分隔
*/
var obj = {
name : '我是屬性的值',
age : 18,
11:27,
study: function(){
console.log("我是第29行");
}
}
console.log(obj.name);
console.log(obj.age);
obj.study();
注意: 屬性值是固定的
方式三：構(gòu)造函數(shù)創(chuàng)建
//構(gòu)造函數(shù) 創(chuàng)建對象
function Student(name,age){
this.name = name;
this.age = age;
this.study = function (){
console.log("好好學(xué)習(xí),天天向上");
}
}
var st1 = new Student("韓梅梅",18);
console.log(st1.name +" "+st1.age);
var st2 = new Student("李磊",18);
console.log(st2.name +" "+st2.age);
st2.study();
3.對象使用
1.對象通過.可以訪問自己的屬性和方法
2.對于特殊的屬性也可以通過[屬性名]進(jìn)行訪問
4.this關(guān)鍵字
this指的當(dāng)前對象
1.若在方法中撒桨，則是調(diào)用當(dāng)前方法的對象
2.若在構(gòu)造函數(shù)中，則是當(dāng)前創(chuàng)建的對象
3.全局屬性都是window對象的屬性
Date
/**
* Date 時間對象
*/
var date = new Date();
//獲取年份
console.log(date.getFullYear());
//獲取月份 0 - 11
console.log(date.getMonth()+1);
//獲取 日
console.log(date.getDate());
//獲取一周的某一天
console.log(date.getDay());
//獲取小時
console.log(date.getHours());
//獲取分
console.log(date.getMinutes());
//獲取秒
console.log(date.getSeconds());
//獲取毫秒
console.log(date.getMilliseconds());
//獲取從1970年1月1日 到現(xiàn)在的毫秒數(shù)
console.log(date.getTime());
console.log(window);
//document ---> 文檔
//document.write 向body中輸出了一段字符串
document.write("Today's date is "+new Date());
document.write("<div><a style='color:red'>百度</a></div>")
案例：日歷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日歷案例</title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: blue;
position: relative;
margin: auto;
}
p{
text-align: center;
color: azure;
font-size: 20px;
top: 30px;
height: 50px;
line-height: 50px;
}
.box2{
width: 150px;
height: 150px;
background-color: green;
position: absolute;
bottom: 20px;
left: 75px;
text-align: center;
line-height: 150px;
font-size: 40px;
font-weight: 900;
color: aquamarine;
}
</style>
</head>
<body>
<script type="text/javascript">
var html = `<div class="box1"><p>today</p><div class="box2">day</div></div>`;
var week = ["星期日","星期一","星期二","星期三","星期四", "星期五","星期六"];
var date = new Date();
var today = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week[date.getDay()];
html = html.replace("today",today);
var day = date.getDate();
html = html.replace("day",day);
document.write(html);
</script>
</body>
</html>
定時器
1.周期性定時器:setInterval(fun,time)
/**
* setInterval(fun,time): 周期性的定時器
* fun : 周期性執(zhí)行的函數(shù)
* time : 執(zhí)行周期 單位 毫秒
*/
/* setInterval(function(){
console.log("我執(zhí)行了");
},1000); */
function task (){
console.log("我是18行");
}
setInterval(task,1000);
2.一次性的定時器:setTimeout(fun,time)
/**
* 一次性執(zhí)行的setTimeout(fun,time)
* fun : 執(zhí)行的函數(shù)
* time :延遲執(zhí)行的時間
*/
setTimeout(function(){
console.log("我是第27行");
},10000);
function task2(){
console.log("我是第30行");
}
setTimeout(task2,10000);
3.清除定時器:clearInterval(obj)
/**
* clearInterval(timerObj):
* 結(jié)束定時器
* timerObj : 定時器對象
*/
var m = 0;
var timer = setInterval(function(){
console.log("我是第35行");
m++;
if(m == 3){
//終止定時器
clearInterval(timer);
}
},1000);
Javascript調(diào)試
方式一：
1.按F12
2.找到JS代碼---Source
[圖片上傳失敗...(image-d7b7b4-1563350181418)]
3.在最最側(cè)打斷點
4.當(dāng)鼠標(biāo)移動到變量上時會顯示變量值
5.通過右側(cè)Watch 手動添加需要監(jiān)視的變量
[圖片上傳失敗...(image-edbb0-1563350181419)]
6.通過右側(cè)上方的功能按鈕進(jìn)行debug操作
[圖片上傳失敗...(image-ccbb5f-1563350181419)]
方式二：
通過debugger關(guān)鍵字键兜，進(jìn)行強(qiáng)制debug操作凤类。
DOM入門
1.DOM定義 Document Object Model
在我們HTML中，本質(zhì)上也是一個DOM模型普气，HTML是根節(jié)點谜疤，下面涵蓋多個子節(jié)點。
body節(jié)點就是在窗口中顯示的內(nèi)容现诀。瀏覽器有內(nèi)置對象：window,window對象下面有document屬性
document就涵蓋整個頁面的DOM對象
2.DOM查找
2.1.根據(jù)ID查找 ： getElementById(id的值) 返回單個dom對象
2.2.根據(jù)class屬性值查找 ：getElementsByClassName(class值) 返回dom集合
2.3.根據(jù)標(biāo)簽名查找： getElementsByTagName(標(biāo)簽名稱) 返回dom集合
//getElementById(id值): 根據(jù)ID查找標(biāo)簽 返回單個對象
var div = document.getElementById("divId");
console.log(div);
//getElementsByClassName(class的值): 根據(jù)class屬性查找標(biāo)簽
var divs = document.getElementsByClassName("divClass");
console.log(divs);
for (var i = 0; i < divs.length; i++) {
console.log(divs[i])
}
//getElementsByTagName(): 根據(jù)標(biāo)簽名稱 獲取 標(biāo)簽集合
var divs = document.getElementsByTagName("div");
console.log(divs);
3.DOM事件入門
DOM事件3要素：事件源夷磕、事件類型、事件程序
/**
* 事件：
* 事件源 ：在哪發(fā)生
* 事件類型： 什么事件
* 事件程序： 函數(shù)
*/
function fun1(){
console.log("我是事件程序");
}
/**
* 此時 button 是事件源
* onclick: 事件類型
* fun1 ：事件程序
*/
4.DOM內(nèi)容操作
在HTML中仔沿，頁面標(biāo)簽的內(nèi)容：標(biāo)簽或者文本
4.1.innerHTML:用于獲取或設(shè)置DOM的內(nèi)容
4.2.innerText：用于獲取或設(shè)置DOM的文本內(nèi)容
/**
* DOM的內(nèi)容操作
* innerHTML: 獲取DOM的內(nèi)容或設(shè)置內(nèi)容
* innerText: 獲取DOM的文本內(nèi)容設(shè)置文本內(nèi)容
*
*/
var div = document.getElementById("divId");
console.log(div);
//innerHTML 子標(biāo)簽及子標(biāo)簽中的文本都會獲取
var child = div.innerHTML;
console.log(child);
//innerText 只獲取文本內(nèi)容
var childText = div.innerText;
console.log(childText);
var div3 = document.getElementById("div3");
//innerHTML 設(shè)置內(nèi)容時,若是標(biāo)簽會處理為標(biāo)簽
div3.innerHTML = "<a ;
//innerText 設(shè)置內(nèi)容時,設(shè)置文本內(nèi)容
div3.innerText = "<a ;
/**
* 注意點： innerHTML 和innerText 在設(shè)置內(nèi)容時 都會覆蓋DOM的內(nèi)容
*/
注意： innerHTML 和innerText 在設(shè)置內(nèi)容時 都會覆蓋DOM的內(nèi)容
5.DOM的屬性操作
方式一：DOM對象.屬性名 獲取或設(shè)置屬性
方式二：使用Javascript內(nèi)置的屬性操作方法：
獲取屬性值 ：getAttribute(屬性名)
設(shè)置屬性值 ： setAttribute(屬性名,屬性值)
刪除屬性： removeAttribute(屬性名)
判斷是否有該屬性：hasAttribute(屬性名)
/**
* DOM的屬性操作：
* 一般而言坐桩，Javascript 操作DOM的屬性，只需要
* DOM對象.屬性 進(jìn)行獲取屬性值和設(shè)置屬性值
*/
var img = document.getElementById("img");
//設(shè)置DOM屬性值
img.src = "img/tk.jpg";
//獲取DOM的屬性值
console.log(img.src);
//獲取DOM對象
var input = document.getElementById("input");
//通過DOM對象操作屬性
var v = input.value;
console.log(v);
//設(shè)置input value屬性值
input.value="我是新的字符串";
/**
* 注意：在操作DOM的class屬性封锉，不能使用class 要使用className
*/
function changeColor(){
console.log("我真的被點擊了!");
var div2 = document.getElementById("div2");
//div2.className = "box2";
div2.setAttribute("class","box2");
}
//找到checkbox
var ck1 = document.getElementById("ck1");
//checked : 設(shè)置選中
ck1.checked = true;
//通過方法設(shè)置:
/**
* 獲取屬性值 ：getAttribute(屬性名)
* 設(shè)置屬性值 ： setAttribute(屬性名,屬性值)
* 刪除屬性： removeAttribute(屬性名)
* 判斷是否有該屬性：hasAttribute(屬性名)
*/
var img = document.getElementById("mv");
//獲取屬性值
var src = img.getAttribute("src");
console.log(src);
//設(shè)置屬性值
img.setAttribute("title","程序員鼓勵師");
//判斷是否存在某個屬性
console.log(img.hasAttribute("src"));
//刪除指定屬性
img.removeAttribute("title");
//注意:使用Javascript 內(nèi)置的屬性操作方法時,操作class屬性無需使用className,應(yīng)使用class
