目录
1 JavaScript 介绍
1.1 JavaScript 是什么
1.1.1JavaScript (是什么?)
1.1.2作用(做什么?)
1.1.3 JavaScript的组成(有什么?)
1.2JavaScript 书写位置
1.2.1行内JavaScript
1.2.2 内部JavaScript
1.2.3 外部JavaScript
1.3JavaScript 的注释
1.4JavaScript的结束符
1.5 JavaScript 输入输出语法
1.5.1 输入语法:
1.5.2 输出语法
1.6 字面量
2 变量
2.1 变量是什么?
2.2 变量基本使用☆
1 声明变量
2.3 变量的本质
2.4 变量命名规则与规范
2.4.1 规则
2.4.2 规范
3 常量
4数据类型
4.0 数据检测
4.0.2 typeof运算符
4.1 数据类型 – 数字类型(Number)
4.1.1 数字类型
4.1.2 算术运算符
4.1.3 计算错误
4.2 字符串类型(string)
4.2.1 字符串
4.2.2 字符串拼接
4.3数据类型 – 布尔类型(boolean)
4.4数据类型 – 未定义类型(undefined)
4.5数据类型 – null(空类型)
5类型转换
5.1 为什么要类型转换
5.2 隐式转换
5.3显式转换
6 扩展
6.1 术语编辑
6.2 扩展-基本数据类型和引用数据类型
7案例
8 每日错题
1 JavaScript 介绍
1.1 JavaScript 是什么
1.1.1JavaScript (是什么?)
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
除此之外编程语言还有c,c++,python等.
1.1.2作用(做什么?)
– 网页特效 (监听用户的一些行为让网页作出对应的反馈)
– 表单验证 (针对表单数据的合法性进行判断)
– 数据交互 (获取后台的数据, 渲染到前端)
– 服务端编程 (node.js)(后台开发)
1.1.3 JavaScript的组成(有什么?)
javascript由如下三(两)部分组成:
◇ ECMAScript: [JS基础所学内容]
规定了js基础语法核心知识。
比如:变量、数据类型、运算符、流程控制(分支/循环语句)、数组、函数、对象等等
◇Web APIs:
DOM (document Object mod 文档对象和模型 )操作文档,比如对页面元素进行移动、大小、添加删除等操作BOM ( Browser Object mode 浏览器对象和模型 )操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
注: 关于Web APIs的介绍见: 一文解释什么是API 和 Web APIS-一一网络
权威网站:
MDN JavaScript /zh-CN/docs/Web/JavaScript/zh-CN/docs/Web/JavaScript
1.2JavaScript 书写位置
1.2.1行内JavaScript
<!-- onclick 点击该元素则... alert('...') 弹窗... 括号\引号必加 --><button onclick="alert('不能点!')">说了别点</button>
1.2.2 内部JavaScript
<!-- 2 内部JavaScript --><script>alert('我是内部')</script></body><!-- 推荐写在body结束标签上方-->
1.2.3 外部JavaScript
新建.js文件并引入
<!-- 3 外部JavaScript --><script src="./01-外部.js"></script>
注意:
外部 js 标签常写在body结束标签前外部 js 标签中不要写代码,否则会被忽略
<script src="./01-外部.js">alert('我是哈皮')</script>
如上代码为错误写法,"我是哈皮"弹窗不会显示.
1.3JavaScript 的注释
◇单行注释
符号://作用://右边这一行的代码会被忽略快捷键:ctrl + /
◇块注释
符号:/* */作用:在/* 和 */ 之间的所有内容都会被忽略快捷键:shift + alt + A
1.4JavaScript的结束符
作用: 使用英文的;代表语句结束实际情况: 实际开发中,可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置现状: 在实际开发中,越来越多的人主张,书写 JavaScript 代码时省略结束符约定:为了风格统一,结束符要么每句都写,要么每句都不写(按照团队要求.)特殊情况: 多个立即执行函数需用;隔开即:如无约定要求,不写即可
1.5 JavaScript 输入输出语法
什么是语法:
人和计算机打交道的规则约定我们程序员需要操控计算机,需要计算机能看懂
1.5.1 输入语法:
语法:
prompt('请用户输入:')//注意之间无空格
作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
效果:
1.5.2 输出语法
语法1:
document.write('所要输出的内容')
作用:向body内输出(打印)内容
注意:如果输出的内容写的是标签,也会被解析成网页元素
document.write('俺滴百年榆木老楼梯!')document.write('<button>按钮</button>')
语法2:
alert('输入错误')
作用:页面弹出警告对话框
注意:多个弹窗,弹窗内容按照从上往下书写顺序显示
语法3:
console.log('它 会魔法吧')
作用:控制台输出(打印)语法,程序员调试使用
1.6 字面量
在计算机科学中,字面量(literal)是在计算机中描述 事/物 的量(字面是啥就是啥)
2 变量
2.1 变量是什么?
1. 变量:
白话:变量就是一个装东西的盒子。通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
2.2 变量基本使用☆
1 声明变量
语法:
声明变量有两部分构成:声明关键字、变量名(标识)let 即关键字 (let: 允许、许可、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语
举例:
我们声明了一个age变量age 即变量的名称,也叫标识符
赋值简写:
简单点,也可以声明变量的时候直接完成赋值操作,这种操作也称为 变量初始化。
2. 变量赋值
定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=(赋值符号)”,然后是数值。
2.3 变量的本质
内存:计算机中存储数据的地方,相当于一个空间
变量本质:是程序在内存中申请的一块用来存放数据的小空间
2.4 变量命名规则与规范
规则:必须遵守,不遵守报错 (强制)
规范:建议,不遵守不会报错,但不符合业内通识 (建议)
2.4.1 规则
不能用关键字关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等
只能用下划线、字母、数字、$组成,且数字不能开头字母严格区分大小写,如 Age 和 age 是不同的变量
2.4.2 规范
起名要有意义遵守小驼峰命名法: 第一个单词首字母小写,后面每个单词首字母大写。例:userName二. 变量拓展-let和var的区别
let 和 var 区别:
在较旧的JavaScript,使用关键字 var 来声明变量 ,而不是 let。
var 现在开发中一般不再使用它,只是我们可能在老版程序中看到它。
let弥补了var存在的的一些问题。
可以先使用,再声明 (不合理)var 声明过的变量可以重复声明(不合理)
结论: var 就是个bug,别迷恋它了,以后声明变量我们统一使用 let
3 常量
概念:使用 const 声明的变量称为“常量”。使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。命名规范:和变量一致注意: 常量不允许重新赋值,声明的时候必须赋值(初始化)const name=('u')//二次赋值name=('me')document.write(name)
总结:不需要重新赋值的数据使用const
4数据类型
计算机程序可以处理大量的数据,为什么要给数据分类?
1. 更加充分和高效的利用内存2. 也更加方便程序员使用数据
JS 数据类型整体分为两大类:(5+3)
4.0 数据检测
4.0.1控制台输出语句:
控制台语句经常用于测试结果来使用。可以看出数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色
4.0.2 typeof运算符
typeof 运算符可以返回被检测的数据类型。
它支持两种语法形式:
作为运算符: typeof x (常用的写法)函数形式: typeof(x)
换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。
4.1 数据类型 – 数字类型(Number)
4.1.1 数字类型
JavaScript 中的正数、负数、小数、整数、NaN等 统一称为 数字类型。
注意:
JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认
Java是强数据类型 例如 int a = 3 必须是整数
4.1.2 算术运算符
1 数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。
+:求和-:求差*:求积/:求商%:取模(取余数)[开发中经常作为某个数字是否被整除]
// 取余let name =(112%3)document.write(name)// 求商let name2 =(112/3)document.write(name2)
2同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。
JavaScript中 优先级越高越先被执行,优先级相同时以书从左向右执行。(同数学运算法则)
乘、除、取余优先级相同加、减优先级相同乘、除、取余优先级大于加、减使用 () 可以提升优先级总结: 先乘除后加减,有括号先算括号里面的~~~
4.1.3 计算错误
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN
4.2 字符串类型(string)
4.2.1 字符串
通过引号[单引号( '') 、双引号( "")或反引号( ` )]包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使 用单引号(解析速度更快)。
注意事项:
1. 无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)
3. 必要时可以使用转义符 \,输出单引号或双引号?
4.2.2 字符串拼接
1 原方法:
场景: + 运算符 可以实现字符串的拼接。 口诀:数字相加,字符相连
◇使用场景
拼接字符串和变量在没有它之前,要拼接变量比较麻烦
2 模板字符串
◇语法
`` (反引号)在英文输入模式下按键盘的tab键上方那个键(1左边那个键)内容拼接变量时,用 ${ } 包住变量
◇ 好处:
更方便地在字符串中放入变量书写代码时可以任意换行
//任意换行 // 在()中,标签都起效,但在书写代码时,单/双引号不能任意换行,而反引号可以document.write(`<div><h3>这是标题</h3><br><p>这是段落</p></div>`)
4.3数据类型 – 布尔类型(boolean)
表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)。
4.4数据类型 – 未定义类型(undefined)
未定义是比较特殊的类型,只有一个值 undefined。
什么情况出现未定义类型?
只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined
工作中的使用场景:
我们开发中经常声明一个变量,等待传送过来的数据。 如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有数据传递过来.
undefined 运算
◇undefined+数值→NaN
undefined转化为数值NaN,NaN与任何数相加都为NaN
◇undefined +'字符串'→'字符串'
4.5数据类型 – null(空类型)
JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
null 和 undefined 区别:
undefined 表示没有赋值null 表示赋值了,但是内容为空
null 开发中的使用场景:
把 null 作为尚未创建的对象 大白话: 将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个null(占个位置)
5类型转换
5.1 为什么要类型转换
JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。
坑: 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。
此时需要转换变量的数据类型。 通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。
5.2 隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
+ 号两边只要有一个是字符串,都会把另外一个转成字符串除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型null 经过数字转换之后会变为 0undefined 经过数字转换之后会变为 NaN
缺点:
转换类型不明确,靠经验才能总结
小技巧:
+号作为正号解析可以转换成数字型任何数据和字符串相加结果都是字符串
5.3显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。
为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。
概念:
自己写代码告诉系统该转成什么类型
1 转换为数字型:
以下两种只适用纯数字:
(如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字)
注:NaN也是number类型的数据,代表非数字
◇+
◇Number(数据)
let n=('123')// 字符串转数字 (必须为纯数字字符串)console.log(Number(n))console.log(+(n))let m=('mm')console.log(Number(m))// 布尔值转数字console.log(Number(true)) //true=1console.log(Number(false)) //true=0
以下两种非字符串也适用:
◇parseInt(数据)
只保留整数
◇parseFloat(数据)
可以保留小数
//parseInt和parseFloat 可以转非顺数字字符串let nm=('30.33')// parseInt 转整数console.log(parseInt(nm))// parseFloat转小数console.log(parseFloat(nm))
2 转换为字符型:
补充-加号的功能
1 数字求和
2 字符串连接(数字转字符串)
3 字符串转数字
6 扩展
6.1 术语
6.2 扩展-基本数据类型和引用数据类型
堆栈空间分配区别:
1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。
其操作方式类似于数据结构中的栈;
简单数据类型存放到栈里面
2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。
引用数据类型存放到堆里面
1. 简单类型的内存分配
值类型(简单数据类型): string ,number,boolean,undefined,null值类型变量的数据直接存放在变量(栈空间)中
2. 复杂类型的内存分配
引用类型(复杂数据类型):通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中
7案例
需求:用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息 分析: ①:保存输入的3个数据,所以需要3个变量来存储 price count address ②:计算总的价格 price * count ③:页面打印生成表格,里面填充数据即可 ④:使用模板字符串
套路(公式):
1\准备静态标签+样式(HTML+CSS)
2\准备数据(声明变量)
3\展示数据(通过document.write()+模板字符串)