1.簡介
- JavaScript 是腳本語言
- JavaScript 是一種輕量級的編程語言。
- JavaScript 是可插入 HTML 頁面的編程代碼崎坊。
- JavaScript 插入 HTML 頁面后备禀，可由所有的現(xiàn)代瀏覽器執(zhí)行。
- JavaScript 很容易學(xué)習(xí)奈揍。
注釋的意義：解釋說明代碼的作用
單行注釋：// 注釋
多行注釋：/* 注釋 */
文檔注釋：/** 注釋 */
2.基礎(chǔ)
編程語言：以處理數(shù)據(jù)為核心的
編程語言中表示數(shù)據(jù)：
數(shù)據(jù)類型：表示數(shù)據(jù)的類型
變量：編程語言中用來臨時存儲數(shù)據(jù)的容器
數(shù)據(jù)類型：
1. 基本數(shù)據(jù)類型
String：字符串
Number：數(shù)字【整數(shù)曲尸、浮點數(shù)】
Boolean：布爾類型【true/false】
undefined：未定義類型
null：表示為空的類型
2. 引用數(shù)據(jù)類型：一般情況用來表示對象的
object對象類型
變量：
準(zhǔn)備：JavaScript是一個面向?qū)ο蟮娜躅愋偷哪_本語言
>變量定義：使用var關(guān)鍵字來定義變量【推薦】
>變量命名規(guī)則：變量名稱只能以下劃線(_)，$符號或者字母開頭男翰。
>變量的命名規(guī)范：1駝峰命名法(一個或者多個單詞組成另患，第一個單詞全部小寫，后面每個單詞首字母大寫)蛾绎；2見名知意
>變量的使用規(guī)則：先聲明昆箕，后使用
> JavaScript變量，一般以下劃線開頭[近年出來的規(guī)范]
> 可以使用它typeof（）來判斷某個數(shù)據(jù)的類型
數(shù)據(jù)類型的轉(zhuǎn)換：
字符串->數(shù)字 Number()
字符串->整數(shù) parseInt()
字符串->浮點數(shù) parseFloat()
JavaScript錯誤調(diào)試
1.代碼開發(fā)過程中租冠，不一定會提示錯誤鹏倘！
2.在瀏覽器的F12窗口中，如果JavaScript代碼執(zhí)行出現(xiàn)錯誤顽爹，就會在Console(控制臺)提示錯誤信息和錯誤代碼的位置纤泵！
運算符：
算數(shù)運算符：+ - * / %
賦值運算符：= += -= *= /= %=
關(guān)系運算符：> >= < <= != == ===
邏輯運算符：與運算&& 或運算|| 非運算 !
三元運算符： 簡化的if-else判斷
(條件)?(條件為真執(zhí)行的代碼):(條件為假執(zhí)行的代碼)
3.循環(huán)
/*
JS中提供了三種普通循環(huán)結(jié)構(gòu)
for循環(huán)
while循環(huán)
do-while循環(huán)
*/
/*for(var i = 0; i < 10; i++) {
// alert("差一點一米八" + i);
console.log("for循環(huán)執(zhí)行結(jié)果：" + i);
}*/
/*var x = 0;
while(x > 10){
console.log("while循環(huán)執(zhí)行結(jié)果：" + x);
x++;
}*/
/*var m = 0;
do{
console.log("do-while循環(huán)：" + m);
m++;
}while(m > 10);*/
/*
循環(huán)中的continue和break
*/
// continue是結(jié)束本次循環(huán)，直接開始下一次循環(huán)
for(var i = 0; i < 100; i++) {
if(i % 33 == 0){
// continue;/*終止本次循環(huán)镜粤，直接開始下次循環(huán)*/
// break;/*跳出循環(huán)*/
}
console.log(i);
}
// break;直接跳出循環(huán)
九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九九乘法表</title>
<style type="text/css">
span{
display: inline-block;
width: 100px;
height: 20px;
border:solid 1px red;
}
</style>
<script type="text/javascript">
for (var i = 1; i<=9; i++) {// 控制的行數(shù)
document.write("")
for (var m = 1; m<=i; m++) {// 控制的是列數(shù)
document.write("<span>"+m+"x"+i+"="+(i*m)+"</span>");
}
document.write("<br/>");
}
var m=1;
while(m<=9){
var n=1;
while(n<=m){
document.write("<span>"+n+"x"+m+"="+(n*m)+"</span>");
n++;
}
document.write("<br/>");
m++;
}
var x=1;
do{
var y=1;
do{
document.write("<span>"+y+"x"+x+"="+(x*y)+"</span>");
y++;
}while(y<=x);
document.write("<br>");
x++;
}while(x<=9);
</script>
</head>
<body>
</body>
</html>
4.函數(shù)操作
- 函數(shù)：是封裝了一段代碼捏题，方便這段代碼的重復(fù)使用
def <func_name>(參數(shù)列表):
函數(shù)中的代碼
return 返回值
javascript中可以通過function關(guān)鍵字來定義函數(shù)
函數(shù)中的參數(shù):函數(shù)要執(zhí)行必須需要的數(shù)據(jù)
定義在函數(shù)中的變量：形式參數(shù)
實際調(diào)用函數(shù)時傳遞的數(shù)據(jù)：實際參數(shù)函數(shù)的返回值：函數(shù)執(zhí)行完成之后返回的結(jié)果
通過return關(guān)鍵字來返回函數(shù)執(zhí)行的結(jié)果
5.字符串操作
JS中玻褪，包含在一對單引號或者雙引號中間的字符，稱為字符串
var _str = " hello javascript! "
// 字符串的長度
console.log(_str.length);
// 判斷某個字符第一次出現(xiàn)的位置
console.log(_str.indexOf("a"))
// 判斷某個字符最后一次出現(xiàn)的位置
console.log(_str.lastIndexOf("a"))
// 截取一段字符串
console.log(_str.substring(4,10))
// 剔除字符串兩邊的空格
console.log(_str);
console.log(_str.trim());
6.Math對象
Math對象公荧，可以通過Math...直接使用它的函數(shù)
Math.random() 獲取一個0~1之間的隨機數(shù)
Math.floor(x) 向下取整带射；獲取一個數(shù)據(jù)的最大整數(shù)
Math.ceil(x) 向上取整
Math.round(x) 四舍五入
Math.pow(x, y) 獲取x的y次方
Math.sqrt(x)開平方
聲明數(shù)組，使用方括號
var _names = ["柯景騰", "沈佳宜", "許博淳", "謝明和"]
7.函數(shù)操作
這里主要指字符串的各種函數(shù)
str.length() 獲取字符串長度
str.charAt(index)獲取指定位置的字符
str.indexOf(char)獲取指定字符在字符串中出現(xiàn)的位置
str.lastIndexOf(char)獲取指定字符在字符串中最后出現(xiàn)的位置
str.substring(start, end)截取字符串
str.slice(start, end)截取字符串
8.數(shù)組的使用
pop()刪除最后一個元素
push()末尾追加一個元素
shift()刪除開頭的一個元素
unshift()開始位置增加一個元素
indexOf()查看某個元素的位置
length獲取數(shù)組的長度
9.內(nèi)置日期時間對象Date
創(chuàng)建日期對象new Date()
獲取年份：getFullYear()
獲取月份：getMonth() 注意：獲取月份 0~11
獲取天數(shù)：getDate()
獲取星期：getDay()
獲取小時：getHours()
獲取分鐘：getMinutes()
獲取秒鐘：getSeconds()
獲取毫秒：getMilliseconds()
延時函數(shù)：setTimeout(fn, time)
計時函數(shù)：setInterval(fn, time)
10.js中innerHTML與innerText的用法與區(qū)別
用法：
<div id="test">
<span style="color:red">test1</span> test2
</div>
在JS中可以使用：
test.innerHTML
也就是從對象的起始位置到終止位置的全部內(nèi)容,包括Html標(biāo)簽循狰。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”窟社。
test.innerText
從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽
上例中的text.innerTest的值也就是“test1 test2”, 其中span標(biāo)簽去除了。
test.outerHTML
除了包含innerHTML的全部內(nèi)容外, 還包含對象標(biāo)簽本身晤揣。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
-
getElementById()方法可返回對擁有指定 ID 的第一個對象的引用满葛。
document.getElementById(id)
說明
HTML DOM 定義了多種查找元素的方法作彤，除了 getElementById() 之外，還有getElementsByName()和getElementsByTagName()。
不過顾复，如果您需要查找文檔中的一個特定的元素管钳，最有效的方法是getElementById()誊薄。
在操作文檔的一個特定的元素時堡赔，最好給該元素一個 id 屬性，為它指定一個（在文檔中）唯一的名稱甸祭，然后就可以用該 ID 查找想要的元素缕碎。
