目录

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

模板字符串

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]);//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++;
 }