前端Javascript入门

230204 Day1

写法：

script标签的位置：行内、内嵌、外部JS文件（同CSS一般）

语句末的分号：要么都写要么都不屑

注释：

• // (ctrl+/) 
• /**/ (shift+alt+A)

输入输出：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	控制台打印输出信息	浏览器
prompt(info)	弹出输入框	浏览器

注意：prompt取过来的值都是字符型的

变量

变量命名规范

由字母/数字/下划线/美元符号组成

严格区分大小写

不能以数字开头，符号只能美元符号/下划线

不能是关键字/保留字（var for）

变量名必须见名知意/驼峰式命名

舍弃var命名 使用let

变量的初始化：1.声明 2. 赋值

let name
let age
name='yaya'
age=21

let name,age
name='yaya'
age=21

let name='yaya',age=21,gender
gender='female'
console.log(name,age,gender)      //输入log自动填充console

let name=prompt('请输入姓名：')
let age=prompt('请输入年龄：')
let gender=prompt('请输入性别：')
docunmet.write(name,age,gender)   //docunment.write()页面输出

获取变量类型

var num = 10;
console.log(typeof num); //number
var timer = null;
console.log(typeof timer); //object

数组及其使用

声明 实现一个变量存多个数据   

• 元素>>可存任意类型数据
• 下标>>按序保存下标0开始
• 长度>>通过数组length属性获得

let 数组名 = [数据1，数据2，...，数据n]

let arr = [3,5,8,19,89]

let names = ['小雅','yaya','鸭']

console.log(arr) // >> Array(5)  >>说明有五个值 >> 再刷新则>> (5) [3,5,8,19,89]

console.log(names) // >> Array(4)

console.log(names[0]) // >>小雅

console.log(names.length) // >>3   

常量

使用const声明的变量称为常量

当某个变量永不改变时使用const声明

ps：常量不允许重新赋值 且声明时必须赋值（初始化）

（当你不需要重新赋值的数据使用const来声明）

const PI = 3.14
console.log(PI)  //  3.14

数据类型 

• 基本数据类型： number string boolean undefinedible null
• 引用数据类型：object对象

数字型Number    

（js是一种弱数字类型的语 言）

整数 小数 正数 负数

+ - * / %

优先级同其他一般

console.log(1+1)   //1
console.log(1*1)   //1
console.log(9/2)   //4
console.log(9%2)   //1

let PI = 3.14
//页面弹出输入框
let r = prompt("请输入圆的半径：")
//页面输出
console.log(PI*r*r)

NaN not a number 代表一种计算错误 是一个不正确或未定义的数学操作所得到的结果

console.log('五十五' - 2)   // NaN
console.log(NaN - 2) //NaN是黏性的 任何对NaN的操作都会返回NaN

字符串类型 String

单引号双引号无区别一般用单引号  三引号也可以

字符串拼接 可用 + 实现

console.log('我是"yaya"') //若要嵌套一般外单内双 当然也可以外双内双 会自动匹配
// 我是"yaya"
// 必要时可以用转义符 \反斜杠

console.log('我是'+'"yaya"')
// 我是"yaya"

let name='yaya'
document.write('我是'+name+'你是谁')
// 我是yaya你是谁

模板字符串 ：用于字符串和变量的拼接

语法： 

• 用反引号`` (英文输入法tab键上方)
• 内容拼接变量时，用${}包住变量 

let age=18
document.write(`小米今天${age}岁了`)

let uname = prompt('输你名：')
let uname = prompt('你多大：')
document.write(`大家好，我是${uname}，我今年${age}了`)

布尔类型 null 和undefined类型

--布尔型 只有两个值
let isCool = true
let isNotcool = false

--undefined  表示没有赋值
let num  //未赋值 js是弱数据类型 当num未赋值则不知道自己什么类型
console.log(num)  //>> undefined

--null 代表“无”“空”或“值未知”  赋值了 但内容为空
let obj = null
console.log(obj)  //>> null

把null作为尚未创建的对象 
将来有个变量立存放的是一个对象，但是对象还没创建好，可以先给个null

console.log(undefined + 1)  //NaN
console.log(null +1 )       // 1

数据类型检测 typeof

let num = 10
console.log(typeof(num))   //num
// 也可以不要括号
console.log(typeof num)    //num

let name = 'yaya'
console.log(typeof(name))  //str

let flag = true
console.log(typeof(flag))  //boolean

let un
console.log(typeof(un))  //undefined

let obj = null
console.log(typeof(obj))  //null

隐式转换和显式转换

prompt和表单获取的数据默认是字符串类型的 所以此时不能直接简单地进行加分操作

eg： console.log('100'+'200')    // 100200

 

 

表单案例：

暂略

运算符：

赋值  num = 2+1   左边容器右边值

自增 i++  ++i 区别

ps 

let i =1

console.log(i++ ++i +i)   >>7

比较运算符

>  >=   <  <=  ==   !=  ===  !==

逻辑运算符

与num >5 && num<10        或 ||         非！ 

分支

 除了空字符串 其他字符串都为真

除了0 所有数字都为真

if（条件）{

代码

} else if {

代码 

} else {

代码 

}

三元运算符