本文是針對剛學編程的小白,都是一些基礎知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!
博客地址 點擊跳轉
js的介紹
- js的作用1.html是從語法意義上來構造網頁2.css是從視覺上美化界面3.js是從交互上提升用戶體驗
- js的出現:1995年出現,網景公司設計
- js的發展:原來叫做liveScript,后改名為JavaScript
- js的現狀
- 第一個js程序以及js的位置1.彈框輸入的認識 2.數值和字符的認識
注釋的認識
- 注釋的作用:用來說明代碼,提升代碼的可讀性
- 注釋的種類:1.單行注釋 使用 // 快捷鍵是crl +/ 2.多行注釋 使用/**/快捷鍵是 ctr +shift +/
變量
- 變量的定義:變量是用來存儲數字,字符以及可以表示這些東西的東西,
- 變量的使用1 .聲明變量 var 2.賦值變量 = 3.使用變量.例如
var a; a = 5;console.log(a); - 變量的命名:從語法意義上命名,變量是由字母數字,下劃線以及$符號組成,但是不能一數字開頭,而且不能使用保留字;從形式上變量是由他的實際表示的意思的英文組成,然后采用駝峰命名法,就是如果當一個變量是由多個單詞組成,那么當第二個單詞開始的每一個單詞的第二個字母都是大寫,例如 lastName
- 變量的類型1,數值 2.字符 3.布爾 4.對象 5.未定義類型
- 變量的賦值:用來賦值的值不會改變,被賦值的值會發生改變,
- 變量如果不賦值會輸出未定義類型:var a ; console.log(a);
- 其他類型和布爾類型的轉化1.對于數值類型,只要不是0就是真;2.對于字符類型,只有不是空就是真;3.對于對象類型,如果是null,才是假,其余是真的;4.對于未定義類型,都是假的
運算符
- 運算符:運算符是用來連接變量組成語句的符號
- 運算符的種類:算術運算符 關系運算符 邏輯運算符
- 算術運算符:1. + - * / % 2.* / %的優先級高于 + - 3.使用小括號可以提升優先級別 4. += 以及-=的認識,+= -=表示變量賦值的時候 ,如果用自己賦值給自己就可以使用+=或者-= ,例如 var a=5; a= a+5;可以替換為 a+=5;
5.++以及—的認識:一般++和—放在變量中使用,如果對于++,放在變量的后面,表示先使用變量,然后讓變量的值加一,賦值給原來的變量;如果放在變量的前面表示先讓變量的值加一,然后在賦值 - 關系運算符:1. > < >= <= == === != !== 2.特點:>=以及<=只有一個滿足條件就可以; ==只需要比較內容就可以;===既要先比較類型,也比較內容,如果兩個都符合才可以 != 和!==是== ===的相反;關系運算符的結果都是布爾類型;關系運算符不可以連續
- 邏輯運算符:1.&& || !2.特點:邏輯運算符進行運算符的都是布爾值 ;&&只有兩邊都是真的時候結果才是真;||只有有一個是真的返回結果就是真 ;!表示取反
邏輯運算的一些特點
- 對于&&運算符如果第一個表達式是真的那么第二個表達式需要計算，如果第一個表達式為假，第二個表達式不用計算
- 對于||如果第一個是真的,那么第二個不用計算,如果第一個為假,那么第二個需要計算.
- 數值或者字符參與邏輯運算:
如果返回真,對于&&運算符,那就返回的結果是第二個表示真的值,如果返回假的,那么返回第一個為假的值;
對于||,如果結果為真,返回第一個為真的值,如果為假,返回最后一個為假的值 - 運算符的優先級:1.算術運算符高于關系運算符,關系運算符高于邏輯運算符 2.一般單目運算符高于雙目運算符3.賦值運算符的等級最低 4.&&運算符高于||運算符
if語句的認識
- 基本if語句的形式:if(判斷條件){如果條件成立執行代碼}else{如果條件不成立執行這里的代碼};
- 多重if語句的形式:if(判斷條件1){如果條件1成立就執行代碼}else if(判斷條件二){如果條件二成立就執行括號中的代碼}else{如果都不成立,就執行這里的代碼}
*多重if語句的跳樓現象,也叫阻斷現象:就是對于多重if語句如果,第一個條件成立了,后面的所有的條件都不再判斷, - 阻止跳樓現象:就是寫的時候,把else去掉就可以了
- 嵌套if語句:就是if語句中有if語句,形式:if(if(){}else{} )else{if(){}else{}};
- 補充知識點：+和連字符的區別，如果+兩邊都是數值，+表示加號，只有有一個字符，就是表示練字符，連字符的結果是字符類型
循環語句的認識
- 循環語句的類型：for循環和while循環
- for循環的形式：for(初始化條件；終止條件；變化值）
- for的一般的實際例子for(var i = 0;i < 100;ｉ＋＋）{}
- for循環的過程：就是根據初始化條件，然后和終止條件判斷，如果符合終止條件，就執行大括號中的代碼，然后讓初始條件變化，然后和終止條件比較，如果符合，就繼續執行對應的代碼，直到不成立為止，停止循環。
常見數學公式的使用
- 取出最大值以及最小值的公式:max(); min();
- 取出一個數值的正的平方根:sqart();
- 設置一個數的幾次方:pow()
- 輸入框的認識和使用：prompt（）
- 轉化整數的公式的認識:1.parseInt() 2.可以直接把數值字符轉化成整數,可以截斷字符,截取出數值,但是必須第一個字母是數字字符
三個for循環
<script>
// 1到100相加 for()語句
var num = 0, num1 = 0, num2 = 0;
for(var i = 0; i <= 100; i ++) {
num += i;
}
console.log(num);
// while語句 不一定執行 條件滿足才執行
var j = 1;
while(j <= 100) {
num1 += j;
j ++;
}
console.log(num1);
// do while 至少執行一次 哪怕條件不滿足都會執行一次
var k = 1;
do {
num2 += k;
k ++
}
while(k <= 100);
console.log(num2);
</script>
入口函數
window.onload = function(){
//內部放js 這是一個超大體 這個函數的意思就是說 等頁面加載完成之后
//才來執行函數體里面的js部分 等頁面結構 樣式 節點 圖片等都加載完畢
}
數據類型
- 字符型 : string
- 加引號的都是字符型
- 強制轉換String(num); S一定要大寫
var num = 10; console.log(typeof String(num)); - 數值型 :
- 數值前面加上0代表是8進制 換算公式是 0乘8的0次方+n乘8的1次方
var num = 020;
console.log(num);
// 輸出的數字是16 轉換 Number() N一定要大寫
- 布爾型 :
boolean 1.true 2.false
var num = 10;
console.log(typeof !!num); // 數值型轉換成布爾型 或者用Boolean();來轉換 B一定要大寫
- 對象類型:
null : 對象為空 輸出undefined - undefined類型;
parseInt取整
console.log(parseInt(110,2));
// 輸出6 表示2進制 把110這個2進制轉換成10進制
// 2進制換算 0*2的0次方+1*2的1次方+1*2的2次
變量提升
var num =10;
fun();
function fun(){
console.log(num);
var num = 20; // 輸出 undefined
}
// 這個函數相當于下面這個函數
function fun(){
// 先執行內部變量 然后把內部變量提升至函數 光提升不賦值 所以輸出就是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>
// 事件源: 要觸發的對象 手 一般情況下是名詞 發起者
// 事件: 怎么觸發的這個事情 按 一般情況下是動詞 鼠標(點擊/按鍵盤/經過)
// 事件處理程序: 發生了什么事 燈亮了
// 格式:
// 事件源.事件 = function(){事件處理函數}
// 案例:
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的區別
- break:在循環中如果使用,表示結束整個的該循環,直接跳出循環,不在執行循環
- continue:表示結束此次循環,下一次繼續執行
switch語句
:1.形式
:switch(變量或者字符
){case 條件一
: 執行代碼
;break;case 條件二
執行代碼
;break;default:執行代碼
}2.執行過程
:根據條件判斷如果符合條件就執行對應的代碼
,入股條件都不符合就執行
default中的代碼
,3.特點
:如果條件都有
,就可以不寫
default
函數的認識
- 函數定義:函數就是一堆代碼的集合用來說明某一個功能的
- 函數的使用 1.函數聲明
function 2.函數賦值實現
- 函數調用
通過函數名稱 -
()來調用
小括號表示函數理智調用
函數必須調用
不然沒有意義
4.函數聲明和賦值一般放在一起叫做函數定義
- 函數定義的兩種方式:
1.var a = function(){}
2.function a(){} ,都是表示函數的定義
大括號中叫做函數體
用來放置函數的代碼的 - 函數的參數:
- 函數參數的種類
形式參數
實際參數 - 形式參數
在函數定義的時候
傳入的參數叫做形式參數 - 函數的實際參數
在函數調用的時候傳入的參數是實際參數 - 變量作用域的認識:局部變量
就是定義在函數內部的變量 - 聲明在函數外部的變量
- 變量的訪問,采用就近原則;就是如果在函數內部訪問一個變量,那么回去函數內部看是否有對應的變量定義,如果定義了,我們訪問的就是這個變量,如果沒有定義我們就去函數外面訪問變量,如果都沒有,就訪問不到.
- 變量聲明的提升;就是如果在一個函數中訪問一個在訪問后定義的變量
我們會把這個變量的聲明提升
js具體的作用
- js可以操作樣式
(css):直接修改某一個盒子的高度
獲取標簽的方法是
getelementById(); - js可以操作結構
(html):設置一個雙標簽的內容的是
innerHTML包含了標簽的中間的所有的東西
事件的基本認識
- 事件的三要素:事件源
就是誰被觸發了,事件屬性
就是你做了什么導致了結果,事件指令
就是事件出發的結果或者影響或者事件觸發后要去做的事情,形式是function(){} - 事件三要素的組合:事件源.事件屬性 = 事件指令
- 點擊事件的認識以及應用:onClick,通過點擊按鈕切換盒子的寬度顏色,以及換膚來使用加深理解
- 鼠標移動事件的認識以及應用:通過鼠標移動上去修改圖片的顯示以及選取食物切來加深鼠標移上去以及出來的事件
-
transform屬性的使用以及應用
- Transform使用的時候是相對于第一次的位置為基準值
- Transform旋轉后會改變坐標系
- 不同的瀏覽器的屬性值是不一樣的.
- if語句的應用:通過使用競價的來理解
- switch語句的應用:使用selet標簽顯示不同的語句
- 當select發生改變的時候,我們直接使用onchange來監聽發生了改變;
- 當需要獲取選中的值得時候,使用select標簽的value屬性來獲取
- 代碼的抽取:使用電腦選取切換來實現,代碼抽取的原則:
- 相同的東西放在一起
- 不同的東西作為參數
- window.onlaod的認識:
- 通過搜索框來實現,
window.onload表示當窗口加載完畢了,這個時候我們在js代碼中獲取標簽才可以獲取到,所以如果我們把js寫在js標簽的上面我們就需要先當窗口加載完畢后來獲取對應的標簽.
- 通過搜索框來實現,
- 獲取焦點以及失去光標焦點的認識:我們通過使用制作簡單的搜索框來實現對象的效果.
- 示例代碼 : 附小demo一個 幫助更好的理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-函數傳參控制盒子</title>
<style>
div{
width: 100px;
height: 100px;
margin: 20px;
background-color: darkgreen;
display: none;
}
</style>
<script>
// 四個盒子功能相同 都是為了點擊顯示 所以調用一個函數
function fn(obj){ // 形參是為了接收實參 有接必有送 從下面調上來
var sin = document.getElementById(obj); // 獲取
sin.style.display = "block"; // 執行
}
</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>
一 一 對 應
一 一 對 應
一 一 對 應
一 一 對 應
