JavaScript基礎(chǔ)教程——入門必看篇
JavaScript他是一種描述性語(yǔ)言,其實(shí)他并不難學(xué),只要用心學(xué),一定會(huì)學(xué)好,我相信大家在看這篇文章的時(shí)候,一定也學(xué)過HTML吧,使用JavaScript就是為了能和網(wǎng)頁(yè)有更好的交互,下面切入主題。
一. JavaScript
1.什么是JavaScript
JavaScript是一種描述性語(yǔ)言,也是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)的,并具有安全性的腳本語(yǔ)言。
2.JavaScript的特點(diǎn)
JavaScript主要用來向HTML頁(yè)面添加交互行為。
JavaScript是一種腳本語(yǔ)言,語(yǔ)法和Java類似。
javaScript一般用來編寫客戶端的腳本。
JavaScript是一種解釋性語(yǔ)言。
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)
<script language=”javascript” type=”text/javascript”> </script> Language=”javascript”用來表示使用的語(yǔ)言是javascript
5.JavaScript執(zhí)行原理
1. 瀏覽器客戶端向服務(wù)器端發(fā)送請(qǐng)求。(用戶在瀏覽器地址欄中輸入的地址)
2.數(shù)據(jù)處理:服務(wù)器端將某個(gè)包含javaScript的頁(yè)面進(jìn)行處理。
3.發(fā)送響應(yīng):服務(wù)器端將含有javascript的HTML文件進(jìn)行處理頁(yè)面發(fā)送到瀏覽器客戶端,然后由瀏覽器客戶端從上直下逐條解析HTML標(biāo)簽和JavaScript標(biāo)簽,將頁(yè)面效果呈給用戶。
二.在網(wǎng)頁(yè)中引入JavaScript的方式
1.使用<script>標(biāo)簽。
2.使用外部JavaScript文件。
希望多個(gè)頁(yè)面中運(yùn)行JavaScript實(shí)現(xiàn)相同效果,通常使用外部文件為.js的文件。
如何引用.js為擴(kuò)展名的文件:
<script src=”../1.js”></script>
注意:外部文件不能包含<script></script>
3.直接在HTML標(biāo)簽中
<input name='btn' type=”button” value=”彈出消息框” onclick=”javascript:alert(“歡迎你”);”/>
三.JavaScript核心語(yǔ)法
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ù)組的所有語(yǔ)速放入一個(gè)字符串,通過分割符進(jìn)行分割。
Sort():對(duì)數(shù)組進(jìn)行排序
Push():向數(shù)組末尾添加一個(gè)或更多元素,并放回新的長(zhǎng)度。
<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ù)組的新長(zhǎng)度
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)試的頁(yè)面設(shè)置成起始頁(yè)
02.設(shè)置斷點(diǎn)
03.按F5啟動(dòng)調(diào)試
方案二:chrome瀏覽器調(diào)試
步驟:01.點(diǎn)擊F12,將工具調(diào)出
02.設(shè)置斷點(diǎn)
03.刷新頁(yè)面
方案三: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語(yǔ)句組成。
下面來看一看語(yǔ)法:
function 函數(shù)名(參數(shù)1,參數(shù)2,..)
{
//JavaScript語(yǔ)句
[return 返回值]
}
function是定義函數(shù)的關(guān)鍵字,必須有。
參數(shù)1,和參數(shù)2是該函數(shù)的參數(shù),因?yàn)镴avaScritp他本省的類型是弱類型,所有在給定參數(shù)時(shí)沒有必要提供類型
{}定義的函數(shù)的開始和結(jié)尾.
return 語(yǔ)句用來規(guī)定函數(shù)返回的值.
2.調(diào)用函數(shù)
要執(zhí)行一個(gè)函數(shù),首先肯定要調(diào)用這個(gè)函數(shù),必須制定函數(shù)名和其后的參數(shù)。
eg:
<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:
<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。
以上這篇JavaScript基礎(chǔ)教程——入門必看篇就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- javascript基礎(chǔ)知識(shí)講解
- Three.js基礎(chǔ)部分學(xué)習(xí)
- js基礎(chǔ)之DOM中document對(duì)象的常用屬性方法詳解
- js基礎(chǔ)之DOM中元素對(duì)象的屬性方法詳解
- 淺析JS中對(duì)函數(shù)function的理解(基礎(chǔ)篇)
- js 基礎(chǔ)篇必看(點(diǎn)擊事件輪播圖的簡(jiǎn)單實(shí)現(xiàn))
- JS基礎(chǔ)隨筆(菜鳥必看篇)
- JavaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)
- Javascript基礎(chǔ)學(xué)習(xí)筆記(菜鳥必看篇)
- JavaScript基礎(chǔ)重點(diǎn)(必看)
- javaScript基礎(chǔ)詳解
相關(guān)文章
javascript基礎(chǔ)知識(shí)大集錦(二) 推薦收藏
正則表達(dá)式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout()2011-01-01
JavaScript中的操作符類型轉(zhuǎn)換示例總結(jié)
最近發(fā)現(xiàn)在前端的面試題目中經(jīng)常出現(xiàn)操作符類型轉(zhuǎn)換的題目,于是這里來進(jìn)行一個(gè)JavaScript中的操作符類型轉(zhuǎn)換示例總結(jié),需要的朋友可以參考下2016-05-05
javascript prototype原型詳解(比較基礎(chǔ))
prototype原型是javascript中特別重要的概念,屬于必須要掌握,如果沒有良好的掌握的話,進(jìn)一步用好或者學(xué)好js基本是不可能的實(shí)現(xiàn)的事情,并且此概念稍有難度,可能對(duì)于初次接觸的朋友來說有點(diǎn)困難,下面就通過代碼實(shí)例簡(jiǎn)單介紹一下prototype原型的用法2016-12-12
javascript 中__proto__和prototype詳解
本文詳細(xì)介紹了javascript的內(nèi)部原型__proto__和構(gòu)造器原型prototype,以及他們之間的異同,十分的詳盡,有需要的小伙伴快來研究下吧。2014-11-11
深入解析JavaScript編程中的this關(guān)鍵字使用
這篇文章主要介紹了深入解析JavaScript編程中的this關(guān)鍵字使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-11-11

