什么是網(wǎng)頁所灸、網(wǎng)站和運用程序
- 網(wǎng)頁:單獨的一個頁面
- 網(wǎng)站:是由一系列相關(guān)的頁面組合成一起
- 應(yīng)用程序:可以和用戶產(chǎn)生交互并實現(xiàn)某種功能
1.JavaScript的介紹
JavaScript是什么
HTML (超文本標(biāo)記語言须教,提供網(wǎng)頁的結(jié)構(gòu)沪哺,提供網(wǎng)頁的內(nèi)容综苔,他是非編程語言)
CSS(層疊樣式表,是對網(wǎng)頁進(jìn)行美化的纺裁,他是非編程語言)
JavaScript(可以用來控制網(wǎng)頁內(nèi)容祟身,給網(wǎng)頁增加動態(tài)的效果) 編程語言 流程控制
Netscape(網(wǎng)景公司)在最初將其腳本語言命名為LiveScript,后來Netscape在與Sun合作之后將其改名為JavaScript泄私。JavaScript最初受Java啟發(fā)而開始設(shè)計的房揭,目的之一就是“看上去像Java”,因此語法上有類似之處晌端,一些名稱和命名規(guī)范也借自Java捅暴。JavaScript與Java名稱上的近似,是當(dāng)時Netscape為了營銷考慮與Sun微系統(tǒng)達(dá)成協(xié)議的結(jié)果咧纠。Java和JavaScript的關(guān)系就像張雨和張雨生的關(guān)系蓬痒,只是名字很像。
Java 服務(wù)器端的編程語言
JavaScript 運行在客戶端(瀏覽器)的編程語言
JavaScript是一種運行在客戶端 的腳本語言
JavaScript的解釋器被稱為JavaScript引擎惧盹,為瀏覽器的一部分乳幸,廣泛用于客戶端的腳本語言,最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)網(wǎng)頁上使用钧椰,用來給HTML網(wǎng)頁增加動態(tài)功能粹断。
JavaScript最初的目的
是為了處理表單的驗證操作,增強(qiáng)用戶的體驗
JavaScript現(xiàn)在的意義(應(yīng)用場景)
JavaScript 發(fā)展到現(xiàn)在幾乎無所不能嫡霞。
- 網(wǎng)頁特效
- 服務(wù)端開發(fā)(Node.js)
- 命令行工具(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物聯(lián)網(wǎng)(Ruff)
- 游戲開發(fā)(cocos2d-js)
JavaScript 的組成
- ECMAScript
- DOM
- BOM
ECMAScript - JavaScript的核心
ECMA 歐洲計算機(jī) 制造聯(lián)合會
網(wǎng)景研發(fā)了一個在瀏覽器上的語言:JavaScript
微軟再自己的瀏覽器IE上研發(fā)了 :JScript
定義了JavaScript的語法規(guī)范
JavaScript(ECMAScript)的核心瓶埋,描述了語言的基本語法和數(shù)據(jù)類型,ECMAScript是一套標(biāo)準(zhǔn)诊沪,定義了一種語言的標(biāo)準(zhǔn)與具體實現(xiàn)無關(guān)
DOM - 文檔對象模型
一套操作頁面元素的API
DOM可以把HTML看做是文檔樹养筒,通過DOM提供的API可以對樹上的節(jié)點進(jìn)行操作
BOM - 瀏覽器對象模型
一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器窗口,比如:彈出框端姚、控制瀏覽器跳轉(zhuǎn)晕粪、獲取分辨率等
2.JavaScript的三種寫入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- js中代碼是從上到下依次執(zhí)行的 -->
<!-- 內(nèi)部樣式 -->
<script type="text/javascript">
alert(1);
</script>
<!-- 外鏈?zhǔn)?用src引入外部js-->
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<!-- 行內(nèi)樣式 -->
<input type="submit" value="hello" onclick="alert(3)">
</body>
</html>
3.計算機(jī)組成
軟件
- 應(yīng)用軟件:瀏覽器(Chrome/IE/Firefox)、QQ渐裸、Sublime巫湘、Word
- 系統(tǒng)軟件:Windows装悲、Linux、mac OSX
硬件
- 三大件:CPU尚氛、內(nèi)存诀诊、硬盤 -- 主板
- 輸入設(shè)備:鼠標(biāo)、鍵盤阅嘶、手寫板属瓣、攝像頭等
- 輸出設(shè)備:顯示器、打印機(jī)讯柔、投影儀等
ps:應(yīng)用軟件是工作在系統(tǒng)軟件上的抡蛙,系統(tǒng)軟件是工作在硬件上的
4.變量
什么是變量
- 什么是變量
變量是計算機(jī)內(nèi)存中存儲數(shù)據(jù)的標(biāo)識符,根據(jù)變量名稱可以獲取到內(nèi)存中存儲的數(shù)據(jù) - 為什么要使用變量
使用變量可以方便的獲取或者修改內(nèi)存中的數(shù)據(jù)
如何使用變量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// js中用var來聲明變量
var age;//變量聲明
age=18; //變量賦值
console.log(age); //在控制臺打印出18
var num1=1; // 此處是聲明一個變量磷杏,其變量名為num1并且將值1賦予num1
var num2=2;
console.log(num1); //1
//var mgs=hello word; 此處為語法錯誤溜畅,因為hello word 不是數(shù)字要用引號包裹
var mgs='hello word';
console.log(mgs); //hello word
//聲明多個變量并賦值
var n1=2, n2=3, n3=4;
console.log(n1,n2,n3); //2 3 4
</script>
</head>
<body>
</body>
</html>
變量的命名規(guī)則和規(guī)范
規(guī)則
- 變量名一般由字母、數(shù)字极祸、下劃線、$符號組成怠晴,且不能以數(shù)字開頭
- js中變量名區(qū)分大小寫
- 不能使關(guān)鍵字和保留字遥金,如:while、for等
規(guī)范
- 變量名必須要有意義
- 遵守駝峰命名法蒜田,首字母小寫稿械,后面單詞的首字母大寫,如:userName
案例
- 交換兩個變量的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var a=6, b=7, t;
//定義一個臨時變量t冲粤,首先把a(bǔ)的值賦給t美莫,此時t的值為6;
//再把b的值賦給a梯捕,此時a的值為7厢呵;最后把t的值賦給b,此時b的值為6
t=a;
a=b;
b=t;
console.log(a,b); // 7 6
</script>
</head>
<body>
</body>
</html>
2.交換兩個數(shù)字的變量的值傀顾,并且不使用第三個變量
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var a=4, b=6;
a=a+b; //4+6=10
b=a-b; //10-6=4
a=a-b; //10-4=6
console.log(a,b); // 6 4
</script>
</head>
<body>
</body>
</html>
5.數(shù)據(jù)類型
簡單數(shù)據(jù)類型
Number襟铭、String、Boolean短曾、Undefined寒砖、Null
Number類型
- 數(shù)值字面量:數(shù)值的固定值的表示法,如:2018 222
- 進(jìn)制(二進(jìn)制嫉拐、八進(jìn)制哩都、十進(jìn)制、十六進(jìn)制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//十進(jìn)制 0-9
var num=10;
console.log(num); //10
//十六進(jìn)制 0-9 A-F A10 B11 C12 D13 E14 F15
var n1=0xAB;
console.log(n1); //171
//八進(jìn)制 0-7
var n2=010;
console.log(n2); //8
</script>
</head>
<body>
</body>
</html>
-
浮點數(shù)
-
浮點數(shù)的精度問題
浮點數(shù)
var n = 5e-324; // 科學(xué)計數(shù)法 5乘以10的-324次方
浮點數(shù)值的最高精度是 17 位小數(shù)婉徘,但在進(jìn)行算術(shù)計算時其精確度遠(yuǎn)遠(yuǎn)不如整數(shù)
var result = 0.1 + 0.2; // 結(jié)果不是 0.3漠嵌,而是:0.30000000000000004
console.log(0.07 * 100);
不要判斷兩個浮點數(shù)是否相等
-
-
數(shù)值范圍
最小值:Number.MIN_VALUE咐汞,這個值為: 5e-324
最大值:Number.MAX_VALUE,這個值為: 1.7976931348623157e+308
無窮大:Infinity
無窮邢籽拧:-Infinity -
數(shù)值判斷
- NaN:not a number
- NaN 與任何值都不相等碉考,包括他本身
- isNaN: is not a number 是一個非數(shù)字
- NaN:not a number
String類型
(用引號包裹)
'abc' "abc"
-
字符串字面量
'程序猿','程序媛', "黑馬程序猿"思考:如何打印以下字符串挺身。
我很喜歡"黑馬'程序猿'"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var mgs='我是\"黑馬\'程\\序員\'\"'; // \為轉(zhuǎn)義字符 若想將\表示出來必須用轉(zhuǎn)義字符\將其轉(zhuǎn)義
console.log(mgs); //我是"黑馬'程\序員'"
</script>
</head>
<body>
</body>
</html>
- 轉(zhuǎn)義符
\n換行
\t制表符
\b空格
\r回車
- 字符串長度
length屬性用來獲取字符串的長度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var mgs='我是\"黑馬\'程\\序員\'\"'; // \為轉(zhuǎn)義字符 若想將\表示出來必須用轉(zhuǎn)義字符\將其轉(zhuǎn)義
console.log(mgs); //我是"黑馬'程\序員'"
console.log(mgs.length); //12
</script>
</head>
<body>
</body>
</html>
- 字符串拼接
字符串拼接使用 + 連接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//如果+兩邊是number類型的變量侯谁,執(zhí)行的是數(shù)學(xué)運算的加
console.log(11 + 11); //22
//如果+兩邊是string類型的變量,執(zhí)行的是拼接字符串
console.log('hello' + ' world'); // hello word
console.log('100' + '100'); //100100
//如果+一邊是string類型的變量章钾,一邊是number類型的變量墙贱,則先將數(shù)值型變量轉(zhuǎn)換成字符串變量,再執(zhí)行字符串拼接
console.log('abc' + 11); //abc11
console.log('11' + 11); //1111
//如果+一邊是string類型的變量贱傀,一邊是true或flase惨撇,則先將true或flase轉(zhuǎn)換成字符串,再進(jìn)行字符串拼接
console.log('male:' + true); //male:true
</script>
</head>
<body>
</body>
</html>
- 兩邊只要有一個是字符串府寒,那么+就是字符串拼接功能
- 兩邊如果都是數(shù)字魁衙,那么就是算術(shù)功能。
Boolean類型
- Boolean字面量: true和false株搔,區(qū)分大小寫
- 計算機(jī)內(nèi)部存儲:true為1剖淀,false為0
Undefined和Null
- undefined表示一個聲明了沒有賦值的變量,變量只聲明的時候值默認(rèn)是undefined
- null表示一個空纤房,變量的值如果想為null纵隔,必須手動設(shè)置
復(fù)雜數(shù)據(jù)類型
Object
獲取變量的類型
typeof
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var age=18;
var name='zhangsan';
console.log(typeof age); //number
console.log(typeof name); //string
// typeof返回的結(jié)果是string類型
var result=typeof name;
console.log(result); //string
</script>
</head>
<body>
</body>
</html>
字面量
在源代碼中一個固定值的表示法。
數(shù)值字面量:8, 9, 10
字符串字面量:'黑馬程序員', "大前端"
布爾字面量:true炮姨,false
6.注釋
單行注釋(ctrl+/)
用來描述下面一個或多行代碼的作用
// 這是一個變量
var name = 'hm';
多行注釋(ctrl+shift+/)
用來注釋多條代碼
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/
7.數(shù)據(jù)類型轉(zhuǎn)換
如何使用谷歌瀏覽器捌刮,快速的查看數(shù)據(jù)類型?
字符串的顏色是黑色的舒岸,數(shù)值類型是藍(lán)色的绅作,布爾類型也是藍(lán)色的,undefined和null是灰色的
轉(zhuǎn)換成字符串類型
- toString() [使用時 變量名.toString();]
- String() [使用時 String(變量名);]
String()函數(shù)存在的意義:有些值沒有toString()吁津,這個時候可以使用String()棚蓄。比如:undefined和null
- 拼接字符串方式
num + "",當(dāng) + 兩邊一個操作符是字符串類型碍脏,一個操作符是其它類型的時候梭依,會先把其它類型轉(zhuǎn)換成字符串再進(jìn)行字符串拼接,返回字符串
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var age=18;
var name='zhangsan';
var isLeft=true;
var a;
var b=null;
console.log(age); //18
console.log(name); //zhangsan
console.log(isLeft); //true
console.log(a); //undefined
console.log(b); //null
//1. toString()方法
console.log(typeof age.toString()); //string
console.log(typeof isLeft.toString()); //string
//null和 undefined 沒有toString()方法
//2. String()方法
console.log(typeof String(b));//string
//3. 字符串拼接
console.log(typeof (age+''));//string
console.log(typeof (isLeft+''));//string
console.log(typeof age+'');//number 這是因為typeof先獲取age的類型
console.log(typeof isLeft+'');//boolean 這是因為typeof先獲取isLeft的類型
console.log(age+'');//18
console.log(isLeft+''); //true
</script>
</head>
<body>
</body>
</html>
轉(zhuǎn)換成數(shù)值類型
- Number()
Number()可以把任意值轉(zhuǎn)換成數(shù)值典尾,如果要轉(zhuǎn)換的字符串中有一個不是數(shù)值的字符役拴,返回NaN - parseInt()
var num1 = parseInt("12.3abc"); // 返回12,如果第一個字符是數(shù)字會解析知道遇到非數(shù)字結(jié)束
var num2 = parseInt("abc123"); // 返回NaN钾埂,如果第一個字符不是數(shù)字或者符號就返回NaN - parseFloat()
parseFloat()把字符串轉(zhuǎn)換成浮點數(shù)
parseFloat()和parseInt非常相似河闰,不同之處在與
parseFloat會解析第一個. 遇到第二個.或者非數(shù)字結(jié)束
如果解析的內(nèi)容里只有整數(shù)科平,解析成整數(shù) - +,-0等運算
var str = '500';
console.log(+str); // 取正
console.log(-str); // 取負(fù)
console.log(str - 0);
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//1.Number()
var str='abc';
var n1=true;
console.log(Number(str)); //NaN
console.log(Number(n1)); //1
console.log(Number('123')); //123
//也就是說Number()把字符串轉(zhuǎn)換成數(shù)值型的時候姜性,如果字符串中有一個字符不是數(shù)字瞪慧,返回NaN
console.log(Number('123abc')); //NaN
//2. ParseInt()
var str1=parseInt('123');
var isRight=parseInt(true);
console.log(str1); //123
// ParseInt() 無法將布爾類型轉(zhuǎn)換成數(shù)值類型,返回NaN
console.log(isRight); //NaN
var s1=parseInt('abb');
console.log(s1); //NaN
//parseInt()轉(zhuǎn)換字符串的時候部念,如果遇到數(shù)字就會轉(zhuǎn)換成數(shù)字弃酌,如果遇到非數(shù)字就會結(jié)束
var num1 = parseInt("12.3abc"); //12
console.log(num1);
//如果字符串中第一個字符是非數(shù)字徽惋,此時就返回NaN
var num2 = parseInt("abc123"); //NaN
console.log(num2);
//3.parseFloat()
var str2='1.1aa';
var s2=true;
console.log(parseFloat(str2)); //1.1
//parseFloat()無法轉(zhuǎn)換布爾類型 返回NaN
console.log(parseFloat(s2)); //NaN
var s3='12.12.abc';
//parseFloat()會解析第一個. 遇到第二個.或者非數(shù)字結(jié)束
console.log(parseFloat(s3)); //12.12
//4.取正或取負(fù) + -
var n2=+5;
var n3=-5;
console.log(n2); //5
console.log(n3); //-5
var n4='123';
console.log(+n4); //123
console.log(typeof +n4); //number
//+無法將字母轉(zhuǎn)換成數(shù)值型
var n5='123aa';
console.log(+n5); //NaN
console.log(typeof +n5); //number 此處的number是+n5 返回值是NaN 而NaN屬于數(shù)值型
var n6=true;
console.log(+n6); //1
var n7='12bcd';
// - 一邊是字符串類型嘱能,一邊是數(shù)值型,會先把字符串轉(zhuǎn)換成數(shù)值型再進(jìn)行數(shù)值的減法運算赫段,如果字符串無法轉(zhuǎn)換成數(shù)值類型乌询,此時返回NaN
console.log(n7-0); //NaN
// +一邊是字符串類型榜贴,一邊是數(shù)值型,會先把數(shù)值型轉(zhuǎn)換成字符串類型再進(jìn)行字符串拼接
console.log(n7+0); //12bcd0
</script>
</head>
<body>
</body>
</html>
轉(zhuǎn)換成布爾類型
- Boolean()
0 ''(空字符串) null undefined NaN 會轉(zhuǎn)換成false 其它都會轉(zhuǎn)換成true
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var str='abc';
var n1=12;
var n2=null;
var b;
console.log(Boolean(str)); //true
console.log(Boolean(n1)); //true
console.log(Boolean(n2)); //false
console.log(Boolean(b)); //false
//轉(zhuǎn)換成false有5種情況:null undefined ''(空字符串) 0 NaN
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(-1));//true
</script>
</head>
<body>
</body>
</html>
8.操作符
運算符 operator
5 + 6
表達(dá)式 組成 操作數(shù)和操作符妹田,會有一個結(jié)果
算術(shù)運算符
+ - * / %
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var x=6;
var y=8;
console.log(x+y); //14
console.log(x-y); //-2
console.log(x*y); //48
console.log(x/y); //0.75
console.log(x%y); //6
console.log(x/0); //Infinity
console.log(x%0); //NaN
</script>
</head>
<body>
</body>
</html>
一元運算符
一元運算符:只有一個操作數(shù)的運算符
5 + 6 兩個操作數(shù)的運算符 二元運算符
++ 自身加1
-- 自身減1
-
前置++
var num1 = 5;
++ num1;var num2 = 6; console.log(num1 + ++ num2);
后置++
var num1 = 5;
num1 ++;
var num2 = 6
console.log(num1 + num2 ++);
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// ++前置
var num=5;
//++前置 先自身加1 然后再運算
console.log(++num);//6
var num1=1;
console.log(num+ ++num1); //8
console.log(num1); //2
console.log(--num1); //1
//++后置 先運算再自身加1
var num2=2;
console.log(num2++); //2
console.log(num2); //3
var num3=8;
console.log(num2+ num3++);//11
console.log(num3); //9
</script>
</head>
<body>
</body>
</html>
- 猜猜看
var a = 1; var b = ++a + ++a; console.log(b);
var a = 1; var b = a++ + ++a; console.log(b);
var a = 1; var b = a++ + a++; console.log(b);
var a = 1; var b = ++a + a++; console.log(b);
邏輯運算符(布爾運算符)
&& (一假即假)
與 兩個操作數(shù)同時為true唬党,結(jié)果為true,否則都是false
|| (一真即真)
或 兩個操作數(shù)有一個為true鬼佣,結(jié)果為true初嘹,否則為false
! 非 取反
關(guān)系運算符(比較運算符)
< > >= <= == != === !==
==與===的區(qū)別:==只進(jìn)行值得比較,===類型和值同時相等沮趣,則相等
var result = '55' == 55; // true
var result = '55' === 55; // false(先判斷類型是否相等) 值相等,類型不相等
var result = 55 === 55; // true
賦值運算符
= += -= *= /= %=
例如:
var num = 0;
num += 5; //相當(dāng)于 num = num + 5;
運算符的優(yōu)先級
優(yōu)先級從高到底
1. () 優(yōu)先級最高
2. 一元運算符 ++ -- !
3. 算數(shù)運算符 先* / % 后 + -
4. 關(guān)系運算符 > >= < <=
5. 相等運算符 == != === !==
6. 邏輯運算符 先&& 后||
7. 賦值運算符
// 練習(xí)1:
4 >= 6 || '人' != '阿凡達(dá)' && !(12 * 2 == 144) && true
// 練習(xí)2:
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'
表達(dá)式和語句