目录
前言:
刚开始学习JavaScript,下面是关于JS的一些非常非常基础的知识,JS的书写位置呀,JS的注释呀,JS的输入输出和变量呀~
JS的书写位置
➢ JS有三种书写位置,分别是行内、内嵌和外部。
1、行内式JS
➢ 行内式JS:直接写到元素的内部。
• 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
• 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中推荐使用单引号
• 可读性差, 在html中编写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>
<!-- 行内式JS 直接写到元素的内部 -->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>
效果展示:
2、内嵌JS
• 可以将多行JS代码写到 <script> 标签中
• 内嵌 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>
<!-- 内嵌式JS -->
<script>
alert('你好呀~');
</script>
</head>
<body>
</body>
</html>
效果展示:
3、外部JS文件
• 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
• 引用外部 JS文件的 script 标签中间不可以写代码
• 适合于JS 代码量比较大的情况
例子:
test.js
alert('如果我是DJ,你还爱我吗?');
test.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>
<!-- 外部JS文件 -->
<script src="js/test1.js"></script>
</head>
<body>
</body>
</html>
效果展示:
JavaScript注释
为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释和多行注释。
1、单行注释
VS Code中的默认快捷键是 ctrl + /
2、多行注释
VS Code中的默认快捷键是 alt + shift + a
JavaScript 输入输出语句
为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。
例子(输入框):
<!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>
<script>
// 这是一个输入框
prompt('请输入您想说的话');
// alert 弹出警示框 展示给用户的
alert('您的话已收到!');
// console 控制台输出 给程序员测试用的
console.log('这是程序员测试用的');
</script>
</head>
<body>
</body>
</html>
效果展示:
输入框:
弹出框:
控制台输出:
变量
1、变量的使用
变量在使用时分为两步: 1. 声明变量 2. 赋值
(1)声明变量
var age; // 声明一个名称为 age 的变量
• var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
• age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
(2)变量的赋值
age = 10; // 给 age 这个变量赋值为 10
• = 用来把右边的值赋给左边的变量空间中,此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值
(3)变量的初始化
var age = 18; // 声明变量同时赋值为 18
- 声明一个变量并赋值, 我们称之为变量的初始化。
例子:
<!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>
<script>
// 1、声明一个变量
var age;
// 2、赋值 把值存入这个变量中
age = 18;
// 3、输出结果
console.log(age);
// 4、变量初始化
var myname = '香蕉卟NaNa';
console.log(myname);
</script>
</head>
<body>
</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>
<script>
// 输入框 输入用户姓名,存储到一个myname变量中
var myname = prompt('请输入您的用户名:');
// 弹出框显示用户名
alert(myname);
</script>
</head>
<body>
</body>
</html>
效果展示:
2、变量语法扩展
(1)更新变量
一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了
(2) 同时声明多个变量
var age = 10, name = 'JJ', sex = 2;
(3)声明变量的特殊情况
情况 | 说明 | 结果 |
---|---|---|
var age ; console.log (age); | 只声明 不赋值 | undefined |
console.log(age); | 不声明 不赋值 直接使用 | 报错 |
age = 10; console.log (age); | 不声明 只赋值 | 10 |
3、变量命名规范
• 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,例如:usrAge, num01, _name
• 严格区分大小写。例如:var app; 和 var App; 是两个变量
• 不能 以数字开头。例如: 18age 是错误的
• 不能 是关键字、保留字。例如:var、for、while
• 变量名必须有意义。例如: MMD BBD nl → age
• 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如: myFirstName
4、交换两个变量的值
- 需要声明一个临时变量
例子:
<!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>
<script>
// 声明一个临时变量
var temp;
var apple1 = '青苹果';
var apple2 = '红苹果';
// 1、把apple1的值赋值给临时变量temp (即把apple1的值存在临时变量temp里面先)
temp = apple1;
// 2、再把apple2的值赋值给apple1
apple1 = apple2;
// 3、最后把临时变量temp的值赋值给apple2
apple2 = temp;
// 输出两变量的值
console.log(apple1);
console.log(apple2);
</script>
</head>
<body>
</body>
</html>
效果展示: