1.js是javaScript的縮寫,是一門腳本語言,專門用來負(fù)責(zé)網(wǎng)頁上的行為(可以直接寫到網(wǎng)頁中)
2.在哪兒寫js代碼
a.可以寫在script標(biāo)簽中(理論上script標(biāo)簽可以放到html文件中的任何位置,實(shí)際開發(fā)的時(shí)候一般放在head或者body中)
b.寫到標(biāo)簽的事件屬性中(例如:onlick)
c.寫到外部的js文件中(.js)
3.js在網(wǎng)頁中能做什么事情
a.在網(wǎng)頁的不同位置插入html代碼
b.修改某個(gè)標(biāo)簽內(nèi)容
c.修改標(biāo)簽的樣式
4.怎么寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--導(dǎo)入外部的js文件-->
<!--<script src="js/index.js"></script>-->
<script src="js/07-數(shù)據(jù)類型.js" ></script>
<!--一個(gè)html中可以在多個(gè)位置插入script標(biāo)簽-->
<script type="text/javascript">
//在這兒寫js代碼
function insertP(){
document.write('<p>python</p>')
}
</script>
</head>
<body>
<h1>千鋒的所有學(xué)科</h1>
<button onclick="window.alert('按鈕被點(diǎn)擊')">按鈕</button>
<!--<button onclick="document.getElementById('hh').innerHTMl.'千鋒的所有老師'">修改標(biāo)簽</button>
<button onclick="document.getElementById('hh').style.color = 'red'>修改樣式</button>-->
<!--往html中插入內(nèi)容-->
<script type="text/javascript">
for(var i=0;i<10;i++){
document.write("<p>施工隊(duì)</p>")
}
</script>
</body>
</html>
01js基礎(chǔ)語法
- 1.js中的注釋
//這是單行注釋
/*
* 這是多行注釋
*/
- 2.語句
一條語句結(jié)束需要加分號(hào)
一行寫多條語句必須使用分號(hào)隔開
3.js沒有縮進(jìn)問題,用{}表示一個(gè)塊
4.基本數(shù)據(jù)類型
Number(數(shù)字),String(字符串)
Boolean(布爾類型) Array(數(shù)組)---列表,Object(對(duì)象)---字典
null,undefined
//在控制臺(tái)打印括號(hào)中的內(nèi)容,功能和python中的print
console.log('hello world');
console.log('你好,python!')
- 5.字面量
//數(shù)字字面量
89;
100;
10.34;
3e8;
//字符串字面量
'abc';
"abc";
//布爾字面量
true;
false;
//數(shù)組字面量
[1,2,'ban',4,true];
[];
//對(duì)象的字面量(對(duì)象的key值又是屬性,不用加引號(hào))
//{a:20,b:"abc"}
var dict = {a:'abc',b:'hh'}
console.log(dict.a,dict['b'])
- 6.標(biāo)識(shí)符
//使用標(biāo)識(shí)符來命名
//a.有字母,數(shù)字,下劃線_和$組成,數(shù)字不能開頭
var huhu9_$;
//b.不能關(guān)鍵字
//var for
//c.大小寫敏感,y和Y不一樣
//d.規(guī)范:1.見名知意
02變量的聲明
// 在js中可以通過聲明變量來保存數(shù)據(jù)
/*
* 1.語法
* var 變量名;
* var 變量名=初值;
* 說明 :var是關(guān)鍵字;
* 變量名:標(biāo)識(shí)符,不能隨意使用_或者$開頭;駝峰式命名規(guī)則(第一個(gè)單詞首字母小寫,后面每個(gè)單詞首字母大寫)
*/
//聲明變量
var userName;
//給變量賦值
userName = 'wang';
console.log(userName)
var score = 100
console.log(score)
//同時(shí)聲明多個(gè)變量
var name,age,sex;
var name1='abc',age1=18,sex;
//一個(gè)變量可以存儲(chǔ)任意類型的值,聲明變量的時(shí)候,變量沒有賦值,默認(rèn)是
undefined
var a = 'abc';
a = 100;
a = score
03運(yùn)算符
1.數(shù)學(xué)運(yùn)算符:+,-,*,/,%,++,--
//a._,-,*和數(shù)學(xué)中的求和,求差以及求成績(jī)是一樣的
var a = 10+20;
var b = 20-10;
var c = 10*20;
var d = 7%2;
//b.除/和數(shù)學(xué)中的除一樣
var e = 5/2;
console.log(a,e);
//++,--(單目運(yùn)算符)
/*
* 語法:變量++/變量-- ++變量/--變量
* ++:自加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++ // ++,-- 寫到后面的時(shí)候,先賦值,再自加、自減
var c2 = ++b1 // ++,--寫到前面的時(shí)候,先自加/自減,再賦值
console.log(c1,c2)
2.比較運(yùn)算符:>,<,==(相等),!=,<=,>=,===(完全等號(hào)),!==,>==,<== 結(jié)果是布爾值
console.log(10>20)
console.log(10<20)
// ==:判斷值是否相等
console.log(5==5)
console.log(5=='5')
// ===:判斷值和類型是否相等
console.log(5===5) // true
console.log(5==='5') // false
console.log(5!=5,'5'!=5) //false,false
console.log(5!==5,'5'!==5)
console.log('==============')
3.邏輯運(yùn)算符:&&:(與運(yùn)算),||:(或),!:(非)
console.log('與:',true&&true,true&&false)
console.log('或:',true&&false,false||false)
4.賦值運(yùn)算符:=,+=,-=,*=,/=,%=
- 賦值運(yùn)算符的左邊必須是變量
- 和python的語法一樣
var a = 100;
a += 10; // a = a +10
console.log(a)
5.三目運(yùn)算符 ?:
/*
* a.格式:
* 條件語句?值1:值2;
* 判斷條件語句的結(jié)果是否是true,如果是true,name表達(dá)式的結(jié)果就是值1,否則是值2
*/
var b = 10>20:?10:20;
console.log(b)
//求兩個(gè)數(shù)之間的最大值
var a1 =80
var a2 =100
console.log(a1>a2?a1:a2)
6.運(yùn)算符的優(yōu)先級(jí)和python基本一樣??梢酝ㄟ^括號(hào)來改變運(yùn)算順序
04分支結(jié)構(gòu)
//js的分支結(jié)構(gòu)有兩種:if語句,switch語句
/*if語句
* if(條件語句){滿足條件要執(zhí)行的代碼塊}
*/
var age = 18
if (age>=18){
console.log('成年')
}
//b.if(條件){語句塊1}else{語句塊2}
if(age>=18){
console.log('成年')
}else{
console.log('未成年')
}
//c.if-else if -else(相當(dāng)于python中的if-elif-else)
if(age<18){
console.log('未成年')
}else if(age<40){
console.log('青年')
}else{
console.log('老年')
}
2.switch語句
/*
switch(變量){
case 值:
語句1;
break;
case 值2:
語句2;
break;
...
default:
語句3;
break;
}
執(zhí)行過程:使用變量的值依次和后邊每個(gè)case后面的值進(jìn)行判斷,看是否相等(是否完全相等)。
如果相等就執(zhí)行那個(gè)case后面對(duì)應(yīng)的語句。
如果前面每個(gè)case后面的值都和變量的值不相等,就執(zhí)行default后面的語句。
*/
var score = 10;
switch (score){
case 1:
console.log('素質(zhì)極差')
break;
case 2:
console.log('素質(zhì)一般')
break
case 10:
console.log('素質(zhì)極好')
break;
default:
console.log('沒有素質(zhì)')
break;
}
console.log('+++++++')
//10分制分?jǐn)?shù):0-5:不及格,6-7:及格 8-9:良好 10:優(yōu)秀
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('良好');
case 8:
case 9:
console.log('良好');
break;
case 10:
console.log('優(yōu)秀');
break;
}
05循環(huán)結(jié)構(gòu)
js中的循環(huán)分為for循環(huán)和while循環(huán)
1.for循環(huán)
a.for-in(和python中的for循環(huán)一樣)
var arr1 = [1,2,'abc']
//x取的是下標(biāo)
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='asdfgasasdf'
for (var x in str1){
console.log(x,str1[x])
}
b.for(表達(dá)式1;表達(dá)式2;表達(dá)式3){循環(huán)體}
執(zhí)行過程:先執(zhí)行表達(dá)式1,然后判斷表達(dá)式2的結(jié)果是否是true,如果是true就執(zhí)行循環(huán)體;執(zhí)行完循環(huán)體,在執(zhí)行表達(dá)式3
執(zhí)行完表達(dá)式3,再判斷表達(dá)式2的結(jié)果是否是true,如果是true有執(zhí)行循環(huán)體;執(zhí)行完循環(huán)體,再執(zhí)行表達(dá)式3,以此類推
直到表達(dá)式2的結(jié)果是false,循環(huán)就結(jié)束
//計(jì)算 1+2+3+。。。+100
var sum = 0
for (var i=1;i<101;i++){
sum += i
}
console.log(sum)
2.while循環(huán)
a.while(條件語句){循環(huán)體} 和python一樣
var sum1 = 0
var i = 1
while (i<101){
sum += i;
i++;
}
console.log(sum1)
b. do-while循環(huán):do{循環(huán)體}while(條件語句);
執(zhí)行過程,先執(zhí)行循環(huán)體,然后判斷條件是否成立。如果成立再執(zhí)行循環(huán)體。。。
依次類推,直到條件不成立,循環(huán)結(jié)束
var sum2 = 0
var i = 1
do{
sum += i;
i++;
}while (i<101);
console.log(sum2)
3.break和continue(和python一樣)
06函數(shù)
1.函數(shù)的聲明
function 函數(shù)名(參數(shù)列表){函數(shù)體}
a.function - 關(guān)鍵字
b.函數(shù)體 - 駝峰式:見名知義
c.參數(shù):參數(shù)可以有默認(rèn)值,有默認(rèn)值的參數(shù)要寫在后面。調(diào)用函數(shù)傳參的時(shí)候,是按實(shí)參的位置來傳參。
function sum1(num2,num1=1){
console.log('求兩個(gè)數(shù)的和')
return num1+num2
}
console.log(sum1(10,20))
console.log(sum1(20))
-
函數(shù)沒有return的時(shí)候,函數(shù)的返回值是undefined
function func1(){
console.log('我是函數(shù)1')
}
console.log(func1())
2.函數(shù)的調(diào)用
函數(shù)名(實(shí)參列表)
調(diào)用過程和python一樣
3.作用域
全局變量:聲明在函數(shù)外面的變量(從變量聲明到文件結(jié)束)
局部變量:聲明在函數(shù)里面的變量(從變量聲明到函數(shù)結(jié)束;函數(shù)的參數(shù)也是局部變量)
//aaa就是全局變量
var aaa =10
function func2(){
//bbb就是局部變量
var bbb = 20
console.log(bbb,aaa)
//函數(shù)中可以修改全局變量的值
aaa = 100
//函數(shù)中可以聲明函數(shù)
function func22(){
bbb = 111
console.log(bbb)
}
}
func2()
console.log(aaa)
//可以將函數(shù)作為變量
var a = func2
a()
07數(shù)據(jù)類型
數(shù)字,字符串,布爾,列表,對(duì)象
1.數(shù)字:包含整數(shù)和小數(shù)(支持科學(xué)計(jì)數(shù)法)
var num1 = 10
var num2 = new Number()
console.log(num2+10)
2.字符串
//a.""和''括起來的字符集
//b.
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'
//e.獲取字符串的長(zhǎng)度:字符串.length
console.log(str1.length)
//f.獲取單個(gè)字符:字符串[下標(biāo)]
//下標(biāo):1.范圍是0~長(zhǎng)度-1
//2.如果越界,不報(bào)錯(cuò),但是結(jié)果是undefined
//js中的字符串不能切片
console.log(str1[10])
//g.運(yùn)算符
//js中字符串只支持+,不支持*
//字符串1+字符串2 -- 拼接兩個(gè)字符串
//js中字符串可以和其他任何數(shù)據(jù)進(jìn)行加操作,其效果都是字符串鏈接(會(huì)將其他數(shù)據(jù)轉(zhuǎn)換成字符串)
console.log(100+'abc')
console.log('123'+'abc')
//h.字符串相關(guān)方法(查)
var strstr= 'abc123'
var re = strstr.replace(/\d+/i,'ooo')
console.log(re)
3.對(duì)象,構(gòu)造方法(類)
var obj = {name:'hcy',age=18}
console.log(obj1.name,obj1['name'])
//聲明構(gòu)造方法
function Person(){
this.name = 'abc'
this.age = 18
this.sex = '男'
}
var p1 = new Person()
p1.name = 'asdf'
p1.age = 20
p1.sex = '女'
console.log(p1,typeof(p1))