前端学习笔记-JS篇-01

JS基础Day1-01-必看-基本软件以及准备工作_哔哩哔哩_bilibili

JavaScript介绍

是什么 

1.JavaScript (是什么?)

是一种运行在客户端(浏览器)的编程语言，实现人机交互效果
2.作用(做什么?)

• 网页特效(监听用户的一些行为让网页作出对应的反馈)
• 表单验证(针对表单数据的合法性进行判断)
• 数据交互(获取后台的数据，渲染到前端）
• 服务端编程(node.js)

JavaScript权威网站:https://developer.mozilla.org/zh-CN/docs/Web/javaScript 

MDN Web Docs (mozilla.org)

3.JavaScript的组成(有什么?)
ECMAScript:
规定了js基础语法核心知识。比如:变量、分支语句、循环语句、对象等等

Web APIs :

• DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
• BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

书写位置

1.内部 Javascript

直接写在html文件里，用script标签包住
规范:script标签写在</body>上面
拓展: alert('你好，js')页面弹出警告对话框 

注意事项

• 我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。
• 如果先加载的JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
• 因此，将JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2.外部 JavaScrip

代码写在以.js结尾的文件里
语法:通过script标签，引入到html页面中。  

注意事项

• script标签中间无需写代码，否则会被忽略!
• 外部lavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。 

3.内联Javascript

代码写在标签内部
语法:

注意:此处作为了解即可，但是后面vue框架会用这种模式 

注释

单行注释
符号://
作用://右边这一行的代码会被忽略
快捷键:ctrl + /
块注释
符号:/* */
作用:在 /* 和 */ 之间的所有内容都会被忽略
快捷键:shift + alt + a 

结束符

• 作用:使用英文的;代表语句结束
• 实际情况: 实际开发中，可写可不写，浏览器(avaScript 引擎)可以自动推断语句的结束位置
• 现状:在实际开发中，越来越多的人主张，书写JavaScript 代码时省略结束符
• 约定:为了风格统一，结束符要么每句都写，要么每句都不写(按照团队要求.)

输入和输出语法 

 

JavaScript 代码执行顺序:

• 按HTML文档流顺序执行JavaScript代码
• alert()和 prompt()它们会跳过页面渲染先被执行

字面量

在计算机科学中，字面量(literal)是在计算机中描述 事/物

比如:

• 我们工资是: 1000此时1000 就是 数字字面量
• '黑马程序员'字符串字面量
• []数组字面量     { }对象字面量 等等 

变量

是什么 

• 白话:变量就是一个装东西的盒子
• 通俗:变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。 
• 注意:变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

基本使用

1.声明变量:
要想使用变量，首先需要创建变量(也称为声明变量或者定义变量

语法:let 变量名

• 声明变量有两部分构成:声明关键字、变量名(标识)
• let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明(定义)变量的词语 

举例：let age【我们声明了一个age变量，age 即变量的名称，也叫标识符】

2.变量赋值:
定义了一个变量后，你就能够初始化它(赋值)。在变量名之后跟上一个“=”然后是数值。

简单点，也可以声明变量的时候直接完成赋值操作,这种操作也称为 变量初始化。

 3.更新变量:
变量赋值后，还可以通过简单地给它一个不同的值来更新它。但是不允许多次声明变量

4.声明多个变量:
变量赋值后，还可以通过简单地给它一个不同的值来更新它语法:多个变量中间用逗号隔开。 

说明:看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

案例：

需求: 浏览器中弹出对话框: 请输入姓名；页面中输出:刚才输入的姓名

 

变量的本质 

内存:计算机中存储数据的地方，相当于一个空间 

变量本质:是程序在内存中申请的一块用来存放数据的小空间

命名规则与规范

规则:必须遵守，不遵守报错(法律层面)

规范:建议，不遵守不会报错，但不符合业内通识(道德层面)
1.规则:

• 不能用关键字【关键字:有特殊含义的字符，JavaScript 内置的一些英语词汇。例如:let、var、if、for等】
• 只能用下划线、字母、数字、$组成，且数字不能开头
• 字母严格区分大小写，如 Age 和 age 是不同的变量

2.规范:  

• 起名要有意义
• 遵守小驼峰命名法【第一个单词首字母小写，后面每个单词首字母大写。例:userName】

let 和 var 区别:【var 就是个bug，以后声明变量我们统一使用let】
在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let。
var现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
let 为了解决 var 的一些问题。
var声明:

• 可以先使用 在声明(不合理)
• var 声明过的变量可以重复声明(不合理)
• 比如变量提升、全局变量、没有块级作用域等等

数组 

基本使用

• 数组是按顺序保存，所以每个数据都有自己的编号 
• 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
• 在数组中，数据的编号也叫索引或下标
• 数组可以存储任意类型的数据

 

• 元素:数组中保存的每个数据都叫数组元素
• 下标:数组中数据的编号
• 长度:数组中数据的个数，通过数组的length属性获得

常量

 基本使用

• 概念:使用 const 声明的变量称为“常量”.
• 使用场景:当某个变量永远不会改变的时候，就可以使用const 来声明，而不是let
• 命名规范:和变量一致

常量使用: 

注意:常量不允许重新赋值,声明的时候必须赋值(初始化)

小技巧:不需要重新赋值的数据使用const 

数据类型

计算机世界中的万事万物都是数据。
计算机程序可以处理大量的数据，为什么要给数据分类?

• 1.更加充分和高效的利用内存
• 2.也更加方便程序员的使用数据

数字类型(Number)

即我们数学中学习到的数字，可以是整数、小数、正数、负数。  

JavaScript 中的正数、负数、小数等 统一称为 数字类型

注意事项
JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认Java是强数据类型

例如int a=3 必须是整数

数字可以有很多操作，比如，乘法*、除法/、加法+、减法-等等，所以经常和算术运算符一起。
数学运算符也叫算术运算符，主要包括加、减、乘、除、取余(求模)。
求和+        求差-        求积*        求商/        取模(取余数)%[开发中经常作为某个数字是否被整除 ]

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级，JavaScript中 优先级越高越先被执行，优先级相同时以书从左向右执行。

• 乘、除、取余优先级相同
• 加、减优先级相同
• 乘、除、取余优先级大于加、减
• 使用()可以提升优先级
• 总结:先乘除后加减，有括号先算括号里面的~~~

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

字符串类型(String)

通过单引号(')、双引号(")或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项.

• 无论单引号或是双引号必须成对使用
• 单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀:外双内单，或者外单内双)
• 必要时可以使用转义符\，输出单引号或双引号 

字符串拼接:
场景:+运算符 可以实现字符串的拼接。
口诀:数字相加，字符相连 

模板字符串

使用场景:拼接字符串和变量;在没有它之前，要拼接变量比较麻烦  

语法

• ``(反引号)
• 在英文输入模式下按键盘的tab键上方那个键(1左边那个键)
• 内容拼接变量时，用 ${}包住变量 

案例：

需求:页面弹出对话框，输入名字和年龄，页面显示:大家好，我叫xxx，今年xx岁了

布尔类型(boolean)

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true(真)，表示否定的数据用 false(假)  

 

未定义类型(undefined)

未定义是比较特殊的类型，只有一个值 undefined。
什么情况出现未定义类型?
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。  

工作中的使用场景:
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来 

null(空类型)

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别:

• undefined 表示没有赋值
• null 表示赋值了，但是内容为空

null开发中的使用场景:

• 官方解释:把 nul作为尚未创建的对象
• 大白话: 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null 

检测数据类型 

通过 typeof 关键字检测数据类型
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:

1. 作为运算符:typeof x(常用的写法)
2. 函数形式:typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。 

类型转换

为什么需要类型转换
JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚坑: 使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

此时需要转换变量的数据类型
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换公

规则:

• +号两边只要有一个是字符串，都会把另外一个转成字符串
• 除了+以外的算术运算符 比如-*/等都会把数据转成数字类型

缺点:转换类型不明确，靠经验才能总结

小技巧:

• +号作为正号解析可以转换成数字型
• 任何数据和字符串相加结果都是字符串

显示转换 

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换

概念:
自己写代码告诉系统该转成什么类型
转换为数字型
Number(数据)

• 转成数字类型
• 如果字符串内容里有非数字，转换失败时结果为 NaN(NotaNumber)即不是一个数字
• NaN也是number类型的数据，代表非数字

parselnt(数据)【只保留整数】
parseFloat(数据)【可以保留小数】

实战案例 

用户订单信息案例
需求:用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息  

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    table {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <h2>订单确认</h2>


  <script>
    // 1 用户输入
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收获地址：')
    // 2.计算总额
    let total = price * num
    // 3.页面打印渲染
    document.write(`
      <table>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
          </tr>
          <tr>
            <td>小米青春版PLUS</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
          </tr>
        </table>
    `)
  </script>
</body>

</html>