JavaScript核心构成与基础语法详解1
目录
1、js的构成
2、js结合方式
2.1、结合方式1,使用script标签
2.2、结合方式2:使用scr属性引入外部Js文件
2.3、总结
内嵌式:
外部引用式
3、js的基本语法
3.1、声明变量
3.2、注释
3.3、总结
4、js的数据类型
4.1 基本数据类型
4.2 引用数据类型
4.3 类型检测与转换
4.4 小结
4.4.1 原始数据小结
4.4.2 对象数据小结
5. 语句
5.1 条件语句
5.2 循环语句
5.3 跳转语句
6、运算符
6.1、算术运算符
6.2、赋值运算符
6.3、比较运算符
6.4、逻辑运算符
6.5、位运算符
6.6、条件运算符
6.7、类运算符
6.8、其他运算符
6.9、小结
运算符优先级
6.10、实战小任务1:运算符优先级验证工具
1、js的构成
- 核心(ECMAScript)
- 文档对象模型(DOM)Document object modemodel(整合is和html和css)
- 浏览器对象模型(BOM)Brower object model(整合is和浏览器)
- JavaScript在开发中绝大数情况是基于对象的,也是面向对象的
构成:
- ECMAScript:语言核心,定义语法、类型、语句等
- DOM(文档对象模型):提供与HTML文档交互的API
- BOM(浏览器对象模型):提供与浏览器交互的API
2、js结合方式
2.1、结合方式1,使用script标签
<!--结合方式1:在页面上使用script标签,在标签中书写js代码--><!--书写的内容是文本类型,属于js语言--><script type="text/javascript">alert("hello world!")</script>
2.2、结合方式2:使用scr属性引入外部Js文件
注意:在引入外部js的script标签中,不能再书写js代码
外部js文件hello.js
alert("haha");
html使用scr属性引入js文件
<!--结合方式2:使用scr属性,引入外部js文件--><script type="text/javascript" src="hello.js"> </script>
2.3、总结
内嵌式:
JavaScript代码直接写在HTML中
外部引用式
JavaScript代码写在js文件中
3、js的基本语法
3.1、声明变量
// 旧方式(不推荐)
var name = "John";// 现代方式(推荐)
let age = 25; // 可重新赋值
const PI = 3.14159; // 不可重新赋值// 变量命名规则:驼峰式,区分大小写
let myVariableName = "value";
3.2、注释
// 单行注释/*
多行注释
可以跨越多行
*//*** 文档注释* 用于生成文档* @param {string} name - 用户名* @returns {string} 问候语*/
function greet(name) {return `Hello, ${name}!`;
}
3.3、总结
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js的基本语法</title><script>//1、声明变量,变量类型是可以随时变化的var a=1;a=false;a="haha";//2、注释与java注释一模一样,单行注释//,多行注释/**/,但是没有文档注释//3、声明变量,一行可以声明多个变量var a=1,b=2;//4、js中每行语句结束使用“;”,也可以不使用,推荐都加是上var d="hello"/*5、声明变量时也可以不加var,var +变量=>作用范围在代码块中不加var声明=>作用范围为全局*/e="heihei"//6、字母大小写,语法区分大小写</script>
</head>
<body></body>
</html>
4、js的数据类型
4.1 基本数据类型
// 1. 字符串 (String)
let message = "Hello World";
let name = 'John Doe';
let template = `Hello, ${name}!`; // 模板字符串// 2. 数字 (Number)
let integer = 42;
let float = 3.14;
let scientific = 2.5e5; // 250000// 3. 布尔值 (Boolean)
let isActive = true;
let isCompleted = false;// 4. Undefined
let undefinedVar; // 值为undefined// 5. Null
let emptyValue = null;// 6. Symbol (ES6)
let sym = Symbol("description");// 7. BigInt (ES2020)
let bigNumber = 1234567890123456789012345678901234567890n;
4.2 引用数据类型
// 1. 对象 (Object)
let person = {name: "John",age: 30,isStudent: false
};// 2. 数组 (Array)
let colors = ["red", "green", "blue"];
let mixed = [1, "two", true, {name: "John"}];// 3. 函数 (Function)
function greet(name) {return `Hello, ${name}!`;
}// 4. 日期 (Date)
let today = new Date();// 5. 正则表达式 (RegExp)
let pattern = /hello/i;
4.3 类型检测与转换
// 类型检测
typeof "hello"; // "string"
typeof 42; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (历史遗留问题)
typeof {}; // "object"
typeof []; // "object"
typeof function() {}; // "function"// 类型转换
let num = Number("123"); // 123
let str = String(123); // "123"
let bool = Boolean(1); // true// 隐式转换
"5" + 2; // "52" (字符串拼接)
"5" - 2; // 3 (数学运算)
4.4 小结
4.4.1 原始数据小结
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js的数据类型</title><!--js弱是类型语言--><script type="text/javascript">//java中的变量分类//1基本数据类型=>8个//2引用数据类型//js中的变量分类//1原始数据类型//对象数据类型
//--------------------------------------------------------------//js的原始数据类型有5中//1 number 数字 不分整型或浮点型 对象数据类型的占位符//2 string 字符串//3 boolean 布尔//4 null 一般认为赋值为null//undefined 未被定义的,未初始化的 通常是系统自动赋值,当我们创建一个变量并未初始化系统会将该变量赋值为undefined null的衍生值
//-----------------------------------------------------------------//验证let a=1;let b=3.12;let c="name";let d=false;let e=null;let f=undefined;let g;//运算符 typeof=>返回原始数据类型alert(typeof a);alert(typeof b);alert(typeof c);alert(typeof d);alert(typeof e);alert(typeof f);alert(typeof g);</script>
</head>
<body></body>
</html>
4.4.2 对象数据小结
5. 语句
5.1 条件语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js中的语句</title><script type="text/javascript">//1、条件语句if elselet age=18;if(age>=18){console.log("成年人")}else if(age>=13){console.log("青年人")}else{console.log("儿童")}//2、三目运算符let status=age>=18?"成年人":"未成年人"//3、switchlet day=2;switch(day){case 1:console.log("星期一");break;case 2:console.log("星期二");break;default:console.log("其他日子")}</script>
</head>
<body></body>
</html>
5.2 循环语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js语句-循环语句.html</title><script type="text/javascript">// 1 for循环for(let i=0;i<5;i++){console.log(i);}// 2 whilelet i=0;while(i<5){console.log(i);i++;}//3 do-whilelet j=0;do{console.log(j);j++}while(j<5)//4 for...of循环(数字)let colors=["red","yellow","green"];for(let color of colors){console.log(colors)}//5 for...in循环(对象)let person={name:"Tom",age:18};for(let key in person){console.log(key+":"+person[key]);}</script>
</head>
<body></body>
</html>
5.3 跳转语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js语句-跳转语句.html</title><script type="text/javascript">//1 breakfor(let i=0;i<=10;i++){if(i==5){break;}console.log(i);//输出01234}//2 continuefor(let i=0;i<5;i++){if(i==2){continue;}console.log(i);//输出0134}//3 return在函数中使用function multiply(a,b){return a*b;}</script>
</head>
<body></body>
</html>
6、运算符
6.1、算术运算符
//基本算数运算
let a=10;
b=3;
console.log(a+b);//13加法
console.log(a-b);//7减法
console.log(a*b);//30乘法
console.log(a/b);//3.333除法
console.log(a%b);//1求余数
console.log(a**b);//1000指数运算,10的3次方//一元算术运算
let x=5;
console.log(+x);//5 一元加法,转换为数字
console.log(-x);//-5 一元减法(取负值)
console.log(++x);//6 前置递增
console.log(x++);//6 后置递增(返回后再增)
console.log(--x);//6 前置递减
console.log(x--);//6 后置递减(返回后再减)
6.2、赋值运算符
let num=10;
//简单赋值
num=5;//现在打印出的Num=5
console.log(num);
//符合赋值运算符
num+=3;//8 相当于num=num+3
console.log(num);
num-=3;//5
console.log(num);
num*=3;//15
console.log(num);
num/=3;//5
console.log(num);
num%=3;//2
console.log(num);
num**=3;//8
console.log(num);//解构运算符
let[c,d]=[1,2];//c=1,d=2
let {name,age}={bame:Tom,age:18};
6.3、比较运算符
let x=5;
let y="5"console.log(x==y);//true 只比较值
console.log(x===y);//false 严格比较(比较值和类型)
console.log(x!=y);//false
console.log(x!==y);//true
console.log(x>3);//true
console.log(x<3);//false
console.log(x>=5);//true//特殊比较
console.log(null==undefined);//true
console.log(null===undefined);//false
console.log(NaN==NaN);//false 特殊规则
console.log(NaN===NaN);//false
6.4、逻辑运算符
let a=true;
let b=false;//基本逻辑运算
console.log(a&&b);//false 逻辑与
console.log(a||b);//true 逻辑或
console.log(!a);//false 逻辑非//短路求值
let name="";A
let displayName=name||"匿名用户";//匿名用户
let value=null;
let result=value&&value.someProperty;//null 不会报错//空值合并运算符
let input=null;
let username=input??"默认用户";//可选链运算符
let user={profile:{name:"张三"}};
console.log(user?.profile?.name);//张三
console.log(user?.address?.city);//undefined(不会报错)
6.5、位运算符
let a=5;//二进制0101
let b=3;//二进制0011console.log(a&b);//1(0001)按位与
console.log(a|b);//7(0111)按位或
console.log(a^b);//6(0110)按位异或
console.log(~a);//-6按位非
console.log(a<<1);//10(1010)左移
console.log(a>>1);//2(0010)右移
console.log(a>>>1);//2(0010)无符号右移
6.6、条件运算符
let age=20;
let status=age>=18?"成年人":"未成年人";
console.log(status);//嵌套三元运算符
let score=85;
let grade=score>=90?"优秀":score>=80?"良好":score>=70?"中等":score>=60?"及格":"不及格";console.log(grade);
6.7、类运算符
console.log(typeof"hello")//string
console.log(typeof 42)//number
console.log(typeof true)//boolean
console.log(typeof undefined)//undefined
console.log(typeof null)//objiect
console.log(typeof {})//objext
console.log(typeof [])//object
console.log(typeof function(){})//function//instanceof运算符
console.log([] instanceof Array);//true
console.log({} instanceof Object);//true
console.log(new Date() instanceof Date);//true
6.8、其他运算符
//逗号运算符
let x=(1,2,3)//x的值为3
//void运算符
void console.log("这条消息会显示");//但表达式返回的是undefined
//in运算符
let car={make:"Royota",model:"Camry"
};
console.log("make"in car);//true
console.log("price"in car);//false
//delete运算符
let obj={a:1,b:2
};
delete obj.a;
console.log(obj);//{b:2}
6.9、小结
运算符优先级
从高到低排列:
()
分组.
[]
()
成员访问、函数调用new
(带参数)new Object()
++
--
后置递增/递减!
~
+
-
++
--
typeof
void
delete
一元运算符**
指数*
/
%
乘法、除法、取模+
-
加法、减法<<
>>
>>>
位移<
<=
>
>=
in
instanceof
关系==
!=
===
!==
相等&
按位与^
按位异或|
按位或&&
逻辑与||
逻辑或??
空值合并?:
条件(三元)=
+=
-=
*=
/=
%=
**=
<<=
>>=
>>>=
&=
^=
|=
&&=
||=
??=
赋值,
逗号
6.10、实战小任务1:运算符优先级验证工具
<!--文档类型声明,告诉浏览器这是一个HTML5文档-->
<!DOCTYPE html>
<!-- HTML文档的根元素,lang属性指定文档语言为中文 -->
<html lang="zh-CN">
<!-- 文档头部,包含元数据和引用的外部资源 -->
<head><!-- 字符编码声明,确保中文字符正确显示 --> <meta charset="UTF-8"><!-- 视口设置,使网页在不同设备上都能正确缩放 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题,显示在浏览器标签页上 --><title>运算符优先级验证器</title><style>/*内部css样式表开始*/body { /*设置页面主体样式*//*设置字体*/font-family: Arial, sans-serif;/*设置页面最宽度*/max-width: 800px;/*上下边距50px,左右居中*/margin: 50px auto;/*内边距*/padding: 20px;}/* 示例区块的样式 */.example {/*边框样式*/border: 1px solid #e482c7;/*内边距*/padding: 15px;/* 上下外边距10px,左右为0 */margin: 10px 0;/* 边框圆角 */border-radius: 5px;/*背景颜色*/background: #f186ca;}/*表达式文本的样式*/.expression {/*等宽字体,便于显示代码*/font-family: monospace;/*字体大小*/font-size: 18px;/*底部外边距*/margin-bottom: 10px;}/*结果文本样式*/.result {/*属性*/font-weight: bold;/*文字颜色*/color: #5f98d0;}/*解释文本样式*/.explanation {/*文字颜色*/color: #1a6f75;/*斜体*/font-style: italic;}/*按钮样式*/button {/*内边距*/padding: 10px 15px;/*背景颜色*/background: hsl(338, 71%, 51%);/*文字颜色*/color: white;/*无边框*/border: none;/*边框圆角*/border-radius: 3px;/*鼠标指正样式为手型*/cursor: pointer;/*外边距*/margin: 5px;}/*鼠标悬停时按钮样式*/button:hover {/*背景颜色变化*/background: #2980b9;}</style>
</head>
<!--文档主体内容开始-->
<body><h1>JavaScript运算符优先级验证器</h1><p>下面的示例展示了不同运算符的优先级如何影响表达式的结果:</p><div class="example"><div class="expression">5 + 3 * 2</div><div class="result" id="result1"></div><div class="explanation">乘法(*)优先级高于加法(+),所以先计算3*2=6,然后5+6=11</div></div><div class="example"><div class="expression">(5 + 3) * 2</div><div class="result" id="result2"></div><div class="explanation">括号改变优先级,先计算5+3=8,然后8*2=16</div></div><div class="example"><div class="expression">10 / 2 + 3 * 2</div><div class="result" id="result3"></div><div class="explanation">乘除优先级相同,从左到右计算:10/2=5,3*2=6,然后5+6=11</div></div><div class="example"><div class="expression">2 ** 3 * 2</div><div class="result" id="result4"></div><div class="explanation">指数(**)优先级高于乘法(*),所以先计算2**3=8,然后8*2=16</div></div><div class="example"><div class="expression">let x = 5; x += 3 * 2</div><div class="result" id="result5"></div><div class="explanation">乘法优先级高于赋值,所以先计算3*2=6,然后x+=6,x=11</div></div><div class="example"><div class="expression">true || false && false</div><div class="result" id="result6"></div><div class="explanation">逻辑与(&&)优先级高于逻辑或(||),所以先计算false&&false=false,然后true||false=true</div></div><div class="example"><div class="expression">(true || false) && false</div><div class="result" id="result7"></div><div class="explanation">括号改变优先级,先计算true||false=true,然后true&&false=false</div></div><div class="example"><div class="expression">typeof 5 + ' apples'</div><div class="result" id="result8"></div><div class="explanation">typeof优先级高于加法,所以先计算typeof 5='number',然后'number'+' apples'='number apples'</div></div><button onclick="runAllExamples()">运行所有示例</button><button onclick="clearAllResults()">清除结果</button><script>function runAllExamples() {// 示例1document.getElementById('result1').textContent = `结果: ${5 + 3 * 2}`;// 示例2document.getElementById('result2').textContent = `结果: ${(5 + 3) * 2}`;// 示例3document.getElementById('result3').textContent = `结果: ${10 / 2 + 3 * 2}`;// 示例4document.getElementById('result4').textContent = `结果: ${2 ** 3 * 2}`;// 示例5let x = 5;x += 3 * 2;document.getElementById('result5').textContent = `结果: x = ${x}`;// 示例6document.getElementById('result6').textContent = `结果: ${true || false && false}`;// 示例7document.getElementById('result7').textContent = `结果: ${(true || false) && false}`;// 示例8document.getElementById('result8').textContent = `结果: '${typeof 5 + ' apples'}'`;}function clearAllResults() {for (let i = 1; i <= 8; i++) {document.getElementById('result' + i).textContent = '';}}// 页面加载时自动运行示例window.onload = runAllExamples;</script>
</body>
</html>
实战任务2:表达式计算机
<!-- 文档类型声明,告诉浏览器这是一个HTML5文档 -->
<!DOCTYPE html>
<!-- HTML文档根元素,lang属性指定文档语言为中文 -->
<html lang="zh-CN">
<!-- 文档头部,包含元数据和引用的外部资源 -->
<head><!-- 字符编码声明,确保中文字符正确显示 --><meta charset="UTF-8"><!-- 视口设置,使网页在不同设备上都能正确缩放 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>高级表达式计算器</title><style>body {/* 设置字体 */font-family: Arial, sans-serif;/*页面最大宽度*/max-width: 600px;/*上下外边距,左右自动居中*/margin: 50px auto;/*内边距*/padding: 20px;}/*计算机容器的样式*/.calculator {/*边框样式*/border: 1px solid #ccc;/*设置内边距*/padding: 20px;/*边框圆角*/border-radius: 5px;/*阴影效果*/box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/*输入框样式*/input[type="text"] {/*宽度*/width: 100%;/*内边距*/padding: 10px;/*底部外边距*/margin-bottom: 10px;/*字体大小*/font-size: 18px;/*文本右对齐*/text-align: right;}/*按钮样式*/.buttons {/*使用网格布局*/display: grid;/*4列等宽网格*/grid-template-columns: repeat(4, 1fr);/*网格间隙*/gap: 10px;}/*按钮基本样式*/button {/*内部边距*/padding: 15px;/*字体大小*/font-size: 18px;/*边框样式*/border: 1px solid #ddd;/*边框圆角*/border-radius: 3px;/*背景颜色*/background: #f9f9f9;/*鼠标指针样式为手型*/cursor: pointer;}/*鼠标悬浮时按钮样式*/button:hover {/*背景颜色*/background: #eee;}/*操作符按钮的特殊样式*/.operator {/*背景颜色*/background: #f0ad4e;/*文字颜色*/color: white;}/*等号按钮的特殊样式*/.equals {/*背景颜色*/background: #5cb85c;/*文字颜色*/color: white;}/*清楚按钮的特殊样式*/.clear {/*背景颜色*/background: #d9534f;/*文字颜色*/color: white;}</style>
</head>
<body><!--计算机容器--><div class="calculator"><h2>高级表达式计算器</h2><!--显示输入和结果的文本框 只读效果--><input type="text" id="display" readonly><!--按钮容器--><div class="buttons"><!--数字7按钮 点击时调用appendToDisplay()函数--><button onclick="appendToDisplay('7')">7</button><button onclick="appendToDisplay('8')">8</button><button onclick="appendToDisplay('9')">9</button><button onclick="appendToDisplay('/')" class="operator">/</button><button onclick="appendToDisplay('4')">4</button><button onclick="appendToDisplay('5')">5</button><button onclick="appendToDisplay('6')">6</button><button onclick="appendToDisplay('*')" class="operator">*</button><button onclick="appendToDisplay('1')">1</button><button onclick="appendToDisplay('2')">2</button><button onclick="appendToDisplay('3')">3</button><button onclick="appendToDisplay('-')" class="operator">-</button><button onclick="appendToDisplay('0')">0</button><button onclick="appendToDisplay('.')">.</button><button onclick="clearDisplay()" class="clear">C</button><button onclick="appendToDisplay('+')" class="operator">+</button><button onclick="appendToDisplay('(')">(</button><button onclick="appendToDisplay(')')">)</button><button onclick="appendToDisplay('%')">%</button><button onclick="calculate()" class="equals">=</button></div><!--结果显示区域,内联样式设置上边距和字体粗细--><div id="result" style="margin-top: 20px; font-weight: bold;"></div></div><!--js代码开始--><script>//向显示框追加值的函数function appendToDisplay(value) {//获取显示框元素,并在当前值后追加传入值document.getElementById('display').value += value;}//清除显示框的函数function clearDisplay() {//将显示框的值设置为空字符串document.getElementById('display').value = '';//将结果区域的文本框设置为空字符document.getElementById('result').textContent = '';}//计算表达式的函数function calculate() {//尝试执行以下代码,捕捉可能得错误try {//获取显示框的表达式const expression = document.getElementById('display').value;// 安全地计算表达式//调用函数计算结果const result = evaluateExpression(expression);//在结果区域显示计算结果document.getElementById('result').textContent = `结果: ${result}`;//将结果显示在显示框中document.getElementById('display').value = result;} //捕捉错误catch (error) {//在结果区域显示错误信息document.getElementById('result').textContent = `错误: ${error.message}`;}}// 安全计算表达式(不使用eval)function evaluateExpression(expr) {// 移除空格//使用正则表达式移除所有空白字符expr = expr.replace(/\s/g, '');// 验证表达式//如果表达式无效 =>抛出错误if (!isValidExpression(expr)) {throw new Error('无效的表达式');}// 处理百分比expr = expr.replace(/(\d+)%/g, function(match, num) {return num / 100;});// 使用Function构造函数作为eval的安全替代方案try {return new Function('return ' + expr)();} catch (e) {throw new Error('计算错误');}}function isValidExpression(expr) {// 检查括号是否匹配let stack = [];for (let char of expr) {if (char === '(') {stack.push(char);} else if (char === ')') {if (stack.length === 0) return false;stack.pop();}}if (stack.length > 0) return false;// 检查是否有连续的操作符if (/[+\-*/]{2,}/.test(expr)) return false;// 检查表达式是否以操作符结尾(除了右括号)if (/[+\-*/]$/.test(expr)) return false;return true;}// 添加键盘支持//监听键盘按下事件document.addEventListener('keydown', function(event) {//如果按下的是数字键if (event.key >= '0' && event.key <= '9') {//将数字追加到显示框appendToDisplay(event.key);} //如果按下的是操作字符或其他支持的字符else if (['+', '-', '*', '/', '.', '(', ')', '%'].includes(event.key)) {//将字符追加到显示框appendToDisplay(event.key);}//如果按下的是回车或者等号 执行计算 else if (event.key === 'Enter' || event.key === '=') {calculate();//如果按下的c或者escape 则清楚显示框} else if (event.key === 'Escape' || event.key === 'c' || event.key === 'C') {clearDisplay();//如果按下的是Backspace=>获取显示框} else if (event.key === 'Backspace') {const display = document.getElementById('display');display.value = display.value.slice(0, -1);}});</script>
</body>
</html>