第三阶段js开始。
js第一天。
JavaScript 基础课程
在前端就业js基础阶段课程V8.0(pink老师版)
课程安排:
js基础 5+1 基本语法 变量循环对象函数等
web apis 6+1 操作dom bom 控制交互效果
js高级 4 新增语法 高级技巧
js基础第一天
js介绍
js书写在sccript中,有三个书写位置
js的结束符分号,可以写可以不写
1.输出语法:1.document.write('网页中输出的内容')
document.write('
输出h1标题
')
2.alert('网页警示输出内容')
3. console.log('控制台输出语句')
2.输入语法 : 1.prompt('网页弹出输入框')
prompt('请输入')
document.write('js我来了')
console.log('控制台输出')
alert('页面弹出')
按照html文档流顺序执行js代码 alert()和prompt()会跳过页面渲染先被执行。
字面量:是在计算机中描述的事/物
变量
变量含义:变量就是一个装物体的盒子,是存储数据的容器。
声明变量:也称创建变量
语法:
let 变量名
变量赋值:=
let age
age = 18
alert (age)
console.log(age)
变量的初始化:声明时赋值
let age = 18
小案例
let num = 20
let uname = '张三'
console.log(num)
console.log(uname)
变量的更新与声明多个变量
let age = 18
age = 19
console.log (age)
//不能再次声明 let age
let name = '张三', sex = '女'
//声明建议分开
console.log (name,sex)
小案例1
//用户输入,数据处理,打印输出
let uname = prompt('请输入名字')
document.write(uname)
小案例2
//nu1 存10 nu2 存20 让两者交换数字
let nu1 = 10
let nu2 = 20
let temp = nu1
nu1 = nu2
nu2 = temp
document.write('nu1为' + nu1, 'nu2为' + nu2)
变量的本质
是在计算机内存ram中申请的一块用于存放数据的小空间
变量的命名规范和规则
小练习
let uname = prompt('请输入你的性名')
let age = prompt('请输入你的年龄')
let gender = prompt('请输入你的性别')
document.write ('你的性名是'+uname,'你的年龄是'+age,'你的性别是'+gender)
var和let的区别
在旧版本的js中,变量用var声明
数组Array
一个变量中存多个不同类型的数据。
专业名词:元素,下标,长度
语法声明:
let 数组名 = [数据1,数据2,···,数据n]
let arr = [10,20,30]
let arr1=['刘德华','张学友','mazw']
console.log(arr1)
数组是有序的,数组中的每一个元素都是有一个序号从0开始的,编号也被称为索引,下标。
数组可以存储任何数据类型的数据。
//打印数组中的某个元素,序号从0开始的
let arr1=['刘德华','张学友','mazw']
console.log(arr1[0])
//打印出来的是刘德华
小案例(逗号的后面加个空格)
//定义一个数组,存放星期一到星期天,输出星期天
let arr = ['星球一', '星球二', '星球三', '星球四', '星球五', '星期六', '星期天']
console.log(arr[6])
//打印数组长度
console.log(arr.length)
数组的长度=下标+1,下标是从0开始的
常量
用const声明的变量 称为’常量‘
//常量声明必须赋值(初始化),并且不允许更改
const G = 8.9
console.log(G)
//常量不能再次赋值,否则会报错
数据类型
基本数据类型
引用数据类型(复杂数据类型)
object 对象
下午
接昨天晚上
数据类型
1.基本数据类型
number 数字型
string 字符串型
boolean 布尔型
undefined 未定义型
null 空类型
2.引用数据类型(复杂数据类型)
object 对象
number 数字型
js是弱数据类型语言,只要是数字,可以是整数,小数,正数,负数;只有你赋值之后才知道是什么数据类型。
let age = 18
let ageName = 18.88
let ageNameUser = -20
//以下是字符串型
let nameUser = 'pink'
进行计算
算数运算符
先乘除后加减
% 为取模(取余数)在开发中经常被用作是否被整除
console.log (3 % 5)
//结果为3 前边数比后边小取余结果就是前边的数
小案例
//输入园的半径,算出面积并打印到页面
let ver = prompt('请输入圆的半径')
let mianji = ver * ver * 3.14
document.write('圆的面积是' + mianji)
//NaN 代表计算错误 Not a Number
// 是粘性的 任何和NaN的操作 都是NaN
console.log(NaN === NaN)
//结果为false
console.log('mazw' - 2)
//输出的是NaN
string字符串型
只要使用单引号,双引号,或反引号 包裹的都叫字符串
只要是加引号就都是字符串型
引号的嵌套:外单内双/外双内单
let srt = 'mazw'
let str1 = "mazw"
let str2 = `中文`
//以下打印的是字符串
let str3 = `123577888`
//空字符串
let str3 = ``
字符串的拼接:
+ 号 数字相加,字符相连
let uname = prompt('请输入你的性名')
let age = prompt('请输入你的年龄')
let gender = prompt('请输入你的性别')
document.write('你的性名是' + uname + '你的年龄是' + age + '你的性别是' + gender)
模板字符串
通常使用在 字符串和变量的拼接
必须用反引号
里面用${}
let age1 = 18
document.write(`我今年${age1}`)
小案例
记得用反引号包含
let name = prompt(`你是谁`)
let age2 = prompt(`多大了`)
let sex = prompt(`男的女的`)
document.write(`你是${name},今年{age2},性别${sex}`)
Boolean类型
两个固定值,true 和 false
undefined类型
只声明变量不赋值 打印之后就会出现 undefined(未定义类型)
使用场景:等待传送过来的数据的时候
null类型
空类型,把null作为尚未创建的对象
undefined和null区别
undefined是未定义,没有值传过来
null是定义好了,往里边放入一个空内容(确定里面是对象,但是对象还没有准备好,可以先放入一个null)
console.log(null + 1)
//结果为1
console.log(undefined + 1)
//结果为NaN
数据类型的检测
通过typeof关键字检测数据类型
let num = 10
console.log(typeof num)
let st = 'mzaw'
console.log(typeof st)
let fla = true
console.log(typeof fla)
let un
console.log(typeof un)
let obj = null
console.log(typeof obj)
输出结果:
类型转换
对 表单中的 输入框 单选框,复选框,与 prompt的输入 都是字符串类型的,无法进行数字运算
转换方式:隐式转换,显式转换
隐式转换
在运算过程中系统自己转换
console.log(+'123') //+会将字符串转换为数字型
con
显式转换
隐式转换规律不明确,在转换时,严格区分大小写
Number(数据)
let gongZi = prompt('请输入工资')
let gongZi1 = +('请输入工资')//+号也可以转换成数字类型
console.log(Number(gongZi) + 9);
NaN也是number类型的数据,含义是非数字
parseInt(数据)
只保留整数,将其中的其他单位或文字去除
parseFloat(数据)
可以保留小数,将其中的其他单位或文字去除
console.log(parseInt('12px') + 2);//14
console.log(parseInt('12.999px') + 2);//14
console.log(parseInt('abd13.999px') + 2);//NaN
//对于px会自动掠过
console.log(parseFloat('13px') + 2);//15
console.log(parseFloat('13.999px') + 2);//15.999
console.log(parseFloat('abd13.999px') + 2);//NaN
小案例
//输入两个数,计算两者和,打印到页面中
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
document.write(num1 + num2)
第一天补缺
js是一个编程语言
ECMAScript 基础规定了js的基础语法 和 web APIs DOM操作文档 BOM操作浏览器
onclick,事件点击
alert()
变量是容器,容器用来存储数据
先声明再使用
一次声明多个变量
let age = 22 , uname = '张三'
let age = 22
let uname = '李四'
字面量。看到就知道是什么类型
对于document.write()输出,可以输出html标签
对于alert()和conlose.log()是不可以输出html的标签
命名规则:字母数字下划线美元$,数字和关键字不可以开头
数组的定义与存储
数字类型
取模操作
js中存在精度丢失问题,尽量避免小数运算
NaN是计算是计算错误,在进行减 乘 除 % 时会出现。
+ 数字相加,字符相连
数据类型undefined,声明变量没有赋值就是undefined,运用场景:未输入账号。密码就点击登录
null代表赋值了,但是内容为空 需要手动赋值,一般用作,清空变量,把内存中的变量进行销毁
let age = null ,表示,还没开始就已经结束
typeof null 结果是 object
- * / 都会进行隐式转换 会将结果转化为符号前边的类型