05--JavaScript基础语法(1)
一.初始JavaScript
1.JavaScript 是什么
应用
2.JavaScript的历史
Javascript诞生记 - 阮一峰的网络日志
3.JavaScript 和 HTML 和 CSS 之间的关系
如果只有HTML和CSS,那么就是静态网页,结构和数据都不会发生变化,而有了JS后,网页就可以动起来了
4.JavaScript 运行过程
JS引擎逐行读取JS代码,然后解析为二进制指令再执行
5.Javascript的组成
(这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js 的 API,就不太需要关注 DOM 和 BOM)
二.前置知识
1.第一个程序
<!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标签中 --><script>alert("第一个JS程序")</script><!-- 行内式 直接嵌入到html元素内部 --><input type="button" value="button" onclick="alert('我被点击')"><!-- 外部式 写入单独的js文件中 --><script src="demo1.js"></script><!-- 注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行). 适合代码多的情况. -->
</body>
</html>
2.JavaScript书写形式
行内式
直接嵌入到html文件元素内部
内嵌式
写入到script标签中
外部式
写在单独的JS文件中
注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行). 适合代码多的情况.
3.注释
4.输入输出
<!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>prompt("请输入你的姓名:")alert("弹出一个弹窗")console.log("输出一串字符")</script>
</body>
</html>输入prompt
弹出一个输入对话框
输出alert
弹出一个警示对话框,输出结果
输出 console.log
在控制台打印一个任务(供开发者查看)
三.语法概览
1.变量的使用
基本用法
创建变量(变量定义/变量声明/变量初始化)
varname='zhangsan';
varage=20;使用变量
console.log(age); // 读取变量内容
age=30; // 修改变量内容实例
<!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>prompt("请输入你的姓名:")alert("弹出一个弹窗")console.log("输出一串字符")</script> --><script>var name=prompt("输入姓名:");var age=prompt("输入年龄:");var gender=prompt("输入性别:");var score=prompt("输入成绩:");alert("姓名:"+name+"\n"+"年龄:"+age+"\n"+"性别:"+gender+"\n"+"成绩:"+score);</script>
</body>
</html>
"+"字符串拼接,也就是将两个字符串首尾相连
"\n"换行符
2.理解动态类型
<script>// 数字类型var a=10;console.log(a);// 字符串类型a="Hello World";console.log(a);</script>
3.基本数据类型
JS中内置的几种类型
number数字类型
数字进制表示
vara=07; // 八进制整数, 以 0 开头
varb=0xa; // 十六进制整数, 以 0x 开头
varc=0b10; // 二进制整数, 以 0b 开头特殊的数字类型
varmax=Number.MAX_VALUE;// 得到 Infinity
console.log(max*2);
// 得到 -Infinity
console.log(-max*2);
// 得到 NaN
console.log('hehe'-10);注意:
console.log(isNaN(10)); // false
console.log(isNaN('hehe' - 10)); // truestring字符串类型
基本规则
字符串字面值需要使用引号引起来, 单引号双引号均可
var a = "haha";
var b = 'hehe';
var c = hehe; // 运行出错如果字符串本身就有引号怎么办
var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引
号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号转义字符
一些字符无法直接输入,就可以通过转义字符来输入
求长度
使用 String 的 length 属性即可
var a = 'hehe';
console.log(a.length); //结果为4
var b = '哈哈';
console.log(b.length); //结果为2
单位为字符的数量
字符串拼接
使用" + " 进行字符串拼接
var a = "my name is ";
var b = "zhangsan";
console.log(a + b);//数字和字符串也能进行拼接
var c = "my score is ";
var d = 100;
console.log(c + d);//要认准是字符串和数字(隐式类型转化)进行拼接还是两个数字进行相加
console.log(100 + 100); // 200
console.log('100' + 100); // 100100boolen布尔类型
表示真和假
参与运算时看为1和0,1为真,0为假
console.log(true + 1); //2
console.log(false + 1) //1实际上我们并不会这样写,这里只是做个演示
undefined未定义类型
如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型
<script>var a;console.log(a);console.log(a+10);console.log(a+"10");</script>
这里就能看到未定义类型
未定义类型+数字结果不是数字
未定义类型+字符串类型就是字符串进行拼接
null空值类型
null表示当前的变量是一个空值
var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10
4.运算符
算数运算符
+（加）-（减）*（乘）/（除）%（取模）
++ 自增 --自减 分前缀和后缀
- 一元负号
赋值运算符
基础赋值=（赋值）。
复合赋值：结合算术/位运算，如 +=、-=、*=、/=、%=、<<=、>>= 等。
比较运算符
相等性检查
==（非严格相等，允许类型转换）、===（严格相等，类型和值均需相同）。
!=（非严格不等）、!==（严格不等）。
大小比较：>、<、>=、<=。
特殊比较：in（检查属性是否存在对象中）、instanceof（检查对象是否为某构造函数的实例）。
逻辑运算符
逻辑与/或/非：&&（与）、||（或）、!（非）
短路特性：&& 和 || 会返回第一个满足条件的值（非布尔值时）
0 || "hello" 返回 "hello"
位运算符
操作数的二进制形式
&（按位与）、|（按位或）、^（按位异或）、~（按位非）。
移位操作：<<（左移）、>>（带符号右移）、>>>（无符号右移）。
条件(三元)运算符
条件 ? 表达式1 : 表达式2
特殊运算符
类型检查：typeof（返回数据类型字符串，如 "number"）、delete（删除对象属性）
空值处理：??（空值合并运算符，仅在左侧为 null 或 undefined 时使用右侧值）。
示例：a ?? b 当 a 为 null 或 undefined 时返回 b。
可选链：?.（安全访问对象属性，避免因属性不存在而报错）。
示例：obj?.prop?.subProp 不会因 obj 或 prop 不存在而抛出错误。
逗号运算符：,（依次执行表达式，返回最后一个表达式的值）。
其他运算符
字符串连接：+（当操作数为字符串时）。
void：void(expression) 执行表达式但返回 undefined。
分组：()（改变运算优先级）。