JavaScript 学习笔记（基础）

news2024/12/25 23:24:12

其是一门跨平台、面向对象的脚本语言（直译型语言），用来控制网页行为，能使网页产生交互效果！下面以 JS 代称 JavaScript

引入HTML结构文件有两类方式：

  • 内部脚本
    • 行联式
    • 嵌入式
  • 外部脚本*

基本语法：

  1. 区分大小写（和Java一样）
  2. 每行结尾的分号可有可无
  3. 注释
    1. 单行注释
    2. 多行注释
  4. 花括号表示代码块

输出语句：

  • window.alert() 警告框（弹窗）
  • document.write() HTML输出
  • console.log 控制台

基本数据认识（这里介绍比较繁琐可直接跳过）

1.标识符由大小写字母、数字、下划线和美元符号（$）组成，但不能以数字开头

2.行末的分号代表此行语句的结束，变量和变量之间的逗号（,）操作符可以实现一条语句同时完成多个变量的定义

变量的定义方式 var 和 let 的比较
varlet
作用域：函数作用域（全局变量）块作用域（局部变量）
能否“先斩后奏”：

可以先使用后声明

即可以“先斩后奏”

必须先声明才能使用

即必须“先奏后斩”

能否重复定义：接受重复定义不接受重复定义

3.与变量相对应的是常量，常量可以理解为在运行过程中其值始终保持不变的值。而在 ES6 中新增了 const 关键字，可以用于常量的定义，常量的名称一般全大写字母表示，常量一旦被赋值了就不能再改变。

        例子：const PI = 3.14;

1.数值型 number

number 型数据不区分整数和浮点数，其数值采用八进制、十进制以及十六进制等表示。

        例子：var num1 = 3.14E6;        //使用科学计数法表示了 3.14*10的六次方

注：数值前面加0，如020，就代表它是个八进制数值，020转为十进制为16

        十进制就不必加任何修饰

        数值前面加0x，如0x10，就代表它是个十六进制数值，0x10转为十六进制为16

2.字符型 string

string 型数据不区分单个字符和字符串，字符型数据用单引号 ' ' 或者双引号 " " 包裹。（跟小说对话一样）

3.布尔型 boolean

boolead 型数据取值只有两种：true 和 false，显然布尔型数据属于逻辑型数据。（只有黑白对错）

4.空类型 null

null 型数据代表“空”的意义，表示一个不存在或无效的对象/地址。

5.未定义类型 undefined

undefined 型数据只有一个特殊值：undefined 值，它代表此变量还未赋值。（一种状态值）之后可以重复定义它，以之后赋的值决定它的数据类型。

利用 typeof 运算符得知数据的数据类型

typeof 数据变量        ==>输出        此数据变量的数据类型

变量

JS 可以用 var 关键字来声明变量。需要知道的是JS是一门弱类型语言，因此其变量可以存储不同类型的值。

变量名规范：

  1. 由任何字母、数字、下划线或美元符组成
  2. 数字不可作为开头
  3. 建议使用驼峰命名

ES6 新增了 let 关键字来定义变量，其用法类似 var，但是不同的是其作用域只在其所声明的代码块里，而且不允许重复声明

ES6 还新增了 const 关键字，用来声明一个只读不改的变量。

数据类型

JS 分为：原始类型 和 引用类型

五大原始类型：

  1. nunber：数字（整数、小数、NaN（Not a Number））
  2. string：字符、字符串（单双引号皆可）
  3. boolean：布尔逻辑（true、false）
  4. null：代表对象为空
  5. underfined：当声明的变量未初始化时，此变量的默认值是 underfinded

使用 typeof 运算符可以获取数据类型：

alert(typeof age);

注意！当变量如果是引用类型或者是 Null 类型时将返回 Object

运算符（与Java里大部分一样）

JS == 和 === 的比较：
=====
如何判断判断类型是否一样，若不一样则转为相同类型再比较其值不会再去转型，直接判断其值

类型转换

其它类型转为 number

  • string：按字符串中的字面值转为数字，如果字面值不是数字则转为 NaN（Not a Number）而JS提供了专门转为number的方法：parseInt()
  • boolean：true 转为 1，false 转为 0

其它类型转为 boolean

  • number：0 及 NaN 都会转为 false，其它数字转为 true
  • string：空字符串（""）会转为 false，其它字符串转为 true
  • null：false
  • underfined：false

JS 的流程操作语句和 Java 一样，因此不再赘述。

函数

函数（方法）是被设计为执行特定任务的代码块。例子如下：

function functionName(参数1, 参数2...) {
    //函数体
}

注意！形式参数不需要类型，因为JS是弱类型语言。所以返回值也不需要定义类型，需要直接用 return 关键字返回即可

定义格式二：

var functionName = function(参数列表) {
    //函数体
}
//像是函数赋值给变量，哈哈哈！

调用：函数名（实际参数列表）；

注意！JS 语法松散，它允许传递任意个数的参数到函数中。

JS 对象部分介绍

Array

定义方式：

1.
var 变量名 = new Array(元素列表);
2.
var 变量名 = [元素列表];

访问方式：

arr[索引] = 值;

注意！JS 数组类似 Java 的集合，其长度、类型皆可变！

常用属性和方法：

length：代表数组中元素的个数

push()：添加方法

splice()：删除方法

String

定义方式：

1.
var 变量名 = new String(s);
2.
var 变量名 = s;

常用属性和方法 ：

length：字符串的长度

charAt()：返回指定位置的字符

indexOf()：检索字符串

自定义对象（custom object）

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
...
函数名称:function(形参列表) {
    ...    
    }
}
//有点像匿名内部类，哈哈哈！

BOM（游览器对象模型 Brower Object Model）

JS 将游览器的各个组成部分封装成对象

对象组成：

  1. Window：游览器窗口对象
  2. Navigator：游览器对象
  3. Screen：屏幕对象
  4. History：历史记录对象
  5. Location：地址栏对象

Window 游览器窗口对象

获取：直接使用 window，其中“window.”可以省略。例子如下：

window.alert("hello window");

属性：获取其它的 BOM 对象

格式描述
history对 History 对象的只读引用
Navigator对 Navigator 对象的只读引用
Screen对 Screen 对象的只读引用
location用于窗口或框架的 Location 对象

方法：

格式描述
alert()显示带有一段消息和一个确认按钮的警告框（弹窗）
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框，返回值是true或false
setInterval()按照指定的周期（以毫秒记）来调用函数或计算表达式
setTimeout()在指定的毫秒数后调用函数或计算表达式

History 历史记录对象

获取：使用 window.history 获取，其中“window.”可省略

window.history.方法();
//或者是
history.方法();

方法：

格式描述
back()加载 history 列表中的前一个 URL
forward()加载 history 列表中的后一个 URL

Location 地址栏对象

获取：使用 window.location 获取，其中“window.”可省略

window.location.方法()；

属性：

格式描述
href设置或返回完整的 URL

DOM （文档对象模型 Document Object Model）

JS 将标记语言的各个组成部分封装为对象，例子如下：

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

JS 通过 DOM 就可以对 HTML 进行操作了。比如：

  • 改变 HTML 元素的内容或样式（比如通过 style 和 innerHTML，而 checked 属性代表是否选中）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

DOM 是 W3C（万维网联盟）的标准

DOM 定义了访问 HTML 和 XML 文档的标准，即 W3C DOM 标准被分为3个不同的部分：

  1. 核心DOM：针对任何结构化文档的标准模型               
    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text:文本对象
    • Comment：注释对象
  2. XML DOM：针对 XML 文档的标准模型
  3. HTML DOM：针对 HTML 文档的标准模型
  • lmage: <img>
  • Button : <input type='button'>

Element 元素对象的获取

 常见 HTML Element 对象的使用

        请参考手册！

JavaScript | MDNJavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 Node.js、Apache CouchDB、Adobe Acrobat 等。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。icon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

事件监听

 事件绑定

参考：

JavaScript HTML DOM 事件icon-default.png?t=N7T8https://www.w3school.com.cn/js/js_htmldom_events.asp HTML DOM API - Web API 接口参考 | MDN (mozilla.org)icon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API

正则表达式

test() 方法用于检测一个字符串是否匹配某个模式

用法如下：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressionsicon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1019322.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

npm发布vue3自定义组件库--方法二

npm发布vue3自定义组件库--方法二

npm发布vue3自定义组件库 创建项目 vue create test-ui自定义组件 创建自定义组件&#xff0c;组件名称根据你的需求来&#xff0c;最好一个组件一个文件夹&#xff0c;下图是我的示例。 src/components 组件和你写页面一样&#xff0c;所谓组件就是方便实用&#xff0c;不…
阅读更多...
NotePad++ 在行前/行后添加特殊字符内容方法

NotePad++ 在行前/行后添加特殊字符内容方法

我们在处理数据时&#xff0c;会遇到需要在每行数据前面、后面、开头、结尾添加各种不一样的字符 如果数据不多&#xff0c;我们可以自己手动的去添加&#xff0c;但如果达到了成百上千行&#xff0c;此时再机械的手动添加是不现实的 这里教给大家如何快速的在数据每行的前后…
阅读更多...
华为云云耀云服务器L实例评测｜cento7.9在线使用cloudShell下载rpm解压包安装mysql并开启远程访问

华为云云耀云服务器L实例评测｜cento7.9在线使用cloudShell下载rpm解压包安装mysql并开启远程访问

文章目录 ⭐前言⭐使用华为cloudShell连接远程服务器&#x1f496; 进入华为云耀服务器控制台&#x1f496; 选择cloudShell ⭐安装mysql压缩包&#x1f496; wget下载&#x1f496; tar解压&#x1f496; 安装步骤&#x1f496; 初始化数据库&#x1f496; 修改密码&#x1f4…
阅读更多...
JavaCTF记录

JavaCTF记录

Springmvcdemo 在没有提升权限之前&#xff0c;整个环境只有Cookie是可控的&#xff0c;并且提升权限也是要通过cookie来&#xff0c;先看看它对cookie做了什么&#xff0c;看一下过滤器 public void doFilter(ServletRequest request, ServletResponse response, FilterChai…
阅读更多...
Python实现猎人猎物优化算法(HPO)优化随机森林回归模型(RandomForestRegressor算法)项目实战

Python实现猎人猎物优化算法(HPO)优化随机森林回归模型(RandomForestRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…
阅读更多...
Pyhton压缩JS代码

Pyhton压缩JS代码

文章目录 1.安装依赖2.目录结构3.代码4.执行结果 1.安装依赖 pip install jsmin2.目录结构 3.代码 import jsmindef run(src_path, tgt_path):with open(src_path, "r", encodingutf-8) as input_file:with open(tgt_path, "w", encodingutf-8) as outpu…
阅读更多...
外贸型CRM软件系统的作用

外贸型CRM软件系统的作用

外贸企业在国际市场上面临着大量的竞争和风险&#xff0c;需要不断创新发展&#xff0c;提高自身的竞争力&#xff0c;但又受制于客户管理、业务效率、数据利用和风险控制等方面的不足。为了解决外贸企业面临的问题和挑战&#xff0c;外贸CRM系统应运而生。那么&#xff0c;什么…
阅读更多...
面试（架构，网络）

面试（架构，网络）

java八股 treemap和linkdedhashmap区别&#xff0c;实现原理 https://blog.csdn.net/shidebin/article/details/126814905 架构 https://www.cnblogs.com/crazymakercircle/p/17197091.htmlhttps://www.cnblogs.com/crazymakercircle/p/17197091.html 羊了个羊https://www.c…
阅读更多...
【LeetCode-简单题】1047. 删除字符串中的所有相邻重复项

【LeetCode-简单题】1047. 删除字符串中的所有相邻重复项

文章目录 题目方法一&#xff1a;利用栈做匹配方法二&#xff1a;消消乐 题目 方法一&#xff1a;利用栈做匹配 class Solution {public String removeDuplicates(String s) {Deque<Character> deque new LinkedList<>();StringBuffer str new StringBuffer();fo…
阅读更多...
封装七牛云存储工具类

封装七牛云存储工具类

文章目录 封装七牛云存储工具类&#xff08;为啥选择七牛云&#xff1f;当然是因为它能免费使用喽&#xff01;&#xff01;&#xff01;白嫖怪哈哈哈&#xff01;&#xff01;&#xff01;&#xff09;图片存储方案Java SDK操作七牛云封装工具类 封装七牛云存储工具类&#xf…
阅读更多...
如何在 Excel 中求平方根

如何在 Excel 中求平方根

需要在 Excel 中求一个数字的平方根吗&#xff1f;使用几个内置的 Excel 函数和公式可以轻松计算平方根。在本分步指南中&#xff0c;您将学习在 Excel 中计算平方根的 5 种不同方法&#xff0c;包括使用 SQRT 函数、POWER 函数、指数公式、VBA 代码和 Power Query。跟随教程&a…
阅读更多...
我学编程全靠B站了，真香-国外篇（第三期）

我学编程全靠B站了，真香-国外篇（第三期）

你好&#xff0c;我是Martin。 今天来点猛料&#xff0c;给大家推荐点我的压箱收藏-国外知名大学的公开课。 我推荐的不多&#xff0c;本着少就是多的原则&#xff0c;只给大家推荐我看过最好的五门视频&#xff0c;主要是来自两所国外高校&#xff1a;MIT美国麻省理工、CMU卡…
阅读更多...
Pytorch实现MNIST字符识别

Pytorch实现MNIST字符识别

1.下载mnist.pkl.gz 网址&#xff1a;http://www.iro.umontreal.ca/~lisa/deep/data/mnist/mnist.pkl.gz 数据集文件夹路径是data2/mnist/mnist.pkl.gz 2.读取数据 from pathlib import Pathimport matplotlib.pyplot as pltDATA_PATHPath("./data2") PATHDATA_P…
阅读更多...
无涯教程-JavaScript - LOG函数

无涯教程-JavaScript - LOG函数

描述 LOG函数将数字的对数返回您指定的基数。 语法 LOG (number, [base])争论 Argument描述Required/OptionalNumberThe positive real number for which you want the logarithm.RequiredBaseThe base of the logarithm. If base is omitted, it is assumed to be 10.Opti…
阅读更多...
Linux底层基础知识

Linux底层基础知识

一.汇编&#xff0c;C语言&#xff0c;C&#xff0c;JAVA之间的关系 汇编&#xff0c;C语言&#xff0c;C可以通过不同的编译器&#xff0c;编译成机器码。而java只能由Java虚拟机识别。Java虚拟机可以看成一个操作系统&#xff0c;Java虚拟机是由汇编&#xff0c;C&#xff0c…
阅读更多...
KVM嵌套虚拟化实现

KVM嵌套虚拟化实现

KVM嵌套虚拟化实现 理论 Libvirt主要支持三种 CPU mode host-passthrough: libvirt 令 KVM 把宿主机的 CPU 指令集全部透传给虚拟机。因此虚拟机能够最大限度的使用宿主机 CPU 指令集&#xff0c;故性能是最好的。但是在热迁移时&#xff0c;它要求目的节点的 CPU 和源节点的…
阅读更多...
探索物理学的奥秘：解锁自然世界的钥匙

探索物理学的奥秘：解锁自然世界的钥匙

解锁自然世界的钥匙 引言第一部分&#xff1a;物理学的基本概念第二部分&#xff1a;物理学的重要里程碑第三部分&#xff1a;物理学对日常生活的影响第四部分&#xff1a;物理学的未来前景结语 引言 物理学是一门古老而又令人着迷的科学领域&#xff0c;它的研究对象是整个宇…
阅读更多...
Solidity 小白教程：20. 发送 ETH

Solidity 小白教程：20. 发送 ETH

Solidity 小白教程&#xff1a;20. 发送 ETH Solidity有三种方法向其他合约发送ETH&#xff0c;他们是&#xff1a;transfer()&#xff0c;send()和call()&#xff0c;其中**call()**是被鼓励的用法。 接收 ETH 合约 我们先部署一个接收ETH合约ReceiveETH。ReceiveETH合约里…
阅读更多...
Vue项目中使用element-plus UI库-并对下拉搜索框样式修改-el-select代码封装

Vue项目中使用element-plus UI库-并对下拉搜索框样式修改-el-select代码封装

对下列列表进行自定义 基础代码 <template><el-selectclass"ly-tab-sou"popper-class"popper-ly-tab-sou"v-model"selectVal":filterable"filterable":placeholder"placeholder"change"selectChange"&…
阅读更多...
Dpi解析与adb 查看dpi

Dpi解析与adb 查看dpi

authordaisy.skye的博客_CSDN博客-嵌入式,Qt,Linux领域博主 ro.sf.lcd_density属性指定了这个机型使用的dpi是多少&#xff0c;dpi全称是dots per inch&#xff0c;对角线每英寸的像素点的个数。 密度 ldpi mdpi hdpi xhdpi xxhdpi 分辨率 240x320 320x480 480x800 7…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023