JavaScript快速入门

Posted on | In | | Visitors:
Words count in article: 1.5k

JavaScript快速入门

HTML中使用JavaScript

方式1

在HTML代码中直接使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>JS Crash Course</h1>
    </header>
    <!-- 一般在body的最后写javascript代码，因为希望html页面和css样式加载好后再执行JavaScript代码 -->
    <script>
        alert('Hello World!')
    </script>
</body>
</html>

方式2

调用单独的js文件，可以在和html文件同级目录下新建一个.js文件，然后在html文件中调用即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>JS Crash Course</h1>
    </header>
    <!-- 一般在body的最后写javascript代码，因为希望html页面和css样式加载好后再执行JavaScript代码 -->
    <!-- 调用js代码 -->
    <script src="main.js"></script>
</body>
</html>

js代码：

1
alert('Hello World!')

方式一和方式二输出结果都是一样的，出现一个Hello World的弹窗。

JavaScript console对象

Console 对象用于 JavaScript 调试。常见的两个用途

  • 显示网页代码运行时的错误信息
  • 提供了一个命令行接口，用来与网页代码互动。

Console窗口可以在浏览器的开发者选项中找到

方法 描述
assert() ssert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。
clear() 清除当前控制台的所有输出，将光标回置到第一行。
count() 用于计数，输出它被调用了多少次。
error() 输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。
group() 用于将显示的信息分组，可以把信息进行折叠和展开。
groupCollapsed() 与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。
groupEnd() 结束内联分组
info() console.log 别名，输出信息
log() 输出信息
table() 将复合类型的数据转为表格显示。
time() 计时开始
timeEnd() 计时结束
trace() 追踪函数的调用过程
warn() 输出警告信息

JS代码：

1
2
3
console.log('Hello World')
console.warn('This is a warn')
console.error('This is an error')

实现效果：

变量定义

常用有三种变量定义方式：var,let,const，而var是全局定义，有时会造成不必要的麻烦，所以一般使用let和const

let用于定义变量，const用与定义常量（值不能进行修改）

1
2
3
let score;
score = 10;
console.log(score);

然后就能在console中输出10

数据类型

主要的数据类型有：string, numbers, boolean, null, undefined，symbol（symbol在ES6中提出，在此没有介绍）

可以看下面一个简单的例子轻松了解（js代码）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// string, numbers, boolean, null, undefined

const name = 'John';    //String
const age = 30;         //Numbers
const rating = 0.8;     //Numbers
const isCool = true;    //Boolean
const x = null;         //null
const y = undefined;    //undefined
let z;                  //undefined

console.log(typeof name)
console.log(typeof age)
console.log(typeof rating)
console.log(typeof isCool)
console.log(typeof x)
console.log(typeof y)
console.log(typeof z)

console输出结果：

关于字符串的一些更多的说明

由于经常会涉及一些字符串的一些操作，所以简单介绍以下，看下面代码就能很快理解一些方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//字符串的使用

const name = 'John';    //String
const age = 30;         //Numbers

//字符串拼接
console.log('My name is ' + name + ' and my age is ' + age);
//模板字符串
console.log(`My name is ${name} and my age is ${age}`)

//获取字符串的长度
console.log(name.length)
//大写
console.log(name.toUpperCase())
//小写
console.log(name.toLowerCase())
//获取字串,参数填写始末位置
console.log(name.substring(0,2))
//分割字符串,参数填写要以什么字符作为为分割依据
//这里没有填写任何字符，所以会将原字符串分割为单个的字符
console.log(name.split(''))

输出结果

数组

JS的数组使用起来非常方便，而且其数组不要求数组元素的数据类型相同（这在许多其他编程语言中都是不允许的）

可以参考以下代码快速了解JS数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//数组

//数组的两种定义方式，一般用第二种
//JS的数组不要求同一数组的数据类型相同，可参考第二个数组的定义
const numbers = new Array(1,2,3,4,5);
const fruits = ['apples', 'oranges', 'pears', 1, true];

//在末尾添加元素的两种方法
//（const定义的数组是可以添加元素的，只是不能重新定义）
fruits[5] = 'grapes';
fruits.push('grapes');

//往数组头添加元素
fruits.unshift('strawberries');

//获取元素下标
console.log(fruits.indexOf('apples'));

//判断是否为数组
console.log(Array.isArray(fruits));

//打印数组
console.log(fruits);

输出结果：

对象

JS对象其实就是键值对，和JSON格式非常相似，可以参考下面代码快速入门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//对象的定义
const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    hobbies: ['music', 'movies', 'sports'],
    //对象的嵌套定义
    address: {
        street: '50 main st',
        city: 'Boston',
        state: 'MA'
    }
}

//输出整个对象
console.log(person);
//输出对象的键值
console.log(person.firstName, person.hobbies[1], person.address.city);

//对象的解构
const {firstName, lastName, address:{ city }} = person;
console.log(firstName, lastName, city);

//对象添加属性
person.email = 'John@gmail.com';
console.log(person.email)

输出结果：

数组中存储对象

数组中存储对象，与JSON格式更为相似了，但是JSON要求的键名为字符串，并且JSON只能用双引号（JS单双引号都可以），所以可以将存储对象的数组直接转化为JSON。

可以尝试下面代码轻松了解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//数组中存储对象
const todos = [
    {
        id:1,
        text: 'Take out trash',
        isCompleted: true
    },
    {
        id:2,
        text:'Meeting with boss',
        isCompleted: true
    },
    {
        id:3,
        text:'Dentist',
        isCompleted: false
    }
];

//输出一个对象的键值
console.log(todos[1].text)

//转化为JSON
const todoJSON = JSON.stringify(todos)
console.log(todos)

输出结果：