1.JavaScript的引⼊⽅式(使用):
1.方式1:行内引用:
此种方式是将<font style="color:rgb(38,38,38);">JavaScript代码作为HTML标签的属性值使⽤,示例如下:</font>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="javascript:alert('警告')">点击弹窗</a>
</body>
</html>
上面案例中是将javascript代码作为了html文档的超链接标签的属性值使用,测试结果如下:
当点击该超链接时,浏览器就会出现警告弹窗;
2.方式2:标签引用:
此方式是在html文档中添加script标签,在script标签中编写javascript代码,示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
window.alert("警告")
</script>
</body>
</html>
在上面代码中,在html文档中添加了script的标签,并声明此标签的type属性为text/javascript,在标签中我们通过浏览器窗口对象window的alert方法向用户展示了一个警告弹窗,运行结果如下:
3.方式3:文件引用:
此方式是通过创建一个javascript的文件,在此文件中编写代码,然后在html文档中引用该文件,实现JavaScript的功能;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
引用js文件index.js内容如下**(js文件中直接编写代码,不加标签**):
测试结果如下:
2.JavaScript的输出:
某些情况下，我们需要将程序的运⾏结果输出到浏览器中，JavaScript为我们提供了多种不同形式输出内容：
- 使⽤ window.alert() 函数弹出提示框
- 使⽤ window.confirm() 函数弹出对话框
- 使⽤ window.prompt() 函数弹出可以让⽤户输⼊的提示框
- 使⽤ console.log() 在浏览器的控制台输出内容
- 使⽤ document.write() ⽅法将内容写⼊到HTML⽂档中
1.window.alert():无返回值
此方式主要是在浏览器中弹出提示框,在上面我们演示JavaScript的使用时,就是通过这种方式;
alert("come on的喂，abc~");
输出结果展示:
2.window.confirm():返回值为boolean
-
JavaScript中的 confirm() 函数与 alert() 函数相似，同样可以在浏览器窗⼝弹出⼀个提示框
-
使⽤ confirm() 函数创建的提示框中，包含了“确定”和“取消”两个按钮
-
点击“确定”按钮， confirm() 函数返回⼀个布尔值 true ；点击“取消”按钮，返回⼀个布尔值false
confirm("确定删除吗？");
测试结果:
3. window.prompt():返回值为string或者null
-
使⽤JavaScript中的 prompt() 函数可以弹出提示框，该提示框可以让⽤户输⼊信息。
-
该函数返回⽤户输⼊的字符串
prompt("请输入密码：");
测试结果:
4.console.log():无返回值
-
<font style="color:rgb(38,38,38);">使⽤JavaScript中的 console.log() 可以在浏览器的控制台输出信息，我们通常使⽤ console.log() 来调试程序</font> -
<font style="color:rgb(38,38,38);"> 控制台的其他打印信息如下所示:</font>
- console.info(“输出信息”);
- console.warn(“输出警告”);
- console.error(“输出异常”);
- window.alert() 和 window.confirm() 可以分别简写成 alert() 和 confirm() 不同， console.log() 不能简写。
- 要看到 console.log() 的输出内容需要先打开浏览器的控制台，打开⽅式有两种：
- 在浏览器窗⼝按 F12 快捷键，在控制台中选择" Console "或“ 控制台 ”选项;
- 点击⿏标右键，在弹出菜单中选择“ 检查 ”选项，在控制台中选择" Console "或“ 控制台 ”选项 ;
console.log("控制台打印输出")
测试结果:
5.方式5:document.write():无返回值
<font style="color:rgb(38,38,38);">使⽤JavaScript中的 document.write() 可以向HTML⽂档中写⼊HTML或者JavaSctipt代码，可直接将写入内容展示到浏览器页面上;</font>
document.write('hello world')
测试结果:
3.代码编写规范:
1. 代码位置:
JavaScript必须出现在以 .js 作为后缀名的⽂件中，或者出现在 html ⻚⾯的
2. 代码分段:
- 每⼀⾏JavaScript代码描述⼀个⾏为/动作，结束时由分号 ; 结尾。以 回⻋ 作为换⾏符，⽤来描述下⼀个⾏为/动作。
- 如果每⼀条语句结束时不加分号，浏览器会⾃动补上分号，但是会消耗⼀部分系统资源。
- JavaScript中会忽略多个空格和换⾏。
3. 字符串 :
JavaScript中的字符串需要包裹在 英⽂输⼊法格式 下的 单引号或双引号中。
4. 代码⼤⼩写:
在JavaScript中严格区分⼤⼩写;
4.JavaScript代码执⾏顺序:
1.概述:
-
<font style="color:rgb(68,68,68);">浏览器在解析 HTML ⽂档时，将根据⽂档流从上到下逐⾏解析和显示。 JavaScript 代码也是HTML ⽂档 的组成部分，因此 JavaScript 脚本的执⾏顺序也是根据 <script> 标签 的位置 来确定的。 </font> -
<font style="color:rgb(68,68,68);"> 通常建议将JavaScript代码放在⽂档的最后部分。</font>
<!DOCTYPE html>
<script>
alert("顶部脚本");
</script>
<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>
<script>
alert("头部脚本");
</script>
<body>
<h1>猿究院官⽹</h1>
<script>
alert("⻚⾯脚本");
</script>
<p>正⽂内容</p>
</body>
<script>
alert("底部脚本");
</script>
</html>
2.图解:
5.JavaScript注释:不具备文档注释
注释是给开发⼈员看的，程序在执⾏时会⾃动忽略注释的内容，所以我们通常使⽤注释来为代码添加⼀些解释说明或描述，以提⾼代码的可读性。
JavaScript注释分为 单⾏注释 和 多⾏注释 两种，具体格式如下：
1.单行注释:
<font style="color:rgb(38,38,38);">单⾏注释是以双斜杠 // 开头， // 之后本⾏所有内容都会被看作是注释的内容，对 // 之前的内容则不会产⽣影响，示例如下：</font>
<script>
//document表示⽹⻚⽂档对象；document.write()表示调⽤document对象的write()⽅法
document.write("<h1>JavaScript注释</h1>")
</script>
2.多行注释:
<font style="color:rgb(68,68,68);">多⾏注释以 /* 开头，并以 */ 结尾，出现在 /* 和 */ 之间的所有内容都会看作是注释的内容，示例代码如下：</font>
<script>
/* document表示⽹⻚⽂档对象；
document.write()表示调⽤document对象的write()⽅法
*/
document.write("<h1>JavaScript注释</h1>")
</script>
6.标识符:
1.概述:
标识符指JavaScript中的变量名,属性名,方法名,函数名,参数名等;
2.命名规则:同java中的命名规则一致
-
1.第一个字母必须是字母、下划线_、美元符号$ -
2.其他字母可以是字母、下划线_、美元符号$、数字 -
3.ECSMScript 惯例采用 驼峰命名 -
4.不能是关键字 或者 保留字
7.字面量与变量:
1.字面量:
概述:
就是固定值,不发生变化;
举例:
sum = 1 + 1;
其中的'1'就是字面量,不发生变化;
2.变量:
概述:
-
给一个值 或者对象 标注了名称,即为变量; -
在代码执行过程中JavaScript中的变量的类型可发生改变,而在Java中一旦声明了一个变量,此变量的类型是一般是不可变的;
变量声明及初始化:
方式1:直接申明变量及初始化(不常用)
a = 3;
console.log(a);
测试结果:
方式2:通过var关键字申明及初始化:(不常用)
通过此关键字可以申明多个相同名称的变量,但前面的值会被后面的值覆盖;
<script>
var a=3;
var a=4;
var a=5;
console.log(a);
</script>
测试结果:
方式3:通过let关键字声明及初始化:
通过此方式声明变量时,变量名不可重复,否则会报错
<script>
let a=3;
let a=4;
let a=5;
console.log(a);
</script>
测试结果:
<script>
let a='变量a';
let b='变量b';
console.log(a,b);
</script>
注意事项:
**声明的变量必须初始化后才能使用**,否则会出现undefined错误
<script>
let a;
console.log(a);
</script>
8.数据类型:
1.基本数据类型:
在js中基本数据类型分别有以下几种:
-
字符串 String: -
数值 Number:(不区分整型和浮点数) Infinity:正无穷 -Infinity:负无穷 NaN 非法数字 -
布尔 Boolean: true----false -
undefined(undefined):<font style="color:rgba(0, 0, 0, 0.85);">表示变量声明但尚未赋值</font> -
null （Null 对象）:<font style="color:rgba(0, 0, 0, 0.85);">表示一个空值，通常用于表示有意缺少对象值;</font>
2.对象:除上面几种类型之外都是对象类型(引用类型)
3.unfined与null的区别:
本质含义:
- `**undefined**`：表示变量已声明但未赋值，或者函数没有明确返回值的返回结果，是一种 “未定义” 的状态。
- `**null**`：代表一个空值，用于有意表示对象值的缺失，是一种 “空” 的概念。
2.类型检测差异:
- `**typeof**`**操作符**：
* `typeof undefined`返回`"undefined"`，能直接识别`undefined`。
* `typeof null`返回`"object"`，这是历史遗留问题，不能准确反映`null`的真实类型。
- **精准类型判断方法（如**`**Object.prototype.toString.call()**`**）**：
* 可以准确区分，`Object.prototype.toString.call(undefined)`返回`"[object Undefined]"`，`Object.prototype.toString.call(null)`返回`"[object Null]"`。
3.应用场景差异:
- **变量初始化方面**：
* 变量刚声明还没赋值时为`undefined`。
* 当需要表示对象不存在或被清空时，使用`null`赋值给相关变量。
- **函数参数方面**：
* 未设置默认值的函数参数，未传入时在函数内为`undefined`。
* `null`作为函数参数可用于表示特殊的、与`undefined`不同的空状态。
4.对逻辑判断的影响:
- **条件判断中的假值情况**：
* `undefined`和`null`在条件判断中都被视为假值。
* 但在精确区分时，要使用`===`严格相等判断，因为`undefined == null`为`true`（宽松相等比较），`undefined === null`为`false`（严格相等比较）。
4.数据类型的查看:
1.typeof:
可以通过运算符** typeof** 来检查当前值或变量的类型
<script>
console.log(typeof 1); // Number
console.log(typeof 'Hello'); // string ``(模板字符串),'', "" 都是字符串
console.log(typeof true); //boolean
console.log(typeof undefined); // undefined
console.log(typeof null);// Object null 对象
</script>
2.模板字符串:
<font style="color:rgba(0, 0, 0, 0.85);">模板字符串是一种在 JavaScript 中方便创建多行字符串以及嵌入表达式的语法。</font>
<script>
let li1 = "列表项目1";
//模板字符串
let str = `<ul>
<li>${li1}</li>
</ul>`;
console.log(str)
</script>
以反引号开始和结束，在这个例子中，它构建了一个包含无序列表（
）的HTML结构，用于换行输出模板类对象str的内容
9.JavaScript中的转义符:
1.概述:
在JavaScript中通常使用'\'来对特殊含义的字符进行转义
-
\n 换行:表示换行,在前面再加一个反斜杠表示输出'\n'字符串 -
\\ 斜杠:单个'\'表示转义符,两个则表示输出'\' -
\t 制表:表示制表符,再加一个反斜杠表示输出'\t' -
\b 空格:表示生成空格 -
\' 单引号:表示输出单引号 -
\" 双引号:表示输出双引号 -
\r 回车:回车,也表示换行
2.案例:
console.log("\" hello\bworld");
console.log("\" hello\tworld");
10.数据类型转换:
1.转String:
1.数字转String:
方式1:toString();
let num = 123;
console.log(typeof num);
num=ToString(num);
console.log(typeof num);
方式2:String():
let num = 123;
console.log(typeof num);
num=String(num);
console.log(typeof num);
方式3:字符串拼接
let num = 123;
console.log(typeof num);
num=num+"";
console.log(typeof num);
2.其他类型转字符串:和上面方式类似
2.转数字:
1.字符串转数字:
-
**如果字符串中有非数字字符,则转换后会出现NaN非法数字** -
** 如果字符串为空,或者为空格,则转换后全为0;**
方式1:使用Number()
<script>
let num = "12.6";
console.log(typeof num);
num = Number(num);
console.log(typeof num);
</script>
方式2:parseInt或parseFloat方法:
<script>
let num = "12.6";
console.log(typeof num,num);
num = parseFloat(num);
console.log(typeof num,num);
</script>
<script>
let num = "12.6";
console.log(typeof num,num);
num = parseInt(num);
console.log(typeof num,num);
</script>
特殊场景模拟:
字符串中有除数字外的其他字符,则转换后会出现转换异常,出现非法数字
<script>
let num = "12a6";
console.log(typeof num,num);
num = Number(num);
console.log(typeof num,num);
</script>
字符串为空或为空格,转换后为0;
<script>
let num1 = "";
let num2 = " ";
console.log(typeof num1,num1);
console.log(typeof num2,num2);
num1 = Number(num1);
num2 = Number(num2);
console.log(typeof num1,num1);
console.log(typeof num2,num2);
</script>
2.布尔类型转数字:
布尔类型转数字,true转换后为1,false转换后为0;
<script>
let num1 = true;
let num2 = false;
console.log(typeof num1,num1);
console.log(typeof num2,num2);
num1 = Number(num1);
num2 = Number(num2);
console.log(typeof num1,num1);
console.log(typeof num2,num2);
</script>
3.undefined类型转数字:
undefined类型转成数字后为非法数字NaN
<script>
let num1 = undefined;
console.log(typeof num1,num1);
num1 = Number(num1);
console.log(typeof num1,num1);
</script>
4.null类型转成数字:
null类型转成数字后为0
<script>
let num1 =null;
console.log(typeof num1,num1);
num1 = Number(num1);
console.log(typeof num1,num1);
</script>
3.转成boolean:通过Boolean()
1.数字转boolean:
数字中除了0和NaN转成boolean为false,其他的都为true;
<script>
let num1 = 1;
let num2 = 0;
console.log(typeof num1,num1);
console.log(typeof num2,num2);
num1 = Boolean(num1);
num2 = Boolean(num2);
console.log(typeof num1,num1);
console.log(typeof num2,num2);
</script>
2.字符串转Boolean:
除了空字符串,剩下的都为true
<script>
let num1 = "";
let num2 = " ";
console.log(typeof num1,num1);
console.log(typeof num2,num2);
num1 = Boolean(num1);
num2 = Boolean(num2);
console.log(typeof num1,num1);
console.log(typeof num2,num2);
</script>
3.undefined和null转成boolean:
undefined和null转成boolean都为false
<script>
let num1 = undefined;
let num2 = null;
console.log(typeof num1,num1);
console.log(typeof num2,num2);
num1 = Boolean(num1);
num2 = Boolean(num2);
console.log(typeof num1,num1);
console.log(typeof num2,num2);
</script>
4.转undefined和null:直接用=赋值即可
11.运算符:
1.类型检验运算符:typeof
用来检验变量或值得类型
2.算数运算符:+ ,- ,*, /, %, ++, –
注意++/--得位置不同,其含义也不同(参考java中的规则)
let a = 1;
console.log(++a);
//先加再输出
let a = 1;
console.log(a++);
//先输出再加
3.关系运算符:>, < , >= ,<=
4.赋值运算符:= , += , -=, *= , /= , %=
5.比较运算符:== , !=, =(全等于) , !
6.逻辑运算符:&&(&) ,||(|) ,!
12.流程控制:
1.选择结构:
1.if选择:
1.if选择:
<script>
if(布尔表达式){
........
}
</script>
2.if-else选择:
<script>
if(布尔表达式){
........
}else{
........
}
</script>
3.if-else if-else选择:
<script>
if(布尔表达式1){
........
}else if(布尔表达式2){
........
}........{
}else{
.........
}
</script>
2.switch选择:注意使用break,防止执行穿透
switch(值/表达式){
case 值1:
.....
break;
case 值2:
.....
break;
..........
default:
........
}
let month = 10;
switch (month) {
default:
console.log("输入错误 ")
break;
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log("31天")
break;
case 4:
case 6:
case 9:
case 11:
console.log("30天");
break;
case 2:
console.log("28天");
break;
}
2.循环结构:
1.while循环:布尔表达式成立时执行循环体
while(布尔表达式){
...............
}
2.do-while循环:先执行后判断
do{
.......
}while(布尔表达式)
3.for循环:
for (let i = 0; i < 5; i++) {
.....
}
4.foreach:
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (element) {
console.log(element);
});
5.for -in:适用于遍历对象
for (const arrayKey in array) {
......
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
