JS基础语法(pink老师课程笔记)

JavaScipt

运行在浏览器的编程语言

书写位置

  • 内部
<body>
    <script>
        alert('你好')
    </script>
</body>
  • 外部
<body>
    <script src="my.js"></script>
</body>

创建js文件,与img标签相似

  • 行内

输入输出语法

输出

// alert('你好JS~')
// document.write('javascript我来了!')
console.log('她~会魔法吧~')

依次为:弹出警示框、文档输出内容、控制台打印输出

输入

prompt('请输入年龄')

变量

容器,装东西的盒子

// 声明变量 
        let age
// 赋值“=”
        age = 18
        alert(age) 
// 声明同时进行赋值(初始化)
        // let age = 18
// 变量更新
        // age = 19
        // document.write(age)

声明多个变量时,使用逗号隔开

命名规范和规则

规则

关键字(let、if、var)不能使用

数字不能开头

组成:字母、下划线、数字、$

  • 注意-字母区分大小写

规范

有意义的名字

小驼峰命名-userName

常量

  • 常量的值是无法改变的,也不能被重新声明
  • 命名规范:和变量一致
 // 常量
        const PI = 3.14
        console.log(PI)

不允许重复赋值,声明时必须赋值

数据类型

基本数据类型

number

整数、小数、正数、负数

// number 
        console.log(1 + 1)
        console.log(5 % 2) 

算数运算符:加减乘除取余

NaN: not a number

string

单引号、双引号、反引号包裹的数据(推荐单引)

// 字符串拼接
        let age = 18
        console.log('我今年' + age + '岁了')
// 模板字符串
        console.log(`我今年${age}岁了`)

模板字符串:拼接字符串和变量,变量使用${}

boolean

true false

// boolean 
        let isCool = true
        console.log(isCool)
        console.log(typeof isColl)
        console.log(3 > 4)

检测数据类型:typeof

undefined

// undefined 
        let num
        console.log(num)
        console.log(num + 1)
        console.log(typeof num)

声明变量未赋值

null

// null 
        let obj = null
        console.log(obj)
        console.log(obj + 1)

赋值了但为空

引用数据类型

object对象、function函数、array数组

类型转换

隐式转换

// 隐式转换
        console.log(2 + '2')
        // 22
        console.log('zhu' + '2')
        // zhu2
        console.log(2 - '2')
        // 0
        console.log(2 * '2')
        // 4
        console.log(+'123')
        // 123
        console.log(typeof +'123')
        // number
  • 加号两边有一个为string,则另一个也会转为string。zhu2

  • 除‘+’外,减乘除均会把数据转化为number。0

  • '+'作为正号时可将字符串转为number。+'123'

  • 任何数据与string相加均为string

显示转换

(严格大小写)

Number()-转为数字型

parseInt()-取整数

parseFloat()-浮点

// 显示转换
        let str = prompt('数字')
        console.log(Number(str) + 3)
        // 案例
        let num1 = +prompt('请输入第一个数字:')
        let num2 = +prompt('请输入第二个数字:')
        document.write(`两数相加的和为${num1 + num2}`)
        // document.write(+num1 + +num2)
        // document.write(Number(num1) + Number(num2))
        // document.write(parseFloat(num1) + parseFloat(num2))

案例:用户信息订单

合并边框

table {
            /* 合并边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
        }
posted @ 2023-11-09 09:59  齐嘉树  阅读(4)  评论(0编辑  收藏  举报