当前位置：首页 > news >正文

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

news 2025/2/27 17:34:36

一、邂逅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 = 18var height = 1.88var weight = 160var address = "广州市"// 修改变量的值(重新赋值)age = 19height = 1.90weight = 165address = "深圳市"// 练习二: 将一个变量的值, 赋值给另外一个变量var nickname = "coderwhy"var admin = nicknameconsole.log(nickname, admin) // coderwhy coderwhy// 练习三: 定义两个变量保存两个数字, 对两个变量中的数字进行交换var num1 = 10var 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: 20num2 = num1 - num2 // num1: 30, num2: 10num1 = num1 - num2 // num1: 20, num2: 10console.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>