JavaScript学习第一天
时间:2020年4月18日
JavaScript共分为四个部分:
- JavaScript基础
- Web APIs(实战DOM BOM操作)
- jQuery学习
- JavaScript进阶高级
今天开始,学习第一部分内容:JavaScript基础
学习进度:
- 2020.4.18 看视频40节(基础内容一共190节)
- 2020.4.19 学习Typora的使用方法,并开始写学习笔记,记录第一天学习内容及心得
一、初识JavaScript
-
JavaScript是什么
JavaScript是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
-
JavaScript的作用
- 表单动态校验(密码强度检测)(JS产生最初的目的)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- APP(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
-
HTML/CSS/JS的关系
HTML/CSS标记语言–描述类语言
-
HTML决定网页结构和内容(决定看到什么),相当于人的身体
-
CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服、化妆
JS脚本语言–编程类语言
- 实现业务逻辑和页面控制(决定功能),相当于人的各种动作
-
-
浏览器执行JS
-
JS的组成
-
JS初体验
-
行内式JS
<input type="button" value="点我试试" onclick="alert('Hello World')" />
- 注意:单双引号的使用:在HTML中推荐使用双引号,JS中推荐使用单引号
- 特殊情况下使用
-
内嵌JS
<script> alert('Hello World!'); </script>
- 可以将多行JS代码写到
<script>
标签中 - 学习时使用
- 可以将多行JS代码写到
-
外部JS文件
<script src="my.js"></script>
- 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 实际开发中使用
-
-
JavaScript注释
二、变量
-
变量概述
-
变量的使用
-
变量语法扩展
-
变量命名规范
-
交换变量案例
-
要求:交换两个变量的值(实现思路:使用一个临时变量 用来做中间存储)
-
<script> // js 是编程语言有很强的逻辑性在里面: 实现这个要求的思路 先怎么做后怎么做 // 1. 我们需要一个临时变量帮我们 // 2. 把apple1 给我们的临时变量 temp // 3. 把apple2 里面的苹果给 apple1 // 4. 把临时变量里面的值 给 apple2 var apple1 = '青苹果'; var apple2 = '红苹果'; temp = apple1; apple1 = apple2; apple2 = temp; console.log(apple1); console.log(apple2); </script>
-
示意图:
-
三、数据类型
-
数据类型简介
-
为什么需要数据类型
- 在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
- 简单来说,数据类型就是数据的类别型号。比如姓名“张三”,年龄18,这些数据的类型是不一样的。
-
变量的数据类型
- 变量是用来存储值得所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
- JavaScript是一种弱类型或者说动态语言。
- 这意味着不用提前声明变量的类型,在程序运用过程中,类型会被自动确定。
var age = 10; //这是一个数字型 var areYouOk = '是的'; //这是一个字符串
- 在代码运用时,变量的数据类型由JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕以后,变量就确定了数据类型。
- JavaScript拥有动态类型,同时也意味着相同的变量可用作不用的类型:
var x = 6; //x为数字 var x = 'Bill'; //x为字符串
-
数据类型的分类
JS把数据类型分为两类:
- 简单数据类型(Number,String,Boolean,Undefined,Null)
- 复杂数据类型(object)
-
-
简单数据类型
-
数字型Number
JavaScript数字类型既可以用来保存整数值,也可以保存小数(浮点数)。
var age = 21; // 整数 var Age = 31.3747; // 小数
数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。
现阶段我们只需要记住, 在JS中八进制前面加0,十六进制前面加 0x// 1.八进制数字序列范围: 0~7 var num1 = 07; // 对应十进制的7 var num2 = 019; // 对应十进制的19 var num3 = 08; // 对应十进制的8 // 2.十六进制数字序列范围: 0~9以及A~F var num = 0xA;
数字型范围
JavaScript中数值的最大和最小值
- 最大值: Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
- 最小值: Number.MIN_VALUE,这个值为: 5e-324
alert(Number.MAX_VALUE); // 1.7976931348623157e+308 alert(Number.MIN_VALUE); // 5e-324
数字型三个特殊值
- Infinity ,代表无穷大,大于任何数值
- -Infinity ,代表无穷小,小于任何数值
- NaN , Not a number,代表一个非数值
alert(Infinity); // Infinity alert(-Infinity); // -Infinity alert(NaN); // NaN
isNaN()
用来判断一个变量是否为非数字的类型,返回 true 或者 false
var usrAge = 21; var isOk = isNaN(userAge); console.log(isNum); // false , 21 不是一个非数字 var usrName = "andy"; console.log(isNaN(userName)); // true , "andy"是一个非数字
-
字符串型String
字符串型可以是引号中的任意文本,其语法为双引号 “ ” 和单引号 ‘ ’
因为HTML标签里面的属性使用的是双引号,JS这里我们更推荐使用单引号。
var strMsg = "我爱北京天安门~"; //使用双引号表示字符串 var strMsg2 = '我爱吃猪蹄'; //使用单引号表示字符串 // 常见错误 var strMsg3 = 我爱大肘子; //报错,没使用引号,会被认为是js代码,但js没有这些语法
字符串引号嵌套
JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)
var strMsg = '我是"高帅富"程序猿'; // 可以用''包含"" var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含'' // 常见错误 var badQuotes = 'What on earth?"; // 报错, 不能 单双引号搭配
字符串转义符
类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是\开头的,常用的转义符及其说明如下:
字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
var strMsg = "我是帅气多金的程序猿! "; alert(strMsg.length); // 显示 11
字符串拼接
- 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串, 再拼接成一个新的字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 数值字符串 "相加" alert('100' + '100'); // 100100 //1.3 数值字符串 + 数值 alert('11' + 12); // 1112
字符串拼接加强
- 我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值
- 变量是不能添加引号的,因为加引号的变量会变成字符串
- 如果变量两侧都有字符串拼接, 口诀“引引加加 ”, 删掉数字, 变量写加中间
console.log('pink老师' + 18); // 只要有字符就会相连 var age = 18; // console.log('pink老师age岁啦'); // 这样不行哦 console.log('pink老师' + age); // pink老师18 console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
-
布尔型Boolean
布尔类型有两个值: true 和 false ,其中 true 表示真( 对) ,而 false 表示假( 错) 。
布尔型和数字型相加的时候, true 的值为 1 , false 的值为 0。
console.log(true + 1); // 2 console.log(false + 1); // 1
-
Undifined和Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN
一个声明变量给 null 值, 里面存的值为空(学习对象时,我们继续研究null)
var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1
-
-
获取变量数据类型
typeof可用来获取检测变量的数据类型
var num = 18; console.log(typeof num); // 结果 number
不同类型返回值:
字面量
字面量是源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量:8,9,10
- 字符串字面量:‘学习’,”快乐”
- 布尔字面量:true,false
-
数据类型转换
-
什么是数据类型转换
使用表单、prompt获取过来的数据默认都是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型,通俗来说,就是把一种数据类型的变量转换为另一种数据类型。
通常有3种方式的转换:
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
-
转换为字符串
方式 说明 案例 toString() 转成字符串 var num = 1; alert(num.toString()); String()强制转换 转成字符串 var num = 1; alert(String(num)); 加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num + “我是字符串”); - toString()和String()使用方式不一样。
- 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一种方式也称之为隐式转换。
-
转化为数字型(重点)
方式 说明 案例 parseInt(string)函数 将string类型转成整数数值型 parseInt(‘78’) parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat(‘78.21’) Number()强制转换函数 将string类型转换为数值型 Number(‘12’) js 隐式转换( - * / ) 利用算术运算隐式转换为数值型 ‘12’ - 0 - 注意parseInt和parseFloat单词的大小写,这两个是重点
- 隐式转换使我们在进行算术运算的时候,JS自动转换了数据类型
案例:简单加法器
计算两个数的值,用户输入的一个值后,继续弹出第二个输入框并输入第二个值,最后用过弹窗显示出两次输入值相加的结果。
案例分析:
- 先弹出第一个输入框,提示用户输入第一个值 保存起来
- 在弹出第二个输入框,提示用户输入第二个值 保存起来
- 把这两个值相加,并将结果赋给新的变量(注意数据类型转换)
- 弹出警示框(alert),把计算的结果输出(输出结果)
<script> // 先弹出第一个输入框,提示用户输入第一个值 保存起来 // 再弹出第二个框,提示用户输入第二个值 保存起来 // 把这两个值相加,并将结果赋给新的变量(注意数据类型转换) // 弹出警示框(alert) , 把计算的结果输出 (输出结果) var num1 = prompt('请输入第一个值:'); var num2 = prompt('请输入第二个值:'); var result = parseFloat(num1) + parseFloat(num2); alert('计算结果是' + result); </script>
-
转化为布尔型
方式 说明 案例 Boolean()函数 其他类型转成布尔值 Boolean(‘true’); - 代表空、否定的值会被转换为false,如 ‘ ’、0、NaN、null、undifined
- 其余值都会被转换为true
-