Rumah > Artikel > hujung hadapan web > 简单易懂，javascript自学学习笔记
简单易懂，javascript自学学习笔记
- 亚连asal
- 2018-05-18 09:52:311865semak imbas
下面是我给大家整理的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=、643a48e7ab2873c1687a012d7f275898逻辑运算符：&&、||、!
var t = 4;
alert(!t); //false,因为t=4,而4是非0，0代表false,非0就是true,所以!t就是false
5>位运算符：&、|、^、>>、
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自学学习笔记，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 简单易懂，javascript自学学习笔记. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional