JavaScript-DAY1学习笔记

最新推荐文章于 2024-07-25 22:24:14 发布

他是一棵杨树

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量888

点赞数 20

文章标签：学习笔记

本文链接：https://blog.csdn.net/m0_58323724/article/details/135941472

版权

本文介绍了JavaScript的基础知识，包括其定义、作用，组成部分（ECMAScript和WebAPIs），以及变量、数据类型（如数字、字符串、布尔、数组和常量）、算术运算符和如何处理输入输出。通过实例展示了如何在HTML中使用JavaScript进行简单的订单确认计算。

摘要由CSDN通过智能技术生成

1.Javascript简介

1.1JavaScript是什么？

1.1.1定义：一种运行在客户端的编程语言，实现人机交互效果

1.1.2作用：

网页特效
表单验证
数据交互(获取后台数据，渲染到前端）
服务器编程（node.js）

1.2JavaScript的组成

ECMAScript（JavaScript语法基础）、Web APIs（包括DOM页面文档对象模型、BOM浏览器对象模型）

学习 Web 开发 | MDN

1.3书写位置

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

<body>
  <!-- 内部js  -->
  <script>
    alert("hello world!");
  </script>
</body>

外部JavaScript：写在.js文件中，通过script标签引入到html页面中

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

1.4JavaScript注释写法

单行注释

符号：//
作用：//右边这行的代码会被忽略
快捷键：Ctrl+/

块注释

符号：/* */
作用：/* 这之间的内容会被忽略 */
快捷键：shift+alt+a

1.5输入和输出语法

输出语法

语法1：

document.write('要输出的内容')

作用：向body内输出内容

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

语法2：

alert('要输出的内容')

作用：页面弹出警告对话框

语法3：

console.log('要输出的内容')

作用：控制台输出语法，程序员调试使用

输入语法：

语法：

prompt('请输入您的年龄：')

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

2.变量

2.1 变量是什么

用来保存数据，计算机用来存储数据的“容器”。

2.2 变量基本使用

创建变量

let 变量名

声明变量两部分：声明关键词、变量名（标识符）

更新变量：重新赋值

声明多个变量：多个变量中间用逗号隔开

2.3变量的本质

程序在内存中申请的一块用来存放数据的小空间

2.4变量命名规则与规范

规则：

不能用关键字
只能用下划线、字母、数字、$，不能用数字开头
字母严格区分大小写

规范：

起名要有意义
遵守小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大学。例如：userName

2.5 变量拓展--数组

声明数组：

let 数组名 = [数据1,数据2,数据3,···]

使用数组：数组名[索引号] 从0开始；

3.常量

概念：用const声明的变量

使用场景：当某个变量永远不会改变的时候，就可以用const来声明而不是let

命名规范：和变量一致

注意点：

常量不允许更改值
常量声明的时候必须赋值

4.数据类型

JavaScript数据类型整体分为两大类：

基本数据类型：number、string、boolean、undefined、null

引用数据类型：object

4.1 数据类型--数字类型（number）

我们数学中学到的数字，可以是整数、小数、正数、负数

NaN（not a number）不正确的或者一个未定义的数字操作所得结果，任何对NaN的操作都会返回NaN。

4.2 数据类型--字符串类型（string）

单引号''、双引号""、反引号`

注意事项：

无论单引号还是双引号都必须成对使用
单引号双引号可以相互嵌套，但是不以自己嵌套自己
必要时可以使用转义符\，输出单引号或双引号

字符串拼接：

+运算符可以实现字符串的拼接

口诀：数字相加，字符相连

模板字符串：

拼接字符串和变量

语法：外面用``反引号，里面用&{变量名}

4.3 数据类型--布尔型（boolean）

true、false

4.4 数据类型--未定义型（undefined）

4.5 数据类型--null

检测数据类型：typeof 变量

5.数据类型的转换

为什么要转换：JavaScript是弱数据类型，只有赋值后才清楚变量的数据类型。使用表单、prompt获取的数据默认是字符串类型，此时不能直接简单的进行加法运算。

5.1隐式转换

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

规则：

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

缺点：

转换类型不明确，靠经验总结

技巧：

+号作为正号解析可以转换成数字型
任何数据和字符串相加的结果都是字符串类型

5.2 显示转换

过渡依赖系统内部的隐式转换不严谨

Number()、parseInt() 、parseFloat()

6.算术运算符

求和+、求差-、求积*、求商/、取模%

7.案例

<!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>Document</title>
  <style>
    h2 {
      text-align: center;
    }

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

    th {
      padding: 5px 20px;
    }

    table,
    th,
    td {
      border: 1px solid #000
    }
  </style>
</head>

<body>
  <script>
    let price = prompt("请输入商品的价格")
    let num = prompt("请输入商品的数量")
    let address = prompt("请输入您的收货地址")
    let sum = Number(price) * Number(num)
    document.write(`
      <h2>订单确认</h2>
  <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>iPhone18</td>
      <td>${price}</td>
      <td>${num}</td>
      <td>${sum}</td>
      <td>${address}</td>
    </tr>
  </table>
      `)

  </script>
</body>

</html>

效果：