JS介紹+變量

src href url

1 計(jì)算機(jī)語言: 機(jī)器語言(二進(jìn)制) 匯編語言 高級(jí)語言

    機(jī)器語言和匯編語言主要是對(duì)機(jī)器設(shè)置的
    高級(jí)語言:  c c++  pathon  php Go...

2 計(jì)算機(jī)基礎(chǔ)

  • 2.1 計(jì)算機(jī)組成:
    硬件: 輸入設(shè)備 輸出設(shè)備 CPU 硬盤(永久存儲(chǔ)) 內(nèi)存(暫時(shí)性內(nèi)存)
    軟件:
    1. 系統(tǒng)軟件: windows linux macos
    2. 應(yīng)用軟件: qq wechat chrome
  • 2.2 數(shù)據(jù)存儲(chǔ)
    1. 計(jì)算機(jī)內(nèi)部都是二進(jìn)制0,1表示的 圖片文字 都是二進(jìn)制的形式
    2. 硬盤內(nèi)存里面都是二進(jìn)制數(shù)據(jù)
  • 2.3 數(shù)據(jù)存儲(chǔ)單位
    位 bit 一位(1bit)存儲(chǔ)的是一個(gè)二級(jí)制數(shù)據(jù)0/1 最小的存儲(chǔ)單位
    字節(jié) Byte: 1B =8b
    千字節(jié) kB 1KB=1024B
    兆字節(jié) MB 1MB=1024KB
    吉字節(jié) GB 1GB=1024MB
    太字節(jié) TB 1TB=1024GB
    ...
  • 2.4 程序運(yùn)行

硬盤-----內(nèi)存條----CPU
cpu的處理速度很快 但是硬盤的訪問讀取速度很慢 會(huì)浪費(fèi)cpu的性能 所以將需要處理的文件放置在內(nèi)存中 (內(nèi)存是電 硬盤是機(jī)械)
1. 打開某個(gè)程序 先從硬盤中把程序的代碼加載到內(nèi)存中
2. CPU執(zhí)行內(nèi)存中的代碼

計(jì)算機(jī)組成

一JavaScript:

JS的作用:

(1) 表單驗(yàn)證;(密碼強(qiáng)度驗(yàn)證) js產(chǎn)生的最初目的
(2) 網(wǎng)頁特效
(3) 服務(wù)端開發(fā)(Node)
(4) 桌面程序
(5) App(Cordova)
(6) 控制硬件-物聯(lián)網(wǎng)(Ruff)
(7) 游戲開發(fā)(cocos2d-js)

1.1 javaScript介紹
  • (1) 簡介 :
    創(chuàng)始人: 布蘭登.艾奇
    js是運(yùn)行在客戶端的腳本語言 是前端唯一的腳本語言
    通過chrome瀏覽器的v8 引擎解析 可以實(shí)現(xiàn)人機(jī)交互 提供邏輯思維

  • (2) 瀏覽器引擎 :
    a.渲染引擎: 用來解析html和css,俗稱內(nèi)核 chrome瀏覽器的內(nèi)核blink和老版本的webkit
    b.JS引擎: 也成為js解釋器,用來讀取網(wǎng)頁中的JavaScript代碼,處理后運(yùn)行,比如chrome瀏覽器的V8 (js是高級(jí)編程語言--只不過與c語言 Java語言比起來算是弱語言) 逐行翻譯解釋執(zhí)行 所以叫做腳本語言

  • (3) 組成 :
    ECMAScript語法規(guī)范+webApis(DOM ,BOM ,api接口)
    DOM(Document Object Model) 文檔對(duì)象模型:
    是w3c組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口.通過DOM提供的接口可以對(duì)頁面上的各種元素進(jìn)行的操作

      BOM(Browser  Object  Model) 瀏覽器對(duì)象模型:
          是指瀏覽器對(duì)象模型  提供了獨(dú)立于內(nèi)容的,可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu).通過BOM可以操作瀏覽器窗口,比如彈出窗 控制瀏覽器跳轉(zhuǎn) 獲取分辨率等
    

BOM是包括DOM的

1.2 js的書寫位置:
  • 內(nèi)聯(lián) 寫在html標(biāo)簽內(nèi) 對(duì)應(yīng)css的內(nèi)嵌 引入方式 觸發(fā)事件=處理函數(shù)
    ?區(qū)別:不寫script

  • 內(nèi)部 寫在script標(biāo)簽內(nèi) 一般寫在最后 body結(jié)束標(biāo)簽之前

  • 外部 寫在一個(gè)單獨(dú)的.js文件內(nèi) 通過script src='' 引入

    ???注意點(diǎn):

(1) 內(nèi)部: script代碼的書寫位置應(yīng)該在所有的html結(jié)構(gòu)之后 否則調(diào)用的元素可能會(huì)獲取不到--此時(shí)html頁面還沒加載完成 沒有對(duì)應(yīng)的DOM節(jié)點(diǎn) 瀏覽器是逐行解析

(我們將 <script> 放在HTML文件的底部附近的原因是瀏覽器會(huì)按照代碼在文件中的順序加載 HTML。遇到script標(biāo)簽 會(huì)阻塞文檔解析如果先加載的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加載而失效。
因此,將 JavaScript 代碼放在 HTML頁面的底部附近通常是最好的策略。)

(2) 外部: 外部的js <script src>-----</script> 之間書寫的代碼 不會(huì)加載解析會(huì)被忽略

1.3 注釋: 注釋的內(nèi)容是不會(huì)解析的

  • (1) 單行注釋 // 快捷鍵 ctrl+/
  • (2) 塊注釋 /* */ shift+alt+a
1.4 結(jié)束符

a. 代表語句結(jié)束
b. ';' 英文狀態(tài)下
c. 建議寫 也可以不寫
d. 換行會(huì)被識(shí)別為結(jié)束符

1.5 輸入輸出

輸入: prompt() 提示框 ?? 獲取到的是字符串

輸出:

  1. alert() 警示框 會(huì)阻塞瀏覽器的執(zhí)行 ??并且只有一個(gè)參數(shù)
  2. document.write(); 向html頁面輸入內(nèi)容 多個(gè)寫入的內(nèi)容以','分隔
  3. console.log() --clg 控制臺(tái)輸出

???alert和prompt 會(huì)阻塞線程 不會(huì)繼續(xù)向下執(zhí)行
快捷鍵: win+v 查看電腦剪切板

二 變量:

變量概述
    變量的使用
    變量的語法擴(kuò)展
    變量命名規(guī)范
    變量交換案例
    變量在內(nèi)存中存儲(chǔ)規(guī)則
2.1 變量----計(jì)算機(jī)中用來?存儲(chǔ)數(shù)據(jù)?的容器
  • 變量實(shí)質(zhì)
    內(nèi)存:計(jì)算機(jī)中存儲(chǔ)數(shù)據(jù)的地方 相當(dāng)于一個(gè)大空間

     **變量**: 程序在內(nèi)存中申請(qǐng)的一塊用來存儲(chǔ)數(shù)據(jù)的空間
    
2.2 變量的創(chuàng)建方式
  1. 聲明變量: 關(guān)鍵字--let 變量名
    var/let-----變量的聲明 是js的一個(gè)關(guān)鍵字,用來聲明變量 在內(nèi)存中劃分一塊空間.
    age-----變量名 通過這個(gè)變量名 訪問空間 找到內(nèi)部存儲(chǔ)的數(shù)據(jù)

  2. 變量賦值 '=' 將等號(hào)右邊的內(nèi)容賦值給左邊的表達(dá)式
    ** 數(shù)據(jù)初始化:**聲明一個(gè)變量并且賦值 我們稱之為變量初始化

  3. 變量修改 /更新變量

  4. 可以一次聲明多個(gè)變量','隔開即可

??let和var 創(chuàng)建變量的區(qū)別:

    1. var和let創(chuàng)建的變量 都可以提升變量的聲明 但是var可以給為賦值的變量初始化為undefined 但是let不可以
    1. var聲明的變量可以先聲明后定義 但是let創(chuàng)建的變量只能先聲明定義后才可以使用 let的變量作用域范圍從let位置開始到'}' 結(jié)束的位置

名詞解釋:
?關(guān)鍵字: 系統(tǒng)內(nèi)部已經(jīng)定義好了的詞匯; 有特殊作用 let var if
?字面量: 所見即所得 的????常量???? ----可以得知 數(shù)據(jù)的類型 和 值的大小

2.3 變量實(shí)質(zhì)
  1. 內(nèi)存:計(jì)算機(jī)中存儲(chǔ)數(shù)據(jù)的地方 相當(dāng)于一個(gè)大空間
  2. 變量: 程序在內(nèi)存中申請(qǐng)的一塊用來存儲(chǔ)數(shù)據(jù)的空間


    image.png
變量的實(shí)質(zhì)
2.4 變量命名規(guī)范:
  1. 字母數(shù)字下劃線 _ $符號(hào)組成
  2. 不能使用關(guān)鍵字作為變量名 let var if else switch等
  3. ?不能以??數(shù)字??開頭? 數(shù)字開頭識(shí)別有誤區(qū) 不確定是數(shù)字或者變量
  4. 大小寫敏感 -------app和App是兩個(gè)變量
  5. 駝峰命名法 userName 第一個(gè)單詞首字母小寫
    語義化 + 后面單詞首字母大寫
    ? 額外注意點(diǎn):
    clg(1,2,3)
    d.w(1,2,3)
    alert(1) 不能寫多個(gè)

3 數(shù)據(jù)類型:

??為什么要?jiǎng)澐謹(jǐn)?shù)據(jù)類型:
  • 不同類型的數(shù)據(jù)占據(jù)的內(nèi)存的大小不同,主要還是合理化利用內(nèi)存空間

  • ??? js是弱語言 在聲明時(shí)沒有說明變量的數(shù)據(jù)類型 只有在賦值時(shí)才知道;

數(shù)據(jù)類型
3.1分類:
  • (1) 基本數(shù)據(jù)類型 : 默認(rèn)值
    Number 數(shù)字 0
    String 字符串 ''
    Boolean 布爾 false
    Undefined 不確定類型 undefined
    Null 空 null

  • ( 2) 引用數(shù)據(jù)類型 :
    數(shù)組 --Array
    對(duì)象 --Object
    函數(shù) --function

3.2 五種基本數(shù)據(jù)類型:
  1. 數(shù)字: 包括整數(shù)和小數(shù)

      數(shù)據(jù)型的 三個(gè)特殊值
      1 Infinity:代表無窮大,大于任何數(shù)值
      2 -Infinity,代表無窮小的  小于任何數(shù)值
      3 NaN:  not   a   number,代表一個(gè)非數(shù)值
      4 isNaN()----方法   用來驗(yàn)證是否為非數(shù)字類型
          如果不是  返回true
          如果是數(shù)字   返回false
    
  2. 字符串: 單引號(hào)或者雙引號(hào)或者`包裹的都是字符串; 字符串是字面量常量

           a  引號(hào)需要成對(duì)出現(xiàn)  嵌套規(guī)則: 內(nèi)單外雙  / 內(nèi)雙外單
           b  字符串轉(zhuǎn)義符   字符串轉(zhuǎn)義符  
       轉(zhuǎn)義符都是以'\'開頭  包裹在引號(hào)里
           符號(hào)                        功能
           \n                         換行符  n表示的是newline
           \\                          斜杠
           \'                         單引號(hào) 
           \"                         雙引號(hào) 
           \t                         tab縮進(jìn)符
           \b                         空格  b是blank的意思
    
           c  有些表單的注冊(cè)頁面對(duì)用戶的輸入內(nèi)容有長短限制  
               例如:用戶名的長度  密碼的字?jǐn)?shù)等等
               所以這里需要用到字符串的length屬性 來獲取長度的值
               str.length就是 ''中包裹的字符串的長度
    
           d  字符串拼接符  與Java一樣  任何數(shù)據(jù)與字符串拼接返回值都是字符串類型
           只要'+'左或右出現(xiàn)字符串 這個(gè)符號(hào)就是起到字符串拼接的作用   返回到也是一個(gè)字符串
       ######JavaScript 定義反斜杠加上字符可以表示字符自身
    
??? 模板字符串

包裹字符串${} {存放變量}--指代變量;
console.log(用戶${uname1}\n申請(qǐng)${hobby}課程會(huì)員意向:${intention});

?模板字符串可以解析換行和空格

image.png

  1. 布爾類型: 用來表示真假---真 true 假 false;用來做條件判斷

  2. 未定義類型: 當(dāng)變量聲明但是沒有賦值時(shí) 變量的值類型是undefined

  3. null 空類型;
    null一般是用來存放對(duì)象:尚未創(chuàng)建的對(duì)象 但此時(shí)對(duì)象還沒有創(chuàng)建好 既可以用null代替

?兩者的區(qū)別 : undefined 未初始化 不能確定數(shù)據(jù)類型 沒有內(nèi)存空間
null 已經(jīng)對(duì)變量進(jìn)行賦值了 但是數(shù)據(jù)類型是null的


null和undefined的區(qū)別

??? 變量:聲明

        不聲明  不定義  ---------使用報(bào)錯(cuò)
        不聲明  只賦值  ---------可以使用 
變量聲明的區(qū)別
3.3 檢測(cè)數(shù)據(jù)類型: typeof 變量
  • ?? js是弱語言 ,變量聲明后 未賦值之前是不能確定數(shù)據(jù)類型的,所以需要檢測(cè)數(shù)據(jù)類型

  • 注意: typeof后面不要() 不要當(dāng)作方法使用

3.3.2 字面量:

字面量是源代碼中一個(gè)固定值的表示法 通俗來說 就是字面量表示如何表達(dá)這個(gè)值
- 數(shù)字字面量: 8,9,10
- 字符串字面量: '我是救世大英雄'
- 布爾字面量: true false##### #####3.4 數(shù)據(jù)類型轉(zhuǎn)換:把一種類型轉(zhuǎn)換為另外一種類型
(1). ?使用prompt/input表單獲取到的數(shù)據(jù)類型 都是字符串類型的 只能拼接無法做運(yùn)算, 所以需要數(shù)據(jù)類型轉(zhuǎn)換;

  • 隱式轉(zhuǎn)換: 系統(tǒng)內(nèi)部自動(dòng)進(jìn)行數(shù)據(jù)轉(zhuǎn)換;
  1. '+' 字符拼接; 只要 + 的任意一側(cè)出現(xiàn)了字符串 運(yùn)算的結(jié)果就只能是字符串
  2. '- / *' 除了+以外的算術(shù)運(yùn)算符 比如 - * / 等都會(huì)把數(shù)據(jù)轉(zhuǎn)成數(shù)字類型
  3.    '+' +號(hào)作為正號(hào)解析可以轉(zhuǎn)換成Number
         +prompt('輸入數(shù)據(jù)吧');  ----typeof就是number
    
顯示轉(zhuǎn)換:
Number(數(shù)據(jù)):
    a. 轉(zhuǎn)換為數(shù)字類型(整數(shù)/小數(shù));
    b. 如果數(shù)據(jù)中存在非數(shù)字類型  轉(zhuǎn)換結(jié)果為 NaN  
    c. NaN也是數(shù)字類型的一種  表示為非數(shù)字  typeof 結(jié)果也是Number

    parseInt(string)              將String轉(zhuǎn)換為int整數(shù)類型(一刀切)
    parseFloat(String)            將String轉(zhuǎn)換為float浮點(diǎn)類型
    Number(變量)強(qiáng)制轉(zhuǎn)換函數(shù)        將string類型轉(zhuǎn)換為數(shù)值型

???parseInt(),parseFloat()做數(shù)據(jù)轉(zhuǎn)換時(shí) 實(shí)參以數(shù)字開頭 但是含有非數(shù)字內(nèi)容 會(huì)將數(shù)字部分轉(zhuǎn)換為整數(shù) 但是如果一開始就是非數(shù)值 值就是NaN;

數(shù)據(jù)類型的轉(zhuǎn)換
  把一種數(shù)據(jù)類型轉(zhuǎn)換為其他數(shù)據(jù)類型
    常用的三種轉(zhuǎn)換方式:   
            轉(zhuǎn)換為字符串類型
            轉(zhuǎn)換為數(shù)字類型
            轉(zhuǎn)換為布爾類型


  a   "+"拼接符   也叫做隱式轉(zhuǎn)換
  b   toString()方法    variable.toString()
  c   String() 強(qiáng)制類型轉(zhuǎn)換   String(variable)//頁面解釋這里用的就是String  constructor
      //類似于java中的頭String()方法和String()構(gòu)造方法

3.3 轉(zhuǎn)換為布爾類型
Boolean(變量)
代表空,否定的值會(huì)被轉(zhuǎn)換為false, "" 0 null undefined NaN;
其余的值則都會(huì)是true

  構(gòu)造大法好   String(vari)     Number(vari)   Boolean(vari)
拓展:

解釋型語言: js 運(yùn)行時(shí)及時(shí)進(jìn)行解釋 煮火鍋 栓一個(gè)吃一個(gè)

編譯型語言: java 代碼執(zhí)行之前編譯 全部菜炒完上桌才能吃
區(qū)別: 在于代碼執(zhí)行過程中給翻譯的時(shí)間不一樣

標(biāo)識(shí)符: 開發(fā)人員為變量函數(shù)起的名字
關(guān)鍵字: js已經(jīng)用了 不能再使用
保留字: 預(yù)留的關(guān)鍵字 現(xiàn)在還沒用 但是以后可能會(huì)用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、瀏覽器內(nèi)核-2、css與js引入方式 1、瀏覽器內(nèi)核 我們把瀏覽器中識(shí)別代碼繪制頁面的東西稱之為瀏覽器的內(nèi)核或...
    萌妹撒閱讀 858評(píng)論 0 1
  • 1. document load 和 document ready 的區(qū)別 頁面加載完成有兩種事件 load是當(dāng)頁...
    南崽閱讀 245評(píng)論 0 1
  • js的歷史 在上個(gè)世紀(jì)的1995年,當(dāng)時(shí)的網(wǎng)景公司正憑借其Navigator瀏覽器成為Web時(shí)代開啟時(shí)最著名的第一...
    LaBaby_閱讀 328評(píng)論 0 2
  • 1、JavaScript簡介 1.1、發(fā)展歷程 》 1992年:Nombas公司開發(fā)C-minus-minus(...
    TerryLiu05閱讀 202評(píng)論 0 0
  • 一、JavaScript起源 JavaScript誕生于1995年,它當(dāng)時(shí)的目的是為了表單輸入的驗(yàn)證。因?yàn)樵贘av...
    fly5閱讀 377評(píng)論 0 0

友情鏈接更多精彩內(nèi)容