【JavaScript】笔记の１章

最新推荐文章于 2021-01-05 10:55:03 发布

Anbelin

最新推荐文章于 2021-01-05 10:55:03 发布

阅读量181

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_39518871/article/details/108932201

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

参考资料
https://www.bilibili.com/video/BV1ux411d75J/
https://blog.csdn.net/GUDUzhongliang

JavaScript

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言。
脚本语言：不需要编译，运行过程中由JS解释器（JS引擎）逐行进行解释并执行。
现在也可以基于Node.js技术进行服务器端编程。

JavaScript的作用

表单验证（密码强度检测，JS产生的最初目的）
网页特效服务端开发（Node.js）
桌面程序（Electron）
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

浏览器执行JS过程

浏览器分成两部分：渲染引擎和JS引擎。
渲染引擎：用来解析HTML和CSS，俗称内核。比如Chrome浏览器额blink，老版本的webkit。
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如Chrome浏览器的V8。

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

JS的组成

ECMAScript（JavaScript语法）
ECMAScript是由ECMA 国际（原欧洲计算机制造协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript（网景公司）或者JScript（微软公司），但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
DOM（页面文档对象模型）
文档对象模型（Document Object Model，DOM）是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色等）。
BOM（浏览器对象模型）
BOM（Browser Object Model，BOM）是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS书写位置

JS书写方式分为行内式， 内嵌式，外链式。

行内式JS

写在标签上的 js 代码需要依靠事件（行为）来触发

<input type="button" value="我试试" onclick="alert('Hello World!')" />

可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick。
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号。
可读性差，在HTML中编写大量JS代码时，不方便阅读。
引号易错，引号多层嵌套匹配时，非常容易弄混。
特殊情况下使用。

内嵌式JS

内嵌式的 js 代码会在页面打开的时候直接触发。

<script>
  alert('Hello World!');
</script>

可以将多行JS代码写到<script>标签中。
内嵌JS是学习时常用的方式。

外部JS文件

<script src="my.js"></script>

引用外部JS文件的script标签中不可以写代码。

JS 中的注释

学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的。
写好一个注释，有利于我们以后阅读代码

单行注释

一般就是用来描述下面一行代码的作用
可以直接写两个 / ，也可以按 ctrl + /

多行注释

一般用来写一大段话，或者注释一段代码
可以直接写 /**/ 然后在两个星号中间写注释，也可以按 shift + alt + a

JS输入输出

    <script>
      //浏览器弹出输入框，用户可以输入
      prompt('请输入您的年龄');
      //浏览器弹出警示框
      alert('计算结果是：');
      //浏览器控制台打印输出信息
      console.log('我是程序员能看到的：')
    </script>

变量（重点）

变量指的是在程序中保存数据的一个容器。
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他。
语法： var 变量名 = 值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello</title>
    <script>
      var myname = prompt();
      alert(myname);
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

定义变量及赋值

同时声明多个变量时，变量之间使用英文逗号隔开。

var age = 18,
    address = '火影村',
    email = 'hellena_p@qq.com';

只声明不赋值：undefined
未声明未赋值：报错
不声明只赋值：10

变量命名规范

一个变量名称可以由数字、字母、英文下划线（_）、美元符号（$）组成。
严格区分大小写。
不能由数字开头，不要使用中文汉字命名。
不能是 保留字 或者 关键字，例如：name。
不要出现空格。
驼峰命名法。

数据类型

变量是用来存储值的所在处，它们有名字和数据类型。
变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型或者说动态语言。 这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
JS拥有动态类型，这意味着相同的变量可用作不同的类型，即变量的数据类型是可以变化的。
JS数据类型通常分为两大类：基本数据类型 和 复杂数据类型。

基本数据类型

数值类型（number）

一切数字都是数值类型（包括二进制，十进制，十六进制等）
NaN（not a number），一个非数字
常见的进制有二进制、八进制、十进制、十六进制

<script>
      // 八进制数字序列范围：0 ~ 7
      var num_1 = 07; // 对应十进制的7
      console.log(num_1);
      var num_2 = 017; // 对应十进制的15
      console.log(num_2);
      // 十六进制数字序列范围：0 ~ 9 以及 A ~ F
      var num_3 = 0xA; // 对应十进制的10
      console.log(num_3);
</script>

JavaScript中数值的最大和最小值

<script>
      //最大值：1.7976931348623157e+308
      console.log(Number.MAX_VALUE);
      //最小值：5e-324
      console.log(Number.MIN_VALUE);
    </script>

数字型三个特殊值：Infinity（无穷大）、-Infinity（无穷小）、NaN（非数字）。
isNaN() 用来判断一个变量是否为非数字的类型，返回结果为true或者false。

字符串类型（string）

被引号包裹的所有内容（可以是单引号也可以是双引号）
JS 可以用单引号嵌套双引号，或者双引号嵌套单引号（外双内单，外单内双）

<script>
      var str = '我是一个"高富帅"的程序员';
      var str = "我是一个'高富帅'的程序员";
</script>

字符串转义符
获取字符串长度length

<script>
      var str = 'My name is Hellena_P';
      console.log(str.length);
</script>

字符串的拼接：字符串 + 任何类型 = 拼接后的新字符串。

<script>
   console.log('沙漠' + '骆驼');
    //结果为：Hellena_P18
   console.log('Hellena_P' + 18);
</script>

布尔类型（boolean）

只有两种值，true 或者 false
true 参与加法运算当 1 来看
false 参与加法运算当 0 来看

    <script>
      var flag = true;
      var flag1 = false;
      console.log(flag + 1);
      console.log(flag1 +1);
    </script>

在这里插入图片描述

null类型

只有一个，就是 null，表示空的意思

      var space = null;
      //结果为  nullpink
      console.log(space + 'pink');
      //结果为  1
      console.log(space +  1);

undefined类型

只有一种值，就是 undefined，表示没有值的意思

    <script>
      var variable = undefined;
      //结果为  undefinedpink
      console.log(variable + 'pink');
      //结果为  NaN
      console.log(variable + 1);
    </script>

复杂数据类型

对象类型（object）
函数类型（function）

获取变量数据类型typeof

    <script>
      var num = 10;
      console.log(typeof num);
    </script>

数据类型转换

转换为字符串

变量.toString()：有一些数据类型不能使用 toString() 方法，比如 undefined 和 null。
强制转换String(变量)：所有数据类型都可以。
加号拼接字符串：在 JS 里面，+ 有两个含义
字符串拼接：只要 + 任意一边是字符串，就会进行字符串拼接。
加法运算：只有 + 两边都是数字的时候，才会进行数学运算。

    <script>
      var num = 10;
      var str = num.toString();
      console.log(typeof str);

      console.log(String(num));
      
      console.log(num + '');
    </script>

在这里插入图片描述

转换为数字型

Number(变量)

可以把一个变量强制转换成数值类型。
可以转换小数，会保留小数。
可以转换布尔值。
遇到不可转换的都会返回 NaN。

parseInt(变量)

从第一位开始检查，是数字就转换，直到一个不是数字的内容。
开头就不是数字，那么直接返回 NaN。
不认识小数点，只能保留整数。

parseFloat(变量)

从第一位开始检查，是数字就转换，直到一个不是数字的内容。
开头就不是数字，那么直接返回 NaN。
认识一次小数点。

利用数学运算

运算符两边都是可运算数字才行。
如果运算符任何一边不是一个可运算数字，那么就会返回 NaN。
加法不可以用。

转换为布尔型

Boolean(变量)：在 js 中，只有 ‘’、0、null、undefined、NaN，这些是 false，其余都是 true

扩展阅读

解释型语言和编译型语言

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
在这里插入图片描述

翻译器翻译的方式有两种：一种是编译，另外一种是解释。两种方式之间的区别在于翻译的时间点不同。
编译器是在代码执行之前进行编译，生成中间代码文件。
解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）

标识符丨关键字丨保留字

JS运算符

数学运算符

加 +

只有符号两边都是数字的时候才会进行加法运算
只要符号任意一边是字符串类型，就会进行字符串拼接

减 -

会执行减法运算
会自动把两边都转换成数字进行运算

乘 *

会执行乘法运算
会自动把两边都转换成数字进行运算

除 /

会执行除法运算
会自动把两边都转换成数字进行运算

余 %

会执行取余运算
会自动把两边都转换成数字进行运算

一元运算符

前置递增运算符：++num，使用口诀：先自加，后返回值。
后置递增运算符：num++，使用口诀：先返回值，后自加。
前置递减运算符：- - num，使用口诀：先自加，后返回值。
后置递减运算符：num- -，使用口诀：先返回值，后自加。

    <script>
      var a = 10;
      ++a; // ++a 11  a = 11
      var b = ++a + 2; // ++a 12  a = 12
      console.log(b); // b = 14

      var c = 10;
      c++; // c++ 10  c = 11
      var d = c++ + 2; // c++ 11  c = 12
      console.log(d); // d = 13

      var e = 10;
      var f = e++ + ++e; 
      // 1、e++ 10  e = 11
      // 2、e = 12  ++e 12
      console.log(f); // f = 22
    </script>

单独使用时，运行结果相同。
与其他代码联用时，执行结果会不同。

比较运算符

==

比较符号两边的值是否相等，不管数据类型。
1 == ‘1’
默认转换数据类型，把字符串型数据转换为数字性数据。
所以两个的值是一样的，所以得到 true。

===

比较符号两边的值和数据类型是否都相等。
1 === ‘1’
两个值虽然一样，但是因为数据类型不一样，所以得到false。

!=

比较符号两边的值是否不等。
1 != ‘1’
因为两边的值是相等的，所以得到false。

!==

比较符号两边数据的类型和值是否不相等。
1 !== ‘1’
因为两边数据的数据类型确实不一样，所以得到true。

>=

比较左边的值是否大于或等于右边的值。
1 >= 1 true
1 >= 0 true
1 >= 2 false

<=

比较左边的值是否小于或等于右边的值。
1 <= 2 true
1 <= 1 true
1 <= 0 false

>

比较左边的值是否大于右边的值。
1 > 0 true
1 > 1 false
1 > 2 false

<

比较左边的值是否小于右边的值。
1 < 2 true
1 < 1 false
1 < 0 false

逻辑运算符

&&

进行且的运算
符号左边必须为 true 并且右边也是 true，才会返回 true
只要有一边不是 true，那么就会返回 false
true && true true
true && false false
false && true false
false && false false

||

进行或的运算
符号的左边为 true 或者右边为 true，都会返回 true
只有两边都是 false 的时候才会返回 false
true || true true
true || false true
false || true true
false || false false

!

进行取反运算
本身是 true 的，会变成 false
本身是 false 的，会变成 true
!true false
!false true

逻辑中断（短路运算）

短路运算原理：当有多个表达式（值）时，左边的表示式值可以确定结果时，就不再继续运算右边的表达式的值。

逻辑与

语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2。
如果第一个表达四的值为假，则返回表达式1。

    <script>
      console.log(123 && 456); // 456
      console.log(0 && 456); // 0
      console.log(0 && 1 + 2 && 456 * 56789); // 0
    </script>

在这里插入图片描述

逻辑或

语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1。
如果第一个表达式的值为假，则返回表达式2。

    <script>
      console.log(123 || 456); // 123
      console.log(0 || 456); // 456
      console.log(123 || 456 || 789); // 123
    </script>

在这里插入图片描述

赋值运算符

=

就是把 = 右边的赋值给等号左边的变量名
var num = 100
就是把 100 赋值给 num 变量
那么 num 变量的值就是 100

+=

a += 10 等价于 a = a + 10

-=

a -= 10 等价于 a = a - 10

*=

a *= 10 等价于 a = a * 10

/=

a /= 10 等价于 a = a / 10

%=

a %= 10 等价于 a = a % 10

运算符优先级

在这里插入图片描述

Anbelin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript】笔记の１章

参考资料https://www.bilibili.com/video/BV1ux411d75J/https://blog.csdn.net/GUDUzhongliangJavaScriptJavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言。脚本语言：不需要编译，运行过程中由JS解释器（JS引擎）逐行进行解释并执行。现在也可以基于Node.js技术进行服务器端编程。JavaScript的作用表单验证（密码强度检测，JS产生的最初目的）网页特效服务端开发（.
复制链接

扫一扫