前言 Java后端技术点 StringUtils常用API 学习时笔记(Linux) 学习时笔记(Git) 学习时笔记(Docker) 学习时笔记(Vue2+3) 面试宝典学习时笔记(JavaScript) 1.JS基础：语法+流程控制 2.JS基础：数组+函数+对象 3.Web APIS：Dom获取+属性操作 4.Web APIS：Dom事件基础+进阶 5.Web APIS：DOM节点+移动端滑动 6.Web APIS：BOM操作+正则+阶段案例 7.JS进阶：作用域+解构+箭头函数 8.JS进阶：构造函数+数据常用函数+深入面向对象 9.JS进阶：高阶特性 10.ES6（上） 11.ES6（下)-ES9 12.ES10-ES13 学习时笔记(JavaWeb) 学习时笔记(Java) 学习时笔记(Python)

1.JavaScript介绍

概述
- 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
组成
- ECMAScript：规定了js基础语法核心知识
- Web APIs：DOM、BOM操作

书写位置

内部JavaScript：直接写在html文件里

<body>
    <!-- 内部js  -->
    <script>
        //页面弹出警告框
        alert("Hello JavaScript");
    </script>
</body>

外部JavaScript：通过script标签，引入到html页面中

<body>
    <script src="./js/my.js"></script>
</body>

行内JavaScript

<body>
    <button onclick="alert('哈哈哈')">点我</button>
</body>

JavaScript注释
- 单行注释：
  - // 快捷键：ctrl + /
- 多行注释：
  - / / 快捷键：shift + ctrl + /
结束符
- 要么都写，要么都不写
输入和输出语法
- 输出
  - document.wrtie("要写的内容")
- 输入
  - prompt("请输入你的姓名：")

2.变量

概念与Java一致，语法不同

<script>
    //1.声明一个变量
    let age
    //2.赋值
    age = 22
    console.log(age)
    //3.声明的同时赋值
    let id = "B22043226"
</script>

案例

<script>
    let num1 = 10
    let num2 = 20
    let temp
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1,num2)
</script>

变量命名规范
- 不能使用关键字
- 只能使用字母、数字、下划线、$组成，且数字不能开头
- 严格区分大小写
- 满足驼峰命名
let 和 var 变量的区别
- var 声明
  - 可以先使用再声明（不合理）
  - var 声明过的变量可以重复声明（不合理）
  - 存在变量提升、全局变量、没有块级作用域
- let 变量
  - 局部变量，使逻辑更清晰

数组的基本使用

<script>
    //1.声明数组
    let arr = ["马浩楠", "程明辉", "吴赛", "李泽"]
    //2.使用数组
    console.log(arr)
    console.log(arr[3])
    //3.数组的长度
    console.log(arr.length)
</script>

3.常量：const

概念与Java一致，语法不同

<script>
    //1.常量（不能被修改）
    const PI = 3.1415
    console.log(PI)
    // 修改会报错
    PI = 3.14
    //2.常量使用的时候必须赋值
    // const ID
</script>

4.数据类型

基本数据类型
- number 数字型
  - NaN 代表一个计算错误，一个不正确或者一个未定义的数学操作所得结果。无论什么操作对 NaN 结果都为 NaN
- string 字符串型
  - 通过单引号，双引号，反引号包裹的数据叫字符串
  - ``反引号：内容拼接变量时，用${}
```
<script>
    // js为弱类型的语言，只有赋值了才知道是什么数据类'
    name = "马浩楠"
    document.write(`我的姓名是：${name}`)
</script>
```
- boolean 布尔型
- undefined 未定义型
  - 只声明变量，不赋值的情况下，变量的默认值为 undefined
- null 空类型
引用数据类型
- object

检测数据类型：typeof

<script>
    let age = 18
    let uname = "马浩楠"
    let flag = false
    let buy
    console.log(typeof age) // number
    console.log(typeof uname) // string
    console.log(typeof flag) // boolean
    console.log(typeof buy) // undefined
</script>

5.类型转换

JavaScript不知道变量到底属于那种类型，只有赋值了才知道

隐式转换
- 某些运算符被执行的时候，系统内部自动将数据类型进行转换，称为隐式转换
- 规则
  - +号两边只要有一个是字符串，都会吧另外一个转为字符串
  - 除了+以外的算术运算符，会自动将数据转为数字类型
- 缺点
  - 转换类型不明确，靠经验总结
- 小技巧
  - +号作为正好解析可以转换为数字型
```
consoloe.log(+"11" + 11) // 22
```
  - 任何数据和字符串相加结果都是字符串
显示转换
- 转换为数字型
  - Number()
    - 转换失败则为 NaN。 NaN也数据number类型的数据代表非数据
  - parseInt()
    - 只保留整数
  - parseFloat()
    - 可以保留小数
- 转换为字符型
  - String()
  - 变量.toString()

6.案例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
        }
        table{
            width:500px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <h1>订单确认</h1>
    <script>
        let price = +prompt("请输入手机价格：")
        let num = +prompt("请输入数量：")
        let address = prompt("请输入地址：")
        document.write(`
            <table border="1" cellspacing="0">
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>小米手机青春PLUS</td>
                    <td>${price}元</td>
                    <td>${num}</td>
                    <td>${price*num}元</td>
                    <td>${address}</td>
                </tr>
            </table>
        `)
    </script>
</body>

7.运算符

赋值运算符
- +=、-=、*=、/=、%=
二元运算符
```
let num = 10 +20
```
一元运算符
- 自增、自减
```
console.log(i++ + ++i + i) // 7
```
比较运算符
- ==：左右两边值是否相等（会自动转换类型）
- ===：左右两边是否类型和值都相等
逻辑运算符
- &&、||、!
运算符优先级

8.语句

分支语句
- if、if-else、if - else if - else

三元运算符

条件 ？ 满足条件的代码：不满足条件的代码

switch语句

switch(a){
    case "+":
        break;
    case "-":
        break;
    default:
}

循环结构
- 断点调试

while循环
for循环

马浩楠的技术博客

1.JavaScript介绍

2.变量

3.常量：const

4.数据类型

5.类型转换

6.案例

7.运算符

8.语句

results matching ""

No results matching ""