JS基础第一章 - 技术栈

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程，JS基础第一天学习

一、JavaScript简介

1.JS简介

（1）JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互。

（2）可以实现的作用：

①网页特效：监听用户的一些行为，让网页做出对应的反馈

②表单验证：针对表单数据的合法性进行判断

③数据交互：获取后台数据渲染到前端

④服务端编程：node.js

（3）JS的组成

①ECMAScript：规定了JS基础语法核心知识，如变量、分支语句、循环语句等

②web APIs，包括DOM（DOM操作文档，对页面元素进行移动、大小缩放、添加删除等）和BOM（操作浏览器，如页面弹窗、检测窗口宽度、存储数据到浏览器等）

（4）JavaScript的权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript (直接搜索MDN）

2.JS书写位置

（1）行内JS（内联JS）：代码写在标签内部

html 复制代码

<html>
	<body>
		<button onlick="alert=('逗你玩')">点击</button>
	</body>
</html>

（2）内部js：script标签写在HTML文件里面的上面，用script标签包住。

注意事项：将

3.JS注释

（1）单行注释

符号：//

快捷键：Ctrl+/

（2）多行注释

符号：/*注释内容*/

快捷键：shift+alt+a

4.JS结束符

结束符：分号;

注意：要么都写，要么都不写

5.输入语法和输出语法

（1）输出语法

① alert('要输出的内容')：在页面中弹出警告窗口

② console.log('控制打印输出')：控制控制台的输出，调试代码的时候

③document.write('要输出的内容')：向body输出内容，如果输出的内容是标签，也会被解析成网页元素

（2）输入语法

prompt('请输入内容')：显示一个对话框，对话框的上方有一条文字信息，提示用户输入文字

（3）JavaScript代码执行顺序：按HTML文档流顺序执行JavaScript代码，alert（）和prompt()它们会跳过渲染先被执行

二、变量

1.变量的本质

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

2.变量的命名规范与规则

（1）规则

①不能使用关键字，如let、var、if、for等

②只能用下划线、字母、数字、$ 组成，且数字不能写在开头

③ 字母严格区分大小写

（2）规范

① 起名要有意义，见名知意

②遵循小驼峰命名法

③第一个单词首字母小写，后面每个单词的首字母大写，如userName

3.变量的基本使用

（1）变量的声明

① 组成：关键字+变量名：let 变量名

②关键字是系统提供的专门定义变量的

③let同一个变量不可以重复声明

（2）变量的赋值：age=18通过变量名获取数据

三、常量

使用const声明的变量，声明初始化之后，值不可以改变。

注意：声明的时候必须赋值

四、数据类型

1.基本数据类型

①number 数字型：包括整数、小数、正数、负数

② string 字符串类型：通过引号包裹的的数据叫字符串，推荐使用单引号（引号必须成对使用，单双引号可以相互嵌套，但是不可自己嵌套自己，必要时可以使用转义字符\，输出单引号或者双引号）

③ boolean 布尔型：表示肯定或者否定，有两个固定的值，肯定用true，否定用false

④ undefined 未定义型：在只申明变量没有赋值的时候，变量默认为undefined

⑤null空：将来存放对象的时候可以给null

⑥typeof检测数据类型

2. 引用数据类型

① object 对象

② function函数

③array数组

五、数据类型转换

1.隐式转换

某些运算符被执行时，系统内部自动将数据类型转换

转换技巧：

① +两边只要有一个式字符串，就会把另外一个转换成字符串

② 除了+以外的运算符，都会把数据转换成数字类型

2.显式转换

隐式转换的规律并不清晰，大多都是依靠经验总结，所以为了避免隐式转换带来的问题，同常需要对数据进行显式转换

（1）转换成数字

① Number：显式转换成数值类型，可以用Number包裹，也可以在数据前面加一个+

② NaN也是number数据类型的一种，代表非数字，promt取过来的数据是字符串类型

③ parselnt：只保留整数，只舍弃不入

④parse Float：可以保留小数

（2）转换成字符串

① String（）

②变量.toString（）:括号里面可一跟进制

六、模板字符串

1.使用场景

拼接字符串和变量

2.语法

①使用反引号（在因为输入模式下，按下键盘Tab键上方的那个键）；

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

html 复制代码

<!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>
    h2 {
      text-align: center;
    }
    table {
      margin: 0 auto;
      border-collapse: collapse;
      height: 100px;
      text-align: center;

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

  <script>
    // 用户输入
    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>

    `)
  </script>
</body>
</html>