文章目录
1.JavaScript简介
JavaScript 是一种广泛使用的编程语言，主要用于增强网页的交互性。它由 Brendan Eich 在 1995 年在 Netscape 公司开发，最初被设计为一种简单的脚本语言，用于在客户端浏览器中运行。以下是 JavaScript 的一些关键特点和用途：
- 客户端脚本语言：JavaScript 主要运行在用户的浏览器中，可以与 HTML 和 CSS 一起工作，控制网页的行为和外观。
- 动态交互：通过 JavaScript，开发者可以创建动态更新的网页内容，响应用户的操作，如点击按钮、填写表单等。
- 异步编程：JavaScript 支持异步编程，可以通过 AJAX（Asynchronous JavaScript and XML）技术与服务器进行数据交换，而不需要重新加载整个页面。
- 事件驱动：JavaScript 可以响应各种事件，如鼠标点击、键盘输入、页面加载等，使得网页能够实时响应用户的操作。
- 跨平台：几乎所有现代浏览器都支持 JavaScript，使其成为跨平台开发的优选语言。
- 单线程：JavaScript 在浏览器中是单线程的，但可以通过事件循环和回调函数实现非阻塞的异步操作。
- ECMAScript 标准：JavaScript 的标准由 ECMAScript 定义，ECMAScript 是一个脚本语言的规范，JavaScript 是实现这一规范的语言之一。
- 现代框架和库：有许多流行的 JavaScript 框架和库，如 React、Angular、Vue.js 等，它们提供了更高级的功能和更简单的开发方式。
- 服务器端运行：虽然最初是为客户端设计的，但通过 Node.js 等技术，JavaScript 也可以在服务器端运行，处理后端逻辑和数据库操作。
- 全栈开发：JavaScript 可以用于从前端到后端的全栈开发，使得开发者可以使用同一种语言开发整个应用程序。
总之，JavaScript 是一种非常灵活且功能强大的语言，广泛应用于网页开发、移动应用开发、桌面应用开发以及服务器端开发。
2.JavaScript编写的位置
2.1.内部JavaScript
直接写在html文件里，用script标签包住
规范：script标签写在上面
拓展：alert('你好，js)页面弹出警告对话框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--内部js-->
<script>
//页面弹出警示框
alert('你好，js')
</script>
</body>
</html>
注意事项:
我们将script放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTM果先加载的」JavaScript期望修改其下方的HTML,那么它可能由于HTML尚未被加载而失效。因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略。
2.2外部JavaScript
代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/code02.js"></script>
</body>
</html>
注意事项
- script标签中间无需写代码，否则会被忽略！
- 外部的vaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好的习惯。
2.3内联JavaScript
代码写在标签内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="alert('逗你玩的')">点击我月薪过万</button>
</body>
</html>
3.JavaScript注释和结束符
3.1的两种注释方式
- 单行注释：//
- 多行注释：/* * /
3.2JavaScript结束符注意要点
- 结束符是：
英文分号：; - 结束符可以省略吗：
yes
4.js的输入输出语句与字面量
4.1js的输入输出语句
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户,这便是一次输入和输出的过程。
4.1.1输出语句
//语法1
document.write('这是一个输出语句')
作用：向body输出内容
注意：这个输出语句也可以解析标签
console.log('控制台打印')
作用：控制台打印语法，程序员调试使用
4.1.2输入语句
prompt('请输入你的姓名')
作用：显示一个对话框，对话框包含一条文字信息
4.2js的字面量
在计算机科学中，字面量(literal)是在计算机中描述事/物
5.JavaScript数据类型
5.1变量
5.1.1变量是什么？
计算机中用来存储数据的“容器”，简单理解是一个个的盒子。
5.1.2变量的基本使用
- 声明变量
let 变量名
声明变量有两部分构成：声明关键字、变量名（标识）
let即关键字(lt:允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义)变量的词语
2. 变量的赋值
赋值操作符 =
let age
age = 18
document.write(age)
- 声明多个变量
let age = 18,name = 'chengfu shi'
5.1.3案例1：输入姓名并输出
<script>
let name = prompt('请输入你的姓名')
document.write(name)
</script>
5.1.4 案例2：交换两个变量的值
<script>
let num1 = 20
let num2 = 10
let temp = num1
num2 = num1
</script>
5.2变量的本质
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间
5.3案例3：输出用户的信息
<script>
let name = prompt('请输入你的姓名')
let age = prompt('请输入你的年龄')
let mail = prompt('请输入你的性别')
document.write(name,age,mail)
</script>
5.4let和var的区别
在较I旧的avaScript,使用关键字var来声明变量，而不是let。
vr现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
let为了解决var的一些问题。
var声明：
- 可以先使用在声明（不合理）
- var声明过的变量可以重复声明（不合理）
- 比如变量提升、全局变量、没有块级作用域等等
5.5常量
概念：使用const声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let。
命名规范：和变量一致
const G = 9.8
document.write(G)
5.6数据类型
number数字型
string字符串型
boolean布尔型
undefined未定义型
nul空类型
object对象
let age = 18 //数字型
let str = 'JavaScript' //字符串型
let bool = true //布尔型
6.数组的使用
数组(Array)一一种将一组数据存储在单个变量名下的优雅方式。
6.1数组的语法
lat 数组名 = ['数据1','数据2']
数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
6.2数组的使用
let arr = ['liudehua','zhengxueyou','limig']
document.write(arr[0])
7.案例4：用户订单信息案例
需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户订单信息</title>
<style> h2{
text-align: center;
}
table{
border-collapse: collapse;
height: 80px;
margin: 0 auto;
}
th{
padding: 5px 30px;
}
table,th,td{
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>订单确认</h2>
</body>
<script>
let price = prompt('请输入商品的价格')
let number = prompt('请输入商品的数量')
let nums = price * number
let alocade = prompt('请输入地址')
document.write(`
<table> <tr> <th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr> <tr> <td>小米青春版plus</td>
<td>${price}</td>
<td>${number}</td>
<td>${nums}</td>
<td>${alocade}</td>
</tr> </table> `)
</script>
</html>`
1394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
