JavaScript基础（一）

星绵崽崽

已于 2023-04-14 02:42:42 修改

阅读量155

点赞数 1

文章标签： javascript 前端开发语言

于 2023-04-14 02:39:38 首次发布

本文链接：https://blog.csdn.net/weixin_47672177/article/details/130143815

版权

本文介绍了JavaScript的三种引入方式：内联、外部和行内，并讲解了变量、常量的声明与使用，以及数据类型如number、string、boolean、undefined和null。还涉及到了注释、输入输出方法、数据类型转换（Number、String、Boolean）以及模板字符串和parseInt、parseFloat函数的使用。

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

学习目标：掌握JavaScript的引入方式，初步认识JavaScript的作用。

1.引入方式

注：JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：内联方式、外部方式。

内部方式：通过 script 标签包裹 JavaScript 代码。

<!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>
</head>
<body>
  <!-- 内部的js 需要将 js代码书写在 script 标签里面
    script 标签一定要放在 结束的 body 标签的前面 -->
  <script>
    alert('你好 js')
  </script>
</body>
</html>

外部形式：一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。

<!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>
</head>
<body>
  <!-- 外部的 js 文件 是 通过 script 标签 引入 src 属性中 -->
  <!-- 注意点：script标签如果是使用嵌入式就不要使用src属性 
    引入外部的js代码如果script标签已经使用了src属性
    引入外部的js代码就不要在标签的中间书写js代码 -->
  <script src="./index.js">
    alert('你好')// 此处的代码会被忽略掉！！！！
  </script>
  <script>
    alert('你好')
  </script>
</body>
</html>

./index.js文件内容

alert('你好 js')

行内形式：

<!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>
</head>
<body>
  <button onclick="alert('逗你玩~~')">点击我中奖</button>
</body>
</html>

2.注释与结束符

<!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>
</head>
<body>
  <script>
    // 下面是 alert 
    alert('ok')

    /* alert('ok')
    alert('ok')
    alert('ok')
    alert('ok')
    alert('ok')
    alert('ok') */
    
     // 结束符：如果一行中有多条语句每条语句结束都需要写分号
    alert('ok1');alert('ok2')
  </script>
</body>
</html>

3.输入输出语法

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

2. alert('需要输出的内容') 先浏览器弹出警告框

3. console.log('需要输出的内容') 在浏览器的调试工具的 console 选项卡中显示内容

4. prompt(‘需要输出的内容’) 输入弹框

<!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>
</head>
<body>
  <script>
    document.write('hello小可爱')
    document.write('<h1>小弟弟真可爱</h1>')
    alert('ok')
    console.log('ok')
    prompt('请输入你的银行卡密码')
  </script>
</body>
</html>

4.变量的基本使用let

<!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>
</head>
<body>
  <script>
    // 1. 需要使用 let 关键字声明变量
    let username
    // 2. 需要给变量赋值  变量名  = 值
    username = '张三'
    // 3. 输出变量的值 
    // 注意点：想要 输出变量的值 注意不要给变量名 加上 引号
    document.write(username)
   
    // 1. 声明变量的同时给变量赋值赋值是使用 = 将 = 右边的值存储到 = 左边的容器里面 
    let age1 = 18 
    // 2. 在控制台中输出
    console.log(age1)

    // 注意点：声明变量时需要使用let关键字但是使用变量时不要在变量的前面加 let 关键字
    // 1. 先 声明变量 并赋值 
    let age2 = 18
    // console.log(age2)
    // 2. 更新变量的值
    age2 = 19
    // 3. 输出变量的值
    console.log(age2)

    // 一次性可以声明多个变量
    // let age3 = 18
    // let num = 20
    let age3 = 18, num = 20
  </script>
</body>
</html>

5.弹出输入框并打印所输入的内容

<!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>
</head>
<body>
  <script>
    // 需要： 浏览器中弹出对话框： 请输入姓名，     页面中输出：刚才输入的姓名
    // 1. 需要准备 输入对话框 需要将 用户输入的内容使用变量存储
    // 2. 在 页面上面 输出 document.write 变量的值
    let uname = prompt('请输入用户名：')
    document.write(uname)

  </script>
</body>
</html>

6.交换两个变量的值（必会）

<!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>
</head>
<body>
  <script>
    // 先声明两个变量
    let num1 = 10
    let num2 = 20

    // 1. 需要准备 临时变量
    let temp
    // 2. 将 num1 赋值给 temp 变量
    temp = num1
    // 3. 将 num2 赋值为 num1 变量
    num1  = num2
    // 4. 将 temp 的值 赋值给 num2
    num2 = temp

    console.log(num1)
    console.log(num2)
  </script>
</body>
</html>

7.变量命名规范

<body>
  <script>
    // 1. 变量名 不能以 js 里面的 关键字 作为 变量名
    // let if = 18
    // 2. 变量名 不能以数字开头
    // let 1234abcd = 20
    // 3.小驼峰命名规范
    let getUserName = '张三'
  </script>
</body>

8.var与let的区别

<body>
  <script>
    // var 可以 先使用 后声明
    // console.log(age)
    // var age = 18
    // let age = 18
    // let age = 18
  </script>
</body>

9.数组的基本使用

<!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>
</head>

<body>
  <script>
    // 变量一次只能保存一个数据
    // 数组可以一个保存多个数据 
    // let 变量名 = [数据1,数据1,数据3, ......]
    let arr = ['关羽', '张飞', '马超', '赵云', '黄忠']
    // 注意：数组 最好只使用 console.log() 打印
    // console.log(arr)
    // 需求：想要在 控制台里面 打印出 马超
    console.log(arr[2])

    let week = ['星期天','星期一','星期二','星期三','星期四', '星期五', '星期六']
    // 需求：在 控制台 里面 输出星期天 
    // console.log(week[0])
    console.log(week.length)
  </script>
</body>

</html>

10.常量的基本使用const

<!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>
</head>
<body>
  <script>
    // 1. 常量一旦声明了 值是不能修改
    // 2. 声明常量时 一定需要赋值
    const PI = 3.1415926
    // PI = 1
    // console.log(PI)
    const age = 18
  </script>
</body>
</html>

11.数据的基本类型

number：数字

<body>
  <script>
    // number: 正数 负数 小数 
    let age = 18
    let price = 1999.99
    let num = -5000

    // js 变量是什么类型 是由 变量的值决定的 
    // int age 

    // 算数运算符
    // console.log(10 + 5)
    // console.log(10 -5)
    // console.log(10 * 5)
    // console.log(10 / 5)
    // console.log(10 % 5)
    // console.log(10 % 3)
    // console.log();
    // % 可以用户判断 某个数字是否是 偶数 或者是 奇数
    // 数字 % 2 余数为0 代表是偶数 反之 只要余数不为0 就是奇数

    // console.log(7 % 2)
    console.log(10 % 2)

    console.log(5 % 2)
  </script>
</body>

NaN：非数字的所有

<body>
  <script>
    // NaN 是 number 类型 里面一个 值  Not a Number 
    // number 类型 正数 负数 小数 NaN 
    console.log('blackpink' - 2)
    console.log(NaN + 2)
  </script>
</body>

String：字符串

<body>
  <script>
    // 凡是用 引号 包裹的数据 称之为 字符串 单引号 双引号 反引号
    // 定义字符串 优先使用 单引号
    let uname = '小明'
    let tel = '13812341234'
    let str = ''

    // 注意：单双引号
    // 双引号 涉及到 字符串 嵌套  双包单
    // 单包双
    // let str = "我是真爱粉'ikun'"
    // console.log(str)

    let str = '我是真爱粉"ikun"'
    console.log(str)
  </script>
</body>

boolean：布尔值

<body>
  <script>
    // boolean 类型 只有两个值 true | false 
    let flag = false
    console.log(flag)
  </script>
</body>

undefined：未定义的

<body>
  <script>
    // undefined 未定义类型  了解
    // 1. 将变量的值 设置为 undefiend 
    // 2. 只声明变量 不给 变量赋值 使用这个变量 
    // let v1 = undefined
    // console.log(v1)
    let v2
    console.log(v2)
  </script>
</body>

null：空

<body>
  <script>
    // 空类型
    // 将 变量的值 设置 为 null 
    // 现在 有些程序员 会将 null 类型 作为 未创建的对象
    let v1 = null 
    console.log(v1)
  </script>
</body>

检测数据类型：

<body>
  <script>
    let v1 = 10
    console.log(typeof v1)
    let v2 = '10'
    console.log(typeof v2)
    let v3 = true
    console.log(typeof v3)
    let v4
    console.log(typeof v4)
    let v5 = null
    /* 注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 "Object"。
    这实际上是JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。
    现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，
    它仍然是原始值。*/
    
    console.log(typeof v5)
  </script>
</body>

数据类型转换的意义：

<body>
  <script>
    let money = prompt('请输入您的绩效工资：')
    //  + 数字相加 字符相连
    console.log(15000 + money)

    // 将 字符串 转换为 number 类型 
    // 如果 该字符串里面 只有数字 会被转换为 数字 
    // 如果 该字符串里面 包含非数字 会被转换为 NaN
    // let v1 = NaN
    // console.log(typeof v1)
    // let str = '1234'
    let str = '1234abcd'
    // Number(变量名)如果能够转换为数字就变成对应的数字如果转换不了就变成NaN
    console.log(Number(str))
  </script>
</body>

将其他类型转字符串：

<body>
  <script>
    //  String(变量) 
    let v1 = 10
    console.log(typeof String(v1))
    //  变量名.toString()
    let v2 = true
    console.log(typeof v2.toString())
    //  变量名.toString(进制) 可以将变量转换成 对应进制的字符串
    let v3 = 14
    console.log(v3.toString(16))
    // 8421
    console.log(v3.toString(2))
  </script>
</body>

将其他的类型转换为Boolean：

<body>
  <script>
    // 注意：'' 0 NaN -0 undefind null false 只有这7种会转成 boolean 的 false 其他的 都是 true


    // Boolean(变量)  true|false
    // 🔔 1. 将 字符串 转换为 boolean  除了 '' 会转成 false 其他的 都是 true
    // let v1 = ''
    // let v1 = '1234'
    // console.log(Boolean(v1))
    // 🔔 2. 将 数字 转换为 boolean 除了 0 与 NaN -0 会转成 false 其他的 都是 true
    // let v1 = 0
    // let v1 = NaN
    // let v1 = -0
    // let v1 = -1
    // console.log(Boolean(v1))
    // 🔔 3. 将 undefined 转换为 boolean false
    // let v1 = undefined
    // console.log(Boolean(v1))
    // 🔔 4. 将 null 转换为 boolean false
    let v1 = null
    console.log(Boolean(v1))

  </script>
</body>

*隐式转换：

<body>
  <script>
    // + 数字相加 字符相连
    // console.log(10 + 20)
    // console.log('10' + 20)
    // console.log('10' - 0)
    // console.log('20' * 1 )

    // 小技巧：可以利用 + 作为正号
    let str = '10'
    console.log(+str)
  </script>
</body>

12.反引号的意义（模板字符串）

在 js中单引号和双引号定义的字符串里面，如果出现了变量名，这个变量名是不会被解析的

老版本的写法：用 + 号字符串拼接老版本的写法

 let uname = '张三'
 let str = '他的名字叫' + uname
 console.log(str)

这个时候就出现了反引号（``）的使用：

反引号不仅能解析算法，还能解析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>Document</title>
</head>
<body>
  <script>
    // 模板字符串
    // 我叫蔡徐坤，我今年18岁
    let uname = '蔡徐坤'
    let age = 18
    // 在 反引号里面 需要解析变量 ${变量名}
    let str = `我叫${uname}，我今年${age}岁`
    console.log(str)
  </script>
</body>
</html>

13.parseInt和parseFloat

1.parseInt() 可以从字符串中提取整数如果字符串的第一个字符不是数字则得到 NaN 如果第一个字符是数字则开始提取整数遇到了非数字就停止提取。

2.parseFloat() 可以从字符串中提取小数如果字符串的第一个字符不是数字则得到 NaN 如果第一个字符是数字则开始提取小数遇到了非数字就停止提取。

<body>
  <script>
    let str = '100px'
    console.log(parseInt(str))


    let str1 = '100.5.5px'
    console.log(parseFloat(str1))
  </script>
</body>

14.总结练习

<!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>
    h1 {
      text-align: center;
      margin-top: 100px;
    }

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

    table,
    th,
    td {
      border: 1px solid #000;
    }

    th {
      padding: 10px 20px;
    }
  </style>
</head>

<body>
  <h1>订单确认</h1>
  <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>小米手机</td>
      <td>200元</td>
      <td>2</td>
      <td>400元</td>
      <td>北京大学</td>
    </tr>
  </table> 

</body>

</html>

<script>
    // 1. 需要准备 3个 输入对话框 需要使用 3个变量来保存用户输入的数据 
    let price = +prompt('请输入商品的价格：')
    let num = +prompt('请输入商品的数量：')
    let address = prompt('请输入商品的收货地址：')
    
    // 2. 计算 总价格 total 总价格 = 商品的数量 * 商品的价格
    let total = price * num
    
    // 3. 将变量的值写入到对应的单元格中document.write()可以将内容输出到body标签里面如果内容时html标签浏览器会解析

    document.write(`
      <h1>订单确认</h1>
      <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>

今天的学习就结束啦，大家一定要加油坚持多练习丫~