本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!!

博客地址 點(diǎn)擊跳轉(zhuǎn)

js的介紹

• js的作用1.html是從語(yǔ)法意義上來(lái)構(gòu)造網(wǎng)頁(yè)2.css是從視覺(jué)上美化界面3.js是從交互上提升用戶體驗(yàn)
• js的出現(xiàn):1995年出現(xiàn),網(wǎng)景公司設(shè)計(jì)
• js的發(fā)展:原來(lái)叫做liveScript,后改名為JavaScript
• js的現(xiàn)狀
• 第一個(gè)js程序以及js的位置1.彈框輸入的認(rèn)識(shí) 2.數(shù)值和字符的認(rèn)識(shí)

注釋的認(rèn)識(shí)

• 注釋的作用:用來(lái)說(shuō)明代碼,提升代碼的可讀性
• 注釋的種類:1.單行注釋 使用 // 快捷鍵是crl +/ 2.多行注釋 使用/**/快捷鍵是 ctr +shift +/

變量

• 變量的定義:變量是用來(lái)存儲(chǔ)數(shù)字,字符以及可以表示這些東西的東西,
• 變量的使用1 .聲明變量 var 2.賦值變量 = 3.使用變量.例如
  var a; a = 5;console.log(a);
• 變量的命名:從語(yǔ)法意義上命名,變量是由字母數(shù)字,下劃線以及$符號(hào)組成,但是不能一數(shù)字開(kāi)頭,而且不能使用保留字;從形式上變量是由他的實(shí)際表示的意思的英文組成,然后采用駝峰命名法,就是如果當(dāng)一個(gè)變量是由多個(gè)單詞組成,那么當(dāng)?shù)诙€(gè)單詞開(kāi)始的每一個(gè)單詞的第二個(gè)字母都是大寫,例如 lastName
• 變量的類型1,數(shù)值 2.字符 3.布爾 4.對(duì)象 5.未定義類型
• 變量的賦值:用來(lái)賦值的值不會(huì)改變,被賦值的值會(huì)發(fā)生改變,
• 變量如果不賦值會(huì)輸出未定義類型:var a ; console.log(a);
• 其他類型和布爾類型的轉(zhuǎn)化1.對(duì)于數(shù)值類型,只要不是0就是真;2.對(duì)于字符類型,只有不是空就是真;3.對(duì)于對(duì)象類型,如果是null,才是假,其余是真的;4.對(duì)于未定義類型,都是假的

運(yùn)算符

• 運(yùn)算符:運(yùn)算符是用來(lái)連接變量組成語(yǔ)句的符號(hào)
• 運(yùn)算符的種類:算術(shù)運(yùn)算符 關(guān)系運(yùn)算符 邏輯運(yùn)算符
• 算術(shù)運(yùn)算符:1. + - * / % 2.* / %的優(yōu)先級(jí)高于 + - 3.使用小括號(hào)可以提升優(yōu)先級(jí)別 4. += 以及-=的認(rèn)識(shí),+= -=表示變量賦值的時(shí)候 ,如果用自己賦值給自己就可以使用+=或者-= ,例如 var a=5; a= a+5;可以替換為 a+=5;
  5.++以及—的認(rèn)識(shí):一般++和—放在變量中使用,如果對(duì)于++,放在變量的后面,表示先使用變量,然后讓變量的值加一,賦值給原來(lái)的變量;如果放在變量的前面表示先讓變量的值加一,然后在賦值
• 關(guān)系運(yùn)算符:1. > < >= <= == === != !== 2.特點(diǎn):>=以及<=只有一個(gè)滿足條件就可以; ==只需要比較內(nèi)容就可以;===既要先比較類型,也比較內(nèi)容,如果兩個(gè)都符合才可以 != 和!==是== ===的相反;關(guān)系運(yùn)算符的結(jié)果都是布爾類型;關(guān)系運(yùn)算符不可以連續(xù)
• 邏輯運(yùn)算符:1.&& || !2.特點(diǎn):邏輯運(yùn)算符進(jìn)行運(yùn)算符的都是布爾值 ;&&只有兩邊都是真的時(shí)候結(jié)果才是真;||只有有一個(gè)是真的返回結(jié)果就是真 ;!表示取反

邏輯運(yùn)算的一些特點(diǎn)

• 對(duì)于&&運(yùn)算符如果第一個(gè)表達(dá)式是真的那么第二個(gè)表達(dá)式需要計(jì)算，如果第一個(gè)表達(dá)式為假，第二個(gè)表達(dá)式不用計(jì)算
• 對(duì)于||如果第一個(gè)是真的,那么第二個(gè)不用計(jì)算,如果第一個(gè)為假,那么第二個(gè)需要計(jì)算.
• 數(shù)值或者字符參與邏輯運(yùn)算:
  如果返回真,對(duì)于&&運(yùn)算符,那就返回的結(jié)果是第二個(gè)表示真的值,如果返回假的,那么返回第一個(gè)為假的值;
  對(duì)于||,如果結(jié)果為真,返回第一個(gè)為真的值,如果為假,返回最后一個(gè)為假的值
• 運(yùn)算符的優(yōu)先級(jí):1.算術(shù)運(yùn)算符高于關(guān)系運(yùn)算符,關(guān)系運(yùn)算符高于邏輯運(yùn)算符 2.一般單目運(yùn)算符高于雙目運(yùn)算符3.賦值運(yùn)算符的等級(jí)最低 4.&&運(yùn)算符高于||運(yùn)算符

if語(yǔ)句的認(rèn)識(shí)

• 基本if語(yǔ)句的形式:if(判斷條件){如果條件成立執(zhí)行代碼}else{如果條件不成立執(zhí)行這里的代碼};
• 多重if語(yǔ)句的形式:if(判斷條件1){如果條件1成立就執(zhí)行代碼}else if(判斷條件二){如果條件二成立就執(zhí)行括號(hào)中的代碼}else{如果都不成立,就執(zhí)行這里的代碼}
  *多重if語(yǔ)句的跳樓現(xiàn)象,也叫阻斷現(xiàn)象:就是對(duì)于多重if語(yǔ)句如果,第一個(gè)條件成立了,后面的所有的條件都不再判斷,
• 阻止跳樓現(xiàn)象:就是寫的時(shí)候,把else去掉就可以了
• 嵌套if語(yǔ)句:就是if語(yǔ)句中有if語(yǔ)句,形式:if(if(){}else{} )else{if(){}else{}};
• 補(bǔ)充知識(shí)點(diǎn)：+和連字符的區(qū)別，如果+兩邊都是數(shù)值，+表示加號(hào)，只有有一個(gè)字符，就是表示練字符，連字符的結(jié)果是字符類型

循環(huán)語(yǔ)句的認(rèn)識(shí)

• 循環(huán)語(yǔ)句的類型：for循環(huán)和while循環(huán)
• for循環(huán)的形式：for(初始化條件；終止條件；變化值）
• for的一般的實(shí)際例子for(var i = 0;i < 100;ｉ＋＋）{}
• for循環(huán)的過(guò)程：就是根據(jù)初始化條件，然后和終止條件判斷，如果符合終止條件，就執(zhí)行大括號(hào)中的代碼，然后讓初始條件變化，然后和終止條件比較，如果符合，就繼續(xù)執(zhí)行對(duì)應(yīng)的代碼，直到不成立為止，停止循環(huán)。

常見(jiàn)數(shù)學(xué)公式的使用

• 取出最大值以及最小值的公式:max(); min();
• 取出一個(gè)數(shù)值的正的平方根:sqart();
• 設(shè)置一個(gè)數(shù)的幾次方:pow()
• 輸入框的認(rèn)識(shí)和使用：prompt（）
• 轉(zhuǎn)化整數(shù)的公式的認(rèn)識(shí):1.parseInt() 2.可以直接把數(shù)值字符轉(zhuǎn)化成整數(shù),可以截?cái)嘧址?截取出數(shù)值,但是必須第一個(gè)字母是數(shù)字字符

三個(gè)for循環(huán)

<script>
    // 1到100相加  for()語(yǔ)句
    var num = 0, num1 = 0, num2 = 0;
    for(var i = 0; i <= 100; i ++) {
        num += i;
    }
    console.log(num);
    
    // while語(yǔ)句 不一定執(zhí)行 條件滿足才執(zhí)行
    var j = 1;
    while(j <= 100) {
        num1 += j;
        j ++;
    }
    console.log(num1);
    
    // do while 至少執(zhí)行一次 哪怕條件不滿足都會(huì)執(zhí)行一次
    var k = 1;
    do {
        num2 += k;
        k ++
    }
    while(k <= 100);
    console.log(num2);
</script>

入口函數(shù)

window.onload = function(){
      //內(nèi)部放js 這是一個(gè)超大體 這個(gè)函數(shù)的意思就是說(shuō) 等頁(yè)面加載完成之后
      //才來(lái)執(zhí)行函數(shù)體里面的js部分 等頁(yè)面結(jié)構(gòu) 樣式 節(jié)點(diǎn) 圖片等都加載完畢
}

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

• 字符型 : string
• 加引號(hào)的都是字符型
• 強(qiáng)制轉(zhuǎn)換String(num); S一定要大寫
  var num = 10; console.log(typeof String(num));
• 數(shù)值型 :
• 數(shù)值前面加上0代表是8進(jìn)制 換算公式是 0乘8的0次方+n乘8的1次方

  var num = 020; 
  console.log(num);
// 輸出的數(shù)字是16  轉(zhuǎn)換 Number()  N一定要大寫

• 布爾型 :
  boolean 1.true 2.false

var num = 10;      
console.log(typeof !!num);  // 數(shù)值型轉(zhuǎn)換成布爾型 或者用Boolean();來(lái)轉(zhuǎn)換 B一定要大寫

• 對(duì)象類型:
  null : 對(duì)象為空 輸出undefined
• undefined類型;

parseInt取整

console.log(parseInt(110,2));   
//  輸出6  表示2進(jìn)制  把110這個(gè)2進(jìn)制轉(zhuǎn)換成10進(jìn)制
//  2進(jìn)制換算 0*2的0次方+1*2的1次方+1*2的2次

變量提升

var num =10;    
fun();    
function fun(){      
console.log(num);       
var num = 20;    //  輸出 undefined  
}
//    這個(gè)函數(shù)相當(dāng)于下面這個(gè)函數(shù)    
function fun(){        
//    先執(zhí)行內(nèi)部變量 然后把內(nèi)部變量提升至函數(shù) 光提升不賦值 所以輸出就是undefined        
var num;
console.log(num);
num = 10;
}

事件三要素 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-事件三要素</title>
    <style>
        #demo{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<button id="btn">改變寬度</button>
<button id="tn">改變高度</button>
<button id="nn">改變顏色</button>
<script>
//    事件源: 要觸發(fā)的對(duì)象 手  一般情況下是名詞 發(fā)起者
//    事件: 怎么觸發(fā)的這個(gè)事情 按  一般情況下是動(dòng)詞 鼠標(biāo)(點(diǎn)擊/按鍵盤/經(jīng)過(guò))
//    事件處理程序: 發(fā)生了什么事 燈亮了
//    格式:
//    事件源.事件 = function(){事件處理函數(shù)}

//    案例:
    var dem = document.getElementById("demo");   // 獲得id為demo的div盒子給demo
    var btn = document.getElementById("btn");    // 獲得按鈕

//    事件三要素
    btn.onclick = function(){
        demo.style.width = "400px";
    }
    tn.onclick = function(){
        demo.style.height = "300px";
    }
    nn.onclick = function(){
        demo.style.backgroundColor = "red";
    }
</script>
</body>
</html>

事件匯總

**全部事件**

break和continue的區(qū)別

• break:在循環(huán)中如果使用,表示結(jié)束整個(gè)的該循環(huán),直接跳出循環(huán),不在執(zhí)行循環(huán)
• continue:表示結(jié)束此次循環(huán),下一次繼續(xù)執(zhí)行

switch語(yǔ)句

:1.形式
:switch(變量或者字符
){case 條件一
: 執(zhí)行代碼
 ;break;case 條件二
 執(zhí)行代碼
 ;break;default:執(zhí)行代碼
}2.執(zhí)行過(guò)程
:根據(jù)條件判斷如果符合條件就執(zhí)行對(duì)應(yīng)的代碼
,入股條件都不符合就執(zhí)行
default中的代碼
,3.特點(diǎn)
:如果條件都有
,就可以不寫
default

函數(shù)的認(rèn)識(shí)

• 函數(shù)定義:函數(shù)就是一堆代碼的集合用來(lái)說(shuō)明某一個(gè)功能的
• 函數(shù)的使用 1.函數(shù)聲明
  function 2.函數(shù)賦值實(shí)現(xiàn)

• 函數(shù)調(diào)用
  通過(guò)函數(shù)名稱
• ()來(lái)調(diào)用
  小括號(hào)表示函數(shù)理智調(diào)用
  函數(shù)必須調(diào)用
  不然沒(méi)有意義
  4.函數(shù)聲明和賦值一般放在一起叫做函數(shù)定義

• 函數(shù)定義的兩種方式:
  1.var a = function(){}
  2.function a(){} ,都是表示函數(shù)的定義
  大括號(hào)中叫做函數(shù)體
  用來(lái)放置函數(shù)的代碼的
• 函數(shù)的參數(shù):

• 函數(shù)參數(shù)的種類
  形式參數(shù)
  實(shí)際參數(shù)
• 形式參數(shù)
  在函數(shù)定義的時(shí)候
  傳入的參數(shù)叫做形式參數(shù)
• 函數(shù)的實(shí)際參數(shù)
  在函數(shù)調(diào)用的時(shí)候傳入的參數(shù)是實(shí)際參數(shù)
• 變量作用域的認(rèn)識(shí):局部變量
  就是定義在函數(shù)內(nèi)部的變量
• 聲明在函數(shù)外部的變量

• 變量的訪問(wèn),采用就近原則;就是如果在函數(shù)內(nèi)部訪問(wèn)一個(gè)變量,那么回去函數(shù)內(nèi)部看是否有對(duì)應(yīng)的變量定義,如果定義了,我們?cè)L問(wèn)的就是這個(gè)變量,如果沒(méi)有定義我們就去函數(shù)外面訪問(wèn)變量,如果都沒(méi)有,就訪問(wèn)不到.
• 變量聲明的提升;就是如果在一個(gè)函數(shù)中訪問(wèn)一個(gè)在訪問(wèn)后定義的變量
  我們會(huì)把這個(gè)變量的聲明提升

js具體的作用

• js可以操作樣式
  (css):直接修改某一個(gè)盒子的高度
  獲取標(biāo)簽的方法是
  getelementById();
• js可以操作結(jié)構(gòu)
  (html):設(shè)置一個(gè)雙標(biāo)簽的內(nèi)容的是
  innerHTML包含了標(biāo)簽的中間的所有的東西

事件的基本認(rèn)識(shí)

• 事件的三要素:事件源
  就是誰(shuí)被觸發(fā)了,事件屬性
  就是你做了什么導(dǎo)致了結(jié)果,事件指令
  就是事件出發(fā)的結(jié)果或者影響或者事件觸發(fā)后要去做的事情,形式是function(){}
• 事件三要素的組合:事件源.事件屬性 = 事件指令
• 點(diǎn)擊事件的認(rèn)識(shí)以及應(yīng)用:onClick,通過(guò)點(diǎn)擊按鈕切換盒子的寬度顏色,以及換膚來(lái)使用加深理解
• 鼠標(biāo)移動(dòng)事件的認(rèn)識(shí)以及應(yīng)用:通過(guò)鼠標(biāo)移動(dòng)上去修改圖片的顯示以及選取食物切來(lái)加深鼠標(biāo)移上去以及出來(lái)的事件
• transform屬性的使用以及應(yīng)用

• Transform使用的時(shí)候是相對(duì)于第一次的位置為基準(zhǔn)值
• Transform旋轉(zhuǎn)后會(huì)改變坐標(biāo)系
• 不同的瀏覽器的屬性值是不一樣的.

• if語(yǔ)句的應(yīng)用:通過(guò)使用競(jìng)價(jià)的來(lái)理解
• switch語(yǔ)句的應(yīng)用:使用selet標(biāo)簽顯示不同的語(yǔ)句
  • 當(dāng)select發(fā)生改變的時(shí)候,我們直接使用onchange來(lái)監(jiān)聽(tīng)發(fā)生了改變;

• 當(dāng)需要獲取選中的值得時(shí)候,使用select標(biāo)簽的value屬性來(lái)獲取

• 代碼的抽取:使用電腦選取切換來(lái)實(shí)現(xiàn),代碼抽取的原則:

• 相同的東西放在一起
• 不同的東西作為參數(shù)

• window.onlaod的認(rèn)識(shí):
  • 通過(guò)搜索框來(lái)實(shí)現(xiàn),window.onload表示當(dāng)窗口加載完畢了,這個(gè)時(shí)候我們?cè)趈s代碼中獲取標(biāo)簽才可以獲取到,所以如果我們把js寫在js標(biāo)簽的上面我們就需要先當(dāng)窗口加載完畢后來(lái)獲取對(duì)應(yīng)的標(biāo)簽.
• 獲取焦點(diǎn)以及失去光標(biāo)焦點(diǎn)的認(rèn)識(shí):我們通過(guò)使用制作簡(jiǎn)單的搜索框來(lái)實(shí)現(xiàn)對(duì)象的效果.

• 示例代碼 : 附小demo一個(gè) 幫助更好的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-函數(shù)傳參控制盒子</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: darkgreen;
            display: none;
        }
    </style>
    <script>
        // 四個(gè)盒子功能相同 都是為了點(diǎn)擊顯示 所以調(diào)用一個(gè)函數(shù)
        function fn(obj){    //  形參是為了接收實(shí)參 有接必有送  從下面調(diào)上來(lái)
            var sin = document.getElementById(obj);   // 獲取
            sin.style.display = "block";              // 執(zhí)行
        }
    </script>
</head>
<body>
<button onclick="fn('demo1')">第1個(gè)按鈕</button>
<button onclick="fn('demo2')">第2個(gè)按鈕</button>
<button onclick="fn('demo3')">第3個(gè)按鈕</button>
<button onclick="fn('demo4')">第4個(gè)按鈕</button>
<div id="demo1">1</div>
<div id="demo2">2</div>
<div id="demo3">3</div>
<div id="demo4">4</div>
</body>

一 一 對(duì) 應(yīng)

一 一 對(duì) 應(yīng)

一 一 對(duì) 應(yīng)

一 一 對(duì) 應(yīng)