Web前端-JS

JavaScript,简称js:负责网页的行为(交互效果)。是一门跨平台,面向对象的脚本语言(编写出来的语言不需要编译,通过浏览器的解释就可以运行)

JS引入方式

1.内嵌样式

这样打开页面就会有警告标识

  • 将JS代码放在<script>标签中
  • 在HTML文档中,可以在任意地方,放置任意数量的<sccript>
  • 一般把标签置于<body>元素的底部,可以改善显示速度

2.行内式: 把 JS 写到元素的内部

这样点击按钮就会触发JS操作

3.外联样式:将js代码定义在外部JS文件中,然后引入到HTML页面中

外部文件中,只包含JS代码,不包含<script>标签

  • <script>标签不能自闭合

JS基础语法

1.书写语法

  • 区分大小写
  • 每行结尾分号可有可无
  • 注释:跟java一样
  • 大括号代表代码块

输出语句:

  • 使用windows.alert()写入警告框

  • 使用document.writer()写入HTML输出

  • 使用console.log()写入浏览器控制台

这个是在控制台打印日志,就是在 浏览器 的控制台里面。因为 alert 弹窗的体验非常不好,比如在看剧的时候,突然弹窗,就会暂停所有操作

2.变量

JS中用var关键字(variable的缩写)来声明变量。

定义变量的时候,通过 var 变量名 = 初始值; 来完成变量的定义

就是不管创建的变量是啥类型,此时都是统一使用 var 关键字来表示的。JS 不区分整形浮点型之类的。

特点1:作用域大,是全局变量

特点2:可以重复定义,后定义的会把先定义的覆盖

3.数据类型

JS内置下面这些数据类型

number: 数字. 不区分整数和小数.
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值.
null: 只有唯一的值 null. 表示空值

特殊的数字

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字

字符串类型

字符串 可以通过单引号定义,也可以通过双引号定义。

如果字符串本身就包含了 引号 这个时候,就可以通过 单双引号 灵活搭配的形式,来避免使用转义字符。

布尔类型

与 Java 中的 boolean 类型不同,JS 当中的 布尔类型,会当成 0 和 1 来处理。true 是 1,false 是 0。就像下列代码结果是2

    <script>
        let s = true;
        console.log(s + 1);
    </script>

4.运算符

JS 中的运算符和 Java 用法基本相同,这里拿一些不同的来说。​​​​​​​

比较运算符 - 不同点

JS中比较相等的符号,有两种:== 和 === 。不相等的符号也有两种: != 和 !== 。

== 和 != :只是比较两个变量的值,不比较 两个变量的类型。两个变量能够通过隐式类型转换,转换相同的值,那么,此时就认为 两个变量 是相等的。
=== 和 !== :既要比较 两个变量的值,又要比较两个变量的类型。如果类型不相同,就直接认为两个变量不相等。

JS函数

JS 中的函数(function),在 Java 中叫做 方法(Method)

语法格式

1.

2.

因为JS是弱类型语言,创建函数时,形参不需要写类型 ,返回值也不需要类型,在函数内部直接return即可。

函数表达式

函数可以像一个普通的变量一样,赋值给 其他的变量。同时,可以作为另一个函数的参数,还可以作为另一个函数的返回值。

JS对象

JS对象概念跟Java类似,就是封装了方法跟属性。

Array数组对象

定义数组

访问数组

注意事项:

  • JS中的数组相当于java中集合,数组的长度是可变的,而js是弱类型,所以可以存储 任意类型的数据。

JS中函数作为函数参数时可以使用=>进行简化

arr.forEach(function(e)){
console.log(e);
}
//简化形式
arr.foreach((e)=>{
console.log(e);
})

String字符串对象 

 String对象创建方式:

属性:

方法

自定义对象

js对象中的每个属性和方法,其实都是通过“键值对” 这样的方式来表达的。{} 表示这是一个对象。

  1. 键值对之间,采用 逗号 进行分割。
  2. 键和值之间,采用 冒号 进行分割。

后续就可以通过 对象名 . 来访问了

JSON对象

JSON是通过JavaScript 对象标记法书写的文本。

json就是一种在各个编程语言中流通的数据格式,负责不同编程语言中的数据传递和交互。
类似于:

国际通用语言-英语

中国56个民族不同地区的通用语言-普通话

JSON跟JavaScript中的自定义对象很像,不同的是JSON中所有的KEY要用双引号引起来

JSON对象的定义:

在js中json文本是字符串,所以用单引号引起来。

其中value的数据类型为:

我们可以通过JSON对象的parse方法将JSON对象转为JS对象

通过JSON对象的stringify方法将JS对象转为JSON字符串

BOM对象

BOM对象是指浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装为对象

组成:

window对象:

获取:

属性:

方法:

Location对象:

获取:

属性:

DOM对象

DOM对象是指文档对象模型,他将标记语言的各个组成成分封装为对应的对象

JS通过DOM,就能够对HTML进行操作

Document对象中提供了以下获取Element元素对象的函数

可以通过Element对象属性来进行设置和返回样式,内容,属性等。

例如:

JS事件监听

事件就是浏览器对于 用户操作 行为就行的 统称,大部分是用户操作产生的:

  1. 鼠标在页面上移动,就会产生一个鼠标移动事件
  2. 鼠标点击页面某个位置,就会产生一个鼠标点击事件
  3. 鼠标滚动,也是一个事件

事件监听:JavaScrit可以在事件被侦测到时 执行代码。

事件绑定:

方式一:通过HTML标签中的事件是属性进行绑定

方式二:通过DOM元素属性绑定

常见事件:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【CVPR2024】CricaVPR

【CVPR2024】CricaVPR: Cross-image Correlation-aware Representation Learning for Visual Place Recognition 这个论文提出了一种具有跨图像相关性的鲁棒全局表示方法用于视觉位置识别&#xff08;VPR&#xff0c;Visual Place Recognition &#xff09;任务&#xff0c;命…

Linux系统——iptables超细致解释

目录 内核如何处理数据包流程图 一、表 二、链 三、表、链、规则的关系 四、数据报文进/出节点经过哪些规则 五、NAT——网络地址转换 1.SNAT 2.DNAT 内核如何处理数据包流程图 规则是管理员对数据包制定的一种触发机制&#xff0c;即当数据包达到某种条件&#xff0c;…

【Linux杂货铺】进程控制

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 进程创建 &#x1f4c2; fork函数 &#x1f4c2; 写实拷贝 &#x1f4c2; 创建进程的目的 &#x1f4c2; 创建失败原因 &#x1f4c1; 进程终止 &#x1f4c2; 概念 &#x1f4c2; 场景 &#x1f4c2; 退出方法 …

欧几里得算法-----无聊的军官pro max版本

上篇文章末尾我们说学了欧几里得算法一定给大家更新。 今天它来了&#xff01; 欧几里得算法 欧几里得算法是一种求最小公倍数和最大公因数的算法。 我们看图&#xff1a; 我们把两个数看成长方形&#xff0c;在长方形内不断划分出小正方形&#xff0c;PS&#xff1a;第一个…

一图理解递归-算法通关村

一图理解递归-算法通关村 递归是我们算法进阶的基础&#xff0c;是必须要掌握的内容&#xff0c;只有掌握了递归才算真的会算法。与递归有关的问题有&#xff1a; 与树和二叉树相关的大部问题二分查找相关的问题快速排序、归并排序相关的问题所有回溯的问题所有动态规划的问题 …

scrapy爬虫框架

scrapy爬虫框架 一、scrapy的概念作用和工作流程1、scrapy的概念2、scrapy框架的作用3、scrapy的工作流程&#xff08;重点&#xff09;3.1 回顾之前的爬虫流程3.2 改写上述流程3.3 scrapy的流程3.4 scrapy的三个内置对象3.5 scrapy中每个模块的具体作用 二、scrapy的入门使用1…

【机器学习】无监督学习算法之:主成分分析

主成分分析 1、引言2、主成分分析2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; 快&#xff0c;快。 小鱼&#xff1a;… 啥情况&#xff0c; 你可别乱喊。 小屌丝&#xff1a;额… 我的意思&#xff0c;是你该继…

【附订阅OnlyFans攻略】2024年AI:一个交织着创新与挑战的故事

2024年AI&#xff1a;一个交织着创新与挑战的故事 在2024年的一个清晨&#xff0c;阳光透过智能窗户的调节&#xff0c;柔和地洒在书房里。李华&#xff0c;一位年轻的科技创业者&#xff0c;坐在书桌前&#xff0c;凝视着电脑屏幕上不断跳动的数据和图像。他正在进行一项重要…

Flutter 项目架构技术指南

Flutter 项目架构技术指南 视频 https://www.bilibili.com/video/BV1rx4y127kN/ 前言 原文 https://ducafecat.com/blog/flutter-clean-architecture-guide 探讨Flutter项目代码组织架构的关键方面和建议。了解设计原则SOLID、Clean Architecture&#xff0c;以及架构模式MVC…

qt 实现 轮播图效果,且还有 手动 上一页和下一页 已解决

QT中有 轮播图的需求&#xff0c;按照正常html版本 。只需要配置数组就能搞定&#xff0c;但是c qt版本 应该用什么了。 第一想到的是采用定时器。 // 定时器初始化{m_pTime new QTimer(this);m_pTime->start(4 * 1000);//启动定时器并设置播放时间间隔m_pAutoFlag true;/…

网络层(IP层)

IP协议的本质&#xff1a;有将数据跨网络传输的能力 而用户需要的是将数据从主机A到主机B可靠地跨网络传输 IP的组成&#xff1a;目标网络目标主机 IP由目标网络和目标主机两部分组成&#xff0c;IP报文要进行传输&#xff0c;要先到达目标网络&#xff0c;然后经过路由器转到…

使用阿里云服务器搭建网站教程,超简单10分钟网站上线

使用阿里云服务器快速搭建网站教程&#xff0c;先为云服务器安装宝塔面板&#xff0c;然后在宝塔面板上新建站点&#xff0c;阿里云服务器网aliyunfuwuqi.com以搭建WordPress网站博客为例&#xff0c;来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流…

【算法设计与分析】实现Trie前缀树

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串…

【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计

第一部分&#xff1a;无线网络勘测设计评分标准 序号评分项评分细项评分点说明评分方式分值1点位设计图AP编号AP编号符合“AP型号位置编号”完全匹配5AP型号独立办公室、小型会议室选用WALL AP110完全匹配5员工寝室选用智分&#xff0c;其他用放装完全匹配5其它区域选用放装AP…

睿考网:二建可以跨省考试吗?

二级建造师资格考试允许考生进行跨省报名&#xff0c;但是考试通过后的注册环节&#xff0c;必须在考试所在的省份完成。建议在初始注册过程中选择与报名信息相符的单位&#xff0c;以确保符合当地的职业要求规定。 关于二建的考试地点&#xff0c;考生可以选择在工作单位所在…

鸿蒙Harmony应用开发—ArkTS-@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

上文所述的装饰器仅能观察到第一层的变化&#xff0c;但是在实际应用开发中&#xff0c;应用会根据开发需要&#xff0c;封装自己的数据模型。对于多层嵌套的情况&#xff0c;比如二维数组&#xff0c;或者数组项class&#xff0c;或者class的属性是class&#xff0c;他们的第二…

sr501人体红外传感器

sr501人体红外传感器 文章目录 sr501人体红外传感器1.介绍2.使用方法3.示例代码 持续更新中1.介绍 模块信息介绍来自百问网&#xff0c;仅供学习和参考​ 人体都有恒定的体温&#xff0c;一般在 37 度&#xff0c;所以会发出特定波长 10uM 左右的红外线&#xff0c;被动式红外…

推荐一款制造执行系统(MES)国内比较好的实施厂家

什么是MES 制造执行系统&#xff08;MES&#xff09;是一种用于监控、控制和优化制造过程的软件系统。它通过与企业资源计划&#xff08;ERP&#xff09;系统和自动化系统的集成&#xff0c;实现对生产过程的管理和监测&#xff0c;包括生产计划、生产过程和生产数据。 MES可…

基于python+vue分类信息服务平台移动端的设计与实现flask-django-php-nodejs

分类信息服务平台是在Android操作系统下的应用平台。为防止出现兼容性及稳定性问题&#xff0c;框架选择的是django&#xff0c;Android与后台服务端之间的数据存储主要通过MySQL。用户在使用应用时产生的数据通过 python等语言传递给数据库。通过此方式促进分类信息服务平台信…

高等数学基础篇(数二)之微分方程

微分方程&#xff1a; 一、常微分方程的基本概念 二、一阶微分方程 三、可降阶的高阶方程 四、高阶线性微分方程 目录 一、常微分方程的基本概念 二、一阶微分方程 三、可降阶的高阶方程 四、高阶线性微分方程 一、常微分方程的基本概念 二、一阶微分方程 帮助理解&…