JavaScript 基础语法

目录

  • 输入输出

    • document.write
    • console.log
    • alert
    • prompt
  • 注释

  • 变量

    • 定义
    • 修改

  • 数据类型

    • 字符串、数字、布尔

    • 数据类型转换

      • Number parseInt
      • 数字.toString() 数字.toFixed()

  • 运算符

    • 算术： + - * / %
    • 赋值: = += -= *= /= %= ++ —
    • 关系：> < >= <= == != ===
    • 逻辑： && || !

  • 模块字符串

    • ``
    • ${}
  • 字符编码

使用(浏览器环境)

通过script标签来书写js代码

  • 在HTML页面中新增<script></script>，在标签中间书写js代码

    1. <body>
    3.  <script>
    4.      js代码
    5.  </script>
    6. </body>
  • 理论上，script标签可以放在任何一个地方，处于性能以及执行方面，建议js代码放在</body>之前
  • 一个页面可以有多个script标签

通过script标签来引入js文件

  1. <script src="js文件的地址"></script>

  • 支持相对及绝对路径

  • JavaScript代码可以放在以.js为后缀的文件，可以通过script标签引入HTML页面中执行。也是引入后立即执行文件中的js代码。

  • JavaScript代码的执行顺序跟引入(先后)顺序是一致的

输入与输出

输出(3种)

  • 页面上输出：document.write
    1. document.write("要输出的内容");
  • 要输出的内容需要被一对引号所包围，引号可以是单引号或双引号，无区别。
  • 一般情况下，需要再每句代码后加一个;表示代码结束
  • 如果输出的是HTML格式的代码，那么会直接进行解析，变成一个真正的HTML标签显示在页面上
    1. document.write('<a href="http://www.baidu.com">百度一下</a>');页面上会显示一个超链接
  • 控制台输出：console.log
    1. console.log("要输出的内容");
  • 内容会在 开发者工具(f12)中的控制台(console)中进行输出。
    • 弹窗输出:alert
      1. alert("弹窗要输出的内容");
  • 内容会以弹窗的形式输出

  • 如果页面上同时也有document.write，那么谷歌浏览器会在弹窗消失后才显示出来，火狐是都可以看到，没有影响。

    • 注意点

  • 输出内容时，不加引号，JavaScript会把输出的内容当成代码来执行

    1. document.write(不加引号会作为代码来执行);
    2. 例子: 
    3. document.write(prompt("请输入密码"))；页面上会有输入框
    4. document.write(“prompt('请输入密码')”)；页面会输出prompt("请输入密码")这一串文字

  • 一对双引号中，可以继续使用单引号.也可以单引号里使用双引号

    1. document.write(“prompt('请输入密码')”)；
    2. document.write('prompt("请输入密码")')；

输入

  • 概念：输入指程序获取用户通过输入设备输入的信息。JavaScript提供了prompt可以获取用户通过键盘输入的内容 ```javascript prompt(“提示性文字”);

例子: prompt(“请输入您的银行卡号和密码”);

  3.    - 页面上会出来一个输入框，方便用户进行输入
  4.    - prompt获取的是一个字符串
  6. <a name="cc58fa30"></a>
  7. ### 输入与输出练习
  9. ```javascript
  10. /*
  11.        1. 输入自己的名字，并输出到页面上
  12.        2. 尝试执行以下代码，有什么效果
  13.        document.write('<a href="http://www.baidu.com">百度一下</a>');
  14.        3. 尝试完成以下程序：
  15.             3.1 用户输入一个数学表达式，比如 1+2， 用js输出有什么效果
  16.             3.2 用户分别输入2次，每次输入一个数字，尝试完成两个数的相加和相减。
  17.        4. 扩展：用js输出一个div，页面上显示为一个圆
  18. */

注释

单行注释

  1. // 注释内容
  2. var name= 'zs'; //定义了一个变量

多行注释

  • 跟css是一样的
  1. /*
  2. 注释内容
  3. */

文档注释

  • 文档注释是一个特殊的多行注释，是对整个js代码、或者一个js函数进行说明
  1. /** 注释内容 */
  2. 例子：
  3. /**
  4.  * 该文件主要用于定义常用变量
  5.  */
  6. var name = "zs";
  8. /**
  9.  * 传入两个数字，用于进行加法计算
  10.  * @param {Number} num1 
  11.  * @param {Number} num2 
  12.  * @returns 
  13.  */
  14. function add(num1, num2) {
  15.     return num1 + num2;
  16. }

变量

概念

  • 变量是指可以存放数据的容器。一个变量可以保存一个数据。变量可以多次的重复使用

使用(两个步骤)

  • 定义变量
  1. var 变量名  = 要保存的数据;
  3. 例子：
  4. var username = "张三";
  5. var age = 12;
  • 使用变量
  1. 使用变量名来代替保存的数据
  2. document.write(username);//输出 张三
  3. document.write(age + 12);// 输出 24
  4. document.write(age - 5);//输出  7
  • 修改变量所保存的数据
  1. 已定义的变量名 = 新数据; 
  3. 例子：username从"张三"改为"李四"   age从12改为22
  4. username= "李四";
  5. age = 22;

  • 变量名规范

    • 只能包含数字、字母、$、_
    • 不能以数字开头
    • 尽量见词达意。比如number、total之类的，切忌出现a1、b2、cc、dd等。

  • 注意

    • 变量只需定义一次，可以重复使用

数据类型

概念

  • JavaScript会把可能会用到的数据进行归纳分类，将数据分成了7类：

分类

  1. Number(数字):

    • 例如： 1 2 -12 -1.0 2.3 123

  2. String(字符串):被引号所包围的一段文字，在程序中是作为普通文本。

    • 例如： “张三” “123”

  3. Boolean(布尔):表示逻辑的正确或错误

    • 该类型只有两个取值： true false

  4. Object(对象):表示一个复合数据

    • JavaScript中函数和数组都是对象

  5. undefined：一个特殊数据。表示未定义

    • 一般是指定义了变量，但没有数据的时候，变量就是undefined，也可以理解为undefined是变量的默认值
  6. null: 一个特殊值。表示对象为空。
  7. Symbol(符号)：es6新增数据类型，表示唯一值。
  1. var data1 = 12;
  2. var data2 = "李四";
  3. var data3 = true;
  4. var data4 = { };//保存了一个对象
  5. var data5;// 默认为undefined 
  6. var data6 = null;//空
  7. var data7 = new Symbol();//定义一个唯一值

数据类型之间的转换

  • 字符串转为数字

    • Number():将某个字符串转为数字。比如”123”，可以转为123
  1. Number(要转换的字符串);
  3. 例子：
  4. var num = Number("123");// 将转换之后的数字保存到变量number里
  5. document.write(num);// 123

  • Number需要传入一个可以转换的数字字符串，如果给 的是非数字，那么会报错，页面上会提示NaN(not a number)

  • parseInt():将字符串转为数字，并去掉小数部分,即取整

  1. parseInt(要转换的字符串);
  2. 例子：
  3. var num = parseInt("123.6");
  4. document.write(num);// 123

  • parseFloat():类似于Number

  • 数字.toString():将某个数字转为字符串

  1. var num  = 12.34;
  2. var str = num.toString(); 
  3. document.write(str); 输出 "12.34"
  • 数字.toFixed(小数位):保留指定的小数位,得到的是字符串，带有四舍五入
  1. var num = 12.3456;
  2. var str1 = num.toFixed(2);保留2位小数
  3. document.write(str1);输出 "12.35"

字符串中的加法:拼接字符串

  • 对于+法来说，如果+号两边有一个是字符串类型，那么JavaScript会把另一个也转为字符串，直接拼接成一个大字符串。
  1. "123"+"456" 等同于  "123456"
  2. var width = "200px"
  3. "style:width:"+ width  等同于 "style:width:200px"
  • 对于减法而言，如果-号两边有其中一个或两个是字符串，那么JavaScript会尝试将字符串转为数字并进行数学减法运算。但如果其中一个转换失败，那么最终结果是NaN。
  1. "123" -"100" :  23 
  2. "123" - 50  : 73
  3. "123" -"abc": NaN
  4. "123"- "a123": NaN
  • 其中NaN在JavaScript表示一个错误，含义为not a number，即不是一个数字

运算符

概念

  • 一些特殊的符号，用于完成程序中的 某个运算或判断等操作。我们称这些符号为运算符。
  • 根据运算符 的不同效果分为5类。

算术运算符

  • 用于进行常规的数学运算
  • +:加法
  • -：减法
  • *：乘法
  • /：除法
  • %：取余
  1. var num = 2;
  2. var num1 = num + 2; // num1 4
  3. var num2 = num - 2; // num2 0;
  4. var num3 = num * 2; // num3  4
  5. var num4 = num / 2; // num4 1;
  6. var num5 = num % 5; // num5 2; 
  7. var num6 = 11 % 5; // num6 1; 
  8. 取余：num 不能被5整除的那部分就是取余的结果

赋值运算符

  • 能够快捷的对一个变量进行赋值操作。所谓赋值是指给变量赋予一个数据

  • =：给变量赋予数据,一般定义变量或修改变量数据时用

  • +=:对变量进行赋值，在原理的基础之上进行加法运算。如var num = 3;num +=3 等同于 num = num +3;

  • -=:对变量进行赋值，在原理的基础之上进行减法运算。如var num = 3;num -=3 等同于 num = num -3;

  • *=：对变量进行赋值，在原理的基础之上进行乘法运算。如var num = 3;num _=3 等同于 num = num _3;

  • /=：对变量进行赋值，在原理的基础之上进行除法运算。如var num = 3;num /=3 等同于 num = num /3;

  • %=:对变量进行赋值，在原理的基础之上进行取余运算。如var num = 3;num %=3 等同于 num = num %3;

  • ++:对变量进行赋值，在原理的基础之上进行加1运算，即num+=1;

    • 如果++是单独使用，效果就相当于自增1

    • 如果是在表达式中使用，的特点是根据所在的位置有关

      • ++是在变量后面，效果是先读取后执行
      • ++是在变量前面，效果是先执行后读取
  1. var num = 1;
  2. var a = num++ + num--;
  3.       = 1  + 2;
  4.     num 2    1
  5. var b = ++num - --num;
  6.       = 2 - 1;
  7. var num2= 2;
  9. var c =  ++num2 - --num2;
  10.       =  3  -  2 =1     num2:2
  11. var d =  --num2 + num2++;
  12.       =  1  + 1
  14. c: 1 d: 2  num2: 2
  • --:对变量进行赋值，在原理的基础之上进行减1运算，即num-=1;.特点跟++一致。
  1. // =
  2. var num = 2;
  3. num变量里的数据从2切换到3.即修改变量的数据
  4. num=3;
  5. //num = num +3;//修改变量num的数据，新的数据是指旧的数据基础之上+3 6
  6. num+=3;
  7. //num = num -3;//修改变量num的数据，新的数据是指旧的数据基础之上-3  3
  8. num-=3;
  9. //num = num *3;//修改变量num的数据，新的数据是指旧的数据基础之上乘以3  9
  10. num*=3;
  11. //num = num /3;//修改变量num的数据，新的数据是指旧的数据基础之上除以3  3
  12. num/=3;
  13. //num = num %3;//修改变量num的数据，新的数据是指旧的数据基础之上取余   0
  14. num %=3;
  15. num++;
  16. num--;
  17. document.write(num);//0

关系运算符

  • 比较两个数据之间的关系
  • >:大于
  • <：小于
  • ==：等于
  • !=：不等于
  • >=：大于或等于
  • <=：小于或等于

  • ===: 完全等于

    • 在比较字符串和数字的时候，如果数值相等，那么用==比较，会返回true.但用===比较，会返回false
    • ===会比较数值以及数据类型，而==只比较数值,不考虑数据类型
  1. var num1 = 1;
  2. var num2 = 2;
  3. document.write(1 > 2);// false 
  4. document.write(1==2);//false
  5. document.write(num1 < num2);// true
  6. document.write(num1 <= num2);// true
  7. document.write(num1 >= num2);// false
  8. document.write("1" == 1);// true
  9. document.write("1" === 1);// false
  • 任何一个关系判断最后会得到一个布尔型数据

逻辑运算符

  • 可以实现多个关系的判断
  • &&:与，表示多个条件同时满足
  • ||或，表示多个条件满足其一
  • !:取反。即true变为false，或false变为true
  1. 条件1 && 条件2 && 条件3 && 条件n   n个条件需同时满足
  2. 条件1 || 条件2 || 条件3 || 条件n   n个条件满足其一
  3. !条件1     条件1本身结果取反
  4. var num =10; 
  5. 例子：判断是否100内
  6. document.write(num >=0 && num <=100)；true
  8. 例子：判断是否大于100或小于0
  9. document.write(num <0 || num >100); false
  11. 例子：num大于0 取反
  12. document.write(!(num > 0));false

  • 关系运算符搭配逻辑运算符进行多个条件判断，最终返回结果还是布尔型数据。

  • 应用

    • 取反一般可以用来判断变量是否有数据,如果变量取反为true，说明变量是没数据的。如果为false，说明是有数据的
  1. var num;
  2. var num1 = 3;
  3. document.write(!num);//true,表示变量没数据，默认为undefined
  4. document.write(!num2);//false

位运算符

扩展知识

模板字符串(ES6)

  • 背景：

    • 拼接字符串加号过多，整个代码不方便阅读和理解，拼接繁琐
    • 显示多行字符串，必须用+号分段拼接
  1. //1
  2. var style = "style='width:"+width +";height:"+height +";border:"+border +"';";
  5. //2
  6. var str = "这是一个很长长长长长" +
  7.         "长长长长长长长长长长长长长长长长长长长" +
  8.         "长长长长长长长长长长长长长长长长长长长长长长的字符串";
  • 概念：是es6提供的一种新的 字符串表现形式，通过一定的语法可以实现在字符串中直接使用变量或者代码表达式
  • 语法
  1. 1. 字符串用一对返单引号来表示
  2. var str  = `es6的字符串`;
  3. 2. 用${}在字符串中嵌入变量或表达式
  4. var username = "张三";
  5. var str1 = `我的名字是${username}`;
  6. var str2 = `1+1的结果是${1+1}`;
  7. document.write(str1);输出 我的名字是张三
  8. document.write(str2);输出 1+1的结果是2

  • 应用

    • 代替传统的+号字符串拼接

      • 多行字符串
      • 拼接变量
  1. var str = `这是一个很长长长长长
  2.         长长长长长长长长长长长长长长长长长长长
  3.         长长长长长长长长长长长长长长长长长长长长长长的字符串`;
  4. var username = "张三";
  5. var str1 = `我的名字是${username}`;

isNaN

  • 概念：用于判断一个数据是不是数字,最终代码的结果是布尔型数据
  1. isNaN(待检测的数据);
  3. 例子：
  4. var result  = isNaN('a'-1);//‘a’-1会导致NaN
  5. document.write(result);//true
  • 如果是true，那么说明是NaN。如果为false，那么说明不是NaN，可以间接说明一个数据是不是数字
  • 因为一般的数字出错会得到NaN，那么可以反过来证明如果数据不是NaN，那么是一个数字(并不是100%正确)

typeof

  • 概念：是一个JavaScript的关键字，用于检测数据是什么数据类型.代码的结果会返回一个字符串，表示该数据的类型
  1. typeof 要检测类型的数据;
  3. 例子:
  4. document.write(typeof "123"); 输出  string 
  5. document.write(typeof 123); 输出  number
  6. document.write(typeof NaN); 输出  number
  7. document.write(typeof true); 输出  boolean
  8. document.write(typeof {}); 输出  object
  • 如果typeof 数据 为 number ,说明数据可能是数字或NaN的一种。如果要检测数据是数字的话，结合typeof和isNaN一起使用:
  1. var num = 12;
  2. if(typeof num =="number" && isNaN(num)==false){
  3.     //是数字
  4. }

字符编码

概念

  • 为了能够在不同的计算机中能够正确的显示字符，设计出了字符编码用于设置在计算机中用0和1的不同组合来表示某个字符。
  • 字符编码随着计算机的发展以及不同国家有不同的语言，字符编码也有很多种。第一个通用的字符编码就是ASCII码，后续用于替代ASCII码的全球普及的字符编码是UTF-8。中国的专用字符编码有GB2312以及加强版GBK。unicode编码兼容ASCII码

常用api

  • charCodeAt(下标):获取字符串中指定下标字符的ASCII码
  1. 字符串.charCodeAt(下标);
  2. 例子：
  3. var str = "abc";
  4. var code = str.charCodeAt(0);
  5. console.log(code);输出 97
  • String.fromCharCode(ASCII码):通过ASCII码获取对应的字符并返回
  1. String.fromCharCode(ASCII码);
  3. 例子:
  4. var str = String.fromCharCode(97);
  5. console.log(a);输出 a