初识JavaScript道友，看我如何攻略它
一.什么是JavaScript？
JavaScript是一种轻量级、解释型或即时编译的编程语言，主要用于网页开发，它支持事件驱动、函数式和基于原型的编程风格。
！！JavaScript与CSS的区别：JavaScript和CSS一样，都需要有标签包裹起来。但是CSS是在头部标签head中的style标签中写其语句；JavaScript则是在身体标签body中的script标签中写其语句
二.JavaScript的三种引入方式：
1.行内式：直接在HTML标签内添加js脚本，一般用于监听事件（如果要修改时很不方便，非常不推荐，了解即可）
此方法的优缺点：
优点是简单直接，适合快速测试或小型项目；无需额外引入外部文件或编写独立的脚本标签
缺点是代码可读性和可维护性差，HTML与JavaScript混合；难以复用和调试；不符合现代前端开发中“关注点分离”的原则
！！小拓展：οnclick="javascript:alert('登录失败');" 是一个 HTML 事件处理属性，用于在用户点击某个元素时触发 JavaScript 代码。当用户点击绑定该属性的元素（如按钮、链接等）时，浏览器会弹出一个警告框，内容为“登录失败”（！括号内的内容是可以随意设置的），这是一种简单的用户反馈机制，通常用于提示操作失败或其他信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<script src="./1_my.js"></script>
<h1>阻塞任务完成后才会渲染我....</h1>
</body>
</html>
2.内嵌式：在HTML文档中任意位置内嵌js脚本，通过<script> </script> 标签嵌入 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<script>
document.write("你好，我是一名学生"); //document.write()向网页输出内容
document.write("你好，我是酹月");
</script>
<br>
<script>
document.write("你好，我是一名学生"); //document.write()向网页输出内容
// document.write("你好，我是酹月");
</script>
<br>
<script>
// document.write("你好，我是一名学生"); //document.write()向网页输出内容
document.write("你好，我是酹月");
</script>
</body>
</html>
！！注意 ！！
在演示图中显示，没有换行符的语句是无法自动换行的，因此需要我们使用到<br>换行符(但是<script>内是无法使用<br>换行符的，需要在<script>外部使用)
3.外链式：在HTML文档中任意位置，通过src属性链接外部js脚本(一般为 .js文件，并在此文件里写需要表达的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<script src="JavaScript.js"></script>
</body>
</html>js文件代码演示：
成品演示：
三.JavaScript的输出方式：
1.document.write()：直接在网页中输出其内容，但现代web前端开发中已经不推荐使用，因为它会在事件后覆盖整个页面的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<!-- 在现代Web前端开发中已经不推荐使用，因为它会覆盖整个页面的内容 -->
<script>
document.write("第一种：直接在网页页面中进行输出");
</script>
</body>
</html>2.alert()：通过浏览器弹出框进行输出其内容，但是会阻塞页面交互，通常用于简单提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<!-- 代码调试时，偶尔能用一下 -->
<script>
alert("第二种：通过浏览器弹出框进行输出");
</script>
</body>
</html>
3.console.log()：通过控制台进行输出，常用于代码的调试(控制台打开方式：浏览器页面右键打开检查，页面右边能看见控制台) !!!比较推荐此方法!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<!-- 主要用于代码的调试，比较推荐这种方法 -->
<script>
console.log("第三种：通过浏览器控制台进行输出！此方法最常用！");
</script>
</body>
</html>
四.JavaScript的变量和数据类型：
1.什么是变量：变量可以理解为装数据的盒子，我们可以对盒子里的数据进行存储、读取、修改、替换操作
2.变量的命名规范：！只能由字母、数字、下划线 _组成；不能以数字开头，不能使用JS关键字（如let、var、function等）；严格区分大小写，name 和 Name 是两个不同变量 ！
3.五大数据类型：
（1）String 字符串：被单引号/双引号包裹的所有内容，文字、符号、数字文本均为字符串，无字符类型，所有文本统一为string 类型
（2）Number 数字：JS中不区分整数、小数、科学计数法，所有数值统一为Number类型，包含正数、负数、0、小数、科学计数法数值
（3）Boolean 布尔值：仅有两个值 true（真）、false（假），专门用于条件判断、逻辑判断，是分支、循环语句的核心
（4）Undefined 未定义：变量只声明、未赋值时的默认值，代表变量存在但无任何数据
（5）Null 空值：开发者手动赋值的空值，代表主动清空数据、占位空对象，用于释放变量内存
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS的变量和数据类型</title>
</head>
<body>
<script>
//字符串 string
var str="Good morning!";
console.log(str + " -> 数据类型："+ typeof str );
//双引号包含带单引号的字符串 string
var str2="This is 'Tom'";
console.log(str2 + " -> 数据类型："+ typeof str2 );
//单引号包含带双引号的字符串 string
var str3='This is "Tom"';
console.log(str3 + " -> 数据类型："+ typeof str3 + "<br>");
// 数字 number 有小数点
var x1=65.30;
console.log(x1 + " -> 数据类型："+ typeof x1 + "<br>");
// 数字 number 整数
var x2=65;
console.log(x2 + " -> 数据类型："+ typeof x2 + "<br>");
// 数字 number e3 → 即*10的三次方
var y=117e3;
console.log(y + " -> 数据类型："+ typeof y + "<br>");
// 数字 number e-3 → 即*10的负三次方
var z=117e-3;
console.log(z + " -> 数据类型："+ typeof z + "<br>");
// 布尔值 boolean
var x=true;
console.log(x + " -> 数据类型："+ typeof x + "<br>");
// 对象 object （对象类型下的数组，注意：没有独立的数组类型）
var persons=new Array("Tom","Jack","Kate");
console.log(persons + " -> 数据类型："+ typeof persons + "<br>");
// 未定义类型 undefined
var person1;
console.log(person1 + " -> 数据类型："+ typeof person1 + "<br>");
// 特殊情况：尽管 null 是一个表示空值的特殊关键字，但 typeof null 会返回 "object"。
// 这是一个著名的 JavaScript 特性，虽然有些令人困惑，但已经存在了很长时间（知道一下就行，不必理会）
var person2=null;
console.log(person2 + " -> 数据类型："+ typeof person2 + "<br>");
</script>
</body>
</html>
五.JavaScript的运算符：
1.加减乘除等的算数运算符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的运算符</title>
</head>
<body>
<!-- 加减乘除运算符 -->
<script>
console.log(100 + 100); // 200
console.log(100 - 50); // 50
console.log(100 * 2); // 50
console.log(100 / 5); // 20
</script>
</body>
</html>
2.取余运算符：计算除法中无法被整除的余数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的运算符</title>
</head>
<body>
<!-- 取余运算符 -->
<script>
console.log(13 % 2); // 1
console.log(10 % 4); // 2
</script>
</body>
</html>
3.自增自减运算符：专门用于变量自身+1、-1，分为前置、后置两种写法，执行顺序完全不同
（++ / --）放在变量之前，会先进行自增/自减操作，再返回变量操作后的值
（++ / --）放在变量之后，会先返回变量操作前的值，再进行自增/自减操作
前置先递增/递减，再返回变量操作后的值；后置先返回变量原值，再递增/递减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的运算符</title>
</head>
<body>
<!-- 自增自减运算符 -->
<script>
var a = 1;
var b = 1;
// 放在变量前 先递增/递减，再返回变量操作后的值
console.log(++a); // 2
console.log(--b); // 0
</script>
<script>
var x = 1;
var y = 1;
// 放在变量后 先返回变量原值，再递增
console.log(x++); // 1 即返回： x
console.log(x); // 2
// 放在变量后 先返回变量原值，再递减
console.log(y--); // 1 即返回： y
console.log(y); // 0
</script>
</body>
</html>
！！注意口诀：后置先用后加，前置先加后用
4.算数赋值结合运算符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的运算符</title>
</head>
<body>
<!-- 算术赋值结合运算符 -->
<script>
// 等同于 x = x + y
var x = 2;
var y = 1;
console.log(x += y); //3
// 等同于 x = x - y
var x = 2;
var y = 1;
console.log(x -= y); //1
// 等同于 x = x * y
var x = 2;
var y = 1;
console.log(x *= y); //2
// 等同于 x = x / y
var x = 2;
var y = 1;
console.log(x /= y); //2
// 等同于 x = x % y
var x = 2;
var y = 1;
console.log(x %= y); //0
</script>
</body>
</html>
5.比较运算符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的运算符</title>
</head>
<body>
<!-- 比较运算符 -->
// == 宽松判定，若比较变量数据类型不同则会先进行类型转换再比较
// === 严格判定，不允许不同数据类型相比较
<script>
var num1 = 10 ;
var num2 = 10 ;
var num3 = "10";
console.log(num1 == num2); // true
console.log(num1 === num2); // true
console.log(num1 == num3); // 返回true，因为宽松判定优先转换数据类型
console.log(num1 === num3); // 返回false，严格判定不允许不同数据类型比较
</script>
</body>
</html>
6.取反运算符：取相反的布尔值，若原本应输出为true的则输出为false，若原本应输出为false的则输出为true（!!数字或字符串在JavaScript中会被判定为true，但是数字0，空字符串，null以及undefined则为false）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的运算符</title>
</head>
<body>
<!-- 取反运算符 -->
<script>
console.log(!0); // true 数字0在布尔上下文中被视为false
console.log(!""); // true 空字符串在布尔上下文中被视为false
console.log(!null); // true null在布尔上下文中也被视为false
console.log(!undefined); // true undefined在布尔上下文中被视为false
console.log(!888); // false
console.log(!'you are my baby'); // false
</script>
</body>
</html>
7.且或运算符：
且运算符(&&)中参与运算的项要全为真的才为真，即true，否则为false
或运算符(||)中参与运算的项只要有一个为真的就为真，即true，否则为false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的运算符</title>
</head>
<body>
<!-- 且运算符（&&），参与“且运算”的项全部为真即返回真，否则返回假 -->
<script>
console.log(10 < 20 && 10 > 5); // true
console.log(10 < 20 && 10 > 5); // true
</script>
<!-- 或运算符（||），参与“或运算”的项有一个为真即返回真，否则返回假 -->
<script>
console.log(10 < 20 || 10 > 5); // true
console.log(10 > 20 || 10 > 5); // true
console.log(10 > 20 || 10 < 5); // false
</script>
</body>
</html>
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)