前言
本章主要是學(xué)習(xí)JavaScript的基本理論知識(shí)以及簡單使用,屬于入門級別的難度,如果有錯(cuò)誤,希望大神們提出來,一起學(xué)習(xí).深入研究和擴(kuò)展學(xué)習(xí)可以去官網(wǎng),下面我們正式開始學(xué)習(xí)JavaScript.
1, 什么是JavaScript
- 所謂的JavaScript,其實(shí)就是一門廣泛運(yùn)用于PC端的腳本語言,是由Netspace公司設(shè)計(jì)的,當(dāng)時(shí)正是和sun公司合作,所以起的名字和Java很像,但是,它們是兩門完全不同的語言.不要混淆了.只是但是Java特別火,JavaScript借助了Java,快速被全世界記住,成為一門熱門的語言.在后面的學(xué)習(xí)我們就將JavaScript簡稱為JS.
- JS的具體用途是什么
- 1,JS的用途很廣,比如說:HTML的DOM操作(所謂的dom操作:即節(jié)點(diǎn)操作(所謂的節(jié)點(diǎn)操作:就是節(jié)點(diǎn)的增刪改查操作)).
- 2, JS還可以增加網(wǎng)頁的動(dòng)態(tài)功能,比如:動(dòng)畫
- JS還能處理事件,比如:監(jiān)聽鼠標(biāo)的點(diǎn)擊,滑動(dòng)以及鍵盤的輸入等.
2, JavaScript的兩種書寫方式
- JavaScript有兩種編寫方式
- 1,JS的頁內(nèi)編程方式:即在當(dāng)前網(wǎng)頁的script標(biāo)簽中編寫內(nèi)容
<script type="text/javascript">沒錯(cuò),這樣就是JS的頁內(nèi)編寫方式</script>
- 2, 外部JS : 即在外部的script編寫誒榮
只需要在當(dāng)前網(wǎng)頁中導(dǎo)入外部的JS即可
<script scr="index.js"></script>
3, 下面我們就來做幾個(gè)例子
- 輸出一個(gè)HelloWorld
<!DOCTYPE html>
<!--注意一點(diǎn):我第一次使用的時(shí)候,彈框一直不出來,主要的原因是alert
中括號里面需要用單引號引用起來,注意不是雙引號.
我的錯(cuò)誤是:忘記添加單引號,后來使用雙引號也不對.記住是單引號
-->
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的簡單使用</title>
<!--JavaScript的頁內(nèi)樣式-->
<script type="text/javascript">
alert('HelloWorld')
</script>
</head>
<body>
<button type="button" onclick="alert('Alex在學(xué)JavaScript')">百度一下,你就知道了</button>
</body>
</html>
// 運(yùn)行效果: 當(dāng)打開瀏覽器的時(shí)候就會(huì)彈出一個(gè)彈框:提示"HelloWorld",當(dāng)點(diǎn)擊確定后,再點(diǎn)擊按鈕,就會(huì)彈出一個(gè)彈框,提示"Alex在學(xué)JavaScript".
- 2, 如何打印輸出
<!DOCTYPE html>
<!--注意一點(diǎn):我第一次使用的時(shí)候,彈框一直不出來,主要的原因是alert
中括號里面需要用單引號引用起來,注意不是雙引號.
我的錯(cuò)誤是:忘記添加單引號,后來使用雙引號也不對.記住是單引號
-->
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的簡單使用</title>
<script type="text/javascript">
// alert('HelloWorld')
console.log('Alex正在努力的學(xué)習(xí)JavaScript');
console.log('學(xué)習(xí)是一種樂趣');
console.log('注意括號里也是需要單引號的');
console.log('除了單引號,最后還需要一個(gè)分號');
console.log('千萬不要忘記這兩點(diǎn)了');
</script>
</head>
<body>
<!--<button type="button" onclick="alert('Alex在學(xué)JavaScript')">百度一下,你就知道了</button>-->
</body>
</html>
// 本例重點(diǎn) : console.log('需要單引號和分號');輸出格式
- 3, JS中的基本數(shù)據(jù)類型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS的基本語法</title>
</head>
<body>
<script>
// 基本數(shù)據(jù)類型的定義
var age = 10; // number類型
var name1 = 'Alex'; // string類型
var money = 100; // number類型
var name2 = 'Jane'; // string類型
// 利用typeof來查看真實(shí)類型
console.log(typeof age);
console.log(typeof name1)
console.log(typeof name2)
console.log(typeof money)
// 判斷真假性
var result = true; // 真為ture, 假為:false 屬于boolean類型
// 設(shè)置對象為空時(shí)
var num = null; // object類型
console.log(result, num);
console.log(typeof result,typeof num)
</script>
</body>
</html>
// 本例重點(diǎn) :
1, typeof 打印真實(shí)類型,
2, 如何定義一個(gè)基本數(shù)據(jù)類型,
- 4, 如何拼接字符串
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中如何拼接字符串</title>
</head>
<body>
<script type="text/javascript">
var name1 = 'Alex';
var name2 = 'William';
// 拼接字符串
var newName = name1 + name2;
console.log(newName)
console.log(typeof newName); // string
// 面試題 : 寫出下面str的值
var str1 = 8 + 8 + 8 +8; // str1 = 32
var str2 = 8 + 8 + '8' + '8'; // str2 = 1688
var str3 = '8' + '8' + 8 + 8; // str3 = 8888
var str4 = '8' + 8 + 8 + '8'; // str4 = 8888
var str5 = '8' + 8 + '8' + 8; // str5 = 8888
console.log(str1, str2, str3, str4, str5);
// 總結(jié) : 運(yùn)算時(shí)從左到右開始運(yùn)算的,只要是遇到字符串類型,后面的都會(huì)被轉(zhuǎn)為string類型
</script>
</body>
</html>
// 本例重點(diǎn) : 當(dāng)基本數(shù)據(jù)和string混合運(yùn)算時(shí)的本質(zhì)是什么?
- 5, JS中的數(shù)組
// 數(shù)組例子1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中的數(shù)組相關(guān)知識(shí)</title>
</head>
<body>
<script type="text/javascript">
var name ='William';
// 數(shù)組的簡單定義
var informations = [name, 'Alex', 25, 177, 'IT', 'iOS'];
// 如何獲取數(shù)組中的元素
console.log(informations[0]); // Williame
// 如何計(jì)算數(shù)組的長度
console.log(informations.length); // 6
// 判斷類型
console.log(typeof informations); // object
// 遍歷數(shù)組中的每個(gè)元素,判斷每個(gè)元素的類型是什么
for(var i = 0; i < informations.length; i++){
// 打印出每個(gè)元素
console.log(informations[i]);
// 打印出每個(gè)元素的類型
console.log(typeof informations[i]);
}
</script>
</body>
</html>
注意:本例重點(diǎn) :
1, 數(shù)組中的元素是以什么形式存在的?
2, 對象需要用單引號引用起來, 如果沒有用單引號引用的,說明在數(shù)組外邊已經(jīng)定義過了,剩余的就是基本數(shù)據(jù)類型.
3, 如何動(dòng)態(tài)獲取到數(shù)組的長度.
(關(guān)于JS中的數(shù)組與OC中的數(shù)組的區(qū)別下面會(huì)介紹)
- 運(yùn)行結(jié)果 :
Snip20160318_3.png
// 數(shù)組例子2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中的數(shù)組相關(guān)知識(shí)</title>
</head>
<body>
<script type="text/javascript">
var name = 'William';
// 定義一個(gè)數(shù)組(注意這個(gè)數(shù)組,數(shù)組中還有數(shù)組)
var names = ['Alex', name, 25, 177, ['JL', 23]];
// 獲取數(shù)組中的元素
// console.log(names[1]);
// console.log(names[3]);
// console.log(names[4]);
// console.log(names[4][0]);
for(var i = 0; i < names.length; i++){
console.log(names[i]);
console.log(typeof names[i]);
}
</script>
</body>
</html>
-
運(yùn)行結(jié)果 :
Snip20160318_7.png
Snip20160318_16.png
JS中的數(shù)組與OC中的數(shù)組的區(qū)別 ?
1, JS中的數(shù)組:元素可以是無序的,可以存儲(chǔ)所有類型,但是OC中的數(shù)組:是有序的,只能存儲(chǔ)相同類型的數(shù)據(jù)
2, JS中的數(shù)組:數(shù)組中還可以嵌套數(shù)組, 但是OC中的數(shù)組不能再嵌套數(shù)組
3, 動(dòng)態(tài)計(jì)算數(shù)組的長度時(shí),使用的屬性不一樣,JS中使用的是length,而OC中使用的是count.
4, JS中的對象是用單引號,而OC中的對象是雙引號還有@符號
6, JS中的點(diǎn)語法
var handsomeBoy = {
name : 'Alex',
age : 25
}
console.log(handsomeBoy.name);
console.log(handsomeBoy.name + '#' + handsomeBoy.age);
- 7, JS中函數(shù)的定義
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中函數(shù)的定義</title>
</head>
<body>
<script type="text/javascript">
/*
函數(shù)的定義 :
function 函數(shù)名 (參數(shù)列表){ // 函數(shù)列表不需要表明參數(shù)類型
函數(shù)體
}
*/
// 例子1 : 加法運(yùn)算
function sum (sum1,sum2)
{
return sum1 + sum2;
}
console.log(sum(12,12));
// 方式2
function sum (sum1, sum2){
console.log(sum1 + sum2);
}
var result = sum(10, 10);
// 方式3
function sum (sum1, sum2){
console.log(sum1 + sum2);
}
var result = sum(8,8); // 16
console.log(result); // undefined
// sum(18, 18); // 36
// 要求寫一個(gè)萬能的加法運(yùn)算公式
function sum(numbers){
var count = 0;
for(var i = 0; i < numbers.length; i++){
count = count + numbers[i];
}
return count;
}
var arr = [13, 12, 24, 55, 'Alex', 25, 'William'];
var result = sum(arr);
console.log(result);
// JS提供了一個(gè)屬性,我們可以不用傳參數(shù)
function sum() {
var count = 0;
for(var i = 0; i < arguments.length; i++ ) {
count = count + arguments[i];
}
return count;
}
// var arr = [13, 24, 25, 'William', 168, 'Alex']; // 只會(huì)將數(shù)組全部打印出來
var result = sum(13,14,14,15); // 56
console.log(result);
// 匿名函數(shù)
var result = function (){
console.log("Alex William");
}
// 匿名函數(shù)的調(diào)用
result();
</script>
</body>
</html>
- 運(yùn)行結(jié)果 :
Snip20160318_17.png
- 注意點(diǎn) : 特別要注意匿名函數(shù),不要忘記調(diào)用函數(shù)
