Fork me on GitHub

JavaScript快速入门不废话

3-搭建开发环境_哔哩哔哩_bilibili

最后更新：2023/11/09/01:15:31

第一章、Javascript入门准备

1、工具：

1、浏览器的F12 Console

2、VSCode 的Live Server 轻量级web服务器插件，可用于服务web APP。

3、Live perviews 插件可用于实时预览。

2、文件介绍：

index.html 用于前端HTML代码文件。

index.js 用于剥离HTML代码文件中的JavaScript代码。

javascript 可以插在head 后面也可以插在body中间。好的操作是建议插在每一个标签的末端。1、因为浏览器解析是自上向下，先加载内容后解析Script有比较高的用户体验。2、script代码有与页面控件交互的必要。3、特殊情况的第三方库可能要求在head标签末尾用，但是自己编写建议写在body 标签末尾。

3、更进一步学习

查看JavaScript 文档。

第二章、初识JavaScript

console.log('在Console中打印');

alert('弹出警告提示');

javascript 代码是内嵌于html代码的，用JS标签 <script> </script> 表示。JavaScript关心的是页面的行为，HTML代码关心的是页面的内容。

<body>
    <script>
        /*编写在console的代码语句*/
    </script>
</body>

但是我们不希望html代码太过冗长，因此建议把JavaScript代码从html中剥离出来。因此有index.js文件，内容是将HTML文件中的所有JavaScript代码剪切过来，并且贴上代码文件来源。

<body>
    <script src="index.js"> /*表明js代码来源于index.js文件*/

    </script>
</body>

JS 可不使用;结尾也不会报错，但是建议加上。

1. 变量

var、let、const

1.1. var全局变量

JavaScript诞生之初就有了，现在少用，因为容易有全局冲突。

1.2. let可修改变量

ES6新加入的变量，可不在声明时改变变量。

let age = 30;
age = 40;

1.3. const不可修改变量

ES6新加入的变量，是常量，不能被改变，只能在声明时就初始化数值。但是当声明的是数组或对象时，内部的元素是可以被改变，只是不能将整个数组或者变量完全更改。

2. 数据类型

string、number、boolean、null、undefined

声明时不需要写数据类型就可以直接赋值，类型是由赋值的数据提供。

2.1. string

字符串类型，用“”或‘’表示。{}

const username = "John";

链接字符串与模板字符串：

console.log("My name is" + username + "and i am" + age + "years old");
console.log(`My name is ${username} and i am ${age} years old`);/*模板字符串*/
const hello = `My name is ${username} and i am ${age} years old`;
console.log(hello);

字符串内置属性和方法：

属性：

length 获取字符串长度。

const string = "helloworld";
console.log(string.length);

方法：

toUpperCase() 全部大写。

toLowerCase() 全部小写。

substring( 起始索引 , 终止索引 ) 获取子字符串，获取第一个索引至第二个索引的前一个位置。

split(“分割的字符”) 分割字符串为数组。

console.log(string.split(","));

方法可以连续调用，如：

const string = "helloworld";
console.log(string.substring(0,5).toUpperCase());

2.2. number

在JS中无浮点型或者整型概念，统称为number类型。

const age = 30;
const x = null

2.3. boolean

const isMale = true;

2.4. null

表示内容为空，和undefined要区分。

const x = null;

2.5. undefined

表示内容没被定义过，和null要区分。

const y = undefined;/*显式声明undefined*/
let z;/*隐藏式声明undefined*/

查看一个量的数据类型可用console.log(typeof username)

console.log(typeof x) 会输出Object，因为javascript的第一个实现中，javascript的值被表示为一个类型标记和一个值，对象的类型被标记为0，null 表示null 指针，在大多数平台中为0x00，因此null的类型标记为0，因此返回值类型为object。是js的一个小错误。

2.6. 数组

数组可以包含很多不同类型。

创建数组

const number = new Array();

const fruits = ["apple","orange","pear",10,true];/*2、直接声明创建数组。*/

赋值与引用

const 声明的数组是不能改变其指向的数组，但是成员可以改变，因此不能对整个数组重新赋值，但是可以对其元素重新赋值。

fruits[3] = "grapes";
console.log(fruits[1]);

方法：

push() 在数组末尾添加元素。

unshift() 在数组头部添加元素。

pop() 删除数组末尾元素。

indexOf(元素) 得到特定元素的索引号。

Array.isArray(变量名) 判断该变量是不是数组。

第三章、对象

对象是拥有属性和方法的数据

/*对象*/
const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    hobbies:["music", "movies", "sports"],
    address:{
        street: "50 main st",
        city: "Boston",
        state: "AM"
    },
}

/*解包对象*/
const{
    firstName,
    lastName,
    address: { city },
} = person;

console.log(city);

/*添加新属性*/
person.email = "jone@gmail.com";
console.log(person);

第四章、对象数组和JSON

1. 对象数组

/*对象数组*/
const todos = [
    {
        id: 1,
        text: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        text: "Meeting with boss",
        isCompleted: true,
    },
    {
        id: 3,
        text: "Dentist appt",
        isCompleted: true,
    }
];

2. JSON

JSON是一种数据格式，常用于API服务器与客户端传输的一种格式。JSON 和对象数组非常类似。

但是每个属性的key都会被打上双引号。把JS数组转变为JSON格式 - FreeFormatter.com

JASON的特性就是古板，要精确到每一个标点符号，也不能多打一个，。

Javascript 转换为JSON字符串

JSON.stringify(对象数组)

/*对象数组*/
const todos = [
    {
        id: 1,
        text: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        text: "Meeting with boss",
        isCompleted: true,
    },
    {
        id: 3,
        text: "Dentist appt",
        isCompleted: true,
    }
];


/*Javascript 转换为JSON*/
const todoJSON = JSON.stringify(todos);
console.log(todoJSON);

第五章、条件语句

1. if 语句

大部分同C，但是分不判断类型的==、判断类型的===

/*条件语句*/
/*双等号，不判断数据类型；三等号，判断数据类型，等号两边数据类型不同则为false*/
const x = "10";
if (x === "10"){
    console.log("x is \"10\" not a number 10");
} else if (x == 10){
    console.log("x is 10");
} else if (x > 5){
    console.log("x is more then 5");
} else {
    console.log("重新输入");
}

2. 三目运算符

x > 10 ? "red" : "blue" 同C。

3. switch语句

同C

switch(color){
    case "red":
        console.log("color is red");
        break;
    case "blue":
        console.log("color is blue");
        break;
    default:
    console.log("no found color");
}

第六章、循环语句

1. for语句

同C

for (let i = 0; i <= 10; i ++){
    console.log(i);
}

C拓展同foreach，C++的是: Python 是in

for (let todo of todos){
    console.log(todo.text);/*循环打印数组todos内容*/
}

2. while语句

同C

posted @ 2023-11-09 09:35  赤诚Xie  阅读(3)  评论(0)  编辑  收藏  举报