JavaScript笔记01

搜捕鸟了

已于 2023-02-28 22:21:42 修改

阅读量863

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-11-10 16:09:16 首次发布

本文链接：https://blog.csdn.net/weixin_43599321/article/details/127790632

版权

JavaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

文章目录

01.JavaScript是什么

运行在浏览器的编程语言

02.JavaScript的组成（有什么？）

ECMAScript：

规定了js基础语法核心知识。

比如：变量、分支、循环语句、对象等等。
Web APIs：
- DOM ：操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM ：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JS最权威的网站：MDN

<!DOCTYPE html>
<html lang="en">
<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>实现触碰按钮修改按钮样式</title>
    <style>
        .pink {
            background-color: pink
        }
    </style>
</head>
<body>
    <button class="pink">按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        let btns = document.querySelectorAll("button")

        for(let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('mouseover', function(){
                // 将有样式的标签样式清除
                document.querySelector('.pink').className = ""
                this.className = "pink";
            })
        }
    </script>
</body>
</html>

03.JavaScript书写位置

如何向网页添加JavaScipt？

CSS位置：1.行内样式表2.内部样式表3.外部样式表

JavaScript位置：1.内联JavaScript2.内部JavaScript3.外部JavaScript

内联：代码写在标签内部，如

<button onclick="alert(1)">按钮</button>

内部：script标签写在上面

外部：代码写在html文件外，script标签中间不能写代码

<script src="js路径"></script>

04.JavaScript结束符

JavaScript默认换行符是结束符，所以语句结束后面可以不写分号，但为了风格统一，代码要么写分号，要么就不写分号。

05.JavaScript输入输出语法

1.输出语法

document.write('在路上');
documnet.write('<h2>在路上</h2>')

向body内输出内容

如果输出的内容写的是标签，也会被解析成网页元素

alert('警示框')

页面弹出警告对话框

console.log('控制台打印')

控制台输出语法，程序员调试使用，console有控制台、安慰、慰藉的意思

2.输入语法

prompt('请输入您的姓名:')

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

06.JavaScript变量

变量就是一个容器，用来存放数据

使用变量的时候，一定要先声明变量，然后赋值

变量的本质是程序在内存中申请的一块用来存放数据的小空间

let

规则(必须遵守，不遵守会报错)：

不能用关键字
只能用下划线、字母、数字、￥组成，且数字不能开头
字母严格区分大小写，如Age和age是不同的变量

规范(建议，不遵守不会报错，但不符合业内通识):

起名要有意义
遵守小驼峰命名法

小案例:

需求：在浏览器中弹出对话框：请输入姓名，页面中输出刚才输入的姓名

思路：1.输入：用户输入框prompt() 2.内部处理：保存数据使用let变量 3.输出：页面打印，使用document.write()

<body>
    <script>
        let uname = prompt("请输入姓名：")
        document.write(uname)
    </script>
</body>

let和var的区别

let为了解决var的一些问题

var声明：

可以先使用再声明 (不合理)
var声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等

结论：以后声明变量我们统一使用let

变量提升：即将变量声明提升到它所在的作用域的最开始的部分

07.模板字符串实现字符串拼接(es6新增)

在英文输入模式下按键盘的tab键上方那个键（1左边那个键）

内容拼接变量时，用**${}**包住变量

document.write(`大家好，我叫${name},今年${age}岁`)

08.JavaScript数据类型

未定义数据类型

什么时候出现未定义数据类型？以后的开发场景是？

定义变量未给值就是undefined
如果检测变量时undefined就说明没有值传递过来

null

null是什么类型？开发场景是？

空类型
如果一个变量里面确定存放的是对象，如果还没准备好对象，可以放个null

检测数据类型(typeof)

console.log(typeof 123)   // number
console.log(typeof '123')  // string
console.log(typeof true)   // boolean
console.log(typeof undefined)  // undefined
console.log(typeof null)  // object

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

+号两边只要有一个是字符串，都会把另外一个转为字符串
除了+以外的算法运算符比如 - * / 都会把数据转为数字类型

缺点：转换类型不明确，需要考经验才能总结

一个小技巧：在字符串的’10’前面加个+，可以把字符串类型’10’转换为数字类型10

let num = '10'
console.log(num)   // 黑色10(字符串类型)
console.log(+num)  // 蓝色10(数字类型)
console.log(-num)  // 蓝色-10(数字类型)

console.log(10 + +'10')  // 20(数字类型)

显式类型转换

Number(数据)

parseInt(数据)

parseFloat(数据)

// 转换为数字类型
console.log(Number('10.011'))  // 10.011(蓝色)
// 转换为数字类型，只保留整数，没有四舍五入
console.log(parseInt('10.011'))  // 10(蓝色)
// 转换为数字类型，会保留小数
console.log(parseFloat('10.011'))  // 10.011(蓝色)

// 区别
// 1.Number()只能放数字类型的字符，不能放abc这样的 否则返回的是 NaN(Not A Number)
console.log(Number('10.011abc'))  // NaN

// parseFloat 经常用于过滤单位
console.log(parseFloat('10.011abc'))  // 10.011
console.log(parseFloat('100px'))  // 100

数字转换为字符串的两种方法

String(number)
.toString()

console.log(String(10))   // 10(黑色)
let age = 10
console.log(age.toString())  // 10(黑色)
// 括号里面如果是2, 就转换为2进制
console.log(age.toString(2))  // 1010(黑色)

案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>商品订单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            margin: 0 auto;
            text-align: center;
            /* 设置行和单元格的边合并，也就是清除表格自身的border和cellspacing(单元格间距) */
            border-collapse: collapse;
        }
        table th, td {
            border: 1px solid #000;
            padding: 15px;
        }
        table caption {
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <script>
        let goodsName = prompt('请输入商品名称：')
        let goodsPrice = +prompt('请输入商品价格：')
        let goodsNum = +prompt('请输入商品数量：')
        let goodsAddress = prompt('请输入商品收货地址：')
        // 渲染表格
        document.write(`
            <table>
                <caption>
                    <h2>订单信息</h2>
                </caption>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>商品总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>${goodsName}</td>
                    <td>${goodsPrice}元</td>
                    <td>${goodsNum}个</td>
                    <td>${goodsNum*goodsPrice}元</td>
                    <td>${goodsAddress}</td>
                </tr>
            </table>
        `)
    </script>
</body>
</html>