笔记 | JavaScript语言基础

最新推荐文章于 2022-04-03 23:59:50 发布

yanwuhc

最新推荐文章于 2022-04-03 23:59:50 发布

阅读量157

点赞数

分类专栏：自学 JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44303404/article/details/107509343

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

自学

11 篇文章 0 订阅

订阅专栏

JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。

1.Hello JavaScript

<script>
  document.write("Hello Javascript");
</script>

document是javascript的内置对象，代表浏览器的文档部分
document.write(“Hello Javascript”); 向文档写入字符串

2.JavaScript与DOM结合的例子

<button onclick="document.getElementById('text').style.display='none'">
隐藏文本</button>
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
<p id="text">这是一段通过ID查找的可隐藏和显示的文字</p>

οnclick="…" 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display=‘none’ 隐藏
.style.display=‘block’ 显示(准确的讲，以block的形式显示)

onclick，getElementById，style.display 这些内容，是HTML DOM 应该到才会用到的知识和概念。

比较完整的代码如下：

<html>
  <head></head>
  <script>
    function show(){
    document.getElementById('text').style.display="block";
    }
    function hide(){
    document.getElementById('text').style.display="none";
    }
 
  </script>
  <body>
  <button onclick="show()">显示文本</button>
  <button onclick="hide()">隐藏文本</button>
  <p id="text">LoL</P>
</html>

3.script标签
（1）javascript代码必须放在script标签中
（2）script标签可以放在html的任何地方，一般建议放在head标签里
（3）javascript都是放在script标签中的，一旦加载，就会执行
（4）可以有多段script代码，同时会按照从上到下，顺序执行
（5）和css一样，当javascript代码特别多，并且都写在html里的时候，会显得比较繁杂，难以维护。
这个时候可以采用和css一样的手段，把javascript代码剥离出来，单独放在一个文件里，在html中引用该文件即可。
准备一个hello.js，里面的是内容是document.write("hello javascript ");
注意，不要写 script标签。

调用的时候，建立script标签，然后调用文件就好了。同时，创建js文件的时候要注意编码格式。

<html>
  <script src="https://how2j.cn/study/hello.js"></script>
</html>

注意：引用了js文件之后，就不能在里面写更多的代码。
比如下面的123是无法显示的。

<html>
  <script src="http://how2j.cn/study/hello.js">document.write("123");</script>
</html>

下面的123才可以显示。

<html>
  <script src="http://how2j.cn/study/hello.js"></script>
  <script>
    document.write("123");
  </script>
</html>

关于script标签的更多知识点。

4.注释：分为单行注释和多行注释。

<script type="text/javascript">
  // 单行注释
  document.write("hello java");
  </script>

<script type="text/javascript">
  /*
  进行
  多行注释
  */
  document.write("hello java");
  </script>

5.变量
使用var声明一个变量。

<script>
  var x=10;
  document.write("x的值是" + x)
</script>

<a href="https://blog.csdn.net/linghuainian/article/details/81609905">JavaScript中用var声明变量的意义</a>

命名规则：
开头可以用 、$和字母，其他部分可以用 $、、字母或者数字
这些是合法的：
var $a; var _b; var ab123; 这些是不合法的： var 3$ a; var a%; var b*; var (6@

【注意】变量分为全局变量和局部变量。在函数内用var声明的变量是局部变量，在函数外或者在函数内没有用var声明的变量是全局变量。局部变量只能在函数内使用，全局变量在任何时候都可以被使用。

6.JavaScript调试方法。
（1）使用alert调试

<script>
  var x=10;
  alert("声明x并赋值为10")
  document.write("x的值是"+x)
  alert("显示内容")
</script>

执行的时候，会弹出一个对话框，里面的内容是alert()里面的相关内容。换句话说，如果弹出了弹窗,这个位置以上的代码，都是可以运行的。
一般可以写上alert(1),然后不停地把alert(1)向下移动，当移动到某一行之后，就不再弹出，那么就证明那一行运行有问题。这样就把问题的范围缩小了，就很容易通过肉眼观察法来定位真正问题所在。

在这里插入图片描述

（2）使用浏览器的console界面调试。
在浏览器中打开html文件，按下键盘的F12。点击到console界面，刷新一下界面可以看到相关的报错内容。

（3）使用console.log()向控制台输出信息。

<script>
  var x=10;
  console.log("声明x并赋值为10")
  document.write("x的值是"+x)
  console.log("显示内容")
</script>

在这里插入图片描述
7.基本数据类型
undefined，Boolean,Number,String，null

关键字简介
undefined 声明了但未赋值
Boolean 布尔
Number 数字
String 字符串
var 动态类型
typeof 变量类型判断
null 空对象/对象不存在

（1）Undefined：当一个变量被声明了，却没有赋值的时候，叫做 undefined。
（2）Boolean：Boolean变量有两种值，分别是true或者false。
（3）Number：javascript中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学记数法。
（4）String：与java不同的是，javascript中没有字符的概念，只有字符串，所以单引号和双引号，都用来表示字符串。
（5）Var：变量的类型是动态的，当值是整数的时候，就是Number类型，当值是字符串的时候，就是String类型。
（6）Typepf变量类型判断：使用typeof来进行判断数据类型。
正是因为变量是动态类型的，所以无法确定当前到底是哪种类型，这个时候，就可以使用typeof来进行判断。

<script>
  var x=10;
  var y="hello javascript";
  document.write("x的数据类型是"+ typeof x);
  document.write("<br>");
  document.write("y的数据类型是"+ typeof y);
</script>

typeof本身就是个运算符，所以调用的时候不用加括号。
（7）Null：null表示一个对象不存在。

8.数据类型转换
（1）伪对象概念：javascript是一门很有意思的语言，即便是基本类型，也是伪对象，所以他们都有属性和方法。
变量a的类型是字符串，通过调用其为伪对象的属性length获取其长度。

<script>
  var a="hello javascript"
  document.write("变量a的类型是：" + typeof a);
  document.write("<br>")
  document.write("变量a的长度是：" + a.length);
</script>

（2）转换为字符串。
无论是Number,Boolean还是String都有一个toString方法，用于转换为字符串。

<script>
  var a=10
  document.write("变量a的类型是：" + typeof a);
  document.write("变量a转换为String类型是：" + a.toString())
  document.write("<br>")
  document.write("此时a的变量类型是：" + typeof a);
</script>

注意：使用toString()方法不改变原变量的数据类型。
在这里插入图片描述

Null,和Undefind这两个类型是没有toString方法的，所以执行会报错，但是String()函数（对象做形参）是可以将Null和undefind转换为字符串的，此时类型是String类型，值就是null和undefined。

String()和toString()一样都会返回字符串，区别在于对null的处理
String()会返回字符串"null"
toString() 就会报错，无法执行

<script>
  var a = null;
  document.write('String(null) 把空对象转换为字符串：'+String(a)); 
  document.write("<br>"); 
  document.write('null.toString() 就会报错，所以后面的代码不能执行'); 
  document.write(a.toString()); 
  document.write("因为第6行报错，所以这一段文字不会显示"); 
</script>

（3）数字转换为字符串。
Number转换为字符串的时候有默认模式和基模式两种。

<script>
  var a=10
  document.write("默认模式下，10转换为十进制的：" + a.toString());
  document.write("<br>");
  document.write("基模式下，10转换为二进制的：" + a.toString(2));
  document.write("<br>");
  document.write("基模式下，10转换为八进制的：" + a.toString(8));
  document.write("<br>");
  document.write("基模式下，10转换为十六进制的：" + a.toString(16));
  document.write("<br>");
  // 也可以进行任何进制的转换。
  document.write("基模式下，10转换为六进制的：" + a.toString(6));
  document.write("<br>");
  document.write("基模式下，10转换为三进制的：" + a.toString(3));
</script>

用toString()可以进行任何进制的转换。

（4）转换为数字类型（字符串转换为数字类型）
javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字。
如果被转换的字符串，同时由数字和字符构成，那么parseInt会一直定位数字，直到出现非字符。例如：“10abc” 会被转换为10。

<script>
  document.write("字符串\"10\"转换为数字是" + parseInt("10"));
  document.write("<br>");
  document.write("字符串\"3.14\"转换为数字是" + parseFloat("3.14"));
  document.write("<br>");
  document.write("字符串\"10abc\"转换为数字是" + parseInt("10abc"));
  document.write("<br>");
  document.write("字符串\"abc10\"转换为数字是" + parseInt("abc10"));
  document.write("<br>");
  document.write("字符串\"10abc10\"转换为数字是" + parseInt("10abc10"));
  document.write("<br>");
  document.write("字符串\"helllo javascript\"转换为数字是" + parseInt("hello javasript"));
  document.write("<br>");
  document.write("字符串\"10.1ab\"转换为数字是" + parseFloat("10.1ab"));
  document.write("<br>");
  document.write("字符串\"10a.1ab\"转换为数字是" + parseFloat("10a.1ab"));
  document.write("<br>");
  document.write("字符串\"10.1.2b\"转换为数字是" + parseFloat("10.1.2b"));
  document.write("<br>");
  document.write("字符串\"a10.1.2b\"转换为数字是" + parseFloat("a10.1.2b"));
</script>

在这里插入图片描述
规律：parseInt()和parseFloat()从识别的第一个开始捕捉数字，直到出现非数字时候停止。如果第一个捕捉到的为非数字，转换数字结果直接为NaN。

Number()和parseInt()一样，都可以用来进行数字的转换。
对于字符串而言，如果转换的字符串不是纯数字，包含字母或者其他，直接返回使用Number()转换的时候，直接返回NaN。用parseInt()或者parseFloat()转换的时候，需要看情况。如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN。

<script>
  document.write("通过Number() 函数转换字符串'123' 后得到的数字："+Number("123"));   //正常的
  document.write("<br>");
  document.write("通过Number() 函数转换字符串'123abc' 后得到的数字："+Number("123abc"));   //包含非数字
  document.write("<br>");
  document.write("通过Number() 函数转换字符串'abc123' 后得到的数字："+Number("abc123"));   //包含非数字
  document.write("<br>");
  document.write("通过parseInt() 函数转换字符串'123' 后得到的数字："+parseInt("123"));   //正常的
  document.write("<br>");
  document.write("通过parseInt() 函数转换字符串'123abc' 后得到的数字："+parseInt("123abc"));   //包含非数字,返回开头的合法数字部分
  document.write("<br>");
  document.write("通过parseInt() 函数转换字符串'abc123' 后得到的数字："+parseInt("abc123"));   //包含非数字,以非数字开头，返回NaN
  document.write("<br>");
</script>

在这里插入图片描述
对于空字符串类型或者非字符串类型转换成数字类型，parseInt()或者parseFloat()直接返回NaN。而Number()会有特殊的处理，比如，Boolean类型的true将返回数字类型1。

<script>
  document.write("undefined转换成数字是：" + Number(undefined)); 
  document.write("<br>"); 
  document.write("空字符转换成数字是：" + Number(" ")); 
  document.write("<br>"); 
  document.write("空字符串转换成数字是：" + Number("    ")); 
  document.write("<br>"); 
  document.write("true转换成数字是：" + Number(true));
  document.write("<br>"); 
  document.write("false转换成数字是：" + Number(false));
  document.write("<br>"); 
  document.write("null转换成数字是：" + Number(null));  
</script>

结果如下：
在这里插入图片描述

<script>
  document.write("undefined转换成数字是：" + parseInt(undefined)); 
  document.write("<br>"); 
  document.write("空字符转换成数字是：" + parseInt(" ")); 
  document.write("<br>"); 
  document.write("空字符串转换成数字是：" + parseInt("    ")); 
  document.write("<br>"); 
  document.write("true转换成数字是：" + parseInt(true));
  document.write("<br>"); 
  document.write("false转换成数字是：" + parseInt(false));
  document.write("<br>"); 
  document.write("null转换成数字是：" + parseInt(null));  
</script>

结果都是NaN。
（5）转换为Boolean类型
使用内置函数Boolean() 转换为Boolean值
当转换字符串时：非空即为true
当转换数字时：非0即为true
当转换对象时：非null即为true

<script>
  document.write("空字符串''转换为布尔后的值:"+Boolean(""));  //空字符串
  document.write("<br>");
  document.write("非空字符'hello javascript '串转换为布尔后的值:"+Boolean("hello javascript"));  //非空字符串
  document.write("<br>");
  document.write("数字 0 转换为布尔后的值:"+Boolean(0));  //0
  document.write("<br>");
  document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0
  document.write("<br>");
  document.write("空对象 null 转换为布尔后的值:"+Boolean(null));  //null
  document.write("<br>");
  document.write("非空对象 new Object() 转换为布尔后的值:"+Boolean(new Object()));  //对象存在
  document.write("<br>");
</script>

在这里插入图片描述
特殊地：
Boolean(NaN)输出结果也是false。
看到一条解释是这样的：NaN是JavaScript的一个特殊的值，并不属于任何类型，换句话说，它只是一个标记而已，并不是一个通用的类型。在其他平台并不适用，而站长的解释是计算机通用的。NaN不能成为标准。

9.函数：一段可以重复使用的代码。
（1）一段函数。

<script>
  function print(){
    document.write("hello javascript");
  }

  print();
  print();
  print();
</script>

function关键字用于定义一个函数；
print即函数的名称；
()表示参数列表，像这样就指没有参数；
{ 表示函数开始；
} 表示函数结束；
光有函数的定义，还不够，它不会自动执行，还需要进行调用；
可以反复调用，但不可以在body体调用。

<!-- 在body体中调用无效！ -->
<body>
  print();
</body>

（2）带有参数的函数。

<script>
  function print(message){
    document.write(message);
    document.write("<br>");
  }

  print("我喜欢你");
  print("LXY！");
  // 没有传入参数 结果为undefined
  print();
</script>

结果显示：
在这里插入图片描述
（3）带有返回值的函数。

<script>
  function print(message){
    document.write(message);
  }
  
  function calc(x,y){
    return x+y;
  }
  
  var sum = calc(500,20);
  print(sum);
  
</script>

结果返回520。

10.变量的作用域
（1）

<script>
 
    function f1(a){
       document.write('参数的作用域在函数以内，其值是 '+a);//参数a的作用范围，所以打印出来是5；
    }
     
    function f2(){
       document.write('在函数里不能访问其他函数的参数'+a); //不在参数a的作用范围，是一个未声明的变量，无法打印
    }
     
    f1(5);
    f2();
    document.write('在函数外也不能访问'+a);//也不在参数a的作用范围，是一个未声明的变量，无法打印
     
    </script>

（2）全局变量所有函数都可以访问到。

<script>
    var a = 0; //定义在函数前面，即全局变量，所有函数都可以访问
     
    function f1(){
      document.write('通过函数f1 设置全局变量a的值 为 5');
      a = 5; //能够访问
    }
     
    function f2(){
      document.write('通过函数f2 访问并打印全局变量a的值 '+a); //能够访问
    }
     
    f1(); //通过f1，设置a的值
    document.write('<br>');
    f2(); //通过f2,  打印a的值
    </script>

（3）在函数未用var声明的变量都是全局变量。

<html>
    <head>
        <meta http-equiv="content-type" content="txt/html; charset=utf-8" />;
    </head>
</html>

<script>
    function f1(){
        document.write('通过函数f1 设置全局变量a的值 为 5');
        a = 5;
    }
     
    function f2(){
         document.write('通过函数f2 访问并打印全局变量a的值 '+a);
         }

    f1();
    f2(); 
</script>

在函数内用var声明是局部变量，如果不加var直接赋值就是一个全局变量。

11.事件（需要学习DOM的事件章节）
下面演示的是按钮问好。

<html>
    <head>
        <meta http-equiv="content-type" content="txt/html; charset=utf-8" />

        <script>
            function showHello(){
                alert("hello JavaScript");
            }
        </script>
    </head>
    <body>
        <button onclick="showHello()">点击一下</button>
    </body>
</html>

12.算数运算符
在这里插入图片描述
（1）自增++在原来的基础上，增加 1。
需要注意的是
如果 ++放在前面，就是先运算，后取值。
如果 ++放在后面，就是先取值，后运算。
自减 – 是一个道理。

（2）+ 具备多态特征。
当两边都是数字的时候，表现为算数运算符
当任意一边是字符串的时候，表现为字符串连接符。

13.关系运算符
在这里插入图片描述

14.条件语句
（1）条件成立则执行，条件是Boolean。

<html>
    <head>
        <meta http-equiv="content-type" content="txt/html; charset=utf-8" />

        <script>
 
            var age = 15;
             
            if(age<18){
               document.write("如果年纪小于18，就看 卡通");
            }
        </script>
    </head>
</html>

（2）条件不成立执行语句。

<html>
    <head>
        <meta http-equiv="content-type" content="txt/html; charset=utf-8" />

        <script>
 
            var age = 22;
             
            if(age<18){
               document.write("年纪小于18就看卡通");
            }
            else{
               document.write("否则就看 你懂的");
            }
        </script>
    </head>
</html>

（3）else if用于多条件判断
在本例中小于 18是一个条，19-21 是一个条件，大于21是一个条件。

<html>
    <head>
        <meta http-equiv="content-type" content="txt/html; charset=utf-8" />

        <script>
 
            var age = 20;
             
            if(age<18){
               document.write("小于18就看 卡通");
            }
            else if(age<22){
               document.write("大于等于18，并且小于22，就看 你懂的");
            }
            else{
               document.write("大于等于22就看 新闻联播");
            }
        </script>
    </head>
</html>

（4）switch 语句与else if一样，也是进行多条件判断的
需要注意的是，每个判断结束，都要加上break;

<html>
    <head>
        <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
        <script>
            var day=new Date().getDay();
            var today;
            switch(day){
                case 0:
                    today="星期天";
                    break;
                case 1:
                    today="星期一";
                    break;
                case 2:
                    today="星期二";
                    break;
                case 3:
                    today="星期三";
                    break;
                case 4:
                    today="星期四";
                    break;
                case 5:
                    today="星期五";
                    break;
                case 6:
                    today="星期六";
                    break;
                }
            document.write("今天是 ： "+today);
        </script>
    </head>
</html>

15.常用的循环语句有： for, while, do-while, for-each。都是用于在满足条件的前提下，重复执行代码用的。
（1）for循环，和java的for循环使用类似。

<script>
    document.write("使用for循环打印 0 2 4 6 8");
    function print(a){
        document.write("<br>");
        document.write(a);
    }
    for(var i=0; i<=8; i+=2){
        print(i);
    }
</script>

（2）while循环，和java的while循环使用类似。

<script>
    document.write("使用while循环打印 0 到 4<br>");
    function p(s){
      document.write(s);
      document.write("<br>");
    }
     
    var i = 0;
    while(i<5){
      p(i);
      i++;
    }
     
</script>

（3）do-while循环。至少执行一次。

<script>
    function p(s){
      document.write(s);
      document.write("<br>");
    }
    document.write("使用do-while循环打印 0 到 4<br>");
    var i = 0;
     
    do{
     p(i);
     i++;
    } while(i<5);
</script>

（4）forEach是增强的for循环，主要用于遍历数组。

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
   
  var x = new Array(3,1,4);
  p('当前数组是:'+x);
  p("使用普通的for循环遍历数组");
  for(i=0;i<x.length;i++){  //普通for循环
    p(x[i]);
  }
  p("使用增强for循环遍历数组");
  for(i in x){  //for in 循环
    p(x[i]);
  }
</script>

（5）continue表示放弃本次循环，进行下一次循环.

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
    
  document.write("使用for循环打印 0 到 4<br>如果发现是3，就<span style='color:red'>放弃本次循环，并且进入下一次</span>循环<br>");
    
  for(i=0;i<5;i++){
    if(i==3)
      continue;
    p(i);
  }
    
  </script>

执行到continue语句，下面的代码块都不执行。

（6）break表示终止循环，循环体结束。

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
     
  document.write("使用for循环打印 0 到 4<br>如果发现是3，就<span style='color:red'>终止循环，循环体结束 </span><br>");
     
  for(i=0;i<5;i++){
    if(i==3)
      break;
    p(i);
  }
</script>

16.错误处理：try-catch块。

<script>
  document.write("试图调用不存在的函数f2()就会报错，并且导致javascript中止执行，后面的代码也不会执行了");
   
  function f1(){
    //函数f1是存在的
  }
  f2();  //调用不存在的函数f2();
  document.write("剩下的代码");
  </script>

使用try-catch之后：

<script>
 
  function f1(){
    //函数f1是存在的
  }
  try{
     document.write("试图调用不存在的函数f2()<br>");
      f2();  //调用不存在的函数f2();
  }
  catch(err){
     document.write("捕捉到错误产生:");
      document.write(err.message);
  }
   
  document.write("<p>因为错误被捕捉了，所以后续的代码能够继续执行</p>");
   
  </script>

err.mseeage显示错误信息。

还有throw抛出错误、finally一定执行的代码块。

<script>
    try    {   
       print("Outer try running..");   
       try    {   
           print("Nested try running...");   
           throw "an error";   
       }   
       catch(e)    {   
           print("Nested catch caught " + e);   
           throw e + "re-thrown";   
       }   
       finally    {   
           print("Nested finally is running...");   
       }         
   }   
   catch(e)    {   
       print("Outer catch caught" + e);   
   }   
   finally    {   
       print("Outer finally running");   
   }   
   //    Windows Script Host 作出该修改从而得出 WScript.Echo(s)   
   function    print(s){   
         document.write(s);   
   }   
</script>