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元素属性绑定

常见事件:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关系型数据库mysql(2)SQL语句

目录 一.SQL语句简介 1.1SQL语言 1.2SQL语句分类 1.3SQL分类 1.4SQL 语言规范 二.数据库基本操作 2.1查看数据库中的库信息 2.2查看数据库中的表信息 数据库内查看 数据库外查看 2.3显示数据库的结构&#xff08;字段&#xff09; ​编辑 2.4 字段属性 2.5常见的数…

解决方案:如何安装neo4j软件

文章目录 一、安装JDK二、安装neo4j 一、安装JDK 第一步先安装JDK&#xff0c;因为neo4j环境需要JDK&#xff0c;过程比较多&#xff0c;截图如下&#xff1a; 安装JDK网址 https://www.oracle.com/java/technologies/downloads winR&#xff0c;输入cmd&#xff0c;再输入j…

Linux V4L2 应用编程

V4L2&#xff1a;Video4Linux2&#xff0c;是 Linux 内核中的一个框架&#xff0c;提供了一套用于视频设备驱动程序开发的 API。它是一个开放的、通用的、模块化的视频设备驱动程序框架&#xff0c;允许 Linux 操作系统和应用程序与各种视频设备&#xff08;如摄像头、视频采集…

外推蜘蛛池的优势及优势?

源码介绍&#xff1a; 适用使用范围: 外推蜘蛛池、站群 演示地址&#xff1a;以截图为准 运行环境&#xff1a;php 其余注释&#xff1a;什么是蜘蛛池&#xff1f; 蜘蛛池是一个利用大平台权重来获取百度收录和排名的程序。 程序员通常称其为“蜘蛛池”。 这是一个可以快速…

Spring-声明式事务实例(有详细注释)

前提知识 Spring-IOC容器注解方式使用https://blog.csdn.net/m0_61160520/article/details/136784799?spm1001.2014.3001.5501切点表达式https://blog.csdn.net/m0_61160520/article/details/136782885?spm1001.2014.3001.5501 案例 1.创建项目 2.导入依赖 <dependen…

Cache缓存:HTTP缓存策略解析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

select , poll, epoll思维导图

目录 1. 总的框架结构 2. select 3. poll 4. epoll 1. 总的框架结构 2. select

SpringCloud-Gateway服务网关

一、网关介绍 1. 为什么需要网关 Gateway网关是我们服务的守门神&#xff0c;所有微服务的统一入口。 网关的核心功能特性&#xff1a; 请求路由 权限控制 限流 架构图&#xff1a; 权限控制&#xff1a;网关作为微服务入口&#xff0c;需要校验用户是是否有请求资格&am…

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

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

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

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

蓝桥杯单片机快速开发笔记——PCF8591的DAC模拟电压输出

一、原理分析 PCF8591电压信号探测器&#xff1a;http://t.csdnimg.cn/R38tC IIC原理&#xff1a;http://t.csdnimg.cn/v4dSv IIC指令&#xff1a;http://t.csdnimg.cn/RY6yi HC573/HC138&#xff1a;http://t.csdnimg.cn/W0a0U 数码管&#xff1a;http://t.csdnimg.cn/kfm9Y 独…

鸿蒙OpenHarmony开发实战:【MiniCanvas】

介绍 基于OpenHarmony的Cavas组件封装了一版极简操作的MiniCanvas&#xff0c;屏蔽了原有Canvas内部复杂的调用流程&#xff0c;支持一个API就可以实现相应的绘制能力&#xff0c;该库还在继续完善中&#xff0c;也欢迎PR。 使用说明 添加MiniCanvas依赖 在项目entry目录执行…

Docker学习笔记 - 常用命令

目录 基本概念常用命令使用docker compose启动脚本创建自己的image Docker命令文档 1. 下载一个image 从hub.docker.com下载一个image。 docker pull [image name]下载时指定image的tag。 docker pull [image name]:<tag>举例&#xff0c;下载postgre的tag为alpine…

CPP容器vector和list,priority_queue定义比较器

#include <iostream> #include <bits/stdc.h> using namespace std; struct VecCmp{bool operator()(int& a,int& b){return a>b;/*** 对于vector和list容器&#xff0c;这里写了&#xff1e;就是从大到小* 对于priority_queue容器&#xff0c;这里写…

配置java8和java11以及输入version命令没反应问题

电脑重置重新安装java8和java11记录一下供自己观看 安装过程掠过我自己能看懂就行 需要记录一下 因为JDK11以后Oracle把JRE集成到了JDK中&#xff0c;在安装JDK11及更高版本的JDK时&#xff0c;默认是不会自动安装JRE的。在jdk11的安装目录下打开命令行窗口或者shift鼠标右键…

婚恋小程序开发的资质需要哪些?维护成本高吗?

随着互联网的高速发展&#xff0c;人们的生活方式也在发生着翻天覆地的变化。在这个变化中&#xff0c;婚恋市场也逐渐走向了线上&#xff0c;婚恋小程序应运而生。那么&#xff0c;开发一款婚恋小程序需要哪些资质呢&#xff1f;维护成本又高不高呢&#xff1f;本文将从这两个…

2024年新算法!PCA+CPO+K-means聚类,冠豪猪优化器(CPO)优化K-means,适合学习,也适合发paper

2024年新算法&#xff01;PCACPOK-means聚类&#xff0c;冠豪猪优化器&#xff08;CPO)优化K-means&#xff0c;适合学习&#xff0c;也适合发paper。 一、冠豪猪优化器 摘要&#xff1a;受冠豪猪(crest Porcupine, CP)的各种防御行为启发&#xff0c;提出了一种新的基于自然…

【C语言】结构体与位段

一、前言 我们之前学习过定义一个整型类型的变量又或者定义一个浮点型类型的变量...&#xff0c;这些变量可以描述一个整数又或者描述一个小数...&#xff0c;可无论是整数还是小数...&#xff0c;它们也只是简单对象。如果我们想要描述像一本书&#xff0c;一个人这种复杂对象…

【算法与数据结构】深入二叉树实现超详解

文章目录 &#x1f4dd;前言&#x1f320; 接口函数✏️ 实现函数&#x1f309;创建树的新节点&#x1f320;通过前序遍历的数组构建二叉树&#x1f309;包装通过前序遍历的数组构建二叉树&#x1f320;二叉树的销毁&#x1f320;层次遍历&#x1f320;第一种实现&#xff1a;不…

Android: Gradle 命令

一、查看整个项目依赖传递关系 x.x.x (*) 该依赖已经有了&#xff0c;将不再重复依赖。x.x.x -> x.x.x 该依赖的版本被箭头所指的版本代替。x.x.x -> x.x.x(*) 该依赖的版本被箭头所指的版本代替&#xff0c;并且该依赖已经有了&#xff0c;不再重复依赖。 1. gradlew ap…