JS基础Day1

PBA.

已于 2023-07-05 10:40:50 修改

阅读量303

点赞数

分类专栏：实践：黑马程序员前端JavaScript入门到精通2023版文章标签： javascript 前端开发语言

于 2023-07-05 10:39:13 首次发布

本文链接：https://blog.csdn.net/qq_46496981/article/details/131547533

版权

实践：黑马程序员前端JavaScript入门到精通2023版专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.1 JavaScript.三种书写位置？

4 未定义类型和空类型（undefined和null）

课程安排

一 JS基础Day1

重点内容：let/const变量、数据类型、ES6模板字符串

javascript介绍

1 JavaScript书写位置

1.1 JavaScript.三种书写位置？

内部：直接写在html文件里，用script标签包住。

外部：代码写在以.js结尾的文件里。

行内：代码写在标签内部（此处作为了解即可，但是后面vue框架会用这种模式）。

1.2 注意事项：

书写的位置尽量写到文档末尾</body>前面

外部js标签中间不要写代码，否则会被忽路

2 注释

单行注释：// (/右边这一行的代码会被忽略)

块注释：/**/ (在/*和*/之间的所有内容都会被忽略)

3 结束符

使用英文的分号(;）代表语句结束。

4 输入输出

4.1 输入：

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

4.2 输出：

alert()：页面弹出警告对话框。

document.write()：向body内输出内容。

console.log()：控制台输出语法，程序员调试使用。

变量

练习1（变量声明、赋值和输出）

需求：

1.声明一个变量，用于存放用户购买的商品数量(um)为20件

2.声明一个变量，用于存放用户的姓名(uname)为'张三'

3.依次控制台打印输出两个变量

//1
let num;//先声明
num = 20;//再赋值
//2
let uname = '张三'
//3控制台打印输出
console.log(num);
console.log(uname);

练习2（变量声明、赋值和输入输出）

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

let name = prompt("请输入姓名");//浏览器中弹出对话框
document.write(name);//页面中输出

练习3（变量声明、赋值和更新）

需求：

有2个变量：num1里面放的是10，num2里面放的是20

最后变为num1里面放的是20，num2里面放的是10

let num1 = 10;
let num2 = 20;
let temp;
temp = num1;
num1 = num2;
num2 = temp;

document.write(num1);
document.write(num2);

变量拓展——数组

练习（数组取值）

需求：定义一个数组，里面存放星期一、星期二…直到星期日（共7天），在控制台输出：星期日

let date = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
console.log(date[6])//输出数组第七个值

常量

关键字：const

类似于let，但是变量的值无法被修改。

数据类型

1 数字类型(number)

注：NaN代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。

2 字符串类型（string）

练习（输入输出字符串、模板字符串）

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫XX,今年XX岁了

let name = prompt("姓名")
let age = prompt("年龄")
document.write("大家好，我叫"+name+",今年"+age+"岁了"+ "</br>")
document.write(`大家好，我叫${name},今年${age}岁了`)

3 布尔类型(boolean)

true和false

4 未定义类型和空类型（undefined和null）

只声明变量，不赋值的情况下，变量的默认值为undefined。

null仅仅是一个代表"无”、“空”或“值未知”的特殊值。

5 通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型。它支持两种语法形式：

1.作为运算符：typeof×（常用的写法)

2.函数形式：typeof(x)

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

数据类型转换

1 隐式转换

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

练习1

console.log(11 + 11) // 22
console.log('11' + 11) // 1111
console.log(11 - 11) // 0
console.log('11'- 11) // 0
console.log(1 * 1) // 1
console.log('1' * 1) // 1
console.log(typeof '123') // string
console.log(typeof +'123') // number
console.log(+'11' + 11) // 22

练习2

需求：输入2个数，计算两者的和，打印到页面中

let num1 = +prompt('请输入第一个数字：')
let num2 = +prompt('请输入第二个数字：')
alert(`两个数相加的和是：${num1+num2}`)

2 显式转换

自己写代码告诉系统该转成什么类型。

综合案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
图例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day1综合案例</title>
    <style>
        h2 {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }

        th {
            padding: 5px 30px;
        }

        table,th,td {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h2>订单确认</h2>

        
    <script>
        const price = prompt("请输入商品价格：");
        const num = prompt("请输入商品数量：");
        const address = prompt("请输入收货地址：");
        const total = num * price;
        document.write(`
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>    
            <tr>
                <td>小黑子</td>
                <td>${price}</td>
                <td>${num}</td>
                <td>${total}</td>
                <td>${address}</td>
            </tr>
        </table>
        `)
    </script>
</body>
</html>

PBA.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS基础Day1

内部：直接写在html文件里，用script标签包住。外部：代码写在以.js结尾的文件里。行内：代码写在标签内部（此处作为了解即可，但是后面vue框架会用这种模式）。只声明变量，不赋值的情况下，变量的默认值为undefined。null仅仅是一个代表"无”、“空”或“值未知”的特殊值。
复制链接

扫一扫