基本介绍
- JavaScript 是一种客户端脚本语言。运行在客户端浏览器中,每一个浏览器都具备解析 JavaScript 的引擎。
- 脚本语言:不需要编译,就可以被浏览器直接解析执行了。
- 核心功能就是增强用户和 HTML 页面的交互过程,让页面有一些动态效果。以此来增强用户的体验!
安装过程
安装node.js (js---运行环境)
Js天生就可以在浏览器运行环境,在浏览器运行之前,比如需要调试,或者后端进行执行需要node.js ; 安装完成后cmd: node -v #查看版本 ; nmp -v #显示nmp管理包信息
安装VSCode,安装插件,设置中文
JS和HTML部分基础整合
js引用方法
内部引用:<script></script>
<body>
<button id="btn">点击按钮</button>
<script>
//js内部方式引用
//document js对象 getElementById定位对象.事件
//使用函数来响应事件
document.getElementById("btn").onclick=function()
{
alert("弹出提示效果")
}
</script>
</body>
1. 在按钮标签标签下面编写一个<script>标签。
2. 在<script>标签中编写代码。
外部引用:<script src=文件路径></script>
1.先创建一个js文件
// jwjs.js
document.getElementById("btn2").onclick=function()
{
alert("点我咋滴~~?")
}
2.编写<script src="引用此文件即可"></script>
<body>
<button id="btn2">点我呀</button>
<script src="jwjs.js">
</script>
</body>
注释 // 单行注释 /*多行注释*/
部分基本语法
js和用户交互--输入与输出
- 输入框 prompt(“提示内容”);
- 弹出警告框 alert(“提示内容”);
- 控制台输出 console.log(“显示内容”);
- 页面内容输出 document.write(“显示内容”);
定义常量变量
JavaScript 属于弱类型的语言,定义变量时不区分具体的数据类型。
局部变量 let 变量名 = 值; 在同一个 {} 中引用
定义全局变量 变量的名字=值;
定义常量 const 常量名 = 值;
数据类型
typeof 用于判断变量的数据类型;
// let age=18.02;
// document.write(typeof(age));//number数据类型~ 小数整数算number
// let age;
// document.write(typeof(age));// 只有赋值后才算定义 undefined
let age=null;
document.write(typeof(age));// 空 认为空对象 object
运算符
let age=(7>6)?10:8;
document.write(age);
// 输出10
分支控制
支持 if(条件) 如果{} else 否则{} else if(条件)如果{}
<script>
//if语句
let month = 7;
if(month >= 3 && month <= 5) {
document.write("春季");
}else if(month >= 6 && month <= 8) {
document.write("夏季");
}else if(month >= 9 && month <= 11) {
document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
document.write("冬季");
}else {
document.write("月份有误");
}
document.write("<br>");
</script>
Js支持switch分支
<script>
let month =9;
//switch语句
switch(month){
case 3:
case 4:
case 5:
document.write("春季");
break;
case 6:
case 7:
case 8:
document.write("夏季");
break;
case 9:
case 10:
case 11:
document.write("秋季");
break;
case 12:
case 1:
case 2:
document.write("冬季");
break;
default:
document.write("月份有误");
break;
}
document.write("<br>");
</script>
循环控制
For循环
for(初始化变量1;条件2;执行循环体后的操作4)
{循环体3
}
for(let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
while 循环
while(条件){循环体}
let n = 6;
while(n <= 10) {
document.write(n + "<br>");
n++;
}
数组
数组的使用和 java 中的数组基本一致,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制。
定义格式
let 数组名字=[放多个元素];
…可变数据组合
let jwarr=[10,20,30];
//1复制数组
let jwarr2=[...jwarr];
for(let i = 0; i < jwarr2.length; i++) {
document.write(jwarr2[i] + "<br>");
}
document.write("==============<br>");
//2合并数组
let arr3=[40,50,60];
let arr4=[...jwarr,...arr3];
for(let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + "<br>");
}
document.write("==============<br>");
//3字符串转为数组
let arr5=[..."zhangsan"];
for(let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + "<br>");
}
函数
function 方法名(参数列表)
{ 方法体;
return num1+num2;
}
可变函数 ...参数前面
//定义加法功能(可变参数 作用接受不同数量的实参,将实参当作数组处理)
function jwadd(...jwnum)
{ let sum=0;
for(let i=0;i<jwnum.length;i++) // 注意数组不要超出范围
{ //js 超出索引的值 Nan空
// 10+Nan=Nan
sum += jwnum[i]; // sum=sum+jwnum[i]
}
return sum;
}
//调用
let result=jwadd(10,20);
document.write("结果是"+result);
let result2=jwadd(10,20,30);
document.write("结果是"+result2);
匿名函数
let result=jwadd(10,20);
document.write("结果是"+result);
let result2=jwadd(10,20,30);
document.write("结果是"+result2);
//匿名函数 必须有个指向
let jwadd=function (...jwnum)
{ let sum=0;
for(let i=0;i<jwnum.length;i++) // 注意数组不要超出范围
{ //js 超出索引的值 Nan空
// 10+Nan=Nan
sum += jwnum[i]; // sum=sum+jwnum[i]
}
return sum;
}
//调用
let result=jwadd(10,20);
document.write("结果是"+result);
let result2=jwadd(10,20,30);
document.write("结果是"+result2);