cc第四周 js基础

已于 2023-04-15 19:18:21 修改
阅读量821 收藏 1
点赞数 5
文章标签： javascript 前端 html
于 2023-04-14 01:17:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74033724/article/details/130142808
版权

JavaScript学习

JavaScript的概述

JavaScript（简称JS）是一种Web前端开发中常用的脚本语言。它为网页添加了很多动态效果、交互功能和数据处理能力，使得网页不再是单调的静态页面，而成为了一个更加多彩、有趣且具有实用性的应用程序。

JS功能

  • 动态效果：JS可以使用DOM（文档对象模型）操作HTML元素，实现动态的页面效果，如菜单栏下拉、轮播图等。
  • 交互功能：JS可以通过事件监听机制实现响应用户操作，如点击、拖动等。同时，JS也可以和后端服务器进行通信，实现数据的增删改查等操作。
  • 表单验证：JS可以对用户输入的表单数据进行验证，确保数据的合法性和正确性。
  • 数据处理：JS可以对数据进行处理，如计算、格式化、加密等。
  • 浏览器控制：JS可以调用浏览器API，实现浏览器控制，例如打开新窗口、关闭当前窗口等操作。

JS引入方式

JS代码可以嵌入到HTML页面中，也可以通过外部文件进行引入。

  • 嵌入式引入：把JS代码直接写在HTML页面中的 script 标签内。
<!DOCTYPE html>
<html>
<head>
    <title>JS Demo</title>
</head>
<body>
    <script>
        // JS 代码
    </script>
</body>
</html>
  • 外部文件引入：将JS代码编写在一个独立的.js文件中，然后在HTML页面中通过 script 标签引入该文件。
<!DOCTYPE html>
<html>
<head>
    <title>JS Demo</title>
    <script src="js/main.js"></script>
</head>
<body>
    <!-- HTML 代码 -->
</body>
</html>

其中，src属性指定了.js文件所在的路径。

JS语法

变量声明

JavaScript是一种动态类型的语言，因此在使用变量时不需要声明具体的数据类型。在JavaScript中，变量的声明可以使用var、let和const关键字进行。

  • var用于声明变量
  • let用于声明块级作用域的变量
  • const用于声明常量

var和let声明的变量是可修改的，const声明的变量是不可修改的常量。

变量的赋值直接用=即可
// 使用var关键字声明变量
var num = 10;
var name = "Jack";
// 使用let关键字声明变量
let age = 20;
let isStudent = true;
// 使用const关键字声明变量
const PI = 3.14;

运算符

  • 赋值运算符

在JavaScript中，使用等号（=）进行赋值操作。

   var a = 10;
  • 算术运算符

常见的算术运算符包括加（+）减（-）乘（*）除（/）和取余（%）

var a = 10;
var b = 3;
console.log(a + b); // 输出13
console.log(a - b); // 输出7
console.log(a * b); // 输出30
console.log(a / b); // 输出3.33333
console.log(a % b); // 输出1
  • 比较运算符

常见的比较运算符包括相等（== ）不相等（!=）全等（=== ）不全等（!==）大于（>）小于（<）大于等于（>=）和小于等于（<=）

var a = 10;
var b = "10";
console.log(a == b); // 输出true，因为会进行类型转换
console.log(a === b); // 输出false，因为不会进行类型转换
console.log(a != b); // 输出false
console.log(a !== b); // 输出true
console.log(a > b); // 输出false
console.log(a < b); // 输出false
console.log(a >= b); // 输出true
console.log(a <= b); // 输出true
  • 逻辑运算符

常见的逻辑运算符包括与（&&）、或（||）和非（!）。

var a = 10;
var b = 3;
var c = 5;
console.log(a > b && b > c); // 输出false 同真才真
console.log(a > b || b > c); // 输出true 有真则真
console.log(!(a > b)); // 输出false 取反

还支持自增（++）和自减（–）运算符。 这些运算符可以放在变量前面或后面，分别表示先运算再赋值和先赋值再运算。

var a = 10;
a++; // 等价于 a = a + 1;
console.log(a); // 输出11

var b = 10;
++b; // 等价于 b = b + 1;
console.log(b); // 输出11

数据类型

数据类型主要包括基本数据类型和引用数据类型两种。

  • 基本数据类型包括数字（Number）、字符串（String）、布尔值（Boolean）、空值（Null）和未定义（Undefined）
  • 引用数据类型包括对象（Object）、数组（Array）、函数（Function）等。
基本数据类型
  • 数字
    数字类型用于表示数值。JavaScript的数字类型是浮点型的，并且没有区分整型和浮点型，因此可以使用小数来表示任意的数值。
var a = 10; // 整数
var b = 3.14; // 浮点数

除了普通的数值之外，JavaScript还提供了一些特殊的数值，如NaN、Infinity和-Infinity。NaN代表“不是一个数”，Infinity代表正无穷大，-Infinity代表负无穷大。

console.log(1 / 0); // 输出Infinity
console.log(-1 / 0); // 输出-Infinity
console.log("abc" / 2); // 输出NaN
  • 字符串

字符串用于表示文本。字符串可以使用单引号（'）、双引号（"）或反引号（`）来定义。

var str1 = 'hello';
var str2 = "world";

JavaScript中的字符串也支持一些常见的操作，如截取子字符串、查找子字符串、替换子字符串等。例如：

var str = "hello world";
console.log(str.substring(0, 5)); // 输出"hello"
console.log(str.indexOf("world")); // 输出6
console.log(str.replace("world", "JavaScript")); // 输出"hello JavaScript"
  • 布尔值

布尔值用于表示真或假。布尔值只有两个取值：true和false。

var a = true;
var b = false;
  • 空值和未定义
    空值（null）表示一个空的对象
    未定义（undefined）表示一个未定义的变量
var a = null; // 空值
var b; // 未定义
引用数据类型
对象
对象的定义

由花括号（{}）包围的键值对集合。 每个键值对包含一个键和一个值，用冒号分隔。
键必须是一个字符串或一个符号（Symbol），而值可以是任何数据类型， 包括基本数据类型和其他引用数据类型。

let person = {
  name: "John",
  age: 30,
  isStudent: true,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
};

在上面的例子中，person 对象有四个属性：name、age、isStudent 和 address。其中 name、age 和 isStudent 的值都是基本数据类型，而 address 的值是一个嵌套对象。

对象的访问

在 JavaScript 中，可以使用点符号（.）或方括号（[]）来访问对象的属性。

console.log(person.name); // "John"
console.log(person["age"]); // 30
console.log(person.address.city); // "Anytown"

使用点符号访问属性时，属性名必须是一个有效的标识符。如果属性名包含特殊字符（比如空格、连字符或关键字），则需要使用方括号来访问该属性。

可以使用方括号访问属性时，可以将属性名包含在引号中，也可以不加引号。如果属性名是一个变量，则必须使用方括号访问该属性。

let propertyName = "name";
console.log(person[propertyName]); // "John"
构造函数创建对象

JavaScript 中的对象可以使用构造函数（Constructor）来创建。构造函数是一种特殊的函数，它用于创建新的对象并初始化其属性和方法。构造函数中的关键字 this 表示当前正在创建的对象。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

let john = new Person("John", 18);

console.log(john.name); // "John"
john.sayHello(); // "Hello, my name is John"

我们定义了一个名为 Person 的构造函数，它包含两个参数 name 和 age。我们还在 Person.prototype 上定义了一个方法 sayHello。最后，我们使用 new 关键字来创建一个新的 Person 对象，并将其赋值给 john 变量。

对象的遍历

JavaScript 中的对象可以使用 for…in 循环来进行遍历。这个循环将枚举对象的所有可枚举属性（包括继承来的属性）。

函数

使用function关键字定义函数，可以接受参数，并且可以返回值。函数是JavaScript的核心语法之一，也是封装和复用代码的重要手段。

函数的定义

函数声明和函数表达式。
函数声明使用 function 关键字来定义，它需要一个函数名和一组参数。

function add(x, y) {
  return x + y;
}

函数表达式是通过将函数定义为表达式赋值给变量而创建的。

var add = function(x, y) {
  return x + y;
};

无论是函数声明还是函数表达式，都可以通过函数名来调用函数，并将参数传递到该函数中。

console.log(add(2, 3)); // 输出 5
匿名函数

匿名函数
它们没有名称。匿名函数通常用作回调函数或立即执行函数（IIFE）。回调函数是在异步编程中经常使用的一种技术，它允许将函数传递给另一个函数，并在后者完成后自动调用它。

setTimeout() 方法接受一个匿名函数作为第一个参数，该函数将在一秒钟后被调用：

setTimeout(function() {
  console.log('Hello, world!');
}, 1000);
数组
创建数组

JavaScript中创建数组的方式有两种：使用字面量创建和使用Array对象创建。

  • 使用字面量创建数组

使用字面量创建数组是最常见的方式。可以使用方括号“[]”来创建一个新的数组，例如：

var arr = [1, 2, 3];//创建了一个具有三个元素的数组。在数组中，每个元素都有一个唯一的数字索引，它们以0为起始值，依次递增。数组的第一个元素的索引是0，第二个是1，依此类推。
  • 使用Array对象创建数组
var arr = new Array(1, 2, 3);//与使用字面量创建数组的效果相同。如果只给Array构造函数传递一个参数，则该参数将被视为数组的长度，而不是数组的值。

var arr = new Array(3);
console.log(arr.length); // 输出3

创建了一个长度为3的空数组。但是，该数组并没有包含任何元素，它的每个元素都是undefined。

访问数组元素

在JavaScript中，可以使用方括号来访问数组中的元素。

var arr = [1, 2, 3];
console.log(arr[0]); // 输出1
修改和添加数组元素

可以通过索引来修改和添加数组中的元素。

var arr = [1, 2, 3];
arr[1] = 4; // 修改第二个元素的值
console.log(arr); // 输出[1, 4, 3]

arr[3] = 5; // 添加一个新的元素
console.log(arr); // 输出[1, 4, 3, 5]

在数组中添加新元素时，如果指定的索引大于数组当前长度，则会自动将数组长度调整为索引加1的大小。

删除数组元素

可以使用delete关键字来删除数组中的元素

var arr = [1, 2, 3];
delete arr[1]; // 删除第二个元素
console.log(arr); // 输出[1, undefined, 3]

使用delete关键字删除数组元素时，并不会改变数组的长度。而是将要删除的元素的值设置为undefined。

如果想要删除数组中的某个元素并将其从数组中完全移除，可以使用splice()方法。

var arr = [1, 2, 3];
arr.splice(1, 1); // 从索引1开始，删除一个元素
console.log(arr); // 输出[1, 3]

这里从索引1处开始，删除一个元素，然后输出了修改后的数组。splice()方法还可以用来插入新元素、替换已有元素等操作。

数组常用方法
  • push()和pop()方法：在数组的末尾添加或删除元素
var arr = [1, 2, 3];
arr.push(4); // 在数组末尾添加一个元素4
console.log(arr); // 输出[1, 2, 3, 4]

arr.pop(); // 删除数组末尾的元素
console.log(arr); // 输出[1, 2, 3]
  • shift()和unshift()方法：在数组的开头添加或删除元素
var arr = [1, 2, 3];
arr.unshift(0); // 在数组开头添加一个元素0
console.log(arr); // 输出[0, 1, 2, 3]

arr.shift(); // 删除数组开头的元素
console.log(arr); // 输出[1, 2, 3]
  • join()方法：将数组中的所有元素转化为字符串，并用指定的分隔符连接起来
var arr = [1, 2, 3];
var str = arr.join("-"); // 将数组中的元素以"-"分隔符连接成一个字符串
console.log(str); // 输出"1-2-3"
  • slice()方法：返回数组的一个子集，不会修改原数组
var arr = [1, 2, 3, 4, 5];
var subArr = arr.slice(1, 3); // 返回索引1到索引3之间的子数组，不包括索引3
console.log(subArr); // 输出[2, 3]
console.log(arr); // 输出[1, 2, 3, 4, 5]
  • sort()方法：对数组进行排序
var arr = [3, 2, 1];
arr.sort(); // 对数组进行升序排列
console.log(arr); // 输出[1, 2, 3]

需要注意的是，sort()方法默认按照字母顺序对数组元素进行排序。如果需要按照数值大小进行排序，可以传递一个比较函数作为参数。

多维数组

JavaScript中也可以创建多维数组，即数组中的元素也是数组。使用多个方括号来指定各个维度的索引。

var arr = [[1, 2], [3, 4]];
console.log(arr[0][1]); // 输出2
异步任务
  1. 指那些不会阻塞主线程执行的任务，通常包括向服务器发起请求、处理用户输入、从文件系统读取数据等操作。由于这些任务需要花费一定的时间才能完成，因此我们不能使用传统的同步方式来处理它们。
  2. 在 JavaScript 中，异步任务通常会被放置在“事件循环”（Event Loop）中进行管理。当一个异步任务完成时，它会将其结果放入一个“消息队列”（Message Queue）中，并等待 JavaScript 引擎空闲时从消息队列中取出并调用对应的回调函数。
  3. JavaScript 引擎在每个事件循环周期内都会执行以下几个步骤：
    执行当前的同步任务，直到执行完毕或者遇到异步任务。
    如果当前存在异步任务，则将其添加到异步任务队列中。
    将消息队列中的第一个消息取出，并执行对应的回调函数。
  4. 多种处理异步任务的机制，包括回调函数、Promise 和 async/await 等
  • 在回调函数中，我们将需要等待的代码放在一个函数中，并把该函数作为参数传递给另一个函数。
  • Promise 对象表示一个异步操作的最终完成或失败，并提供了一些方法来处理该操作的结果。我们可以通过 Promise 的 then 和 catch 方法来注册回调函数，当异步操作完成时，Promise 会自动调用对应的回调函数。
  • async/await 让异步代码看起来更像同步代码，让程序员能够更加容易地编写和理解异步代码。

注释

使用//或/**/来添加注释，增加代码的可读性和可维护性。

在 for 循环结束后，变量 i 的值为 3。第四个定时器的回调函数中的 i 值为 3。然而，由于第四个定时器在执行前被清除了，所以它的回调函数没有机会执行。所以答案为012
也许把它换成立即执行函数就能实现0123了？（）

ps:
1.浏览器会按代码顺序解析html文档 所以js一般写在body里更合适

-textarea 高度自适应

在这里插入代码片

` +$ 可以在避免输入多个“”
tc由var 改成let
回传参数加tc

孙于程
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
photoshop-cc-javascript-ref-2019.pdf
06-06
《Adobe Photoshop CC JavaScript脚本编程参考》是针对Adobe Photoshop CC的详细编程指南，专注于使用JavaScript进行自动化和扩展功能。此文档适用于Windows和Macintosh平台，是2019年版，由Adobe公司发布并保留所有...
webpack4 js loader 配置踩坑记
weixin_40073115的博客
12-13 1239
webpack升到4之后的版本有很多地方与之前不同，新项目中使用，或旧的项目升级有诸多坑点，本篇博文就webpack4与3的不同之处整理说明 webpack4安装 webpack4的安装与3有明显不同之处，全局安装webpack 同时必须安装webpack-cli ...
4.JS基础（一）
剑指苍天
02-24 1590
JS：客户端脚本语言，运行客户端浏览器中，不需要编译就可以被解析了 可以增强用户和html页面的交互过程，可以控制html元素，让页面有些动态效果 一、基本使用 语法：1、与html结合： 内部JS：在head还是body（head中会执行的更早）中都可以，<script type="”text/javascript>，alert（“xxxxxx”）是一个提示作用 外部JS：设置个外部的JS文件，不是用line，而是用<script src=“xx.JS” type="”text/java
CocosCreator 源码-CCAssetManager.js详解
weixin_50892911的博客
11-24 2352
【代码】CocosCreator 源码-CCAssetManager.js详解。
proj4js 坐标转换
苹果园dog
07-01 7519
一、概述 Proj4js 是一个开源的 JavaScript 库，用于将点坐标从一个坐标系转换到另一个坐标系，包括基准转换。 git代码库地址：https://github.com/proj4js/proj4js 另一个坐标系在线查询和坐标转换地址：https://epsg.io/ 在PostGIS中有一个表 spatial_ref_sys ，可以查询所有的坐标系信息。 在Geoserver中也有所有坐标系的信息。在ArcGIS中也有。 以下介绍在node中使用proj4，以及在Cesium三.
4CC
苏帕AI
03-18 2285
0~9 1978 2VUY 3IV0：3ivx 3IV1：3ivx 3IV2：3ivx 3IVD：FFmpeg DivX（MS MPEG-4 v3） 3IVX：3ivx 8BPS：平面RGB编解码器 A AAS4：Autodesk Animator编解码器（RLE） AASC：Autodesk Animator编解码器（RLE） ABYR：肯辛顿编解码器 ACTL：Streambox ACT-L2...
PS插件开发 illustrator插件开发 JavaScript Tools Guide CC.pdf
08-29
1. **JavaScript基础知识**：指南首先会介绍JavaScript的基础，包括变量、数据类型、控制流语句、函数、对象和数组等，这些都是开发插件的基础。 2. **Adobe Creative Suite API**：学习如何使用Adobe提供的APIs，...
高级项目课第四课代码.zip_month81q_www.935.cc登录_登录 注册
09-25
在本项目中，我们主要关注的是“高级项目课第四课”的代码实现，它涉及到了网站用户管理系统的关键功能：用户注册、用户登录以及未登录状态下的页面跳转。这些功能是任何交互式网站的基础，尤其对于需要用户账户进行...
iadty4-cc-s2-p5
03-14
首先，"iadty4-cc-s2-p5"可能是一个项目代号或者版本标识，暗示这是一个特定阶段或课程的第二部分第五个练习。这通常意味着它是一个逐步进阶的学习资源，适合初学者或有一定基础的开发者。 在描述中提到的“创意...
WebSitePro01:网站专业骗局html5 cc3 js
05-31
它在HTML4的基础上进行了大量的改进和扩展，以适应现代互联网的需求。HTML5引入了新的元素，如、、、等，使网页结构更加清晰，有利于搜索引擎优化（SEO）。此外，它还增强了离线存储功能，通过离线储存API...
cocos creator 的jsb 与java层 、oc 层函数相互调用栗子
标题
09-17 3800
jsb 调用java 层 oc 层返回值 if(cc.sys.os == cc.sys.OS_ANDROID){ var nPower = jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", "getBatteryPercent","()Ljava/lang/String;"); nPower...
cc-js 查看当前运行平台
有酒有故事
09-27 1844
cc.log( cc.sys.isNative +" " +cc.sys.isMobile +" " +cc.sys.language +" "+cc.sys.browserType+" "+cc.sys.capabilities +" "+cc.sys.os); cc.sys.dump(); //会把上面的信息都打印一遍
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 176
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 90
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 180
【代码】前端javascript中的排序算法之插入排序。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 196
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue3 + element-plus 表格行内编辑，如何实现表单校验？
yyXieDaiMa的博客
07-09 375
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 84
通过sm4对文件进行加解密，用户输入密码
网页基础：第次课JavaScript对象优秀PPT.ppt
11-30
本资源是一份关于网页基础的JavaScript对象教学PPT，主要集中在JavaScript的核心语言对象上。课程内容涵盖了以下几个关键知识点： 1. 声明变量与类型转换： - 学习者被引导回忆如何声明一个变量x，并给它初值10。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值