前端 | 青训营笔记

懒洋洋学前端
154 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第3天

JavaScript 基础语法

使用(浏览器环境)

通过script标签来书写js代码

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

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

通过script标签来引入js文件

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

  • 支持相对及绝对路径

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

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

输入与输出

输出(3种)

  • 页面上输出：document.write

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

  • 控制台输出：console.log

    console.log("要输出的内容");
    • 内容会在 开发者工具(f12)中的控制台(console)中进行输出。

  • 弹窗输出:alert

    alert("弹窗要输出的内容");
    • 内容会以弹窗的形式输出
    • 如果页面上同时也有document.write，那么谷歌浏览器会在弹窗消失后才显示出来，火狐是都可以看到，没有影响。

  • 注意点

    • 输出内容时，不加引号，JavaScript会把输出的内容当成代码来执行
    document.write(不加引号会作为代码来执行);
例子: 
document.write(prompt("请输入密码"))；页面上会有输入框
document.write(“prompt('请输入密码')”)；页面会输出prompt("请输入密码")这一串文字
    • 一对双引号中，可以继续使用单引号.也可以单引号里使用双引号
    document.write(“prompt('请输入密码')”)；
document.write('prompt("请输入密码")')；

输入

  • 概念：输入指程序获取用户通过输入设备输入的信息。JavaScript提供了prompt可以获取用户通过键盘输入的内容

    prompt("提示性文字");

例子:
prompt("请输入您的银行卡号和密码");
    • 页面上会出来一个输入框，方便用户进行输入
    • prompt获取的是一个字符串

输入与输出练习

/*
       1. 输入自己的名字，并输出到页面上
       2. 尝试执行以下代码，有什么效果
       document.write('<a href="http://www.baidu.com">百度一下</a>');
       3. 尝试完成以下程序：
            3.1 用户输入一个数学表达式，比如 1+2， 用js输出有什么效果
            3.2 用户分别输入2次，每次输入一个数字，尝试完成两个数的相加和相减。
       4. 扩展：用js输出一个div，页面上显示为一个圆
*/

注释

单行注释

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

多行注释

  • 跟css是一样的
/*
注释内容
*/

###文档注释

  • 文档注释是一个特殊的多行注释，是对整个js代码、或者一个js函数进行说明
/** 注释内容 */
例子：
/**
 * 该文件主要用于定义常用变量
 */
var name = "zs";

/**
 * 传入两个数字，用于进行加法计算
 * @param {Number} num1 
 * @param {Number} num2 
 * @returns 
 */
function add(num1, num2) {
    return num1 + num2;
}

变量

概念

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

使用(两个步骤)

  • 定义变量
var 变量名  = 要保存的数据;

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

例子：username从"张三"改为"李四"   age从12改为22
username= "李四";
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新增数据类型，表示唯一值。
var data1 = 12;
var data2 = "李四";
var data3 = true;
var data4 = { };//保存了一个对象
var data5;// 默认为undefined 
var data6 = null;//空
var data7 = new Symbol();//定义一个唯一值

数据类型之间的转换

  • 字符串转为数字

    • Number():将某个字符串转为数字。比如"123"，可以转为123
Number(要转换的字符串);

例子：
var num = Number("123");// 将转换之后的数字保存到变量number里
document.write(num);// 123

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

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

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

  • parseFloat():类似于Number

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

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

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

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

运算符

概念

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

算术运算符

  • 用于进行常规的数学运算
  • +:加法
  • -：减法
  • *：乘法
  • /：除法
  • %：取余
var num = 2;
var num1 = num + 2; // num1 4
var num2 = num - 2; // num2 0;
var num3 = num * 2; // num3  4
var num4 = num / 2; // num4 1;
var num5 = num % 5; // num5 2; 
var num6 = 11 % 5; // num6 1; 
取余：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
    • 如果是在表达式中使用，++的特点是根据++所在的位置有关
      • ++是在变量后面，效果是先读取后执行
      • ++是在变量前面，效果是先执行后读取
var num = 1;
var a = num++ + num--;
      = 1  + 2;
    num 2    1
var b = ++num - --num;
      = 2 - 1;
var num2= 2;

var c =  ++num2 - --num2;
      =  3  -  2 =1     num2:2
var d =  --num2 + num2++;
      =  1  + 1

c: 1 d: 2  num2: 2
  • --:对变量进行赋值，在原理的基础之上进行减1运算，即num-=1;.特点跟++一致。
// =
var num = 2;
num变量里的数据从2切换到3.即修改变量的数据
num=3;
//num = num +3;//修改变量num的数据，新的数据是指旧的数据基础之上+3 6
num+=3;
//num = num -3;//修改变量num的数据，新的数据是指旧的数据基础之上-3  3
num-=3;
//num = num *3;//修改变量num的数据，新的数据是指旧的数据基础之上乘以3  9
num*=3;
//num = num /3;//修改变量num的数据，新的数据是指旧的数据基础之上除以3  3
num/=3;
//num = num %3;//修改变量num的数据，新的数据是指旧的数据基础之上取余   0
num %=3;
num++;
num--;
document.write(num);//0

关系运算符

  • 比较两个数据之间的关系
  • >:大于
  • <：小于
  • ==：等于
  • !=：不等于
  • >=：大于或等于
  • <=：小于或等于
  • ===: 完全等于
    • 在比较字符串和数字的时候，如果数值相等，那么用==比较，会返回true.但用===比较，会返回false
    • ===会比较数值以及数据类型，而==只比较数值,不考虑数据类型
var num1 = 1;
var num2 = 2;
document.write(1 > 2);// false 
document.write(1==2);//false
document.write(num1 < num2);// true
document.write(num1 <= num2);// true
document.write(num1 >= num2);// false
document.write("1" == 1);// true
document.write("1" === 1);// false
  • 任何一个关系判断最后会得到一个布尔型数据

逻辑运算符

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

例子：判断是否大于100或小于0
document.write(num <0 || num >100); false

例子：num大于0 取反
document.write(!(num > 0));false

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

  • 应用

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

位运算符

扩展知识

模板字符串(ES6)

  • 背景：
    • 拼接字符串加号过多，整个代码不方便阅读和理解，拼接繁琐
    • 显示多行字符串，必须用+号分段拼接
//1
var style = "style='width:"+width +";height:"+height +";border:"+border +"';";


//2
var str = "这是一个很长长长长长" +
        "长长长长长长长长长长长长长长长长长长长" +
        "长长长长长长长长长长长长长长长长长长长长长长的字符串";
  • 概念：是es6提供的一种新的 字符串表现形式，通过一定的语法可以实现在字符串中直接使用变量或者代码表达式
  • 语法
1. 字符串用一对返单引号来表示
var str  = `es6的字符串`;
2. 用${}在字符串中嵌入变量或表达式
var username = "张三";
var str1 = `我的名字是${username}`;
var str2 = `1+1的结果是${1+1}`;
document.write(str1);输出 我的名字是张三
document.write(str2);输出 1+1的结果是2
  • 应用
    • 代替传统的+号字符串拼接
      • 多行字符串
      • 拼接变量
var str = `这是一个很长长长长长
        长长长长长长长长长长长长长长长长长长长
        长长长长长长长长长长长长长长长长长长长长长长的字符串`;
var username = "张三";
var str1 = `我的名字是${username}`;

isNaN

  • 概念：用于判断一个数据是不是数字,最终代码的结果是布尔型数据
isNaN(待检测的数据);

例子：
var result  = isNaN('a'-1);//‘a’-1会导致NaN
document.write(result);//true
  • 如果是true，那么说明是NaN。如果为false，那么说明不是NaN，可以间接说明一个数据是不是数字
  • 因为一般的数字出错会得到NaN，那么可以反过来证明如果数据不是NaN，那么是一个数字(并不是100%正确)

typeof

  • 概念：是一个JavaScript的关键字，用于检测数据是什么数据类型.代码的结果会返回一个字符串，表示该数据的类型
typeof 要检测类型的数据;

例子:
document.write(typeof "123"); 输出  string 
document.write(typeof 123); 输出  number
document.write(typeof NaN); 输出  number
document.write(typeof true); 输出  boolean
document.write(typeof {}); 输出  object
  • 如果typeof 数据 为 number ,说明数据可能是数字或NaN的一种。如果要检测数据是数字的话，结合typeof和isNaN一起使用:
var num = 12;
if(typeof num =="number" && isNaN(num)==false){
    //是数字
}

字符编码

概念

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

常用api

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

例子:
var str = String.fromCharCode(97);
console.log(a);输出 a
avatar
文章
阅读
粉丝