js简介组成

1.什么是Javascript/strong>

• javascript是一种编程语言
• 在浏览器上运行
• js是可以嵌入到html中到一种脚本语言

2.学习Javascript的意义

一个前端 页主要由三门语言组成，他们之间是缺一不可的关系

• HTML：确定 页的结构
• CSS：确定 页的样式
• JavaScript：确定 页的行为(交互)
  • 众所周知，在前端开发中一个 页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定 页的结构，CSS确定 页的样式,而JavaScript则主要负责 页的行为（动态效果，交互事件等）。
• JavaScript应用场景
  • 1. 页特效
  • 2.游戏开发(cocos2d-js)
  • 3.服务端开发(Node.js)
  • 4.命令行工具(Node.js)
  • 5.桌面程序(Electron)
  • 6.App(Cordova)
  • 7.控制硬件-物联 (Ruff)

3.JavaScript语言的组成

• ECMAScript – JavaScript的核心（JS基础要学的）
  • ECMAScript定义了JavaScript的语言规范
  • JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
• DOM – 文档对象模型(WebAPI)
  • 一套操作页面元素的API（别人提供好的一套方法）
  • DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
• BOM – 浏览器对象模型(WebAPI)
  • 一套操作浏览器功能的API
  • 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.2-JavaScript的三种写法（了解）

1-复习CSS代码的三种写法

• 1.外联样式：写在css文件中，使用link导入
  • • css外联样式的本质其实就是字符串替换 将下方这行代码替换成对应文件的所有代码
• 2.内联样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
• 3.行内样式：不推荐，因为不便于维护

2-JS代码三种写法

• JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
• 1.外联样式：写在js文件中，使用script的src属性导入
• 2.内联样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
• 3.行内样式：不推荐，因为不便于维护

3-细节注意点

• 1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的

• 2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在
  js文件中而不能写在script标签中

  div

  –>

  `

1.3-JS注释两种写法（了解）

• 代码注释的作用：

  • 1.理清思路，方便自己以后阅读代码
  • 2.规范编程，方便以后别人接手代码便于维护
  • 3.新手阶段，建立自己的整体思维逻辑，通过注释将思路先完成，后指导写代码

• JS注释有两种写法

  • // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少
  • /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下

1.4-JS常用五句话（了解）

• JS中常用的五句话主要功能是用于调试以及浏览器简单的交互

  • JS是一门面向对象高级编程语言，它对于逻辑思想的要求较高，所以在编写JS程序时我们很难做到一次性编写就可以完成所有功能

  • 通常的做法是，我们逐步的去实现功能，每敲几行代码我们来打印一下检查代码是否有问题，如果没有就继续编写

    • 类似于我们使用HTML和CSS写静态界面时，并不是写完所有的代码才运行而是写一部分就看一下界面效果

    千万别点，少年

    点我啊

1.5-js代码执行原理（了解）

1-计算机组成

• 1.软件
  • 系统软件：windows，Linux，unix，OSX，iOS，android
  • 应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、VSCode
• 2.硬件
  • 三大件：CPU（运算），内存（临时存储），硬盘（永久存储）
  • 输入设备：鼠标，键盘，摄像头等
  • 输出设备：显示器，打印机，投影仪等

2-代码运行的原理

02-变量（重点）

1.1-变量声明/赋值/取值

• 1.实际开发因为数据是动态变化，不可能写死数据，因此需要使用变量来进行保存
• 2.变量（variable）：内存中用来保存数据的一块空间
• 3.变量作用：在内存中存储数据
• 4.语法:

  • 1.声明变量:let 变量名

  • 2.赋值：变量名 = 值

  • 3.取值：直接写变量名即可

图解变量工作原理

1.2-变量补充说明

• 本小节知识点

  • 1.变量的初始化

  • 2.变量的批量声明

  • 3.变量批量声明赋值

  • 4.变量的重复声明

  • 5.变量的重复赋值

  • 6.变量的值是另一个变量的值

  • 7.JS老版本var声明变量

  • 8.let和var的区别

图解变量补充说明

1.3-变量命名规则与规范

• 规则：必须要遵守，否则会 错
  • 规则是由语法决定的，无法更改
    • 1.变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
    • 2.不能以JS的关键字作为变量名
      • 尽量不要使用关键字和保留字作为变量名，也不需要死记硬背，孰能生巧
      • 关键字：JS内置的一些关键字，代表着特殊的语法含义，不允许程序员擅自声明
      • 保留字：有可能在将来会成为关键字，现在可以用，但是并不能保证以后一直可以用
• 规范：程序员们在遵守规则时养成的一种习惯

  • 规范是程序员的一种编码习惯，主要目的就是为了提高代码的易读性

    • 1.起名要有意义，最好用名词作为变量名
    • 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果有其他单词则每一个单词的首字母大写

1.4-练习：交换两个变量的值

03-数据类型与直接量

1.1-数据类型与直接量介绍

• 1.在js中，只有符合数据类型的数据才能被识别
• 2.数据类型：软件在运行时，会产生数据，数据有很多种，不同的数据CPU的处理方式不同
  所以需要对数据进行分类，不同的数据对应不同的类型
• 3.直接量（字面量）：只要是符合数据类型的数据都叫做直接量
  • 顾名思义：让你从字面上理解这个数据
• 4.如果某行js代码 错，原因只有两个

  • 第一：语法错误

  • 第二：数据不识别

1.2-基本数据类型

String类型

• String：字符串
  • 例如：“张三”,‘abc’
  • 范围：一切用双引 或者单引 包围起来的内容都是字符串
    • 作用：展示文本内容

Number类型

• Number：数字
  • 例如： 10 0.1
  • 范围：数学中的一切数字，包含整数和小数
    • 作用：用于数学计算

Boolean类型

• boolean：布尔类型
  • 只有两个值：true、false
    • 作用：表示现实世界中事物的两种对立面 真假、长短、开关、男女等
      • true表示真
      • false表示假

Undefined类型

• undefined：变量只有声明，没有赋值
  • null是一种空对象，只是目前没有具体内容

null类型

• null：变量赋值为null

  • 作用：不确定未来是什么数据类型

1.3- typeof关键字

• 作用：检测一个数据所属的类型
• 语法：typeof 数据 或者 typeof (数据)

  • 会得到改属性所属类型的字符串: string number boolean

    课堂小彩蛋 ： 请说出下列代码的运行结果

    typeof true;
    typeof “true”;
    typeof (typeof true);
    typeof (typeof “true”);

04-运算符与表达式

• 1.运算符只是一种运算的符 ，单独使用无意义，通常与需要计算的数据在一起组成表达式
• 2.表达式一定有结果，要么直接打印要么存入变量中

1.1-js中+ 的作用

• 1.字符串连接符 ： 连接字符串
  * 条件 ： + 两边只要有一边是string类型
  * 算术加法

• 条件 : + 两边都是number类型

1.2-算术运算符与算术表达式

• 运算符只是一种运算的符 ，由运算符参与的式子称之为表达式

• 表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存

1.3-复合算术运算符

• 符合算术运算符是算术运算符的一种简写形式

  • num += 5 只是 num = num + 5的简写形式，他们之间完全等价

• +=: 在自身值的基础上再加多少

• -=：在自身值的基础上减多少

• *=: 在自身值的基础上乘多少

• /=: 在自身值的基础上除多少

• %=：在自身值的基础上模多少

1.4-自增/自减运算符

• 1.自增/自减都称之为自操作运算

  • ++：自增，自己+1
  • –：自减，自己-1

• 2.自操作运算都是一元表达式，即只有一个变量参与运算

• 3.自操作运算不能用于直接量

课堂小菜单: 请说出以下代码的结果

1.5-Math高级数学计算

• 内置的内容要懂得记重点：当前重点Math，其他的不用特别记

  • MDN官 ：https://developer.mozilla.org/zh-CN/

1.6-常量const关键字【ES6】

• 1.let关键字定义的叫做变量，变量的值可以随时随地随便改变
• 2.有的数据希望一开始定义好，后面就不发生变化，那就需要用到const关键字

  • const是ES6的语法规范（为大型项目而生）

  • const声明的叫做常量（固定量）

  • 常量在声明的时候就必须赋值，且后续不再可以改变（只能使用）

1.7-模板字符串【ES6】

• ES6提供了一种新的写描述字符串的方式：反引 （数字键1旁边的英文状态下的符 ）
• 作用

  • 和引 标记字符串的效果一样

  • 可以解决引 字符串过长不能换行的问题

  • 可以解决字符串连接需要使用+ 的问题