JavaScript——前端基础3
目录
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 underfined
const 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]);//pear
fruits[2]="orange";//const申明的数组可以被改变内部
fruits.push("mango");//数组末尾增加元素用push
fruits.unshift('strawberries');//数组头部添加元素strawberries
console.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循环
//For
for(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("");
//while
let i=0;
while(i<10){
console.log(`For Loop Number:${i}`);
i++;
}