万物皆对象的JavaScrip

最新推荐文章于 2022-12-19 19:02:27 发布

转载最新推荐文章于 2022-12-19 19:02:27 发布 · 487 阅读

本文介绍了JavaScript的基础知识，包括变量声明、数据类型、运算符、流程控制、函数定义与使用等内容，适合初学者快速入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面：

经过前段时间对于H5语言的学习，开始慢慢适应现在的生活节奏和代码语言。从一开始的毫无头绪到现在可以大概地写出部分的网站静态页面，用了两个周的时间。作为一个之前从未接触过计算机语言的初学者来说，在感受着代码语言神奇的同时也更期待可以更深入的了解和掌握更多的相关知识，个人能力有限，但尽量做好眼前的每一件事，与大家共勉。

Java Script 是世界上最流行的编程语言。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

【使用JS的三种方式】

       1、在HTML标签中直接使用，直接内嵌JS（但是不提倡使用）；
           >>>不符合W3C关于内容和行为分离的要求；
          eg:
           <button onclick="alert('你还真的敢点啊~')"> 有本事点我啊！</button>

       2、在HTML页面中使用<script> </script>标签包裹JS代码；
            >>>script标签可以放到页面的各种位置；
          eg:
            <script type="text/javascript">
          JS代码
           </script>
       3、引入外部的JS文件使用<script> </script>标签；
          eg:
          <script language="JavaScript" src="JS/01.js"></script>

[注意事项]

          ①、<script> </script>可以嵌入到页面的任意位置，但是位置的不同将会导致JS代码的执行顺序不同；
              比如：<script> </script>放到<body></body>前面，则JS文件会在页面加载之前就执行。
          ②、引入外部的JS代码   <script> </script> 必须是成对出现的标签，而且标签内部   不能再用任何的JS代码。



【tips】

          1、JS中的多行注释。（ Ctrl+shift+/ ）


          2、JS中的单行注释。（Ctrl+/ ）

PART-1 JS中的变量和输入输出

【JS中的变量】

        1、JS中的变量声明写法：(变量的作用域)

           var num=10; 使用var声明的变量，属于局部变量，只在当前的区域之内有效；

           num=10; 不用var声明的变量，默认为全局变量，在整个JS文件中都有效；

           var x=8,y,z=10; 使用一行语句，同时声明多个变量。     上式中，y属于已经声明，但是未赋值状态，结果为undefined;


           [声明变量的注意事项]

           ①、JS中，所有变量的声明均使用var关键字。变量具体是什么数据类型，取决于给变量赋值的类型；

           ②、JS中，同一个变量可以在多次不同的赋值中，修改变量的数据类型。
                  var a=10; //在初始声明时，a属于整数型；
                  a="haha"； //重复赋值时，整数型的a被修改为字符串类型；

           ③、变量可以使用var声明，也可以不使用；
              [区别]使用var声明的变量，属于局部变量，不用var声明的变量，默认为全局变量；

           ④、只用var声明，但是不赋值，结果为undefined;

                   例如： var a; // a为undefined；
                   但是如果不使用var，也不进行赋值，执行结果会报错。

           ⑤、同一个变量名可以多次使用var声明；

                  但是后面的var没有什么用了。第二次在使用var声明时，只会被理解为普通的赋值操作；

       2、变量名的命名要求：
           ①、变量名只能由字母/数字/下划线组成。
           ②、开头不能是数字。
           ③、变量名区分大小写，大写字母和小写字母为不同变量。

       3、变量名的命名规范：
           ①、要符合小驼峰法则：首字母小写，之后每个单词的首字母大写；myNameIsWangQiang; √

           ②、或者使用匈牙利命名法：所有字母小写，单词之间用下划线分开； my_name_is_wang_qiang;√
           ③、 mynameiswangqiang √ 但是不规范；

       4、   JS中的数据类型: （均用var引用，但是赋值类型不同） ("▔□▔)"重点！！！
           ①、Undefined:已经使用var进行了声明，但是未进行赋值；eg:var=a；此时a为未赋值的变量，运行显示undefined;
           ②、Null:表示空的引用；
           ③、Boolean：布尔类型:只有两个值：true、false,表示真假；
           ④、Number:数值类型。可以为整数，也可以为小数；
           ⑤、String:字符串类型;用"或"包裹的内容，称为字符串；
           ⑥、Object:对象类型；


       5、【常用的数值函数】

           ①、isNaN（）;判断一个变量或者常量是不是NaN（not a number）;
                    使用isNaN（）;判断时会尝试使用number()函数进行转换，如果最终结果能够转换为数字，则不是NaN.结果为false；

           ②、Number（）：将其他类型的数据尝试转换为数值形式；

[字符串类型]

              >>>字符串为纯数值字符串，这会转换成相应的数值；"111">111
              >>>字符串为空的字符串，会转为0； "">0
              >>>字符串包含其他任何类型的字符时，均不能进行转换；"1a">NaN

              [Boolean类型]     ture>>1 false>>0

              [Null/Undefined类型]     Null>0   Undefined>NaN

              [Objiect类型] 待讲

           ③、ParseInt() 将字符串转换成整数类型；！！！

              >>>纯数值字符串，能转。"12">12 "12.9">12 小数在转换时直接被抹掉，不进行四舍五入；
              >>>空字符串，不能转。"">NaN
              >>>包含其他字符的字符串，会截取第一个非数值字符串前的数字部分；"123a456">123； "a123">NaN
              >>>ParseInt() 只能转字符串，转其它类型都是NaN;

             【Number（）与ParseInt() 的区别】("▔□▔)"重点！！！

              ①、Number（）能转所有类型的数据类型，ParseInt() 只能转字符串；

              ②、两者在转字符串时，结果不完全相同。

           ④、ParseFloat（） :将字符串转换为数值类型；！！！

                   转换规则与PaseInt相同，如果有小数，则保留小数点。如果没有小数，则依然是整数。

           ⑤、TypeOf()   检测变量的数据类型：
                       字符串>string       数值>Number         true/false>Boolean
                     未定义>Undefined    对象/Null>object      函数>function

   【JS中常用的输入输出语句】
           1、document.write();将括号中的内容打印输出到浏览器的屏幕上；
                       使用时需要注意除了变量常量外的所有内容必须要放到""中。变量和常量必须放到""外面。
                       如果同时有变量和常量，必须使用+连接。
               eg:document.write("右手中的纸牌 "+right+" <br/> <br/>");
           2、alert（）使用弹窗输出；
                      弹窗警告，（）中的内容必须与上述要求相同。
           3、prompt 弹窗输入；
              接受两部分参数：
              ①、输入框上部的提示内容，可选。
              ②、输入框里面的提示信息，可选。
                                         当只写一部分时，表示输入框上部的提示内容。
                                          可以定义变量，接受输入的内容。点击确定按钮，变量将被赋值为输入的内容；
                                          点击取消按钮，变量将被赋值为Null;
                                          输入内容时，默认接收的数据类型都是字符串！！！
              eg:
                var name= prompt("请输入你的名字","王强") ;
                      alert("您输入的是"+name);

PART-2 JS中的运算符

1、算术运算(单目运算符)

             + 加、-减、*乘、 /除、 %取余数、    ++自增、--自减

             ①、+ ：有两种作用:连接字符串、加法运算
                             当 + 两端全部为数值时，进行加法运算。当 + 两侧中任意一边存在字符串时，就会起到连接字符串的作用，链接之后的结果为字符串。
                             除了+之外，其余的符号在运算时会尝试将左右变量用Number（）将它们转换成数字。

             ②、/ ：结果会保留小数点。不限制位数。
             ③、++ :自增运算符，将变量在原有的基础上面+1；

                                        【a++和++a的异同】
                   >>相同点：无论a++还是++a，运算之后的值均会+1；
                   >>不同点：a++先用a的值去运算，再把a+1;
                           ++a先把a+1,再用结果去运算；

                   eg:var a=3,b,c;
                      b=a++ +2;
                      c=++a +2;

                    >>>a=5 , b=5 , c=7


             ④、-- : 自减运算符，将变量在原有的基础上-1；

       2、赋值运算

             =赋值       += -= *= /= %=

             ①、+=：   a+=b; 相当于a=a+b。但是推荐使用前者，运算速度快；
            eg:
                var a=3;
                a +=3;
                alert(a);
                >>6

       3、关系运算

             ==等于、 ===全等、！=不等、！==不全等、>、<、>=、<=

             ① 关系运算符运算之后的结果只能是Boolean类型;
             ② 判断一个数字属否处于某个区间必须用&&连接;
                 a<10 && a>0 √
                 10>a>0       ×
             ③ === 为严格等于，要求不但要类型相同，值也必须相同；类型不同，结果直接为false；相同的话再进行下一步运算；
             ④ == 为等于，类型相同，与===效果一样；类型不同时，会先尝试用Number()将两边函数转换为数字，再进行运算。
                                            但是存在各别的个例： Null===false; ×
                                  Null==Undefined; √


       4 条件运算符(多目运算)

             a>b?true:false

             有两个重要符号：     ?   :
             当？前面部分运算结果为true时，执行：前面的代码；
             当？后面部分运算结果为false时，执行：后面的代码；
             冒号两边可以为数值，则整个式子可用于赋值。
             冒号两端可以为代码块，将直接执行代码。
             多目运算符号可以多层嵌套；

       5、位运算符、逻辑运算符

            && 与、||或、！非

             &&：两边都成立，结果为true；
             ||:两边有一边成立，结果为true；
             && 和 ||同时存在时候，&&的优先级高；

       6、运算符的优先级：
       () 小括号优先级最高
       ! ++ --
       * / %
       + -
       > < >= <=
        == !=
        && //   && 和 ||同时存在时候，&&的优先级高；
        ||
        = += -= *= /= 各种赋值优先级最低；

PART-3 JS中的分支结构

【if-else结构】
    1、结构写法:
            if(判断条件){
             条件为true时执行if的代码
            }
            else{
                条件为false时候执行else的代码
            }
      2、注意事项：
        ①、else{}语句块可以根据情况进行省略；
     ②、if和else后面的{}可以省略，但是省略了之后，它们之后只能跟一条语句，所以不建议省略{}；
    3、if的()中的判断条件，支持的数据类型：                                重点！！！
      ① Boolean类型:true-真 ;false-假；
        ② String:空字符串为假，非空字符串为真；
     ③ Number:0为假,一切非零数字为真;
      ④ null/Undefined:全为假;
      ⑤ Object:全为真;

    【else-if结构/多层if结构 /阶梯if结构】

        1、结构写法:
           if(条件一)   {    }
            else if(条件二){   }
                       else{    }
       2、多层if结构中，各个判断条件之间互斥，执行选择符合条件的第一条进行执行，执行之后跳出结构体系，不再继续分支；

     【嵌套if结构】
      1、结构写法：
        if(条件一){ 条件一成立
                if(条件二){ 条件一成立，并且条件二也成立； }
                 else{   条件一成立，但是条件二不成立；          }
                }
        else{ 条件一不成立     }
      2、在嵌套if结构中，如果省略{}，则else{}结构属于距离自己最近的if{}结构；
      3、嵌套结构可以多层嵌套，但是一般不推荐超过三层；能用多层if就不要用嵌套if；

【switch case结构】
     1、结构写法：

           var num=2;
            switch (num>3){
                case true:
                    document.write("第一个case")
                    break;
                case false:
                    document.write("第二个case")
                    break;
                case 3:
                    document.write("第三个case")
                    break;
                default:
                    document.write("case都不成立，执行default")
                 break;
            }
      2、注意事项：
         ① switch结构中的（）中的表达式可以使用JS支持的各种数据类型。
         ② switch（）结构在进行判断时，使用===判断。
         ③ case后面的表达式可以是各种数据类型，但是值要求各不相同，否则也只会执行第一个case;
         ④ break作用：执行前面case代码之后，跳出当前的switch结构；
            缺少break的后果：switch只会判断一次结果，从第一个正确的case项开始，执行后面所有的case和default；
         ⑤ switch结构在进行判断的时候，只会判断一次正确答案。当遇到正确的case之后不再判断后续的项目。
         ⑥ switch结果执行的效率要比多重if结构快，所以在多路分支结构中优先使用switch结构。

PART-4 JS中的循环结构

【while() {}循环结构的步骤】
              1、声明循环变量
              2、判断循环条件
              3、执行循环体操作
              4、更新循环变量
              然后循环执行2-4，直到条件不成立是跳出循环。

eg:

                var num=1; //声明循环变量
             while (num<=10){ //判断循环条件
                document.write(num+"<br />");//执行循环体操作
              num++; //更新循环变量
       }

              while循环()中的表达式，运算结果可以是多种类型，但是最终都会转为真假，转换规则同if结构
              （1）、boolean类型：true为真，false为假
              （2）、string类型：所有非空字符串为真，空字符串为假
              （3）、number类型：一切非零数字为真，零为假
              （4）、null、undefined、NaN：全为假
              （5）、object类型：全为真。

【 while循环与do-while循环的区别:】

while循环是先判断再循环; 

do-while循环是先执行再判断,即便是条件不成立,该循环也最少执行一次.

var num=10;

do{

document.write(num+"<br />");

num--;

}

while(num>=0);

【for循环】

1、for循环有三个表达式：

① 声明循环变量;

② 判断循环条件;

③ 更新循环变量;

三个表达式之间用;分隔开,三个表达式可以省略,但是两个分号不能省略.

2、for循环的执行特点:先判断再执行，和while相同；

执行顺序：1、初始语句 2、执行条件是否符合？ 3、循环体 4、增加增量 ；

3、for循环三个表达式均可以由多部分组成，第二部分多个判断条件用&& 、||连接，其他部分可以用，连接。

var num =1;

while (num<=10){

document.write(num+"<br />")

num++

}

将上部while循环改为for循环如下:

for(var num=1; num<=10;num++){

document.write(num+"<br />")

}

【循环控制语句】

1、break：跳出本层循环，继续执行后面的语句。

如果循环有多层嵌套,则只能跳出来一层循环；

2.continue：跳过本次循环剩余的代码继续执行下一次循环；

①、对于for循环：continue之后执行的语句，是循环变量更新语句i++；

②、对于while、do-while循环，continue之后执行的语句，是循环条件判断。

因此在使用这两个循环时，必须将continue放到i++之后使用。否则，continue将跳过i++， 变成死循环。

PART-5  JS中的循环嵌套

循环嵌套的特点：

              外层循环转一次，内层循环转一圈

              外层循环控制行数，内层循环控制每行元素个数

外层循环控制行数,内层循环控制每行的元素个数

图形题做题思路:

1、确定图形有几行，行数即为外层循环次数；

2、确定每行中由几种元素组成，有几种元素即表示有几个内层循环。

3、确定每行中每种元素的个数，这个个数即为每个内层循环的次数。

tips:如果每种元素的个数不固定,则找出每种元素的个数,与行号的关系,这个关系表达式,就是内层循环的最大值.

PART-6  JS中的函数和BOM

一、函数定义：

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

【函数的声明及调用】

1、函数的声明格式：

function 函数名 (参数1，参数2，参数3...){

函数体代码

return 返回值

}

function saySth(str,color){

document.write("<div style='color:"+color+";'>"+ str+"</div>");

}

函数的调用：

①、直接调用：函数名(参数1的值，参数2的值，参数3的值...);

saySth("hahaha","blue");

②、在HTML标签中直接使用事件名="函数名()"

<button onclick="saySth('hahaha','blue')">点击按钮，打印内容</button>.

2、函数的注意事项：

①、函数名必须要符合小驼峰法则：首字母小写之后每个单词首字母大写；

②、函数名后面的括号中，可以有参数也可以没有参数，分别称为有参函数和无参函数。

③、声明函数时的函数列表，称为形参列表，形式参数。（变量的名字）

function saySth(str,color){}

调用函数时的列表，称为实参列表，实际参数。（变量的赋值）

saySth("hahaha","blue");

④、函数的形参列表个数和实参列表的个数没有实际联系；

函数参数的个数，取决于实参列表;

如果实参列表的个数<形参列表的个数，则未赋值的形参，将为Undefined;

⑤、函数可以有返回值，使用Return返回结果；任何代码不能写在return之后；

调用函数时，可以使用一个变量接受函数的返回结果。如果函数没有返回结果，则接受的结果为Undefined;；

⑥、函数中变量的作用域：JS中只有函数有作用域；

在函数中，使用var声明的变量为局部变量只能在函数中使用。

不使用var声明的变量为全局变量在函数外也能访问。

函数的形参列表默认为函数的局部变量，只能在函数中使用。

⑦函数的声明与函数的调用没有前后之分，可以在声明函数之前调用函数。

eg:

func();

function func(){};

二、 【匿名函数的声明使用】

function(){ }

1、声明一个匿名函数，直接赋值给某一个事件；

window.onload=function(){}

2、使用匿名函数表达式。

将匿名函数，赋值给一个变量。

声明：var func=function(){};

调用：func();

注意：使用匿名函数表达式时，函数的调用语句，必须放在函数的声明语句后面！！！

3、自执行函数：

①、可以使用多种运算符开头，但是一般用！(结构清晰，推荐使用!)

!function(形参列表){

alert(123;)

}(实参列表)

②、使用()将函数及函数后的调用()包裹起来就可以调用了。(能够表明匿名函数与调用的()是一个整体，是官方推荐的写法！)

(function(形参列表){

alert(123;)

}(实参列表))

③、使用()包裹函数部分：(不推荐使用) 

(function(){

alert(123)

})() 

【函数的内部属性】

一、Arguments对象：

①、作用：用于储存调用函数时的所有实参，

当我们调用函数，并使用实参赋值时，实际上参数列表已经保存到了srguments数组中，

可以在函数中使用 arguments[n]的形式调用，n从0开始；

②、arguments数组的个数取决于实参列表，和形参列表无关。

但是，一旦第N个位置的形参、实参、arguments都存在时，形参将与arguments绑定，同步变化；

即在函数中修改形参的值，arguments也会改变，反之亦然。

③、arguments.callee 是arguments的重要属性。表示arguments所在函数的引用地址。

在函数里面，可以使用arguments.callee()调用函数本身。

在函数内部，调用函数自身的写法叫做递归。

递归分为两部分：以递归调用语句为界限，可以将函数分为上下两部分

递：↑ 当函数执行上半部分，遇到自身的调用语句时，继续进入内层函数，在执行上半部分。直到执行完最内层函数。

归：↓ 当内层函数执行以后，在从最内层函数开始，逐渐执行函数的下半部分。

当最外层函数执行时，遇到自身的调用语句，会进入内层函数执行，而外层函数的后半部分暂不执行。

直到内层函数执行完以后，在逐步向外执行。

var num = 1;

function func(){

console.log(num);

num++;

if(num<=4){

arguments.callee();

}

num--;

console.log(num);

}

func();

[JS代码的执行顺序问题]

JS代码在运行时会分为两大部分：检查装载部分、执行阶段；

检查装载阶段：会先检查代码的语法错误，进行变量、函数的声明；

执行阶段：变量的赋值、函数的调用均为执行阶段；

以下代码为例：

consoloe.log(num); >>undefined;

var num=10;

func1();

function func1(){ }; >>函数可以正常执行；

func2();

var func2 = function(){ }; >>函数不能执行，打印func2时显示undefined;；

原因如下：代码执行顺序如下：

---------检查装载阶段---------

var num

func1();

var func2 

---------代码执行阶段---------

consoloe.log(num); >>undefined; var num=10;

function func1(){ };

func2(); = function(){ }

二、JS中的BOM：

一、【screen 对象】

屏幕宽度-- console.log(screen.width)

屏幕高度-- console.log(screen.height)

可用宽度-- console.log(screen.availWidth)

可用高度-- console.log(screen.availHeight) =屏幕高度-底部状态栏高度；

二、【location 对象】

1、 取到浏览器的URL地址信息；

完整的URL路径：

协议名：//主机名(ip地址)：端口号/文件所在路径?传递参数 (name1=value1&name2=value2)#锚点

eg:

http://127.0.0.1:8020/wenjianjia/index.html?name1=value1&name2=value2#aaa

console.log(location)

console.log(location.href);//返回当前完整路径；

console.log(location.protocol);//返回协议名；

console.log(location.host);//返回主机名+端口号；

console.log(location.hostname);//返回主机名；

console.log(location.port);//返回端口号；

console.log(location.pathname);//文件路径；

console.log(location.search);//返回?开头的参数列表；

console.log(location.hash);//返回#开头的锚点；

2、 使用JS跳转页面的方法：

Window.location="http://www.baidu.com";

细分几种使用location跳转页面的类型：

location.replace("http://www.baidu.com"); 使用新的文档替换当前文档，替换以后，不能退回。

location.assign("http://www.baidu.com");加载新的文档，加载之后，可以退回。

location.repload();重新加载当前页面，即刷新页面；

①、 location.repload(true) 强制刷新页面，从服务器端重新加载页面----Ctrl+f5;

②、 location.repload() 在本地刷新当前页面---f5

三、【history 浏览历史】

history.length 浏览历史列表的个数;

history.back()； 后退

history.forward(); 前进

history.go(); 跳转到浏览历史的任意一个页面；0表示当前页面；-1表示后一个页面。1表示前一个页面；

四、【navigator 浏览器信息】

了解即可

console.log(navigator);检测浏览器的各种插件系统信息。

navigator.plugins;检测浏览器里安装的各种插件；

五、【Window对象的常用方法：】

>>>在window对象中的所有属性和方法均可以省略window关键字；

1、alert() 弹出一个警告提示框;

2、prompt() 弹窗接受用户的输入；

3、confirm() 弹出带有"确定"/"取消"按钮的提示框，点击按钮返回true/false;

4、close() 关闭当前浏览器窗口，在个别浏览器中，脚本语言不得关闭非脚本打开的窗口。

只能关闭使用超链接、window.open()打开的窗口；

5、window.open()打开一个新窗口。

参数1：新窗口的地址

参数2：新窗口的名字，没卵用，很鸡肋；

参数3：新窗口的各种属性设置："属性1=值1，属性2=值2，...."

6、setTimeout() 设置延时多久执行，只执行一次；

接受两个参数：需要执行的函数、延迟时间。

7、setInterval()设置定时器，每隔n毫秒执行一次；

接受两个参数：需要执行的函数、间隔时间。

8、clearTimeout();清除延时器

clearInterval();清除定时器

使用方法：设置延时器或者定时器时，可以使用变量接受定时器ID；

var id = setInterval;

调用clearInterval时，将id传入，即可消除对应的定时器；

clearInterval(id);

PART-7  JS中的DOM操作

文档树（Document Tree）是HTML页面的层级结构。

它由元素、属性和文本组成，它们都是一个节点（Node），就像公司的组织结构图一样。

【DOM树节点】

DOM节点分为三大类：元素节点、文本节点、属性节点；

文本节点、属性节点属于元素节点的子节点。操作时，均需要取到元素节点再操作子节点；

可以使用getElement系列方法，取到元素的节点；

【查看元素节点】

1、getElementById：通过ID取到唯一节点；如果ID重名，只能取到第一个；

getElementsByName() 通过name属性

getElementsByTagName() 通过标签名

getElementsByClassName() 通过class名

>>>获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染之后执行。

可以有两种方式实现：

①、将JS代码写在<body></body>标签之后；

②、将代码写到window.onload函数之中；

>>>后面三个getElements，取到的是数组格式，不能直接添加属性，而应该取出数组的每一个单独操作。

例如：

getElmentsByName("name1")[0].onclick=function;

【查看设置属性节点】

1、查看属性节点 getAttribute("属性名")

2、设置属性节点 setAttribute("属性名，属性值")

>>>查看和设置属性节点，必须要先取到元素节点,才能使用。