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

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

js的介紹

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

注釋的認(rèn)識

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

變量

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

運算符

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

邏輯運算的一些特點

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

if語句的認(rèn)識

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

循環(huán)語句的認(rèn)識

• 循環(huán)語句的類型：for循環(huán)和while循環(huán)
• for循環(huán)的形式：for(初始化條件坎穿；終止條件顷牌；變化值）
• for的一般的實際例子for(var i = 0;i < 100;ｉ＋＋）{}
• for循環(huán)的過程：就是根據(jù)初始化條件剪芍，然后和終止條件判斷，如果符合終止條件窟蓝，就執(zhí)行大括號中的代碼罪裹，然后讓初始條件變化，然后和終止條件比較运挫，如果符合状共，就繼續(xù)執(zhí)行對應(yīng)的代碼，直到不成立為止谁帕，停止循環(huán)口芍。

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

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

三個for循環(huán)

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

入口函數(shù)

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

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

• 字符型 : string
• 加引號的都是字符型
• 強(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();來轉(zhuǎn)換 B一定要大寫

• 對象類型:
  null : 對象為空 輸出undefined
• undefined類型;

parseInt取整

console.log(parseInt(110,2));   
//  輸出6  表示2進(jìn)制  把110這個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  
}
//    這個函數(shù)相當(dāng)于下面這個函數(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ā)的對象 手  一般情況下是名詞 發(fā)起者
//    事件: 怎么觸發(fā)的這個事情 按  一般情況下是動詞 鼠標(biāo)(點擊/按鍵盤/經(jīng)過)
//    事件處理程序: 發(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é)束整個的該循環(huán),直接跳出循環(huán),不在執(zhí)行循環(huán)
• continue:表示結(jié)束此次循環(huán),下一次繼續(xù)執(zhí)行

switch語句

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

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

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

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

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

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

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

js具體的作用

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

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

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

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

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

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

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

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

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

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

<!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>
        // 四個盒子功能相同 都是為了點擊顯示 所以調(diào)用一個函數(shù)
        function fn(obj){    //  形參是為了接收實參 有接必有送  從下面調(diào)上來
            var sin = document.getElementById(obj);   // 獲取
            sin.style.display = "block";              // 執(zhí)行
        }
    </script>
</head>
<body>
<button onclick="fn('demo1')">第1個按鈕</button>
<button onclick="fn('demo2')">第2個按鈕</button>
<button onclick="fn('demo3')">第3個按鈕</button>
<button onclick="fn('demo4')">第4個按鈕</button>
<div id="demo1">1</div>
<div id="demo2">2</div>
<div id="demo3">3</div>
<div id="demo4">4</div>
</body>

一 一 對 應(yīng)

一 一 對 應(yīng)

一 一 對 應(yīng)

一 一 對 應(yīng)