目录
JavaScript简介
优点
可做的事情
运行
第一个JavaScript程序
搭建开发环境
安装的软件
操作
在浏览器中使用JavaScript文件
分离JS
使用node运行JS文件
语法
变量与常量
原生数据类型
模板字符串
字符串的内置方法
数组
对象
对象数组和JSON
if条件语句
三目运算符
switch条件语句
for和while循环
JavaScript简介
-
JavaScript 是一种轻量级的脚本语言。
-
脚本语言：不具备开发操作系统的能力，只用来编写控制其他大型应用程序的“脚本”。
-
JavaScript 是一种嵌入式（embedded）语言。核心语法不多
优点
-
操控浏览器的能力
-
广泛的使用领域
-
易学性
可做的事情
-
Web/移动端App
-
实时联网App
-
命令行工具
-
游戏
运行
-
浏览器：有JavaScript引擎
-
Node：包含谷歌浏览器、v8引擎的C++程序。使其可以在浏览器外面跑JavaScript程序。意味着可以用JavaScript程序给网页/移动端app做后端
第一个JavaScript程序
-
打开浏览器，Fn+F12
-
在控制台console中可以编写JavaScript
-
console.log();//打印
搭建开发环境
安装的软件
-
vscode
-
node.js（安装后一定要重启才会生效）
-
执行JavaScript代码
-
安装第三方库
-
操作
-
在vscode中安装插件：live server
-
右键文件，open with live server
-
打开电脑的默认浏览器
-
页面会自动刷新
-
在浏览器中使用JavaScript文件
-
在html文件中，将script标签放在body标签的末尾
-
浏览器解析文件是自上而下的，需要先将内容渲染出来
-
分离JS
-
将JS代码从html文件中剥离出去
-
创建一个js文件，将js语句写入文件中
-
在html文件中的script标签中引入js文件
<script src="index.js"></script>
使用node运行JS文件
-
在win+r的命令中输入node --version，判断是否安装好了
-
ctrl+`:快捷键打开vscode的终端
-
输入node 文件名.js：会在终端中输入js文件中的语句
-
像浏览器一样执行出同样的结果
-
node是用来运行JS的运行环境
-
语法
-
JS文档
JavaScript 指南 - JavaScript | MDN Web 中文网
变量与常量
-
变量
-
var：全局变量（最好不用）
-
let
-
-
常量
-
const
-
原生数据类型
-
String
-
Number
-
Boolean
-
null
-
一个值被定义为空
-
-
underfined
-
不存在被定义
-
//String Number Boolean null underfinedconst username="John";const year=2025;const rate=4.5;const isCool=true;const x=null;const y=undefined;let z;console.log(typeof username);//输出数据类型模板字符串
-
连接字符串
//连接(老方法)console.log("My name is "+username+" and I am "+age);//模板字符串console.log(`My name is ${username} and I am ${age}`);
字符串的内置方法
const s="Hello World";console.log(s.length);//字符串长度console.log(s.toUpperCase());//全部大写console.log(s.toLowerCase());//全部小写console.log(s.substring(0,5));//分割字符，起始和终止，左闭右开console.log(s.substring(0,5).toUpperCase());//方法结合console.log(s.split());//字符串转换成数组console.log(s.split(''));//最小分割const m='technology, computers,it, code';console.log(m.split(','));//逗号分割数组
//数组,两种申明方式const Number=new Array(1,2,3,4,5);const fruits=['apple','pear','banana'];console.log(Number);console.log(fruits[1]);//pearfruits[2]="orange";//const申明的数组可以被改变内部fruits.push("mango");//数组末尾增加元素用pushfruits.unshift('strawberries');//数组头部添加元素strawberriesconsole.log(fruits);fruits.pop(fruits);//删除数组末尾的元素console.log(fruits);console.log(Array.isArray(fruits));//判断是否是数组console.log(fruits.indexOf("orange"));//得到特定元素的索引对象
//对象：拥有属性和方法的数据，表示为键值对的组合//申明一个person变量，{}包含对象，键值对申明属性const person={firstName:"John",lastName:"Doe",age:30,hobbies:['music','movies','sports'],address:{street:"50 main st",city:"Boston",state:"MA",},};person.email="john@gmail.com";//增加属性console.log(person);console.log(person.firstName,person.lastName);//访问选中的属性//结构，更高级的操作//用同名的变量将值从person中抽取出来const {firstName,lastName,address:{city},}=person;console.log(city);对象数组和JSON
-
网站：freeformatter.com 将对象数组复制粘贴-formatted json-会给我们自动生成json格式的数据
[{id:1,text:"Take out trash",isCompleted:true,},{id:2,text:"Meeting with boss",isCompleted:true,},{id:3,text:"Dentist appt",isCompleted:false,},] -
//对象数组 const tools=[{id:1,text:"Take out trash",isCompleted:true,},{id:2,text:"Meeting with boss",isCompleted:true,},{id:3,text:"Dentist appt",isCompleted:false,}, ]; console.log(tools); console.log(tools[1].text); //Json是一种数据格式，常被用在api和服务器与客户端的数据传输过程中 //Json和对象数组类似 //将JS转化为json格式 const todoJSON=JSON.stringify(tools) console.log(todoJSON);
if条件语句
//if条件语句
//===三等号会考虑数据类型(更常用)
//==双等号不会考虑：10 '10'一样
//||或，&&与
const n=10;
const b=4;
if(n===10||b===4){console.log("n is 10 and b is 4");
}else if(n>10){console.log("n is greater than 10");
}else{console.log("n is less than 10");
}
if(n=='10'&&b==4){console.log("n is 10 and b is 4");
}三目运算符
//三目运算符(前为真 后为假。?:)
const c=10;
const color=x>10?'red':'blue';
console.log(color);switch条件语句
//switch语句，一种条件语句
switch(color){case 'red':console.log("color is red");break;case 'blue':console.log("color is blue");break;default:console.log("color is not red or blue");
}for和while循环
//Forfor(let i=0;i<10;i++){console.log(i);console.log(`For Loop Number:${i}`);}console.log("");for(let i=0;i<tools.length;i++){console.log(tools[i].text);}console.log("");//另一种for的写法for(let todo of tools){console.log(todo.text);}console.log("");//whilelet i=0;while(i<10){console.log(`For Loop Number:${i}`);i++;}
，Tab自动补全功能平替)
)