前端秘法基础式终章----欢迎来到JS的世界

news/2024/4/25 12:34:20

目录

一.JavaScript的背景

二.JavaScript的书写形式

1.行内式

2.嵌入式

3.外部式

三.JS中的变量

1.变量的定义

2.JS动态类型变量

2.1强类型和弱类型

3.JS中的变量类型

四.运算符

五.if语句和三元表达式和Switch语句和循环语句

六.数组

1.创建获取数组元素

2.新增数组元素

七.函数

1.函数的声明和调用

2.作用域及作用域链

八.对象

1.对象的创建

1.1字面变量创建

1.2使用new Object创建

1.3构造函数创建对象

1.4class构造对象

1.5static修饰

1.6对象的继承


一.JavaScript的背景

JavaScript 是一种高级编程语言,通常用于网页开发和网页交互。它可以让网页变得更加动态和交互性强,例如实现动画效果、表单验证、数据交互等。
 
JavaScript 可以直接嵌入到 HTML 页面中,通过浏览器执行,从而实现网页的各种功能。它也可以用于开发桌面应用程序、移动应用程序等。

JavaScript 有以下几个特点:
 
- 解释性语言:JavaScript 代码不需要编译,直接由浏览器解释执行。
- 面向对象:它支持面向对象编程的特性,如类、对象、继承等。
- 事件驱动:通过监听和响应网页上的各种事件(如点击、鼠标移动等)来触发相应的 JavaScript 代码执行。
- 跨平台:由于 JavaScript 主要在浏览器中运行,所以它可以在各种操作系统和设备上运行。

二.JavaScript的书写形式

1.行内式

<!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><input type="button" value="          js         " onclick="alert('welcome to js!')">
</body>
</html>

注意这里onclick中的双引号和单引号可互换,既可以单引号包含双引号,又可以双引号包含单引号,和Python中的单双引号用法相似

2.嵌入式

<!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>

</body>

<script>alert('welcome ton js!')</script>

</html>

通过script标签引入JS代码

3.外部式

通过JS文件引入

<!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>

</body>

<script src="JScode/JS01.js"></script>

</html>

需要注意的是css在引入的时候是link标签搭配href属性,而JS在引入的时候则是script标签搭配src属性

三.JS中的变量

1.变量的定义

var a = 0;

let a = 0;

上述两种定义变量的方法都行,其中let是在var的基础上做一些优化和改进

2.JS动态类型变量

与Python一样,JS中的变量属于动态类型变量,它的变量类型可以随着数据类型的改变而改变

2.1强类型和弱类型

强类型是指数据类型的转变需要进行强制转换

弱类型是指数据类型转变不需要强转,JS,Python是常见的弱类型语言

3.JS中的变量类型

需要特别注意的是infinity表示正无穷,nan表示不是数字,undefined表示变量未定义,null表示该变量为空,两者在逻辑判断上是相等的,都为false,不过null是空对象指针,类型为object,undefined是未定义,返回类型为undefined

四.运算符

运算符与C语言大致相同,需要注意的是等号

一个等号表示赋值

两个等号表示比较内容是否相同,不考虑数据类型,也就是1==true是返回true

三个等号考虑数据类型

五.if语句和三元表达式和Switch语句和循环语句

用法与C语言相同

这里讲一下调试技巧

打开网页,进入开发者工具,进入console控制台

按Ctrl+shift+r进入调试模式,按f11逐步进行

六.数组

1.创建获取数组元素

创建数组可以采用字面变量创建:let arr = [1, 2, 3];

也可以new一个数组对象let arr = new Arry();

利用数组下标获取元素即可

2.新增数组元素

修改数组长度

let a = new Array(1, 2, 3);

a.length = 5;

console.log(a);

我们可以看到最后有两个空位,数据类型为undefined

直接通过下标赋值

let a = new Array(1, 2, 3);

a[3] = 5;

console.log(a);

通过push追加

let a = new Array(1, 2, 3);

let newa = new Array();

for(i = 0; i < a.length; i++){

    newa.push(a[i]);

}

console.log(newa);

七.函数

1.函数的声明和调用

function Add(x, y){

    return x + y;

}

let Min = function(x, y){

    return x * y;

}

两种写法都可以,第二种是直接将函数给到一个变量,可以不用书写函数名,通过变量直接调用

2.作用域及作用域链

JS中会出现函数套函数的情况,那么内层函数可以使用外层函数的变量,但外层函数得不到内层函数的变量,因为变量的搜索遵循由内到外

八.对象

其实就类似于C语言中的结构体(但它们也有一些本质的区别,可以抽象的理解)

1.对象的创建

1.1字面变量创建

let people = {

    name:"zhangsan",

    age:16,

    gender:"male"

}

console.log(people);

类似于Python中的字典,通过键值对创建

1.2使用new Object创建

let People = new Object()

People.name = "zhangsan";

People.age = 16;

console.log(People);

1.3构造函数创建对象

function people(name, age, gender){

    this.name = name;

    this.age = age;

    this.gender = gender;

}

let people1 = new people("zhansan", 16, "male");

console.log(people1);

1.4class构造对象

es6中开始支持用class去构建对象,弥补了上述方法无法继承的缺陷

class people{

    constructor(name, age){

        this.name = name;

        this.age = age;

    }

    Say(){

        console.log("hello");

    }

}

let zhangsan = new people("zhangsan", 16);

console.log(zhangsan);

zhangsan.Say();

1.5static修饰

此时不论是属性还是方法都不属于对象,而属于类,在调用的时候要基于类名去调用

class people{

    constructor(name, age){

        this.name = name;

        this.age = age;

    }

    Say(){

        console.log("hello");

    }

    static Say1(){

        console.log("hehe");

    }

}

let zhangsan = new people("zhangsan", 16);

console.log(zhangsan);

zhangsan.Say();

people.Say1();

1.6对象的继承

class people{

    constructor(name, age){

        this.name = name;

        this.age = age;

    }

    Say(){

        console.log("hello");

    }

    static Say1(){

        console.log("hehe");

    }

}

class student extends people{

    constructor(name, age, num){

        super(name, age);

        this.num = num;

    }

}

通过extends指定你所要继承的属性所属的类,通过super指定你要继承的具体属性


https://www.xjx100.cn/news/3280861.html

相关文章

消息队列-RabbitMQ:发布确认—发布确认逻辑和发布确认的策略

九、发布确认 1、发布确认逻辑 生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c;所有在该信道上面发布的消息都将会被指派一个唯一的 ID (从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker 就会发送一个确认给…

python 与 neo4j 交互(py2neo 使用)

参考自&#xff1a;neo4j的python.py2neo操作入门 官方文档&#xff1a;The Py2neo Handbook — py2neo 2021.1 安装&#xff1a;pip install py2neo -i https://pypi.tuna.tsinghua.edu.cn/simple 1 节点 / 关系 / 属性 / 路径 节点(Node)和关系(relationship)是构成图的基础…

HTTPS(超文本传输安全协议)被恶意请求该如何处理。

HTTPS&#xff08;超文本传输安全协议&#xff09;端口攻击通常是指SSL握手中的一些攻击方式&#xff0c;比如SSL握手协商过程中的暴力破解、中间人攻击和SSL剥离攻击等。 攻击原理 攻击者控制受害者发送大量请求&#xff0c;利用压缩算法的机制猜测请求中的关键信息&#xf…

编程笔记 Golang基础 008 基本语法规则

编程笔记 Golang基础 008 基本语法规则 Go语言的基本语法规则. Go语言的基本语法规则包括但不限于以下要点&#xff1a; 标识符&#xff1a; 标识符用于命名变量、常量、类型、函数、包等。标识符由字母&#xff08;a-z&#xff0c;A-Z&#xff09;、数字&#xff08;0-9&#…

Spring Cloud Alibaba-04-Sentinel服务容错

Lison <dreamlison163.com>, v1.0.0, 2023.09.10 Spring Cloud Alibaba-04-Sentinel服务容错 文章目录 Spring Cloud Alibaba-04-Sentinel服务容错高并发带来的问题服务雪崩效应常见容错方案Sentinel入门什么是Sentinel微服务集成Sentinel安装Sentinel控制台 实现一个接…

【ES】es查询term、match、match_phrase、mast_not、mast...

这里写自定义目录标题 数据类型不分词的匹配&#xff08;会去匹配分词的数据&#xff09;分词匹配模糊匹配其他 数据类型 keyword&#xff1a;不分词非keyword&#xff1a;分词 不分词的匹配&#xff08;会去匹配分词的数据&#xff09; 对属性名.keyword&#xff0c;就是全…

singularity-ce-4.1.0 + go 完整安装步骤,及报错解决

singularity-ce-4.1.0 go 1.20 完整安装步骤. 解决bug: checking: host Go compiler (at least version 1.13)... not found! mconfig: could not complete configuration服务器基础环境&#xff1a; 阿里云服务器&#xff1a; > lsb_release -a LSB Version: :core-4.…

华为---RSTP(二)---RSTP基本配置示例

目录 1. 示例要求 2. 网络拓扑图 3. 配置命令 4. 测试终端连通性 5. RSTP基本配置 5.1 启用STP 5.2 修改生成树协议模式为RSTP 5.3 配置根交换机和次根交换机 5.4 设置边缘端口 6. 指定端口切换为备份端口 7. 测试验证网络 1. 示例要求 为防止网络出现环路&#xf…