js的基本作用和使用方法
1.js是javas的縮寫,是腳本語言毫胜。專門用來負責網(wǎng)頁上的行為(可以直接寫到網(wǎng)頁當中)
2.在哪里去寫JS代碼
a.可以卸載script標簽中(理論上script標簽可以放到HTML文件中的任何位置它呀,實際開發(fā)的時候一般放在head或者body里面)
b.寫到標簽的事件屬性中(例如:onclick)
c.寫到外部的JS文件中(.js)
3.JS在網(wǎng)頁中能做什么事情
a.在網(wǎng)頁的不同的位置插入HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS基礎</title>
<!--導入外部的JS文件 -->
<!-- <script src="index.js"></script> -->
<script src="js/07-數(shù)據(jù)類型.js" type="text/javascript" charset="utf-8"></script>
<!--一個HTML中可以在多個位置中插入script標簽 -->
<script type="text/javascript">
//在這里寫JS代碼
function inser(){
document.window.alert('<p>你好JS</p>');
}
</script>
</head>
<body>
<h1 id="hh">千鋒所有學科</h1>
<!--修改標簽的樣式 -->
<button onclick="document.getElementById('hh').style.color='red'">修改樣式</button>
<!--修改某個標簽的內(nèi)容 -->
<button onclick="document.getElementById('hh').innerHTML='name'">1999</button>
<script type="text/javascript">
for (var i=0;i <100;i++) {
document.write('<p>12324</p>');
}
</script>
</body>
</html>
1.js基礎語法
1.JS中的注釋
//這是單行注釋
/*
這是多行注釋
*/
2.語句
一條語句結(jié)束要加分號
一行寫多行語句必須用分號隔開
3.js中沒有縮進問題 用{}表示一個塊
4.基本的數(shù)據(jù)類型
Number(數(shù)字),String(字符串),Boolean(布爾類型),Array(數(shù)組)--列表,Object(對象)--字典 ,Function(函數(shù)),null
在控制臺中打印括號里面的內(nèi)容功能和python中的print一樣
console.log("hello world");
console.log("hello js");
5.字面量
數(shù)字字面量
89;
100;
10.34;
3e8;
字符串字面量
'abc';
"abc";
布爾字面量
true;
false;
數(shù)組字面量
[1,2,'ban','abc'];
[];
對象的字面量(對象的key值又是屬性惯悠,不用加引號)
var dic = {q:'weuiq' ,b:'hh'}
console.log(dic.q, dic['b'])
6.標識符
使用標識符來命名
a.由字母躬络、數(shù)字蜡吧、下劃線和$組成休傍,數(shù)字不能開頭
var huu9_$;
b.不能是關鍵字
var for
c.大小寫敏感征绎,大寫和小寫不一樣
d.規(guī)范:1.見名知意
2.變量的聲明
在js中可以通過聲明對象來保存數(shù)據(jù)
1.語法
var 變量名;
var 變量名 = 初值;
說明:var是關鍵字:
變量名:標識符,不能隨意使用_或者$開頭磨取;駝峰式命名規(guī)則(第一個單詞首字母小寫人柿,后面每一個單詞的首字母大寫)
聲明變量
var userName;
給變量賦值
userName = 'wang';
consolse.log(userName)
var score = 100
console.log(score)
同時聲明多個值
var name, age,sex;
var name1='abc',age1=23,sex
一個變量可以存儲任意類型的值,聲明變量的時候忙厌,變量沒有賦值凫岖,默認是undefined
var a = 'abc'
a =100
a = score
3.運算符
1.數(shù)學運算符: +,-,*,/,%,++,--
a.加減乘和取余 和數(shù)學中的一樣
var a = 10+20
var b = 20-10
var c = 10*20
var e = 7 % 2
b./和數(shù)學中的一樣
var d = 5/2
console.log(d)
c. ++ --
語法:變量++/變量-- ;++變量/--變量
++ 自加1
-- 自減1
var a1 = 10
var b1 = 10
a1++
++b1
console.log(a1,b1) //11,11
a1--
--b1
console.log(a1,b1) //10,10
var c1 = a1++ //++/--寫到后面的時候逢净,先賦值哥放,再自加/自減
var c2 = ++b1 //++/--寫到前面的時候,先自加/自減爹土,再賦值
console.log(c1,c2) //10 11
比較運算符: >,<,==(相等),!=,<=,>=,===(完全等于),!==,>==,<==
結(jié)果都是布爾值
console.log(10 > 20) //false
==:判斷內(nèi)容是否相等
console.log(5==5)
console.log(5=='5')
===:判斷值和類型是否相等
console.log(5===5) //ture
console.log(5==='5') //false
console.log(5!==5) //false
console.log(5!=='5') //ture
3.邏輯運算符:&&(與)婶芭,||(或),W偶ⅰ(非)
console.log(true&&false,true&&false)
console.log(true||false,true||false)
console.log(!true)
4.賦值運算符: =,+=,-=,/=,+=,%=
賦值運算符的左邊必須是變量和python一樣
var a =100
a += 10
a -= 10
a %= 10
a /= 10
console.log(a)
5.三目運算符 犀农?:
語法:
條件語句 ? 值1:值2
結(jié)果:判斷條件語句的結(jié)果是否為true宰掉,如果是true呵哨,那么表達式的結(jié)果是值1,否則是值2
var b = 10 > 20 ? 10:20
求兩個值的最大值
var a1 = 80
var a2 = 100
console.log(a1 > a2 ? a1:a2)
6.運算符的優(yōu)先級和python基本一樣,可以通過括號來改變運算順序
4.分支結(jié)構(gòu)
js中的分支結(jié)構(gòu)有兩種:if語句和switch語句
1.js中的if語句
a.if(條件語句){滿足條件要執(zhí)行的代碼塊}
var age = 18
if(age > 18){
console.log('成年')
}
b.if(條件語句){語句塊1}else{語句塊2}
var age = 18
if(age > 18){
console.log('成年')
}
else{
console.log('未成年')
}
c.if else if else(相當于else elif else)
var age = 18
if(age < 18){
console.log('未成年')
}
else if(age < 40){
console.log('青年')
}
else{
console.log('老年')
}
switvh語句
語法:
switvh(變量){
case 值1:
語句1:
break;
case 值2:
語句2:
break;
....
default:
語句3:
break;
}
執(zhí)行過程:使用變量的值依次和每一個case后面的值進行判斷轨奄,看是否相等孟害。
如果相等就執(zhí)行那個case后面對應的語句,如果前面每一個case后面的值都和變量的值不相等挪拟,就執(zhí)行default后面的語句
var score = 10
switch(score){
case 1:
console.log('F');
break; //如果沒有break判斷相等后的語句就會全部執(zhí)行
case 4:
console.log('D');
break;
case 10:
console.log('A');
break;
default:
console.log('other');
break;
}
console.log('====')
score = 9
switch(score){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('不及格');
break;
case 6:
case 7:
console.log('及格');
break;
case 8:
case 9:
console.log('良好');
break;
case 10:
console.log('優(yōu)秀');
break;
0-6表示星期一到星期日
var week = 0
switch(week){
case 0:
console.log('week1');
break;
case 1:
console.log('week2');
break;
case 2:
console.log('week3');
break;
case 3:
console.log('week4');
break;
case 4:
console.log('week5');
break;
case 5:
console.log('week6');
break;
case 6:
console.log('week7');
break;
default:
console.log('other');
break;
}
5.循環(huán)結(jié)構(gòu)
js中的循環(huán)結(jié)構(gòu)分為for循環(huán)和while循環(huán)
for in (和python中的for循環(huán)一樣)
for(變量 in 數(shù)組/對象){函數(shù)體}
var arr1 = [1,2,3,4,'abc']
//x取的下標
for(var x in arr1){
console.log(arr1[x])
}
var obj1 = {name:'張三',age:30}
//key拿到的是屬性名
for(var key in obj1){
console.log(key,obj1[key])
}
var str1 = 'uwioe'
for(var x in str1){
console.log(x,str1[1])
}
b. for(表達式1;表達式2;表達式3){循環(huán)體}
執(zhí)行過程:先執(zhí)行表達式1挨务,然后再判斷表達式2的結(jié)果是否為true,如果是true就執(zhí)行循環(huán)體玉组;執(zhí)行完循環(huán)體谎柄,再執(zhí)行表達式3;
執(zhí)行完表達式3惯雳,在判斷表達式2的結(jié)果是否是true朝巫,如果是true又執(zhí)行循環(huán)體;執(zhí)行完循環(huán)體石景,再執(zhí)行表達式3劈猿,以此類推拙吉,直到
表達式2的判斷結(jié)果為false,循環(huán)結(jié)束揪荣。
計算1+2+..+100
var sum = 0
for (var i=1 ; i < 101 ;i++) {
sum += i;
}
console.log(sum)
while循環(huán)
a.while(條件語句){循環(huán)體}
計算1-100的值
var sum1 = 0
var i = 1
while(i <= 100){
sum1 += i;
i++
}
console.log(sum1)
do-while循環(huán):do{循環(huán)體}while(條件語句);
先執(zhí)行循環(huán)體,然后判斷條件語句是否成立.如果成立再執(zhí)行循環(huán)體筷黔,以此類推,直到條件不成立,循環(huán)結(jié)束。
比while先執(zhí)行一次
var sum2 = 0
var i = 1
do{
sum2 += i;
i++;
}?
while(i <101)
console.log(sum2)
3.break和continue
和python一模一樣.
6.函數(shù)
- 函數(shù)的聲明
function 函數(shù)名(參數(shù)列表){函數(shù)體}
a.function 關鍵字
b.函數(shù)名 駝峰式命名:見名知意
c.參數(shù):參數(shù)可以有默認值仗颈,有默認值的參數(shù)要寫在后面必逆。調(diào)用函數(shù)傳參的時候,是按位置參數(shù)來傳參揽乱。保證每一個參數(shù)都有值。
d.函數(shù)體:實現(xiàn)函數(shù)的功能粟矿。只有在調(diào)用的時候才會執(zhí)行
function sum1(num1,num2=1){
console.log('兩個數(shù)的和')
return num1+num2
}
console.log(sum1(10,20))
函數(shù)沒有返回值的時候凰棉,函數(shù)的返回值就是underfined
function fun1(){
console.log('123')
}
console.log(fun1())
2.函數(shù)的調(diào)用
函數(shù)名(實參列表)
調(diào)用過程和python一樣
3.作用域
全局變量:聲明在函數(shù)外面的變量(從函數(shù)聲明到文件結(jié)束)
局部變量:聲明在函數(shù)里面的變量(從函數(shù)聲明到函數(shù)結(jié)束,函數(shù)的參數(shù)也是局部變量)
aaa 全局變量
var aaa = 10
function fun2(){
//bbb 局部變量
var bbb = 10
//函數(shù)中可以修改全局變量的值
aaa = 200
//函數(shù)中可以聲明函數(shù)
function fun222(){
bbb = 20
console.log(bbb)
}
}
fun2()
console.log(aaa)
可以將函數(shù)作為變量
var a = fun2()
a
個數(shù)不定參數(shù),js不支持
7.數(shù)據(jù)類型
數(shù)字,字符串,布爾,列表,對象
1.數(shù)字:包括整數(shù)和小數(shù)(支持科學計數(shù)法)
var num1 = 10
var num2 = new Number()
console.log(num2+10)
2.字符串
a.''和"" 括起來的字符集
b.轉(zhuǎn)義字符(和python一樣)
c.字符編碼是Unicode編碼
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\n'
e.獲取字符串長度 字符串.length
a = str1.length
console.log(a)
f.獲取單個字符
下標 1.范圍是0-長度-1 2.如果越界陌粹,不報錯撒犀,結(jié)果是undefined
js中的字符串不能切片
console.log(str1[1])
g.+運算符
js中只支持+,不支持*
字符串1+字符串2 --拼接兩個字符串
js字符串可以和其他任何數(shù)據(jù)進行加操作掏秩,其效果是字符串連接(把其他的轉(zhuǎn)換成字符串)
console.log('123'+'abc'+'123'*2+100)
h.字符串方法(查)(這里有點問題或舞,用的時候先查查資料)
var re = 'abc23'.search(/\d+/)
console.log(re)
3.對象 構(gòu)造方法(類)
var obj1 = {name:'yuting',age:10}
console.log(obj1.name,obj1['name'])
聲明構(gòu)造方法
function person(name='',age=0,sex=''){
this.name = name
this.age = age
this.sex = sex
}
var p11 = new person()
p11.name = 'mmm'
p11.age = 20
p11.sex ='女'
console.log(p11.name,p11.age,p11.sex)