數據類型包括：基本數據類型和引用數據類型
基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。
當咱們把變量賦值給一個變量時，解析器首先要確認的就是這個值是基本類型值仍是引用類型值
1.基本數據類型
- number
var a = 123; //typeof 檢查當前變量是什麼數據類型 console.log(typeof a) //特殊狀況 var a1 = 5/0; console.log(typeof e1) //Infinity 無限大. number類型
- string
var str = '123' console.log(typeof str)
- boolean
var b1 = false; console.log(typeof b1)
- null
var c1 = null;//空對象. object console.log(c1)
- undefined
var d1; //表示變量未定義 console.log(typeof d1)
2.引用數據類型
- Function
- Object
- Arrray
- String
- Date
4、運算符
js中的運算符跟python中的運算符有點相似，但也有不一樣。所謂運算,在數學上，是一種行爲，經過已知量的可能的組合，得到新的量。
1.賦值運算符
以var x = 12,y=5來演示示例|
2.算數運算符
var a = 5,b=2
3.比較運算符
var x = 5;
4.特殊狀況
字符串拼接+字符串運算 特殊狀況。python中有拼接字符串中更簡便的辦法，其實在js中也有，你們能夠百度引擎搜索es6模板字符串。（擴展）
var firstName = '小'; var lastName = '馬哥'; var name = '伊拉克'; var am = '美軍'; // 字符串拼接 var str = "2003年3月20日,"+name+"戰爭爆發，以美軍爲主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭後，"+am+"又一次取得的大規模壓倒性軍事勝利。" var fullStr = str; console.log(fullStr) var fullName = firstName +" "+ lastName; console.log(fullName) // 不能對字符串進行+運算 只能拼接 var a1 = '1'; var a2 = '2'; console.log(a1-a2) //12 var b1 = 'one'; var b2 = 'two'; // NaN. ==== not a number 是number類型 console.log(typeof(b1*b2))
5、數據類型轉換
語言中咱們的數據類型有不少，在某個頁面中展現的數據類型也不一樣，好比說電話號碼我就要求number的類型，而輸入姓名的時候就要求string類型的。那麼在適當的狀況下咱們能夠將數據類型進行轉換。
1.將數值類型轉換成字符串類型
隱式轉換
var n1 = 123; var n2 = '123'; var n3 = n1+n2; // 隱式轉換 console.log(typeof n3);
強制類型轉換
// 強制類型轉換String(),toString() var str1 = String(n1); console.log(typeof str1); var num = 234; console.log(num.toString())
2.將字符串類型轉換成數值類型
var stringNum = '789.123wadjhkd'; var num2 = Number(stringNum); console.log(num2) // parseInt()能夠解析一個字符串 而且返回一個整數 console.log(parseInt(stringNum)) console.log(parseFloat(stringNum));
3.任何數據類型均可以轉換爲boolean類型
var b1 = '123'; var b2 = 0; var b3 = -123 var b4 = Infinity; var b5 = NaN; var b6; //undefined var b7 = null; // 非0既真 console.log(Boolean(b7))
6、流程控制
1.if 、if-else、if-else if-else
var ji = 20;
if(ji >= 20){
console.log('恭喜你，吃雞成功，大吉大利')
}
alert('alex');//下面的代碼還會執行
var ji = 20;
if(ji>=20){
console.log('恭喜你，吃雞成功，大吉大利')
}else{
console.log('很遺憾 下次繼續努力')
}
if (true) {
//執行操做
}else if(true){
//知足條件執行
}else if(true){
//知足條件執行
}else{
//知足條件執行
}
注意：瀏覽器解析代碼的順序 是從上往下執行，從左往右
2.邏輯與&&、邏輯或||
//1.模擬 若是總分 >400 而且數學成績 >89分 被清華大學錄入
//邏輯與&& 兩個條件都成立的時候 才成立
if(sum>400 && math>90){
console.log('清華大學錄入成功')
}else{
alert('高考失利')
}
//2.模擬 若是總分>400 或者你英語大於85 被複旦大學錄入
//邏輯或 只有有一個條件成立的時候 才成立
if(sum>500 || english>85){
alert('被複旦大學錄入')
}else{
alert('高考又失利了')
}
3.switch
var gameScore = 'better';
switch(gameScore){
//case表示一個條件 知足這個條件就會走進來 遇到break跳出。break終止循環。若是某個條件中不寫 break，那麼直到該程序遇到下一個break中止
case 'good':
console.log('玩的很好')
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了')
break;
case 'best':
console.log('恭喜你 吃雞成功')
break;
default:
console.log('很遺憾')
}
4.while循環
循環三步走：
1.初始化循環變量
2.判斷循環條件
3.更新循環變量
var i = 1; //初始化循環變量
while(i<=9){ //判斷循環條件
console.log(i);
i = i+1; //更新循環條件
}
練習：將1-100全部是2的倍數在控制檯中打印。使用while循環
5.do_while
//無論有沒有知足while中的條件do裏面的代碼都會走一次
var i = 3;//初始化循環變量
do{
console.log(i)
i++;//更新循環條件
}while (i<10) //判斷循環條件
6.for循環
for(var i = 1;i<=10;i++){
console.log(i)
}
課堂練習：
for(var i = 1;i<=100;i++){
if(i%2==0){
//是偶數
console.log(i)
}
}
1-100之間全部數之和
var sum = 0;
for(var j = 1;j<=100;j++){
sum = sum+j
}
console.log(sum)
雙重fo循環
for(var i=1;i<=3;i++){
for(var j=0;j<6;j++){
document.write('*')
}
document.write('<br>')
}
小做業：
1.在瀏覽器中輸出直角三角形
*
**
***
****
*****
******
代碼：
for(var i=1;i<=6;i++){
for(var j=1;j<=i;j++){
document.write("*")；
}
document.write('<br>')；
}
2.在瀏覽器中輸出
*
***
*****
*******
*********
***********
代碼：
for(var i=1;i<=6;i++){ //行數
//控制咱們的空格數
for(var s=i;s<6;s++){
document.write(' ')
}
for(var j=1;j<=2*i-1;j++){
document.write('*')
}
document.write('<br>')
}
6.經常使用內置對象
所謂內置對象就是ECMAScript提供出來的一些對象，咱們知道對象都是有相應的屬性和方法
數組Array
1.數組的建立方式
- 字面量方式建立（推薦你們使用這種方式，簡單粗暴）
var colors = ['red','color','yellow'];
- 使用構造函數（後面會講）的方式建立 使用new關鍵詞對構造函數進行建立對象
var colors2 = new Array();
2.數組的賦值
var arr = []; //經過下標進行一一賦值 arr[0] = 123; arr[1] = '哈哈哈'; arr[2] = '嘿嘿嘿'
3.數組的經常使用方法
3.1 數組的合併 concat()
var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
3.2 join() 將數組中的元素使用指定的字符串鏈接起來，它會造成一個新的字符串
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0
3.3 將數組轉換成字符串 toString()
var score = [98,78,76,100,0];
//toString() 直接轉換爲字符串 每一個元素之間使用逗號隔開
var str = score.toString();
console.log(str);//98,78,76,100,0
3.4 slice(start,end); 返回數組的一段，左閉右開
var arr = ['張三','李四','王文','趙六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]
3.5 pop 移除數組的最後一個元素
var arr = ['張三','李四','王文','趙六']; var newArr = arr.pop(); console.log(newArr);//["張三", "李四"，"王文"]
3.6 push() 向數組最後添加一個元素
var arr = ['張三','李四','王文','趙六'];
var newArr = arr.push('小馬哥');
console.log(newArr);//["張三", "李四"，"王文"，"趙六"，"小馬哥"]
3.7 reverse() 翻轉數組
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反轉數組
names.reverse();
console.log(names);
3.8 sort對數組排序
var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]
3.9 判斷是否爲數組：isArray()
布爾類型值 = Array.isArray(被檢測的值) ;
4.字符串String
字符串方法
4.1 chartAt() 返回指定索引的位置的字符
var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l
4.2 concat 返回字符串值，表示兩個或多個字符串的拼接
var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str2));//alexex
4.3 replace(a,b) 將字符串a替換成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
4.4 indexof() 查找字符的下標，若是找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法同樣
var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1
4.5 slice(start，end) 左閉右開 分割字符串
var str = '小馬哥'; console.log(str.slice(1,2));//馬
4.6 split('a',1) 以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，則返回數組的最大長度
var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.split('a'));//["個人天呢,", "是嘛,你在說什麼呢?", "哈哈哈"]
4.7 substr(statr,end) 左閉右開
var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈'; console.log(str.substr(0,4));//個人天呢
4.8 toLowerCase()轉小寫
var str = 'XIAOMAGE'; console.log(str.toLowerCase())；//xiaomage
4.9 toUpperCase()轉大寫
var str = 'xiaomage'; console.log(str.toUpperCase());
特別：
//1.將number類型轉換成字符串類型 var num = 132.32522; var numStr = num.toString() console.log(typeof numStr)
//四捨五入 var newNum = num.toFixed(2) console.log(newNum)
5.Date日期對象
建立日期對象只有構造函數一種方式,使用new關鍵字
//建立了一個date對象 var myDate = new Date();
//建立日期對象
var myDate=new Date();
//獲取一個月中的某一天
console.log(myDate.getDate());
//返回本地時間
console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
6.Math 內置對象
經常使用內置對象
6.1 Math.ceil() 向上取整，'天花板函數'
var x = 1.234; //天花板函數 表示大於等於 x，而且與它最接近的整數是2 var a = Math.ceil(x); console.log(a);//2
6.2 Math.floor 向下取整，'地板函數'
var x = 1.234; // 小於等於 x，而且與它最接近的整數 1 var b = Math.floor(x); console.log(b);//1
6.3 求兩個數的最大值和最小值
//求 兩個數的最大值 最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2
6.4 隨機數 Math.random()
var ran = Math.random(); console.log(ran);[0,1)
若是讓你取100-200之間的隨機數，怎麼作？
背過公式：min - max之間的隨機數： min+Math.random()*(max-min)
7、函數
函數：就是將一些語句進行封裝，而後經過調用的形式，執行這些語句。
函數的做用：
-
將大量重複的語句寫在函數裏，之後須要這些語句的時候，能夠直接調用函數，避免重複勞動。
-
簡化編程，讓編程模塊化。
console.log("hello world");
sayHello(); //調用函數
//定義函數：
function sayHello(){
console.log("hello");
console.log("hello world");
}
第一步：函數的定義
函數定義的語法：
function 函數名字(){
}
解釋以下：
-
function：是一個關鍵字。中文是「函數」、「功能」。
-
函數名字：命名規定和變量的命名規定同樣。只能是字母、數字、下劃線、美圓符號，不能以數字開頭。
-
參數：後面有一對小括號，裏面是放參數用的。
-
大括號裏面，是這個函數的語句。
第二步：函數的調用
函數調用的語法：
函數名字();
函數的參數：形參和實參
函數的參數包括形參和實參
注意：實際參數和形式參數的個數，要相同。
例子：
sum(3,4);
sum("3",4);
sum("Hello","World");
//函數：求和
function sum(a, b) {
console.log(a + b);
}
函數的返回值
例子：
console.log(sum(3, 4));
//函數：求和
function sum(a, b) {
return a + b;
}
九 、僞數組 arguments
arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。
（1）返回函數實參的個數：arguments.length
例子：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //獲取形參的個數
console.log(arguments.length); //獲取實參的個數
console.log("----------------");
}
結果：
（2）之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。舉例：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //將實參的第一個數改成99
arguments.push(8); //此方法不經過，由於沒法增長元素
}
清空數組的幾種方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：刪除數組中全部項目
array.length = 0; //方式1：length屬性能夠賦值，在其它語言中length是隻讀
array = []; //方式3：推薦
九 、僞數組 arguments
arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。
（1）返回函數實參的個數：arguments.length
例子：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //獲取形參的個數
console.log(arguments.length); //獲取實參的個數
console.log("----------------");
}
結果：
（2）之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。舉例：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //將實參的第一個數改成99
arguments.push(8); //此方法不經過，由於沒法增長元素
}
清空數組的幾種方式：
var array = [1,2,3,4,5,6]; array.splice(0); //方式1：刪除數組中全部項目
array.length = 0; //方式1：length屬性能夠賦值，在其它語言中length是隻讀
array = []; //方式3：推薦
10、關於DOM的事件操做
1、JavaScript的組成
JavaScript基礎分爲三個部分：
-
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
-
DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。
-
BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。
2、事件
JS是以事件驅動爲核心的一門語言。
事件的三要素
事件的三要素：事件源、事件、事件驅動程序。
好比，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。
再好比，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情裏，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。
因而咱們能夠總結出：誰引起的後續事件，誰就是事件源。
總結以下：
-
事件源：引起後續事件的html標籤。
-
事件：js已經定義好了（見下圖）。
-
事件驅動程序：對樣式和html的操做。也就是DOM。
代碼書寫步驟以下：（重要）
-
（1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
-
（3）書寫事件驅動程序：關於DOM的操做
代碼舉例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 一、獲取事件源
var div = document.getElementById("box1");
// 二、綁定事件
div.onclick = function () {
// 三、書寫事件驅動程序
alert("我是彈出的內容");
}
</script>
</body>
常見事件以下：
下面針對這事件的三要素，進行分別介紹。
一、獲取事件源的方式（DOM節點的獲取）
獲取事件源的常見方式以下：
|
1
2
3
4
5
|
var
div1 = document.getElementById(
"box1"
);
//方式一：經過id獲取單個標籤
var
arr1 = document.getElementsByTagName(
"div1"
);
//方式二：經過 標籤名 得到 標籤數組，因此有s
var
arr2 = document.getElementsByClassName(
"hehe"
);
//方式三：經過 類名 得到 標籤數組，因此有s
|
二、綁定事件的方式
方式一：直接綁定匿名函數
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第一種方式
div1.onclick = function () {
alert("我是彈出的內容");
}
</script>
方式二：先單獨定義函數，再綁定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第二種方式
div1.onclick = fn; //注意，這裏是fn，不是fn()。fn()指的是返回值。
//單獨定義函數
function fn() {
alert("我是彈出的內容");
}
</script>
注意上方代碼的註釋。綁定的時候，是寫fn，不是寫fn()。fn表明的是整個函數，而fn()表明的是返回值。
方式三：行內綁定
<!--行內綁定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是彈出的內容");
}
</script>
注意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。由於綁定的這段代碼不是寫在js代碼裏的，而是被識別成了字符串。
三、事件驅動程序
咱們在上面是拿alert舉例，不只如此，咱們還能夠操做標籤的屬性和樣式。舉例以下：
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//點擊鼠標時，本來粉色的div變大了，背景變紅了
oDiv.onclick = function () {
oDiv.style.width = "200px"; //屬性值要寫引號
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; //屬性名是backgroundColor，不是background-Color
}
</script>
上方代碼的注意事項：
- 在js裏寫屬性值時，要用引號
- 在js裏寫屬性名時，是
backgroundColor，不是CSS裏面的background-Color。記得全部的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峯
onload事件
當頁面加載（文本和圖片）完畢的時候，觸發onload事件。
舉例：
<script type="text/javascript">
window.onload = function () {
console.log("小馬哥"); //等頁面加載完畢時，打印字符串
}
</script>
有一點咱們要知道：js的加載是和html同步加載的。所以，若是使用元素在定義元素以前，容易報錯。這個時候，onload事件就能派上用場了，咱們能夠把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。
建議是：整個頁面上全部元素加載完畢在執行js內容。因此，window.onload能夠預防使用標籤在定義標籤以前。
事件案例
一、京東頂部廣告欄關閉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top-banner{
/*position: relative;*/
background-color: rgb(230, 15, 82);
}
.top-banner .w{
width: 1190px;
position: relative;
margin: 0 auto;
}
.top-banner .banner{
display: block;
width: 100%;
height: 80px;
background: url('./close.jpg') no-repeat center 0;
}
.top-banner .close{
position: absolute;
right: 0;
top:0;
text-decoration: none;
color: white;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<a href="#" class="banner"></a>
<a href="#" class="close" id="closeBanner">x</a>
</div>
</div>
<script type="text/javascript">
// /需求：點擊案例，隱藏盒子。
//思路：點擊a連接，讓top-banner這個盒子隱藏起來（加隱藏類名）。
window.onload = function(){
// /1.獲取事件源和相關元素
var closeBanner = document.getElementById('closeBanner');
var topBanner = document.getElementById('topBanner');
//2.綁定事件
closeBanner.onclick = function(){
//3.書寫事件驅動程序
//類控制
//topBanner.className += ' hide';//保留原類名，添加新類名
//topBanner.className = 'hide';
//替換舊類名
topBanner.style.display = 'none';
}
}
</script>
</body>
</html>