面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)教程——入門必看篇。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
JavaScript他是一種描述性語言,其實(shí)他并不難學(xué),只要用心學(xué),一定會(huì)學(xué)好,我相信大家在看這篇文章的時(shí)候,一定也學(xué)過HTML吧,使用JavaScript就是為了能和網(wǎng)頁有更好的交互,下面切入主題。
一. JavaScript
1.什么是JavaScript
JavaScript是一種描述性語言,也是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)的,并具有安全性的腳本語言。
2.JavaScript的特點(diǎn)
JavaScript主要用來向HTML頁面添加交互行為。
JavaScript是一種腳本語言,語法和Java類似。
javaScript一般用來編寫客戶端的腳本。
JavaScript是一種解釋性語言。
3.JavaScript的組成
ECMScript標(biāo)準(zhǔn)(規(guī)定所有屬性,方法和對(duì)象的標(biāo)準(zhǔn))
BOM瀏覽器對(duì)象模型(Browser Object Model):與HTML交互
DOM文檔對(duì)象模型(Document Object Model):訪問和操縱HTML文檔
4.JavaScript基本結(jié)構(gòu)
1
2
3
4
5
<script language=”javascript” type=”text/javascript”>
</script>
Language=”javascript”用來表示使用的語言是javascript
5.JavaScript執(zhí)行原理
1. 瀏覽器客戶端向服務(wù)器端發(fā)送請(qǐng)求。(用戶在瀏覽器地址欄中輸入的地址)
2.數(shù)據(jù)處理:服務(wù)器端將某個(gè)包含javaScript的頁面進(jìn)行處理。
3.發(fā)送響應(yīng):服務(wù)器端將含有javascript的HTML文件進(jìn)行處理頁面發(fā)送到瀏覽器客戶端,然后由瀏覽器客戶端從上直下逐條解析HTML標(biāo)簽和JavaScript標(biāo)簽,將頁面效果呈給用戶。
二.在網(wǎng)頁中引入JavaScript的方式
1.使用<script>標(biāo)簽。
2.使用外部JavaScript文件。
希望多個(gè)頁面中運(yùn)行JavaScript實(shí)現(xiàn)相同效果,通常使用外部文件為.js的文件。
如何引用.js為擴(kuò)展名的文件:
<script src=”../1.js”></script>
注意:外部文件不能包含<script></script>
3.直接在HTML標(biāo)簽中
1
<input name='btn' type=”button” value=”彈出消息框”onclick=”javascript:alert(“歡迎你”);”/>
三.JavaScript核心語法
1.變量的聲明和賦值
變量的聲明只有用var,變量的命名規(guī)范和Java類似。Var num=1;
在JavaScript中變量可以不用聲明就可以直接使用,但是不推薦這種用法。
2.數(shù)據(jù)類型
Undefined(未定義類型)
Null(空類型)
Number(數(shù)字類型)
String(字符串類型)
Boolean(布爾類型)
3.undefined和null的區(qū)別
null 表示"沒有對(duì)象",即該處不應(yīng)該有值。典型用法是:
(1) 作為函數(shù)的參數(shù),表示該函數(shù)的參數(shù)不是對(duì)象。
(2) 作為對(duì)象原型鏈的終點(diǎn)。
Object.getPrototypeOf (Object.prototype)// null
undefined 表示"缺少值",就是此處應(yīng)該有一個(gè)值,但是還沒有定義。典型用法是:
(1)變量被聲明了,但沒有賦值時(shí),就等于 undefined。
(2) 調(diào)用函數(shù)時(shí),應(yīng)該提供的參數(shù)沒有提供,該參數(shù)等于 undefined。
(3)對(duì)象沒有賦值的屬性,該屬性的值為 undefined。
(4)函數(shù)沒有返回值時(shí),默認(rèn)返回 undefined。
4.只有6種情況,判定結(jié)果為假。
null,false,undefined,0,"",NaN
5.字符串的一些常用方法
toString();返回字符串
toLowerCasee();把字符串裝換為小寫。
toUpperCase();把字符串轉(zhuǎn)換成大寫
charAt(index);返回在指定位置的字符串
indexOf(str,index);查找某個(gè)指定的字符串在字符串中首次出現(xiàn)的位置
Substring(index,index);返回位于指定索引index1和index2之間的字符串(包括index1不包括index2)
Split(str);將字符串分割為字符數(shù)組
6.創(chuàng)建數(shù)組并為數(shù)組賦值的三種方式
01. Var num=(‘1','2');
02.var num=new Array(2);
Num[0]=1;
Num[1]=2;
03.var num=[‘1','2'];
數(shù)組的常用方法和屬性
Length:設(shè)置或返回?cái)?shù)組中元素的數(shù)目
Join():把數(shù)組的所有語速放入一個(gè)字符串,通過分割符進(jìn)行分割。
Sort():對(duì)數(shù)組進(jìn)行排序
Push():向數(shù)組末尾添加一個(gè)或更多元素,并放回新的長度。
<script type="text/javascript">
//01.方式一:創(chuàng)建數(shù)組,并給數(shù)組賦值
// var fruit = new Array('apple', 'orange', 'peach', 'bananer');
//02.方式二:先創(chuàng)建數(shù)組,后通過下標(biāo)給數(shù)組賦值
var fruits = new Array(4);
fruits[0] = 'apple';
fruits[1] = 'orange';
fruits[2] = 'peach';
fruits[3] = 'bananer';
//03方式三:和方式一類似只不過改變了符號(hào)
//var fruitss = new Array['apple', 'orange', 'peach', 'bananer'];
//04.訪問數(shù)組中下標(biāo)為3的數(shù)據(jù)
document.write(fruits[0]);
//05通過數(shù)組的join方法把元素放到字符串中并用指定分隔符進(jìn)行分割
var result = fruits.join(',');
//06通過sort方法對(duì)數(shù)組進(jìn)行排序
fruits.sort();
//06.向末尾添加一個(gè)或多個(gè)元素,最后返回該數(shù)組的新長度
var length= fruits.push('wert','foot');
document.write('\n' + length);
//07.遍歷數(shù)組
for(var item in fruits)
{
alert(fruits[item]);
}
</script>
7.運(yùn)算符
8 程序調(diào)試
方案一:在VS中調(diào)試
步驟:01.將要調(diào)試的頁面設(shè)置成起始頁
02.設(shè)置斷點(diǎn)
03.按F5啟動(dòng)調(diào)試
方案二:chrome瀏覽器調(diào)試
步驟:01.點(diǎn)擊F12,將工具調(diào)出
02.設(shè)置斷點(diǎn)
03.刷新頁面
方案三:IE瀏覽器
步驟:01.F12,開發(fā)人員工具
02.切到腳本選項(xiàng)卡
03.設(shè)置斷點(diǎn)
04.啟動(dòng)調(diào)試
05.刷新
四.JavaScript中的函數(shù)
1.常用的系統(tǒng)函數(shù)
01. parseInt(“字符串”);
parseInt()函數(shù)首先查看位置為0處的字符,判斷他是否為一個(gè)有效數(shù)字,如果不是則返回NaN,不在執(zhí)行其他操作,但如果該字符是有效參數(shù),則該函數(shù)將查看位置為1處的字符,進(jìn)行同樣的測(cè)試,這一過程將持續(xù)到發(fā)現(xiàn)該字符是有效字符為止,此時(shí)該字符將之前的字符串轉(zhuǎn)換成數(shù)字。
eg:
var num1=parseInt(“78.9”)//返回值為78
var num2=parseInt(“afa78.9”)//返回值為NaN
02.parseFloat(“字符串”);
他的用法和parseInt類似,只不過字符串中出現(xiàn)的第一個(gè)點(diǎn)將被認(rèn)為是有效字符.
eg:
var num1=parseInt(“78.9”)//返回值為78
var num2=parseInt(“afa78.9”)//返回值為NaN
2.自定義函數(shù)
在JavaScript中,自定義函數(shù)是由function,函數(shù)名,一組以參數(shù)以及置于括號(hào)中待執(zhí)行的JavaScript語句組成。
下面來看一看語法:
function 函數(shù)名(參數(shù)1,參數(shù)2,..)
{
//JavaScript語句
[return 返回值]
}
function是定義函數(shù)的關(guān)鍵字,必須有。
參數(shù)1,和參數(shù)2是該函數(shù)的參數(shù),因?yàn)镴avaScritp他本省的類型是弱類型,所有在給定參數(shù)時(shí)沒有必要提供類型
{}定義的函數(shù)的開始和結(jié)尾.
return 語句用來規(guī)定函數(shù)返回的值.
2.調(diào)用函數(shù)
要執(zhí)行一個(gè)函數(shù),首先肯定要調(diào)用這個(gè)函數(shù),必須制定函數(shù)名和其后的參數(shù)。
eg:
?
1
2
3
4
5
6
7
8
9
10
11
<script type=”text/javascript”>
function show(){
}
show();
</script>
3.匿名函數(shù)
匿名函數(shù)就是沒有名字的函數(shù)了,也叫閉包函數(shù)(closures),允許 臨時(shí)創(chuàng)建一個(gè)沒有指定名稱的函數(shù)。最經(jīng)常用作回調(diào)函數(shù)(callback)參數(shù)的值,很多新手朋友對(duì)于匿名函數(shù)不了解。這里就來分析一下。
function 函數(shù)名(參數(shù)列表){函數(shù)體;}
如果是創(chuàng)建匿名函數(shù),那就應(yīng)該是:
function(){函數(shù)體;}
因?yàn)槭悄涿瘮?shù),所以一般也不會(huì)有參數(shù)傳給他。
為什么要?jiǎng)?chuàng)建匿名函數(shù)呢?在什么情況下會(huì)使用到匿名函數(shù)。匿名函數(shù)主要有兩種常用的場(chǎng)景,一是回調(diào)函數(shù),二是直接執(zhí)行函數(shù)。
eg:
?
1
2
3
4
5
6
7
8
<script language="javascript">
var a = "a";
(function(){
var a="b";
alert(a);
})();
alert(a);
</script>
在上面這段代碼中,會(huì)順序輸出兩個(gè)alert框。第一個(gè)alert框內(nèi)容為b,第二個(gè)為a。以為該Script標(biāo)簽中有一個(gè)匿名方法時(shí)自調(diào)用的,所有首先彈出b,然后碰到匿名方法后的alert(a)則彈出a。
- 介紹
- 用你熟悉的語言來計(jì)算下你的年齡
- 一言不和就寫個(gè)留言板吧!
- 聊一聊那些年我們追過的二分查找算法吧
- 手機(jī)端上拉加載和下拉刷新的實(shí)現(xiàn)方式
- 如何有效的提問
- 前端練習(xí)之模仿百度首頁
- 新的博客上線
- 如何理解border-box
- 史上比較全的運(yùn)營書目清單
- 前端案例練習(xí)之模仿小米商城登錄頁面
- 前端教程大綱梳理
- 對(duì)Web開發(fā)中前端框架與前端類庫的一些思考
- JavaScript基礎(chǔ)教程——入門必看篇
- 前端入門技能梳理
- 優(yōu)質(zhì)前端資源推薦
- Linux 搭建Nodejs
- 2018鄭州FCC第一次沙龍分享
- 關(guān)于鄭州FCC以及2018年的活動(dòng)計(jì)劃
