js基礎

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ù)

  1. 函數(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)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蒙幻,隨后出現(xiàn)的幾起案子映凳,更是在濱河造成了極大的恐慌,老刑警劉巖邮破,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件诈豌,死亡現(xiàn)場離奇詭異,居然都是意外死亡抒和,警方通過查閱死者的電腦和手機矫渔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摧莽,“玉大人庙洼,你說我怎么就攤上這事∧髟” “怎么了油够?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長征懈。 經(jīng)常有香客問我叠聋,道長,這世上最難降的妖魔是什么受裹? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任碌补,我火速辦了婚禮虏束,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘厦章。我一直安慰自己镇匀,他們只是感情好敬锐,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布另患。 她就那樣靜靜地躺著,像睡著了一般极舔。 火紅的嫁衣襯著肌膚如雪群发。 梳的紋絲不亂的頭發(fā)上晰韵,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機與錄音熟妓,去河邊找鬼雪猪。 笑死,一個胖子當著我的面吹牛起愈,可吹牛的內(nèi)容都是我干的只恨。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼抬虽,長吁一口氣:“原來是場噩夢啊……” “哼官觅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起阐污,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤休涤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后笛辟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體滑绒,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年隘膘,在試婚紗的時候發(fā)現(xiàn)自己被綠了疑故。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡弯菊,死狀恐怖纵势,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情管钳,我是刑警寧澤钦铁,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站才漆,受9級特大地震影響牛曹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜醇滥,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一黎比、第九天 我趴在偏房一處隱蔽的房頂上張望超营。 院中可真熱鬧,春花似錦阅虫、人聲如沸演闭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽米碰。三九已至,卻和暖如春购城,著一層夾襖步出監(jiān)牢的瞬間吕座,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工瘪板, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吴趴,地道東北人。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓篷帅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親拴泌。 傳聞我的和親對象是個殘疾皇子魏身,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,150評論 0 13
  • 一蚪腐、 入門 1箭昵、 JS代碼書寫的位置 寫在行內(nèi) 寫在script標簽中 寫在外部js文件中,在頁面引入 注意點: ...
    寵辱不驚丶歲月靜好閱讀 853評論 0 0
  • 畢業(yè)多年后回季,一天表弟在背《赤壁賦》時犯牢騷家制,我抓過來花了五分鐘,就一字不差背下來了泡一〔梗看來“蘇子與客泛舟于赤壁之下,...
    楠楠細時語閱讀 546評論 0 1
  • 從今天開始鼻忠,做一個優(yōu)雅的女人涵但,做一些有 趣的事,試著做個計劃: 1.晚上喝一碗菜汁帖蔓,做一個小時艾灸矮瘟,...
    木易68閱讀 196評論 0 0
  • 使用過LINUX的人都應該知道,在大多數(shù)LINUX發(fā)行版本里塑娇,內(nèi)置或者通過軟件源安裝JDK的話澈侠,都是安裝的open...
    值得一看的喵閱讀 2,820評論 0 0