JavaScript快速入门

最新推荐文章于 2023-08-17 15:37:16 发布

panfengblog

最新推荐文章于 2023-08-17 15:37:16 发布

阅读量194

点赞数

分类专栏： web 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44338712/article/details/107131020

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript快速入门

HTML中使用JavaScript

方式1

在HTML代码中直接使用：

<!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文件中调用即可

<!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代码：

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代码：

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

实现效果：

变量定义

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

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

let score;
score = 10;
console.log(score);

然后就能在console中输出10

数据类型

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

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

// 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输出结果：

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

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

//字符串的使用

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数组

//数组

//数组的两种定义方式，一般用第二种
//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格式非常相似，可以参考下面代码快速入门

//对象的定义
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。

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

//数组中存储对象
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)

输出结果：

Map和Set

Map就是一组键值对（构成一个一一映射），比较好理解，直接上代码：

var m = new Map();
m.set('Adam', 67);
m.set('Bob', 59);
console.log(m.has('Adam'));   // 是否存在Adam
console.log(m.get('Adam'));   // 67
m.delete('Adam');    // 删除Adam
console.log(m.has('Adam'));

Set就是集合，集合的特性就是不存在相同的元素（重复元素会被去除）

var s = new Set([1,2,3]);
s.add(3);   // 添加元素
for(var x of s){
    console.log(x);
}
s.delete(3);    // 删除元素
for(var x of s){
    console.log(x);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eZj8x9Pu-1599235932823)(https://s1.ax1x.com/2020/09/04/wAr9yj.png)]

iterable

使用迭代器可以访问数组、Map、Set等结构，有两种写法for...in和for...of，其中for...in是访问属性名称，而for...of则是直接访问其中的元素。

var s = ['a','b','c'];
for(var x in s){
    console.log(x);
}
for(var x of s){
    console.log(x);
}

panfengblog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript快速入门

JavaScript学习HTML中使用JavaScript方式1在HTML代码中直接使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document&l
复制链接

扫一扫