Day27_9 前端学习之初识JavaScript

最新推荐文章于 2024-07-26 11:41:15 发布

浮生丶如梦

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量592

点赞数 4

分类专栏： HTML前端 JavaScript学习文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/weixin_43717536/article/details/127074976

版权

HTML前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript学习

1 篇文章 0 订阅

订阅专栏

arguments（可变参数列表）的使用与函数的两种声明方式

JavaScript的作用域

JavaScript变量的作用域

一、JavaScript概述

JavaScript基本概述

解析：

1、JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)

2、脚本语言：不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行。

3、JavaScript的作用：

3.1、表单动态校验（密码强度检测）（js产生最初的目的）

3.2、网页特效

3.3、服务端开发(Node.js)

3.4、桌面程序(Electron)

3.5、App(Cordova)

3.6、控制硬件-物联网(Ruff)

3.7、游戏开发(cocos2d-js)

JavaScript的组成

解析：

1、ECMAScript（基本语法）：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

2、DOM(文档对象模型)：对页面上的各种元素进行操作（大小、位置、颜色等）。

3、BOM(浏览器对象模型)：通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JavaScript引入方式

解析：和css样式的引入方式大同小异

1、行内式：写在标签元素中（一般不使用）

2、内嵌式：写在script中

3、外链式：通过script的src引入

使用示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.行内式：不推荐 -->
    <button onclick="alert(123)">点击1</button>
    <button id="btn2">点击2</button>
    <button id="btn3">点击3</button>
    <script>
        // 2.内嵌式----页面功能调试是使用
        // 获取对象
        document.getElementById("btn2").onclick = function () {
            alert("点我干啥(〝▼皿▼)");
        }
    </script>
    <!-- 3.外联式----项目开发中推荐使用 -->
    <script src="js/demo.js"></script>
</body>
</html>

外联式代码如下：

// 外联js表代码如下： 
// 外链式
document.getElementById("btn3").onclick = function () {
    alert("(。＿ 。） ✎＿学习计划走起");
}

特别注意：在使用内嵌式与外联式时js引入代码应写在html代码的后面，因为程序代码由上至下执行。

JavaScript输入输出语句

解析：

1、alter()弹窗式：常用于代码调试。

2、console.log()：常用于代码调试，控制台输出。

3、prompt(“请输入数据：”)：交互式---可以接收输入的数据且默认为字符串类型。

代码使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 输出方式
        alert("弹窗式");
        console.log("(σﾟ∀ﾟ)σ..:*☆哎哟不错哦");
        let str = prompt("请输入数据");
        console.log(str);
    </script>
</head>
<body>
</body>
</html>

二、JavaScript的基本语法

JavaScript的变量

解析：

1、使用var语句声明函数作用域或全局作用域的变量，可以选择将其初始化为值。

特别注意：使用var声明的变量是在称为提升的过程中执行任何代码之前创建的。默认初始值为undefined；



2、使用let(推荐使用)语句声明一个块级作用域的局部变量，并可以初始化为一个值（可选）。

特别注意：与var关键字不同的是，var声明的变量作用域是全局或者整个函数块的。var

和let的另一个重要区别，let 声明的变量不会在作用域中被提升，它是在编译时才初始化；

3、使用const语句声明的常量是块级范围的，非常类似用let语句定义的变量。但常量的值是无法（通过重新赋值）改变的，也不能被重新声明。

JavaScript的数据类型

解析：

一、简单数据类型：（以下可参考Java的数据类型）

1、Number：整数，浮点数；

2、String：带“ ”或者‘ ’(双引号，单引号) 字符串类型;

3、Boolean：true，flase；

4、Undefined：未定义；

5、Null：对象初始化；

二、复杂数据类型（object）

1、引用数据类型（参考java）

三、数据类型的检测：typeof：使用该关键字可检测该数据是何种类型，常在测试中使用。

使用示例：console.log(typeof 数据);

数据类型的转换

一、转换为字符串类型：使用方式如下图：

特别注意：undefined与null不能转换为字符串类型。

二、转换为数字类型：使用方式如下图：

使用示例：

        // 转数字类型
        console.log(typeof parseInt(flag), flag);
        console.log(typeof parseInt(nu), nu);
        console.log(typeof parseInt(un), un);
        
        console.log(typeof Number(flag), Number(flag));
        console.log(typeof Number(nu), Number(nu));
        console.log(typeof Number(un), Number(un));
        console.log(typeof Number(str), Number(str));

运行结果：

三、转换为布尔类型：使用方式如下：

特别注意：1、代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
2、其余值都会被转换为 true

三、运算符、流程控制及数组

解析：

1、运算符：算数运算符、递增与递减运算符、比较运算符、逻辑运算符、赋值运算符、运算符优先级（即可参考Java这里就不多讲述咯）。

2、流程控制：if分支流程控制、Switch分支流程控制、for循环、while循环、do-while循环、continue与break关键字。（即可参考Java或者看本小博主之前的文章哦）

3、数组：JavaScript中的数组与java的数组有一丢丢不一样。

3.1、数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。

tips：该数组中的数据类型可以不一致，相关即可。

3.2、数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

3.3、数组是一种将一组数据存储在单个变量名下的优雅方式。

4、数组的初始化：

4.1、利用 new 创建数组

let 数组名 = new Array() ；
let arr = new Array();// 创建一个空数组

4.2、利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
let 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
let 数组名 = ['小白','小黑','大黄','瑞奇'];

4.3、数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

let arrStus = ['小白',12,true,28.9];

5、获取数组元素（可参考Java）：该数组元素下标也是从0开始的；

6、遍历数组的方式（参考Java）：可使用for循环等；

7、数组中新增元素：

数组中可以通过以下方式在数组的末尾插入新元素：

数组[ 数组.length ] = 新数据;

四、JavaScript的函数

函数的概述与使用

解析：

一、函数的概述：

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。（与Java中的方法类似）

二、函数的使用：

1、声明函数：

function 函数名() {
//函数体代码
}

tips：1、function 是声明函数的关键字,必须小写2、由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum。

2、调用函数：

函数名(); // 通过调用函数名来执行函数体代码

特别注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

函数的封装

解析：

1、函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
2、简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

3、可参考Java的方法理解

函数的参数与返回值

解析：

一、函数的参数：形参与实参（可参考Java理解，也可看小博之前讲述Java方法的文章）

二、函数的返回值：

1、返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回

2、在函数体中使用：return 语句

示例如下：

// 声明函数
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值

tips：1、在使用 return 语句时，函数会停止执行，并返回指定的值2、如果函数没有 return ，返回的值是 undefined

arguments（可变参数列表）的使用与函数的两种声明方式

解析：

一、arguments的使用：

1、当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

2、arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

2.1、具有 length 属性
2.2、按索引方式储存数据
2.3、不具有数组的 push , pop 等方法
特别注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

二、函数的两种声明方式

1、自定义函数方式(命名函数)：利用函数关键字 function 自定义函数方式

使用语法格式：

// 声明定义方式
function fn() {...}
// 调用
fn();

tips：1、因为有名字，所以也被称为命名函数。2、调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

2、函数表达式方式(匿名函数）：利用函数表达式方式的。

使用语法格式如下：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

tips：1、因为函数没有名字，所以也被称为匿名函数2、这个fn 里面存储的是一个函数
3、函数表达式方式原理跟声明变量方式是一致的4、函数调用的代码必须写到函数体后面

JavaScript的作用域

解析：

一、作用域概述：

1、通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2、JavaScript（es6前）中的作用域有两种：

2.1、全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

2.2、局部作用域（函数作用域）：作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

二、 JavaScript没有块级作用域(在ES6之前):

1、块作用域由 { } 包括。

2、在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

if(true){
int num = 123;
system.out.print(num); // 123
}
system.out.print(num); // 报错

注释：以上java代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用；

而与之类似的JavaScript代码，则不会报错：

if(true){
var num = 123;
console.log(123); //123
}
console.log(123); //123

3、在ES6之后则有了块作用域，如下代码则会报错：

if (true) {

let num = 100; // var被声明作用为全局 let的作用域则为当前块不声明时则默认为全局

console.log(num);

}

console.log(num);// 报错

JavaScript变量的作用域

解析：

一、在JavaScript中，根据作用域的不同，变量可以分为两种：

全局变量
局部变量

二、全局变量：

1、在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

tips：1、全局变量在代码的任何位置都可以使用；2、在全局作用域下 var 声明的变量是全局变量；3、特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

三、局部变量

1、在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

tips：1、局部变量只能在该函数内部使用；2、在函数内部 var 声明的变量是局部变量；3、函数的形参实际上就是局部变量。

四、全局变量和局部变量的区别：

1、全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存。
2、局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

浮生丶如梦

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
9
评论
Day27_9 前端学习之初识JavaScript

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。（与Java中的方法类似）1、声明函数：function 函数名() {//函数体代码}tips：1、function 是声明函数的关键字,必须小写2、由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum。2、调用函数：函数名();// 通过调用函数名来执行函数体代码特别注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
复制链接

扫一扫

专栏目录