Simple and easy to understand, javascript self-study study notes

The following are the JavaScript self-study notes I compiled for you. Interested students can take a look.

Chapter 1
1. Overview of JavaScript
JavaScript is an object- and event-driven scripting language, mainly used on the client side.
Features:
1. Interactivity (all it can do is dynamic interaction of information)
2. Security (it does not allow direct access to the local hard disk)
3. Cross-platform (as long as it is Any browser that can interpret JS can execute it, regardless of the platform).
2. The difference between JavaScript and Java
1. JS is a product of Netscape Company, formerly LiveScript, Java is a product of Sun Company, and now it is a product of Oracle Company.
2.JS is an object- and event-based language, and Java is an object-oriented language.
3.JS is a weakly typed language, and Java is a strongly typed language.
4.JS does not require compilation to run. It can be run directly. Java needs to be compiled into a class bytecode file before it can be run.
3. JavaScript and JScript
The former is from Netscape and the latter is from Microsoft. There are some differences between the two.
Currently on the market The browser has the best support for JavaScript.
In order to unify the standards, an ECMA specification was released to unify the two standards.
4. The way to combine JavaScript with HTML
1. Encapsulate javascript code into 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags.
2. Encapsulate the javascript code into a js file, and then import it through the src attribute in 3f1c4e4b6b16bbbd69b2ee476dc4f83a.
It should be noted that if the src attribute is specified in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, then the code encapsulated in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag will not be executed. For example, the following code will have a problem:

<script type="text/javascript" src="test.js">alert("你好");</script>

The code of

alert("Hello"); will not be executed. Therefore, importing js files is usually done using a separate 3f1c4e4b6b16bbbd69b2ee476dc4f83a. For example, the following code is no problem:

<script type="text/javascript" src="test.js"></script>  
<script type="text/javascript">alert("你好");</script>

5. Universal expression of grammar
Grammar content contained in general high-level languages:
1. Keywords: This language is given special meaning words.
2. Identifier: A symbol used to identify data and expressions. It can usually be understood as a name customized in the program, such as variable name and function name.
It is the same as Java, (26 English letters in upper and lower case) (ten numbers) ($) (_)
3. Comments: Comments explain the interpreter and are used to debug the program.
Supports two types of comments: single-line // and multi-line comments /*comment content*/
4. Variables and constants: used to identify a space in memory and used to store data. The data in this space can changing.
When should variables be used? Use variables when the data is uncertain.
How to define variables: var variable name = variable value;
Note:
> js is a weakly typed language, variables can be used directly without declaration
> There is no character type in js, ' ' and "" both represent strings. Single quotes can be nested inside double quotes, and double quotes can also be nested inside single quotes
5. Operators: symbols that allow data to be operated.
1> Arithmetic operators: - * / % --
Note: When calculating division, two integers are divided. If there are decimals in the result, js will retain it, which is a little different from java, for example,
> var a = 2321;
alert("a:" a/1000*1000);
The printed result is 2321, while in java it is 2, because js is a weak type, there is no place after 2321/1000 Convert decimals to integers
> var a1=2.3,b1=4.7;
alert("a1 b1=" (a1 b1));//The result is 7, not 7.0, because it is weakly typed
> alert("12"-1);//The result is 11, 12 will be converted into an integer first
> alert("12" 1);//The result is 121, if you add the sign, it will be processed String concatenation
> alert(true 1);//The result is 2, because in js, false is 0, or null. Non-0, non-null means true, and is represented by 1 by default.
> alert(2%5);//The result is 2, 6%1, the result is 1, 10%5, the result is 0
2>Assignment operators: =, =, -=, *= , /=, %=
3> Comparison operators (the result of the operation is either false or true): >, 95ec6993dc754240360e28e0de8de30a=, 6ca6e33443a15011fd87b20d4732deca0?alert("3 is greater than 0"):alert("3 is less than 0" ));
Example: a>b? 1 : 0
6. Statement: An expression used to control the running process of the program.
1>.Sequential structure
When executing code from top to bottom, this is called sequential structure
2>.Judgment structure
Representative statement: if
Details:

<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(&#39;9&#39;));//"string"    
</script>

要判断某个类型，可以按照以下方法：

<script type="text/javascript">    
    alert(typeof("abc")==&#39;string&#39;); //true    
    alert(typeof(2.5)==&#39;number&#39;);//true    
    alert(typeof(true)==&#39;boolean&#39;);//true    
    alert(typeof(78)==&#39;number&#39;);//true    
    alert(typeof(&#39;9&#39;)==&#39;string&#39;);//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)==&#39; &#39;){    
                            start++;    
                        }    
                        while(start<=end && str.charAt(end)==&#39; &#39;){    
                            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)==&#39; &#39;){    
                            start++;    
                        }    
                        while(start<=end && this.charAt(end)==&#39; &#39;){    
                            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自学学习笔记，希望今后会对大家有帮助。

相关文章：

在页面自动执行（加载）js的几种解决方法，详细代码解析

利用js 来判断客户端能否上网（代码附上）

webpack打包压缩js与css教程说明

The above is the detailed content of Simple and easy to understand, javascript self-study study notes. For more information, please follow other related articles on the PHP Chinese website!