8.16js第一天

第三阶段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

- * / 都会进行隐式转换 会将结果转化为符号前边的类型

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容