前段学习小白打卡7进入js

最新推荐文章于 2024-09-16 08:47:17 发布

白潏

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量62

点赞数

分类专栏：前端文章标签： javascript 学习前端 html5 vscode css ecmascript

本文链接：https://blog.csdn.net/qq_65719034/article/details/131730533

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

js是一种运行在客户端（浏览器）的编程语言
作用：
网页特效，表单验证，数据交互，服务器编程node.js

js->
ecmascript(javascript语言基础)和webapis(dom
,bom)(页面文档对象模型，浏览器对象模型)(操作文档，操作浏览器)
网站（mdn）
js
书写位置
行内，内部，外部
内部：
写在html文件里面，用script标签包住，规范：script标签写在</body>上面
之所以写在下面：
浏览器会按照代码的位置在文件中顺序加载html，js放在html的底部通常是最好的策略

外部：
代码写在.js里面
引入之后，中间无需写代码，否则被忽略
<script src='./js/my.js'>
alert('你好,js~~~')
</script>
注释// (ctrl+/)
/**/(shift alt a)

分号;可加可不加，但是尽量统一

输出入语法
document.write('hello')
document.write('<h1>我是一级</h1>')
// 向body输出内容，标签可以被解析成网页元素
prompt('请输入你的姓名')
// 输入信息，显示对话框，

alert('晚上吃鸡吗')
// 警示对话框
prompt('请输入你的姓名')
// 输入信息，显示对话框，
alert和prompt会跳过页面渲染先执行

变量就是装东西的容器
let age
age=18
alert(age)
let nam='jl'
不允许重复声明
let age=18，name='adas'
变量声明：
不能用关键字，只能用下划线，字母，数字、$组成，数字不能打头
大小写严格区分，起名有意义，遵循小驼峰命名，第一个单词首字母小写，后面的每个单词首字母大写

let和var的区别
var在开发中一般不用，老版本可能有
var声明，可以先使用再声明，可以重复声明，变量提升，全局变量，没有块级作用域

let aghe=[1,2,3,4,5,6]
数组的长度arr.length
const 常量
必须初始化，不允许重新赋值
const a=10

基本数据类型
number string boolean undefined null
引用数据类型
object对象

Nan是一个计算错误，无论是什么计算都是Nan
let str=''空字符串
必要时可以用转义符 \
+ 可以拼接字符串

模版字符串
拼接字符串和变量
语法 :``(反引号)
内容拼接变量时，用${}包住变量
let kl=10
document.write(`我今年${kl}岁了`)

未定义类型
只有一个值undefined
只声明不赋值，默认为undefined
工作中，我们可以通过检测值是否为undefined，变量来确定数据是否传过来了。
把null作为尚未创建的对象

通过typeof关键字检测数据类型
运算符：typeof（x）或typeof x

表框，单选框，复选框 prompt获取的值默认都是字符串

隐式转换
+ 号两边只要有一个字符串，都会把另外一个转换成字符串，-*/都会把数据转换成数字类型
+号作为正号解析可以转换成数字型（document.write(+'123')）
任何数据和字符串相加结果都是字符串
隐式转换不严谨规律不清晰

显示转换
let str='123'
Number（str）
Nan也是number类型的数据，代表非数字
若转换时字符串内含有非数字，转换失败结果为NaN不是一个数字

parselnt（数据）
只保留整数
parseFloat（数据）
可以保留小数

前置自加++i
先加后用

后置自加i++
先用后加

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/my.css">
    <title>Document</title>
</head>
<body>
    <h2>订单确认</h2>
    <script src='./js/my.js'>
        // alert('你好,js~~~')
    </script>
</body>
</html>

css

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;
}

// // alert('晚上吃鸡吗')
// // 警示对话框
// document.write('hello')
// document.write('<h1>我是一级</h1>')
// // 向body输出内容，标签可以被解析成网页元素
// console.log('看看对不对')
// // 控制台打印输出
// // prompt('请输入你的姓名')
// // 输入信息，显示对话框，

// let age
// age=18
// alert(age)
// let nam='jl'
// nam=prompt('请输入你的姓名')
// document.write(nam)

// let aghe=[1,2,3,4,5,6]
// const a=10
// console.log('zifu'+'zidu')

// let kl=10
// document.write(`我今年${kl}岁了`)

// let ol=true
// document.write(ol)
// document.write(+'123')
let price=+prompt('请输入商品价格')
let num=+prompt('请输入数量')
let address=prompt('请输入地址')

let total =price*num
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>
`)