簡單易懂，javascript自學學習筆記
- 亚连原創
- 2018-05-18 09:52:311852瀏覽
以下是我幫大家整理的javascript自學學習筆記，有興趣的同學可以去看看。
第一章
一、JavaScript概述
JavaScript是基於物件和事件驅動的腳本語言，主要應用在客戶端。
特點：
1.互動性(它可以做的就是資訊的動態互動)
2.安全性(它不允許直接存取本地硬碟)
3.跨平台性(只要是可以解釋Js的瀏覽器都可以執行，和平台無關)。
二、JavaScript和Java的差異
1.JS是Netscape公司的產品，前身是LiveScript,Java是Sun公司的產品，現在是Oracle公司的產品。
2.JS是基於物件和事件的語言，Java是物件導向的語言
3.JS是弱型別的語言，Java是強型別的語言
4.JS的運作不需要編譯就可以直接運行，Java需要編譯為class字節碼檔案後才能運行
三、JavaScript和JScript
前者是Netscape公司的，後者是微軟的，兩者有點差異，
目前市場上的瀏覽器對JavaScript的支援是最好的，
為了統一規範，出了個ECMA的規範，用來統一這兩種標準
四、JavaScript與HTML結合的方式
1.將javascript程式碼封裝到3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤中。
2.將javascript程式碼封裝到js檔案中，然後透過3f1c4e4b6b16bbbd69b2ee476dc4f83a中的src屬性進行匯入。
要注意的是：如果3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤中指定了src屬性，那麼3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤中封裝的程式碼將不會被執行，比如說下面的程式碼就有問題了：
<script type="text/javascript" src="test.js">alert("你好");</script> alert("你好");的程式碼就不會被執行了。所以通常導入js檔案都是用單獨3f1c4e4b6b16bbbd69b2ee476dc4f83a來完成。例如下面的程式碼就沒問題了:
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">alert("你好");</script>五、語法的通用體現
通用高階語言所包含的語法內容：
1.關鍵字：該種語言中被賦予了特殊意義的單字。
2.標識符：用於標識資料和表達式的符號，通常可以理解為在程式中自訂的名稱，例如變數名稱、函數名。
跟Java是一樣的，(26個英文字母大小寫) (十個數字) ($) (_)
3.註 釋：註解說明解釋程序，用於調試程序。
支援兩種註解：單行//和多行註解/*註解內容*/
4.變數、常數：用於標識記憶體中一片空間，用於儲存數據，該空間中的資料是可以變化的。
何時使用變因呢？當資料不確定的時候用變數。
如何定義變數: var 變數名= 變數值;
注意的問題：
> js是弱型別語言，變數不用宣告可以直接使用
> js裡面沒有字元類型，' '和""代表的都是字串，雙引號裡面可以嵌套單引號，單引號裡面也可以嵌套雙引號
5.運算子：可以讓資料進行運算的符號。
1>算數運算子： - * / % --
注意：計算除法時，兩個整數相除，結果如果有小數的話，js會保留，跟java有點不一樣，比如，
> var a = 2321;
alert("a:" a/1000*1000);
列印結果是2321,而java裡是2，因為js是弱類型，2321/1000後沒有將小數強轉成整數
> var a1=2.3,b1=4.7;
alert("a1 b1=" (a1 b1));//結果是7不是7.0，因為它是弱型別的
> alert("12"-1);//結果是11，會先將12轉成整數
> alert("12" 1);//結果是121，加號的話會進行字串的拼接
> alert(true 1);//結果是2，因為在js中false就是0，或是null。非0，非null，就是true，預設用1表示。
> alert(2%5);//結果是2, 6%1,結果是1， 10%5結果是0
2>賦值運算子：=、 =、 -=、 *= 、 /=、 %=
3>比較運算子(運算的結果要麼是false，要麼是true)：>、f539a70d3ea090bac4faa80192f58ccc=、f04a8238f94889dabc8615e053be39e7位元運算子：&、|、^、>>、
6>三元運算子: 其實就是if ...else語句的簡寫，在java裡面三元運算子是一定要有結果的，但是js可以沒有，例如alert(3>0?alert("3大於0"):alert("3小於0" ));
範例：a>b? 1 : 0
6.語 句：用來控製程式的運作流程的運算式。
1>.順序結構
執行程式碼時從上到下，這叫做順序結構
2>.判斷結構
代表語句：if
細節：
<script type="text/javascript">
var x = 3;
if(x=4){
alert("yes");
}else{
alert("no");
}
</script>打印结果：yes,因为x=4是赋值，将4赋值给x后，x=4了，4是非0，0代表假，非零代表真，所以为true，打印“yes”
3>.选择结构switch(x),这个x在java里面只能是byte,short,int,char或枚举类型，而在javascript中，任何类型都可以，
因为它是弱类型switch的执行顺序是先执行case,再执行default,而且按照从上到下的顺序执行//演示：
<script type="text/javascript">
var x = "abcaaa";
switch(x){
default:
alert("默认值");
case "ddd":
alert("我是ddd");
break;
case "abc":
alert("我是abc");
break;
}
</script>//打印结果："默认值"、"我是ddd"，因为default下没有break，所以它会一直执行到break为止，但是如果default选项放在了
//最后一个，而且没有break的话，这条语句的执行结果就只有"默认值"
4>.循环结构:while、for,用法跟java是一样的
演示：用while循环向浏览器中打印1到10的值，每打印一次换行
<script type="text/javascript">
var x = 0;
while(x<10){
document.write("x="+x+"<br/>");
x++;
}
</script>演示：跳出循环,打印依次x==0,如果将break w换成continue w的话，那就会打印x==0x==1x==2了
<script type="text/javascript">
w:for(var x=0; x<3; x++){
for(var y=0; y<4; y++){
document.write("x=="+x);
break w;
}
}
</script>5>.其他语句
7.函 数：用于对功能的代码进行封装，便于提高复用性。
1.概念：函数就是一个功能的封装体
2.定义功能通常需要两个明确：
1>.功能的结果
2>.功能实现中的参与运算的未知的内容
3.函数细节问题：
1>.javascript中只要使用函数的名称就是对函数的调用，它不存在重载形式:举例如下
show();//直接这么调用的话将打印：undefined:undefined,一般不建议这么调用，建议有几个参数就传几个参数
show(4,5,6);//将打印4:5，这里的6看似丢了，其实没丢，被一个arguments数组存储起来了
<script type="text/javascript">
function show(x,y){
alert(x+":"+y);
}
</script>2>.每个函数中有一个数组在对传入的参数进行存储。这个数组就是arguments
<script type="text/javascript">
show(4,5,6);
function show(x,y){
alert(arguments.length);//打印3，也就是传入的参数的个数:4,5,6
}
</script>3>.返回值：
<script type="text/javascript">
function getSum(){return 100;}
var sum01 = getSum();//getSum函数运行，并将返回的100赋给sum01
var sum02 = getSum;//getSum本身是一个函数名，而函数本身在js中就是一个对象，getSum就是这个函数
//对象的引用，将getSum这个引用的地址赋给sum02,这时sum02也指向了这个函数对象。
//相当于这个函数对象有两个名称
alert(sum02);//该打印会将函数的字符串表现形式打印出来，就是该函数的代码定义格式，也就是如下代码：
/*function getSum(){
return 100;
}*/
</script>4.JS函数的其他表现形式：
1>动态函数：
>特点：函数的参数和函数体都是可以通过动态指定的
>使用的是js中内置的一个Function对象，但是用的不多，示例如下
<script type="text/javascript">
var add = new Function("x,y","var sum = x+y; return sum;");
var result = add(4,13);
alert(result);//打印结果是17
</script>2>匿名函数：没有名字的函数
<script type="text/javascript">
function hello(){
alert("你好");
}
var result = hello;
</script>//上面的写法改成匿名函数的话可以这么写：
<script type="text/javascript">
var result = function(){alert("你好");}
</script>8.数 组：对多数据进行存储，便于操作，也就是容器。
1.js中提供了定义数组的两种方式：1.var arr = []; 2.var arr = [2,23,14,48];
2.javascript中数组的特点：
1>.长度是可变的
2>.元素的类型是任意的，什么类型都可以往一个数组里装，但建议装同类型的，这样操作起来更方便
3.使用javascript中的Array对象来完成定义
1>.var arr = new Array();//这个写法相当于var arr = [];
2>.var arr1 = new Array(5);//定义数组，长度是5
9.对 象：只要是基于对象的语言，或者是面向对象的语言，就存在着对象的概念，
对象就是一个封装提。既可以封装数据又可以封装函数。
以上都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表现形式不一样，但是基本思想是一致的
六、Javascript细节问题
1.undefined:未定义。其实它就是一个常量
举例：var x;
alert(x);//这时候就会弹出undefined,因为x没有赋值就直接用，所以就会报这个异常了
2.想要获取具体的值的类型，可以通过typeof来完成，typeof返回的类型都是字符串的。
举例：
<script type="text/javascript">
alert(typeof("abc")); //"string"
alert(typeof(2.5));//"number"
alert(typeof(true));//"boolean"
alert(typeof(78));//"number"
alert(typeof('9'));//"string"
</script>要判断某个类型，可以按照以下方法：
<script type="text/javascript">
alert(typeof("abc")=='string'); //true
alert(typeof(2.5)=='number');//true
alert(typeof(true)=='boolean');//true
alert(typeof(78)=='number');//true
alert(typeof('9')=='string');//true
</script>========================================常见Javascript算法总结===========================================
<script type="text/javascript">
//定义测试数组
var arr = [10,43,3,7,52,8,34];
//查找数组中最小的元素并输出到浏览器
function getMinValue(arr){
var min = 0;
for(var i=1; i<arr.length; i++){
if(arr[i]<arr[min]){
min = i;
}
}
return arr[min];
}
//对数组中的元素从小到大排序并输出到浏览器
function arrSort(arr){
for(var x=0; x<arr.length; x++){
var index = x;
var temp = arr[x];
for(var y=x+1; y<arr.length; y++){
if(arr[y]<temp){
temp = arr[y];
index = y;
}
}
swapArray(arr,x,index);
}
}
//对一个数组中的两个元素交换位置
function swapArray(arr,a,b){
var temp = arr[a];
arr[a] = arr[b];
arr[b] = temp;
}
//对一个数组中的数据进行反转
function reverseArray(arr){
for(var start=0,end=arr.length-1; start<end; start++,end--){
swapArray(arr,start,end);
}
}
//打印数组
function println(arr){
document.write(arr+"<br/>");
}
</script>第二章
一、全局和局部变量
<script type="text/javascript">
//1.在脚本片段中定义的变量，是全局变量，全局变量在整个页面都能访问
for(var x=0; x<3; x++){
document.write("x="+x);
}
document.write("x="+x);//打印3，这里是能访问到上面的x的，因为上面的x虽然定义在for循环里，但是它却是一个全局变量
//2.在函数内部定义的变量是局部变量
var x = 3;//全局变量
function show(x){
x = 6;//局部变量
}
show(x);
document.write("x="+x);//这个打印结果是3，x=3传到show(x)里面去，x=6,但是由于
//是局部变量，外部是访问不到的
//所以document.write("x="+x)访问的全局的x=3;
</script> 二、常见对象
1.Object
常见方法：
> toLocaleString :根据所在地返回一个对应风格的日期字符串格式，调用这个方法的对象一般都是一个日期对象
比如：var dt = new Date(); alert(dt.toLocaleString());
> toString : 将当前对象(谁调用toString方法谁就是当前对象)转化为字符串，对于不同类型的对象，返回的字符串格式是不一样的，具体格式
需要参见JScript API(由于网景公司没有给Javascript提供相应的API，所以只能用微软的Jscript的API了，两者大部分东西都是一样的)
> valueOf : 返回指定对象的原始值，具体返回格式参见API
2.String
常见方法：方法很多，查阅API可以获得详细的信息
重要属性：
> prototype : 返回对象类型原型的引用，这个解释看着有点别扭，简单点说，举例如下：
我要给字符串添加一个去除两端空格的方法，原来我们是这么做的
1>.定义一个方法trim(str)：
<script type="text/javascript">
function trim(str){
var start=0;
var end=str.length-1;
while(start<=end && str.charAt(start)==' '){
start++;
}
while(start<=end && str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
</script>2>.调用这个方法：
<script type="text/javascript">
var str = " abc d asdf ";
alert(trim(str));//打印abc d asdf,结果是去除两端空格后的结果
</script> 3>.分析：这么写，我们觉得还是不够方便，我想弄成str.trim()就直接去掉空格行不行呢？就像是str.toString()方法一样方便，
参数都不用传，就直接给我去掉空格了，多爽啊，
这时候，我们就需要用到prototype这个属性了，因为toString()方法是String类的原型中的，也就是人家封装好了的，
现在我只要往它原来的类中添加一个trim(str)方法，那么所有的字符串就可以直接调用这个方法了，怎么做呢？如下：
<script type="text/javascript">
String.prototype.mytrim = trim; //这个mytrim是我在String类中加进去了一个mytrim的方法，trim是上面我定义的
//trim(str)的函数，其实也可以写成下面这种，匿名函数，但是要注意，原来的参数str
//需要改成this了，this代表当前对象，谁调用该方法，谁就代表了this
String.prototype.mytrim = function(){
var start=0;
var end=this.length-1;
while(start<=end && this.charAt(start)==' '){
start++;
}
while(start<=end && this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
}
//调用我的mytrim方法
var str = " abc d asdf ";
alert(str.mytrim());//打印abc d asdf,结果是去除两端空格后的结果
</script> 3.Array
常见方法：
> concat(一个或多个元素用逗号分开):将一个数组或字符串加到另外一个数组中去，并返回新的数组，如果被添加的是一个数组，
该方法会将这个数组中的元素一个一个添加到调用concat的数组中去。
举例：var arr1 = ["哈哈","吼吼"];
var arr2 = ["heihei",23];
var arr3 = arr1.concat("我是数组",arr2);
alert(arr3);//打印结果：哈哈,吼吼,我是数组,heihei,23
> join(separator):这个方法其实就是将数组拼接成字符串，而且接收一个参数，用于分割每个数组元素
var arr = ['你好','中国','我爱你'];
var arr1 = arr.join("-"); //arr1的结果为：你好-中国-我爱你
> pop():移除数组中最后一个元素并返回该元素，类似java中LinkedList中的removeLast方法
> push(arr):将一个元素添加到一个数组中去，并返回新书组的长度，该方法跟concat功能差不多，但是有两个小区别，
一个是push在添加元素的时候，如果被添加的元素是一个数组，它会将整个数组作为一个元素添加到调用push方法的
数组中去，而concat是将被添加的数组中的所有元素一个一个单独作为一个元素添加到调用者数组里去，第二个小区别是
返回值，concat是返回新数组，而push返回的是新数组的长度
> reverse():反转方法，返回调用者元素顺序被反转后的数组，也就是元素头尾对调
> shift():移除数组中第一个元素并返回该元素，相当于java中的removeFirst，只不过这方法名取得有点怂，实际开发中，可以用
prototype属性调用到原型然后重写一个removeFirst方法，功能跟shift一样，这样用起来更爽
> unshift():将指定元素插入数组开始位置并返回新数组的长度，该方法和pop()方法可以实现先进先出的效果，类似队列(先进先出)，
该方法如果跟shift()方法一起用，可以实现后进先出的效果，类似堆栈(后进先出)
需要注意的是，unshift一次添加多个元素的效果和多次添加同样的这几个元素的效果是不一样的，比如：
<script type="text/javascript">
var arr = [12,44];
arr.unshift(33);
arr.unshift(66);
alert(arr);//打印结果是66,33,12,44
//---------------------------------如果是以下写法就不一样了---------------------------------------
var arr = [12,44];
arr.unshift(33,66);
alert(arr);//打印结果是33,66,12,44
</script> > slice(start,end):返回一个数组的一段数据，从start开始(包含start)，到end结尾(不包含end),跟String类的substring(start,end)方法类似
> splice(start, deleteCount, 一个或多个元素以逗号隔开):从一个数组中移除一个或多个元素，可以同时在移除的元素位置上添加一个或多个元素
> 注:如果还需要特定方法，可以自己扩展，获取到Array.prototype然后进行新功能的增加
4.Date
常见方法：跟Java中的Date对象都差不多，只不过，这个js的Date对象没有后去DateFormat对象的东东，不过提供了两个格式化的方法
toLocaleString():可以转化为本地格式，带具体时间，eg:2013年8月29日 12:11:25
toLocaleDateString:也可以转化为本地格式，不过这个是不带具体时间的,eg:2013年8月29日
对于一些常见方法基本好做，有一个需要注意的地方，就是月份和星期，对于月份，js里用0到11表示1到12月份，用0到6表示周日、周一、周二...周六
下面对所有常见方法一一介绍和解释，也作为备忘和学习笔记：
> 获取时间中具体元素的方法：
var date = new Date();
年：date.getYear()
月：date.getMonth(),获取到的值加1后等于当前月份
日：date.getDate(),获取当前日在本月中是第几天
星期：date.getDay(),获取星期，返回的值为0到6，表示星期日，星期一...星期六
日期对象的毫秒值：date.getTime()
> 字符串转换为日期：
Date.parse(str):对于str参数是有格式要求的，转换后返回一个str日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数，如果需要转化为Date类型，
可以用new Date(time)再转依次，下面演示如何从一个字符串转换成一个本地时间打印出来：
<script type"text/javascript">
var dateStr = "03-23-2013 12:32:10";
var time = Date.parse(dateStr);
var date = new Date(time);
alert(date.toLocaleString());//打印结果：2013年3月23日 12:32:10
</script> > 日期转换为字符串：toLocaleString()、toLocaleDateString();
5.小知识补充:
为了简化对象调用内容的书写，可以使用js中的特有语句with来完成。
格式：
<script type="text/javascript">
with(对象){
//在该区域中，可以直接使用指定对象的内容，不需要写对象
}
//比如原来写一个对象调用的方法：
var arr = ["bb","cc","aa"];
arr.sort();
arr.reverse();
//每次调用数组方法的时候都要写对象名称arr.
//这样比较麻烦，所以可以写成如下效果
var arr = ["bb","cc","aa"];
with(arr){
sort();
reverse();
}
</script> 6.Math:该类中所有的方法都是静态的，用于计算数据用的方法基本上都在这里，方法不多也不少，只要是涉及到数据计算的
功能的方法，都可以到该对象中来找，下面就写一个获取随机数的方法演示下Math的基本方法，以作备忘：
//需求：获取1到100的随机数，由于获取到的随机数是一个浮点型的数据，所以需要转成整形的数据
//第一种写法：将获取到的随机数强转为整数类型
var randomNum = parseInt(Math.random()*10+1);
//第二种写法：利用Math.floor的方法获取小于该随机后的数据的一个整数
var randomNum = Math.floor(Math.random()*10+1);
7.Global:全局对象，它里面的方法可以直接调用，不需要像其他对象的方法一样需要对象名称. 来调用
> parseInt(numString,radio):将指定的数字字符串转化为指定的进制，如果字符串不是数字字符串，
用isNaN(parseInt(numString,radio))判断时为true，这个有个需要注意的是，如果numString里面的
内容是数字开头的，比如"123abc22ddd"，这时候parseInt方法会将123转换为数字对象，而且isNaN判断时为false.
numString:需要转换为整数型的数字字符串
radio:进制数，也就是转换后以什么进制表示
> 如果需要将一个数字的十进制转换为其他进制，可以使用Number对象来完成，如下：
var num = new Number(6);
alert(num.toString(2));//将num转换为二进制，打印结果110
//上面的写法可以用如下写法代替
var num = 6;
alert(num.toString(2));//也是打印110，这就类似于java中的装箱了，6被自动转化为了Number类型了
8.JavaScript特有方法:for in
格式：
var arr = ["张三","李四","王五"];
for(i in arr){
alert(arr[i]);//遍历的i是角标，依次打印张三、李四、王五
} 三、JS自定义对象：定义一个Person对象，并定义两个属性name和age,并定义人的eat(something)函数
<script type="text/javascript">
方式一：
function Person(){
}
var p = new Person();
p.name = "大雄";
p.age = 15;
p.getName = function(){
return this.name;
}
p.eat = function(something){
alert(this.getName()+":"+this.age+"岁, 喜欢吃"+something);
}
p.eat("鸡腿");//打印：大雄：15岁, 喜欢吃鸡腿
方式二：
//描述Person对象，类似构造器
function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return this.name;
}
this.eat = function(something){
alert(this.name+":"+this.age+"岁, 喜欢吃"+something);
}
}
//建立对象
var p = new Person("大雄",15);
p.eat("鸡腿");//打印：大雄：15岁, 喜欢吃鸡腿
方式三：
var p = {
"name":"大雄","age":15,
"getName":function(){
return this.name;
},
"eat":function(something){
alert(this.name+":"+this.age+"岁, 喜欢吃"+something);
}
}
alert(p.eat("鸡腿"));
</script>上面是我整理给大家的javascript自学学习笔记，希望今后会对大家有帮助。
相关文章：
以上是簡單易懂，javascript自學學習筆記的詳細內容。更多資訊請關注PHP中文網其他相關文章！