JavaScript基础学习

文章目录

    • 1.1 JavaScript 是什么
    • 1.2 JavaScript 的作用
    • 1.3 HTML/CSS/JS 的关系
    • 1.4 浏览器执行 JS
    • 1.5 JS 的组成
    • 1.6 JS 有3种书写位置
    • 1.7 JS注释
    • 1.8 JS输入输出语句
    • 1.9 JS操作变量
    • 1.10 JS的数据类型
    • 1.11 JS运算符
    • 1.12 JS流程控制-分支
    • 1.13 JS流程控制-循环
    • 1.14 JS操作数组
    • 1.15 JS函数
    • 1.16 JS作用域
    • 1.17 JS预解析
    • 1.18 JS对象
    • 1.19 JS内置对象
    • 1.20 JS简单类型与复杂类型

1.1 JavaScript 是什么

  • 布兰登·艾奇(Brendan Eich,1961年~),用10天完成 JavaScript 设计。

  • 最初命名为 LiveScript,后来在与 Sun 合作之后将其改名为 JavaScript。

  • JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)

  • 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行

  • 现在也可以基于 Node.js 技术进行服务器端编程

1.2 JavaScript 的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )

  • 网页特效

  • 服务端开发(Node.js)

  • 桌面程序(Electron)

  • App(Cordova)

  • 控制硬件-物联网(Ruff)

  • 游戏开发(cocos2d-js)

1.3 HTML/CSS/JS 的关系

HTML/CSS 标记语言–描述类语言

  • HTML 决定网页结构和内容( 决定看到什么 ),相当于人的身体

  • CSS 决定网页呈现给用户的模样( 决定好不好看 ),相当于给人穿衣服、化妆

JS 脚本语言–编程类语言

  • 实现业务逻辑和页面控制( 决定功能 ),相当于人的各种动作

1.4 浏览器执行 JS

  • 浏览器分成两部分:渲染引擎和 JS 引擎 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit

  • JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8

  • 浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。
    JavaScript基础学习_第1张图片

1.5 JS 的组成

JavaScript基础学习_第2张图片
请添加图片描述在这里插入图片描述

1.6 JS 有3种书写位置

分别为行内、内嵌和外部

JavaScript基础学习_第3张图片JavaScript基础学习_第4张图片
JavaScript基础学习_第5张图片

1.7 JS注释

  • 单行注释

JavaScript基础学习_第6张图片

  • 多行注释
    JavaScript基础学习_第7张图片

1.8 JS输入输出语句

JavaScript基础学习_第8张图片

1.9 JS操作变量

变量语法
JavaScript基础学习_第9张图片JavaScript基础学习_第10张图片JavaScript基础学习_第11张图片

变量语法扩展
JavaScript基础学习_第12张图片
JavaScript基础学习_第13张图片JavaScript基础学习_第14张图片

1.10 JS的数据类型

JavaScript基础学习_第15张图片

注意事项:

JavaScript基础学习_第16张图片

数字型三个特殊值
JavaScript基础学习_第17张图片

isNaN()
JavaScript基础学习_第18张图片

字符串引号嵌套
JavaScript基础学习_第19张图片

获取检测变量的数据类型

JavaScript基础学习_第20张图片

数据类型转换

  • 转换为字符串

JavaScript基础学习_第21张图片

  • 转换为数字型
    JavaScript基础学习_第22张图片

1.11 JS运算符

JavaScript基础学习_第23张图片

算术运算符

在这里插入图片描述

递增和递减运算符

JavaScript基础学习_第24张图片

比较运算符

JavaScript基础学习_第25张图片JavaScript基础学习_第26张图片

逻辑运算符

JavaScript基础学习_第27张图片

赋值运算

JavaScript基础学习_第28张图片

运算符优先级
JavaScript基础学习_第29张图片

1.12 JS流程控制-分支

if else
JavaScript基础学习_第30张图片

三元表达式
JavaScript基础学习_第31张图片

switch case

JavaScript基础学习_第32张图片

1.13 JS流程控制-循环

for 循环

JavaScript基础学习_第33张图片

while 循环

do while 循环

continue break

1.14 JS操作数组

数组的概念

JavaScript基础学习_第34张图片

数组元素的类型

在这里插入图片描述

数组的索引

JavaScript基础学习_第35张图片

遍历数组

JavaScript基础学习_第36张图片

数组中新增元素

​ 通过修改 length 长度新增数组元素
JavaScript基础学习_第37张图片JavaScript基础学习_第38张图片JavaScript基础学习_第39张图片

1.15 JS函数

函数概念

JavaScript基础学习_第40张图片

函数的使用
JavaScript基础学习_第41张图片JavaScript基础学习_第42张图片

函数的参数
JavaScript基础学习_第43张图片JavaScript基础学习_第44张图片

函数形参和实参个数不匹配问题

JavaScript基础学习_第45张图片

函数的返回值

JavaScript基础学习_第46张图片JavaScript基础学习_第47张图片在这里插入图片描述

arguments的使用

JavaScript基础学习_第48张图片

函数的两种声明方式

自定义函数方式(命名函数)

JavaScript基础学习_第49张图片

函数表达式方式(匿名函数)

JavaScript基础学习_第50张图片

1.16 JS作用域

JavaScript基础学习_第51张图片

全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

局部作用域 (函数作用域)

作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

JS 没有块级作用域

JavaScript基础学习_第52张图片

全局变量和局部变量的区别

JavaScript基础学习_第53张图片

作用域链

JavaScript基础学习_第54张图片

1.17 JS预解析

概念

JavaScript基础学习_第55张图片

变量预解析和函数预解析

JavaScript基础学习_第56张图片JavaScript基础学习_第57张图片

解决函数表达式声明调用问题
JavaScript基础学习_第58张图片

1.18 JS对象

JavaScript基础学习_第59张图片

字面量创建对象

JavaScript基础学习_第60张图片JavaScript基础学习_第61张图片

对象的调用

JavaScript基础学习_第62张图片JavaScript基础学习_第63张图片

new Object创建对象

JavaScript基础学习_第64张图片

构造函数创建对象

JavaScript基础学习_第65张图片

遍历对象属性
JavaScript基础学习_第66张图片

总结
JavaScript基础学习_第67张图片JavaScript基础学习_第68张图片

1.19 JS内置对象

JavaScript基础学习_第69张图片

学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。MDN: https://developer.mozilla.org/zh-CN/

Math对象

JavaScript基础学习_第70张图片JavaScript基础学习_第71张图片

Date对象

Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用

JavaScript基础学习_第72张图片
JavaScript基础学习_第73张图片

数组对象

创建数组对象的两种方式

1- 字面量方式 ,2- new Array()

检测是否为数组
JavaScript基础学习_第74张图片

添加删除数组元素的方法
JavaScript基础学习_第75张图片JavaScript基础学习_第76张图片

数组索引方法
JavaScript基础学习_第77张图片

数组连接截取
JavaScript基础学习_第78张图片

字符串对象

基本包装类型

JavaScript基础学习_第79张图片

字符串的不可变
JavaScript基础学习_第80张图片
JavaScript基础学习_第81张图片JavaScript基础学习_第82张图片
JavaScript基础学习_第83张图片

replace() 方法用于在字符串中用一些字符替换另一些字符。

split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。

toUpperCase() //转换大写

toLowerCase() //转换小写

1.20 JS简单类型与复杂类型

JavaScript基础学习_第84张图片
JavaScript基础学习_第85张图片JavaScript基础学习_第86张图片
JavaScript基础学习_第87张图片JavaScript基础学习_第88张图片

你可能感兴趣的:(前端,javascript,学习,开发语言)