JavaScript——前端基础3

目录

JavaScript简介

优点

可做的事情

运行

第一个JavaScript程序

搭建开发环境

安装的软件

操作

在浏览器中使用JavaScript文件

分离JS

使用node运行JS文件

语法

变量与常量

原生数据类型

模板字符串

字符串的内置方法

数组

对象

对象数组和JSON

if条件语句

三目运算符

switch条件语句

for和while循环

---

 

JavaScript简介

1. JavaScript 是一种轻量级的脚本语言。

2. 脚本语言：不具备开发操作系统的能力，只用来编写控制其他大型应用程序的“脚本”。

3. JavaScript 是一种嵌入式（embedded）语言。核心语法不多

优点

• 操控浏览器的能力

• 广泛的使用领域

• 易学性

可做的事情

• Web/移动端App

• 实时联网App

• 命令行工具

• 游戏

运行

• 浏览器：有JavaScript引擎

• Node：包含谷歌浏览器、v8引擎的C++程序。使其可以在浏览器外面跑JavaScript程序。意味着可以用JavaScript程序给网页/移动端app做后端

第一个JavaScript程序

1. 打开浏览器，Fn+F12

2. 在控制台console中可以编写JavaScript

3. console.log();//打印

搭建开发环境

安装的软件

• vscode

• node.js（安装后一定要重启才会生效）

  1. 执行JavaScript代码

  2. 安装第三方库

操作

• 在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 中文网

变量与常量

1. 变量

   • var：全局变量（最好不用）

   • let

2. 常量

   • const

原生数据类型

1. String

2. Number

3. Boolean

4. null

   • 一个值被定义为空

5. 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);//输出数据类型

模板字符串

1. 连接字符串

    //连接(老方法)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="[e-mail]";//增加属性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++;}