个人自学前端8-JS1-JS简介

目录

简介

Javascript一种直译式脚本语言，是一种动态类型、弱类型、解释型或即时编译型的编程语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript 的标准是 ECMAScript 。截至 2012 年，所有的现代浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6

Javascript 版本说明

  1. 1998年6月，ECMAScript 2.0版发布。
  2. 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
  3. 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。
  4. 2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发。
  5. 2009年12月，ECMAScript 5.0版正式发布。
  6. 2011年6月，ECMAscript 5.1版发布。
  7. 2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
  8. 2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
  9. 2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。

js 核心

  • js基础语法
  • DOM 文档对象模型（Document Object Model）
  • BOM 浏览器对象模型（Browser Object Model (BOM)）

HTML文档引入Javascript

  1. <script> 标签

<script> 标签可以放在 HTML文档的任意位置，为了避免不必要的错误建议放在 </body>结束标签之前。

  1. 引入外部.js文件

javascript 存储到外部文件中时文件后缀为 .js。

第一个javascrit程序

<button id='btn'>点我</button>
<div id="box" style="width: 100px; height: 100px; background: orange; display: block;"></div>
<script>
    var btn = document.getElementById('btn')
    var box = document.getElementById('box')
    // 点击按钮显示/隐藏 #box
    btn.onclick = function (){
        if('block' == box.style.display){
            box.style.display = 'none'
        }else{
            box.style.display = 'block'
        }
    }
</script>

在编写 javascript 代码时要严格区分字母的大小写，语法规则是否正确，否则程序将不能正确的执行。

标识符与关键字

  • 关键字
  • 保留字

命名规则

在编写代码时会用到一些命名，这些命名应该见名知意，见名知意是为了便于让程序人员阅读代码。
通常情况下，为了便于阅读，在起名时会用于两个及以上的单词作为名称。

在命名时需要注意不要能特殊字符及数字开头，也不要使用有二异性的单词，不要使用中文，长度也要适当不要过长。

  1. 下划线连接：单词与单词之间使用下划线 ＿　进行连接,例如：var hello_world = 1。

  2. 驼峰规则：单词之间首字母使用大写进行区分。

    • 变量：首单词首字母小写，后面单词首字母大写,例如：var helloWorld = 998。
    • 函数：同变量命名规则。
    • 类名：所有单词首字母大写，例如：class HelloWorld {}。

语句

语句是JavaScript 语句向浏览器发出的命令。用分号分隔 ;

分号;表示一条语句的结束，在js中分号是可选的，如果一行结尾没有使用分号，那么这一行中只能有一条语句。

注释

  • 多行注释 /* 多行注释 */
  • 单行注释 // 单行注释

注意：单行注释通常写在被注释语句的上方或右侧，而多行注释则写在被注释语句上方。

变量

变量 是存储值的容器。要声明一个变量，使用关键字var

var a = 199;

js是动态类型的语言，变量则可以被赋于不同类型的值
ES6引入两个新的关键字定义 let 定义变量，const定义常量。

数据类型

  • String 字符串（一串文本）。字符串的值必须将用引号（单双均可，必须成对）扩起来。
  • Number 数字。无需引号。
  • Boolean 布尔值（真 / 假）。 true/false 是 JS 里的特殊关键字，无需引号。
  • Array 数组，用于在单一引用中存储多个值的结构。
  • Object 对象，JavaScript 里一切皆对象，一切皆可储存在变量里。
  • Undefined 未定义或未赋值
  • Null 对象为空

转义符

使用反斜杠（转义符）来向文本字符串添加特殊字符。

代码 输出
\' 单引号
\" 双引号
\& 和号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符

typeof

typeof 操作符返回一个字符串，表示未经计算的操作数的类型。

function fun1(){}

console.log( typeof 1 ) // number
console.log( typeof true ) // boolean
console.log( typeof 'num' ) // string
console.log( typeof null ) //object
console.log( typeof new Array(1) ) // object
console.log( typeof new Object() ) // object
function fun1(){} //定义一个函数
console.log( typeof fun1 ) // function
var num //定义一个变量
console.log( typeof num) // undefined

类型转换

  • 隐式类型转换(自动转换)：在表达式中，参与运算的操作数据自动转换为相同类型并进行运算。
    5-'1' //结果为数字 4
5+'1'+1+1-1 //结果为数字 5110
  • 显式类型转换(强制转换): 在表达式中参与运算的操作数据需要调用方法到对象对数据进行转换类型，转换完成后再进行运算。
    Number() //轩数字
Boolean() //转布尔
String() //转字符串
parseInt() //转数字
parseFloat() // 转数字
.toString() //转字符串

运算符

  • 算术运算符

    • + - * / % ++ --

    ++ --数据本身会自递增或自递减 1 ，在同一语句中 ++ --在操作数的右侧时，先使用操作数的值再运算，在左侧时先运算再使用操作数中的结果。
    + 两侧的操作数，如果有一方为字符串那么 + 就作为字符串连接符使用

  • 赋值运算符

  • = += -= *= /= %=

  • 比较运算符

    • > < == === >= <= != !==

    使用比较运算的表达式的值的结果为 布尔值。

  • 逻辑运算符

    • && || !

  • 位运算符

    • & |

  • 三目运算

    • ? :

运算符优先级

下面的表将所有运算符按照优先级的不同从高（20）到低（1）排列。

参考文档

优先级 运算类型 关联性 运算符
20 圆括号 n/a（不相关） ( … )
19 成员访问 从左到右 … . …
19 需计算的成员访问 从左到右 … [ … ]
19 new (带参数列表) n/a new … ( … )
19 函数调用 从左到右 … ( … )
19 可选链（Optional chaining） 从左到右 ?.
18 new (无参数列表) 从右到左 new …
17 后置递增(运算符在后) n/a … ++
17 后置递减(运算符在后) n/a … --
16 逻辑非 从右到左 ! …
16 按位非 从右到左 ~ …
16 一元加法 从右到左 + …
16 一元减法 从右到左 - …
16 前置递增 从右到左 ++ …
16 前置递减 从右到左 -- …
16 typeof 从右到左 typeof …
16 void 从右到左 void …
16 delete 从右到左 delete …
16 await 从右到左 await …
15 幂 从右到左 … ** …
14 乘法 从左到右 … * …
14 除法 从左到右 … / …
14 取模 从左到右 … % …
13 加法 从左到右 … + …
13 减法 从左到右 … - …
12 按位左移 从左到右 … << …
12 按位右移 从左到右 … >> …
12 无符号右移 从左到右 … >>> …
11 小于 从左到右 … < …
11 小于等于 从左到右 … <= …
11 大于 从左到右 … > …
11 大于等于 从左到右 … >= …
11 in 从左到右 … in …
11 instanceof 从左到右 … instanceof …
10 等号 从左到右 … == …
10 非等号 从左到右 … != …
10 全等号 从左到右 … === …
10 非全等号 从左到右 … !== …
9 按位与 从左到右 … & …
8 按位异或 从左到右 … ^ …
7 按位或 从左到右 … ▏ …
6 逻辑与 从左到右 … && …
5 逻辑或 从左到右 … ‖ …
4 条件运算符 从右到左 … ? … : …
3 赋值 从右到左 … = …
3 赋值 从右到左 … += …
3 赋值 从右到左 … -= …
3 赋值 从右到左 … *= …
3 赋值 从右到左 … /= …
3 赋值 从右到左 … %= …
3 赋值 从右到左 … <<= …
3 赋值 从右到左 … >>= …
3 赋值 从右到左 … >>>= …
3 赋值 从右到左 … &= …
3 赋值 从右到左 … ^= …
3 赋值 从右到左 … ▕= …
2 yield 从右到左 yield …
2 yield* 从右到左 yield* …
1 展开运算符 n/a ... …
0 逗号 从左到右 … , …

从上表中可以看到运算符非常多并且各运算符优先级并无太多规律。建议在运算时使用 圆括号（） 将需要的表达时括起来。这样便于读写。

流程控制

控制程序的执行顺序

条件判断

根据给定的条件决定代码块是否被执行。

  • if

        if(true){
        //是否要被执行的代码
    }

    if( 2 == 1 ){
        //要执行的代码块
    }else{
    //要执行的代码块
    }

    if( 2 == 1 ){
        //要执行的代码块
    }else if( 2 > 1){
    //要执行的代码块
    }else{
    //要执行的代码块
    }

    if可以配置 else if 和 else 使用这样可以使用程序在执行时可以有更多的选择。

    if ( ... )语句接收一个布尔值或者可以表示变布尔值的表达式。

  • switch

    switch (key) {
    case value:

        break;

    default:
        break;
}

循环控制

  • while

    while (true) {
}

  • do/while

    do {

} while (condition);

  • for

    for (var i = 0; i < 10; i++) {

}

break、continue

  1. break/continue都作用于循环语句
  2. continue结束本次循环继续下一次循环。
  3. break结束当前离它最近的循环。
  4. break可以在switch中使用。switch不是循环。
posted @ 2021-07-08 15:13  暗鸦08  阅读(81)  评论(0)    收藏  举报