24.[前端开发-JavaScript基础]Day01-插件配置-变量-数据

m0_zj

已于 2025-02-27 18:38:31 修改

阅读量416

点赞数 4

文章标签： javascript 开发语言 ecmascript

于 2025-02-26 13:16:33 首次发布

本文链接：https://blog.youkuaiyun.com/m0_55135449/article/details/145875649

版权

一、邂逅JavaScript

1 认识编程语言

前端的三大核心

计算机语言

编程语言

常见的编程语言

2 编程语言发展历史

编程语言的发展历史 – 机器语言

编程语言的发展历史 – 汇编语言

编程语言的发展历史 – 高级语言

机器语言和高级语言

3 JavaScript的历史

认识JavaScript

JavaScript的起源（一）

JavaScript的起源（二）

JavaScript的历史（三）

JavaScript的起源（四）

4 JavaScript的分类

JavaScript的组成

JavaScript由谁来运行？

5 JavaScript运行引擎

认识JavaScript引擎

浏览器内核和JS引擎的关系

著名的Atwood定律

6 JavaScript应用场景

JavaScript应用越来越广泛

二、JavaScript的基本语法

1 JavaScript编写方式

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>
  <style>

  </style>
</head>
<body>
  
  <!-- 1.编写位置一: 编写在html内部(了解) -->
  <a href="#" onclick="alert('百度一下')">百度一下</a>
  <a href="javascript: alert('百度一下')">百度一下</a>


  <!-- 2.编写位置二: 编写在script元素之内 -->
  <a class="google" href="#">Google一下</a>

  <script>
    var googleAEl = document.querySelector(".google")
    googleAEl.onclick = function() {
      alert("Google一下")
    }
  </script>

  <!-- 3.编写位置三: 独立的js文件 -->
  <a class="bing" href="#">bing一下</a>
  <script src="./js/bing.js"></script>

</body>
</html>

2 noscript元素的使用

<noscript>元素

3 JavaScript注意事项

JavaScript编写的注意事项

加载顺序（自上而下)

4 JavaScript交互方式

JavaScript的交互方式

console函数里面有log对象

Chrome的调试工具

shift+enter可以在控制台编写duo'hang

5 JavaScript语句和分号

JavaScript语句和分号

6 JavaScript注释方式

JavaScript的注释

VSCode插件和配置

console.log的快速编写：直接写log然后敲回车

或者

快速编写console

效果

三、JavaScript变量和数据类型

1 认识JavaScript变量

程序中变量的数据

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>
    // 练习一: 定义变量保存个人信息
    var name = "why"
    var age = 18
    var height = 1.88
    var weight = 160
    var address = "广州市"

    // 修改变量的值(重新赋值)
    age = 19
    height = 1.90
    weight = 165
    address = "深圳市"

    // 练习二: 将一个变量的值, 赋值给另外一个变量
    var nickname = "coderwhy"
    var admin = nickname
    console.log(nickname, admin) // coderwhy coderwhy


    // 练习三: 定义两个变量保存两个数字, 对两个变量中的数字进行交换
    var num1 = 10
    var num2 = 20
    // 方法一: 借助第三个变量
    // console.log("交换前, num1, num2:", num1, num2)
    // var temp = num1
    // num1 = num2
    // num2 = temp
    // console.log("交换后, num1, num2:", num1, num2)

    // 方法二: 不借助于第三个变量完成交换(了解, 笔试面试题)
    console.log("交换前, num1, num2:", num1, num2)
    num1 = num1 + num2 // num1: 30, num2: 20
    num2 = num1 - num2 // num1: 30, num2: 10
    num1 = num1 - num2 // num1: 20, num2: 10
    console.log("交换后, num1, num2:", num1, num2)

    
    // 练习四: 接受用户输入一个值, 并且使用一个变量来保存
    var inputInfo = prompt("请输入一个值吧!")
    console.log(inputInfo)

  </script>

</body>
</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>
    // 注意事项一: 如果一个变量未声明就直接使用, 那么会直接报错
    // var currentAge = age
    // var name = "why"
    // console.log(message)

    // 注意事项二: 如果一个变量有声明, 但是没有赋值操作
    // var info
    // console.log(info)

    // 注意事项三: 在JavaScript中也可以不使用var在全局声明一个变量(不推荐)
    // 如果不使用var来声明一个变量, 也是可以声明成功的, 并且这个变量会被加入window对象
    address = "广州市"
    console.log(address)

  </script>

</body>
</html>