JavaScript基礎系列

JavaScript基礎系列

JavaScript是一種基於對象和事件驅動的客戶端腳本語言。

JavaScript的註釋

// 單行 /**/ 多行註釋

JavaScript變數，函數名和操作符都是區分大小寫的。

標識符是變數，函數，屬性的名稱，函數里的參數。

命名規則：

字母，數字，下劃線，美元符號，不能以數字開頭

變數的聲明與賦值

使用var聲明變數
省略var聲明的變數是全局變數，不過不推薦使用

JavaScript的基礎語法和JavaScript的變數

數據類型和typeof

JavaScript的數據類型分 簡單數據類型（基本數據類型）和複雜數據類型。

undefined, null, boolean, number, string

複雜數據類型，object

typeof檢測變數的類型，變數的類型取決於變數的類型，變數是沒有類型的。返回值：string,number,等。

undefined沒有定義，變數沒有賦值，是undefined

null值為空對象，undefined==null為true

number, isNaN(), Number(), parseInt(), parseFloat()

number:表示整數和浮點數

如何與NaN的操作都會返回NaN，與任何值都不相等，包括本身。

isNaN(n)，檢測n是否是“非數值”，返回值是boolean

parseInt():會忽略字元串前面的空格，直到找到第一個非空格字元。

console.log(parseInt("0xf",16));

toString和String()轉換為字元串，使用toString()可以將轉換為字元串，如果不知道要轉換的值是不是Null，和undefined的情況下，可以使用string()函數。

除0，“”，null，undefined之外的所有數字，轉換為布爾型都是true。

邏輯操作符，與，或，非

邏輯或

流程式控制制語句

分支語句,prompt()的應用,alert()的應用

if(codition){
}else{
}
nan和任何內容都不相等，包括它本身

獲取星期

new Date().getDay() 獲取星期，number(0-6)

迴圈語句

for for-in while do-while

for(語句1;語句2;語句3){
...
}

break和continue語句

continue: 結束本次迴圈，繼續開始下一次

JavaScript中的函數，作用，定義，調用

函數的返回值，通過return語句，實現返回值。

function add(num1,num2){
 var sum = num1+num2;
 return sum;
}
console.log(add(1,2));
// 3

return語句在函數中可以停止並立即退出，return語句可以不帶有任何返回值，用於停止函數執行。

arguments是ecmascript中的參數在內部用一個數組表示，arguments對象只是與數組類似，並不是array的實例，[]語法用於訪問它的每一個元素。

function getAvg(){
 var sum = 0; len = arguments.length,i;
 for(i=0;i<len;i++){
  sum+=arguments[i];
 }
}

JavaScript中的內置對象

字元串，函數，數組，內置對象

array, string, math, date

數組是用來存儲一組數據的。

數組方法

push()
unshift()
pop()
shift()

join()
語法：
arrayObject.join();
功能：
用於把數組中的所有元素放入一個字元串

reverse()
語法：
stringObject.reverse()
功能：
用於顛倒數組中元素的順序

sort()
語法：
arrayObject.sort()
功能：
用於數組的元素進行排序

concat()
語法：
arrayObject.concat();
功能：
用於連接兩個或多個數組

slice()
語法：
arrayObject.slice(start,end)
功能：
從已有的數組中返回選定的元素

for(var i=0; i<a.length; i++){
 b.push(a[i]);
}
b=[].concat(a);
b=a.slice(0);

數組中的splice()方法刪除，插入，替換數組

arrayObject.splice(index,count)
刪除從Index處開始的元素
返回的是，含有被刪除的元素的數組
count刪除個數

arrayObject.splice(index,0,item1...)
在指定位置插入值
參數：
index起始位置
0要刪除的個數
item1... 要插入的項
返回數組

arrayObject,splice(index,count,item1...)
插入值
返回從原始數組中刪除的項

//刪除
var delArr=arr.splice(2,0);
//插入
var insertArr=arr.splice(3,0,"m","n",88);
//替換
var replaceArr=arr.splice(1,2,"x","y","z");

數組的方法indexOf()和lastIndexOf()

arrayObject.indexOf();
從數組的開頭開始向後查找
indexOf(2,0);
第一個參數，查找的元素
第二個參數，從下標哪裡查找

arrayObject.lastIndexOf();
從數組的末尾開始查找

function ArrayIndexOf(arr,value){
 // 檢測value在arr中出現的位置
 for(var i=0; i<arr.length; i++){
  if(arr[i] === value){
   return i;
  }
 }
 return -1;
}

字元串對象

charAt()
stringObject.charAt(index)
返回stringObject中index位置的字元

charCodeAt()
返回stringObject中index位置字元的字元編碼

indexOf()
lastIndexOf()

字元串對象的截取方法：

slice()
stringObject.slice(start,end)
截取子字元串

substring() 不可負數，負數當做0
substr(start,len)字元總數

// 獲取擴展名
function get(url){
 var pos = url.lastIndexOf(".");
 return url.substr(pos);
}

分隔符：split();

stringObject.split()
把一個字元串分割成字元串數組

替換replace()
stringObject.replace();
在字元串中用一些字元替換另一些字元
返回值為string

toUpperCase()和toLowerCase()
stringObject.toUpperCase()把字元串轉換為大寫

stringObject.toLowerCase()把字元串轉換為小寫

JavaScriptDOM基礎，事件，對象

JavaScript的組成由ECMAScript，Browser Objects(DOM,BOM)組成的。

獲取一個元素和訪問一個元素的樣式，設置和刪除屬性。

document.getElementById("id")
document.getElementsByTagName("tag")

設置元素樣式
ele.style.styleName=styleValue

innerHTML屬性，className屬性，Dom元素上添加刪除獲取

ele.innerHTML=“dashucoding”
獲取，設置
ele.className=""
獲取，設置
重新設置類的，會替換原來存在的name的

獲取
ele.innerHTML
ele.className

獲取屬性
ele.getAttribute("attribute")
獲取ele元素的attribute屬性

設置屬性
ele.setAttribute("attribute",value);

刪除屬性
ele.removeAttribute("attribute");

事件是文檔或瀏覽器視窗中發生的一些特定的交互瞬間。

滑鼠事件

onload:頁面載入時觸發
onclick:滑鼠點擊時觸發
onmouseover:滑鼠滑過時觸發
onmouseout:滑鼠離開時觸發
onfoucs: 獲取焦點時
onblur:失去焦點時
onchange:域的內容改變時

var btn = document.getElementById("btn");
btn.onclick=function(){
 if(this.className=="dasha"){
  this.className="dashucoding";
  this.innerHTML="好";
 }else{
  
 }
}

btn.onclick = clickBtn;
function clickBtn(){
...
}

.btn{ width: 140px; height: 30px; line-height: 30px; background: green; color: #fff; font-size: 14px; text-align: center; border-radius: 5px; cursor: pointer;}

<script>
// 頁面載入時執行
window.onload=function(){
 // 獲取box
 var box=document.getElementById("box");
 var clicked = function() {
  alert('點擊');
 }
 box.onclick = clicked;
}

<script>
document.onkeypress=function(event){
 console.log(event.keyCode);
}
</script>

JavaScript中BOM對象

bom瀏覽器對象模型

對象:
window
navigator
screen
history
location
document
event

alert-confirm-prompt

window.open(pageurl,name,parameters)
打開一個新的瀏覽器視窗或查找一個已知的視窗
pageurl為子視窗路徑
name聲明瞭新視窗的名稱
parameters為視窗參數

JavaScript BOM

什麼是BOM，window對象，window對象的控制，彈出視窗方法。

什麼是BOM，BOM是瀏覽器對象模型

window是瀏覽器的一個實例，在瀏覽器中，window對象有雙重角色，JavaScript訪問瀏覽器的視窗，ECMAScript規定的Global對象。

window對象的方法：

window.alert("content")
顯示帶有一段消息和確定按鈕

window.confirm("message")
顯示一個帶有指定消息和確定及取消按鈕

window.prompt("text, defaultText")
要在對話框中顯示的純文本，和預設輸入文本

window.open(pageurl, name, parameters)
打開新的瀏覽器視窗

window.close()
關閉視窗

超時調用和間歇調用

setTimeout();
clearTimeout();

setInterval();
clearInterval();

location對象提供了與當前視窗中載入的文檔有關的信息，還提供了一些導航的功能。

location.href
返回當前載入頁面的網站url

location.href = window.location.href
location.hash
返回url中hash(#號後的字元），如果沒有返回空字元串

location.host
返回伺服器名稱和埠號

location.hostname
返回伺服器名稱

location.pathname
返回url中的目錄或文件名

location.port
返回埠號

location.protocol
返回使用協議

location.search
返回url的查詢字元串

location.replace();
重新定向url

location.reload();
重新載入當前顯示的頁面

dom中的history對象
history.back()返回歷史記錄的上一步
= history.go(-1)

history.forward()回到歷史記錄的下一步
= history.go(1)

history.go(-n)和history.go(n)

screen對象
screen.availWidth
screen.availHeight
返回屏幕的寬度和高度

navigator對象的userAgent判斷瀏覽器名稱，版本等

getMonth()和setMonth()

getMonth()返回表示月份的數字
setMonth()用來設置月份

dateObj.getMonth();
dateObj.setMonth(month, day);

var today = new Date(); Console.log(today.getMonth()+1);
var today = new Date();
console.log(today.setMonth(2));
console.log(today.getMonth());

DOM事件

什麼是事件，HTML事件，DOM0級事件，滑鼠與鍵盤事件，this的用法。

事件是 文檔或瀏覽器視窗中發生的一些交互。

html事件

<tag 事件="執行腳本"> </tag>
函數的調用

DOM0級事件

ele.事件=執行腳本

滑鼠，鍵盤

onload, onclick, onmouseover, onmouseout, onfocus, onblur, onchange, onsubmit, onmousedown, onmousemove, onmouseup, onresize, onscroll

onkeydown, onkeypress, onkeyup keyCode

滑鼠事件

onclick 在對象被點擊時發生
onmouseover 在滑鼠移動到對象時發生
onmouseout 在滑鼠移出時發生
onmouseup 在滑鼠按鍵被鬆開時發生
onmousemove 在滑鼠移動時發生
onmousedown 在滑鼠按下時發生

onload 子頁面元素載入完成時發生
onblur 在對象失去焦點發生
onfocus 在對象獲取焦點發生

onchange 在域的內容發生改變時
onsubmit 在表單提交時
onresize 在視窗大小被調整時
onscroll 在滾動條拖動時

onkeydown 在用戶按下一個鍵盤時
onkeypress 按下並釋放時發生
onkeyup 在按鍵被鬆開時發生
keyCode 在獲取按下的按鍵的字元代碼

ele.onclick = function() { 執行腳本 };
ele.onclick = fn;
function fn() { 執行腳本 }；

流程式控制制語句

if(condition){}

prompt() 彈出輸入框

alert() 彈出警告對話框

if(condition){
}else{
}

if(condition){
}else if(condition){
}else {
}

string.length

document.wirte()

new Date().getDay()

switch(expression){
 case value:
 statement
 break;
 default:
 statement
}

for(1,2,3){
}

while,do-while,for

while(條件){
}

do{
}while()

JavaScript中的內置對象

array, string, math, date
push() unshift() pop() shift()
join() reverse() sort() concat() slice() splice()
indexOf() lastIndexOf()
charAt() charCodeAt()
slice(start, end) substring() substr(start, len)
splict() replace()
toUpperCase() toLowerCase()
Math.min() Math.max() Math.ceil() Math.floor() Math.round() Math.abs()
Math.random()

日期時間

getFullYear(), getMonth(), getDate(), getDay(), 

getHours(), getMinutes(), getSeconds(), getTime()

setFullYear(year), setMonth(mon), setDate(), setDay()

setHours(), setMinutes(), setSeconds(), setTime()

JavaScript中的函數

函數的作用，定義，調用，return，arguments

screen對象包含有客戶端顯示屏的信息

width 返回顯示器屏幕的寬度
height 返回顯示屏幕的高度
availHight 返回顯示屏的高度
availWidth 返回顯示屏的寬度

sort()方法用於對數組的元素進行排序

arrObject.sort(function);
var arrSort = arr.sort( function(a,b) { return a>b}); // 升序

DOM元素的方法

getElementById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()

輪播圖

// css
* {
 margin: 0;
 padding: 0;
}
ul {
 list-style: none;
}
body{
 font-family: "微軟雅黑";
 color: #1419;
}
.main{
 width: 1200px;
 height: 460px;
 margin: 30px auto;
 overflow: hidden;
 position: relative
}
.banner {
 width: 1200px;
 height: 460px;
 overflow: hidden;
 position: relative
}
.banner-slide{
 width: 1200px;
 height: 460px;
 position: absolute;
 background-repeat: no-repeat;
 display: none;
}
.slide-active {
 dispaly: block;
}
.slide1{
 background-image: url();
}
.slide2{
 background-image: url();
}
.slide3{
 background-image: url();
}
.button{
 position:absolute;
 width: 40px;
 height: 80px;
 left: 244px;
 top: 50%;
 margin-top: -40px;
 background: url() no-repeat center center;
}
.button: hover{
 background-color: #333;
 opacity: 0.8;
 filter:alpha(opacity = 80);
}
.prev {
 transfrom: rotate(180deg);
}
.next{
 left: auto;
 right: 0;
}
.dots{
 position:absolute;
 right: 0;
 bottom: 24px;
 text-align: right;
}
.dots span{
 display: inline-block;
 width: 12px;
 height: 12px;
 line-height: 12px;
 border-radius: 50%;
 background: rgba(7,17,27,0.4);
 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
 background: #fff;
 margin-left: 8px;
 cursor: pointer;
}
.dots span.active {
 box-shadow: 0 0 0 2px rgba(7,17, 27, 0.4) inset;
 background: #fff;
}

// html
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>輪播</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
 <div class ="banner" id="banner">
  <a href="">
   <div class="banner-slide slide1 slide-active"></div>
  </a>
  <a href="">
   <div class="banner-slide slide2"></div>
  </a>
  <a href="">
   <div class="banner-slide slide3"></div>
  </a>
 </div>

 <a href="javascript:void(0)" class="button prev"></a>
 <a href="javascript:void(0)" class="button next"></a>
 // 圓點
 <div class="dots" id="dots">
  <span class="active"></span>
  <span></span>
  <span></span>
 </div>
</div>
 <script src="js/script.js"></script>
</body>
</html>

function byId(id){
 return typeof(id) === "string" ? document.getElementById(id) : id；
}
var index = 0, timer = null,
pics = byId("banner").getElementsByTagName("div"),
len = pics.length;

function slideImg() {
 var main=byId("main");
 main.onmouseover=function(){
  if(timer) clearInterval(timer);
 }
 main.onmouseout = function(){
   timer = setInterval(function(){
    index++;
    if(index >= len){
     index = 0;
     } 
     changeImg();
     console.log(index);
   },3000);
 }
  main.onmouseout();
}
slideImg();

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

感謝！承蒙關照！您真誠的贊賞是我前進的最大動力！