Web前端-JS

news2024/12/28 17:41:07

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.coloradmin.cn/o/1540929.html

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

相关文章

毕业答辩PPT模板涵盖多种风格,包括母版的设计及主题色的设计

毕业答辩PPT模板涵盖多种风格&#xff0c;包括母版的设计及主题色的设计 前言一两个页面的展示研究内容主题概述主题内容一&#xff1a;主要面向三点研究内容主题内容二&#xff1a;主要面向两点研究内容主题内容三&#xff1a;主要面向包含应用开发的研究 前言 之前做了有关开…

Oracle Data Guard部署

Oracle的主备DG搭建 1. 修改主机名,同步时间 主库IP&#xff1a;192.168.100.137 备库IP&#xff1a;192.168.100.138配置主机名(主库) Hostname zygjpdb vim /etc/hosts 192.168.100.137 zygjpdb 192.168.100.138 zygjsdbvim /etc/sysconfig/network HOSTNAMEzygjpdb ------…

电脑如何关闭自启动应用?cmd一招解决问题

很多小伙伴说电脑刚开机就卡的和定格动画似的&#xff0c;cmd一招解决问题&#xff1a; CtrlR打开cmd,输入&#xff1a;msconfig 进入到这个界面&#xff1a; 点击启动&#xff1a; 打开任务管理器&#xff0c;禁用不要的自启动应用就ok了

机器学习算法那些事 | 使用Transformer模型进行时间序列预测实战

本文来源公众号“机器学习算法那些事”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;使用Transformer模型进行时间序列预测实战 时间序列预测是一个经久不衰的主题&#xff0c;受自然语言处理领域的成功启发&#xff0c;transfo…

C语言分支和循环

目录 一.分支 一.if 二.if else 三.if else嵌套 四.else if 五.switch语句 二.循环 一.while (do while&#xff09;break : 二.for函数&#xff1a; 三.goto语句: 四.猜数字: 一.分支 一.if if要条件为真才执行为假不执行而且if只能执行后面第一条如果要执行多条就…

Java基础之关键字instanceof(七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

【C语言】linux内核pci_iomap

一、pci_iomap /** pci_iomap 是一个用于映射 PCI 设备的 BAR&#xff08;Base Address Register&#xff0c;基地址寄存器&#xff09;的函数。* 此函数返回指向内存映射 IO 的指针&#xff0c;用于直接访问 PCI 设备的内存或 I/O 空间。* * 参数:* dev - 指向pci_dev结构的指…

Android Jetpack Compose基础之组件的帧渲染

Android Jetpack Compose基础之组件的帧渲染 组合布局LayoutModifier示例 LayoutCompsable示例 绘制CanvasDrawModifierDrawModifier-drawWithContent示例 DrawModifier-drawBehind源码示例 DrawModifier-drawWithCache源码示例 拓展Modifier.graphicsLayer Android View 系统&…

0基础 三个月掌握C语言(13)-下

数据在内存中的存储 浮点数在内存中的存储 常见的浮点数&#xff1a;3.141592、1E10等 浮点数家族包括&#xff1a;float、double、long double类型 浮点数表示的范围&#xff1a;在float.h中定义 练习 关于&#xff08;float*)&n&#xff1a; &n&#xff1a;这是一…

基于SSM的宠物领养平台的设计与实现

基于SSM的宠物领养平台的设计与实现 获取源码——》公主号&#xff1a;计算机专业毕设大全 获取源码——》公主号&#xff1a;计算机专业毕设大全

Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。

demo案例 Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。下面是它的详细讲解&#xff1a; 构造函数: OrbitControls(object: Camera, domElement?: HTMLElement)object&#xff1a;THREE.Camera 实例&#xff0c;控制器将围绕…

LibFuzzer 基本使用

文章目录 前言环境搭建基础使用编写 fuzz target编译链接demo 测试 && 输出日志分析心脏滴血漏洞测试 提高代码覆盖率和测试速度指定种子语料库多核并行 Fuzz使用字典 参考 前言 相较于 AFL 来说&#xff0c;LibFuzzer 在单个进程内完成模糊测试&#xff0c;以此来避免…

Nacos部署(一)Linux部署Nacos2.3.x单机环境

&#x1f60a; 作者&#xff1a; 一恍过去 &#x1f496; 主页&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社区&#xff1a; Java技术栈交流 &#x1f389; 主题&#xff1a; Nacos部署&#xff08;一&#xff09;Linux部署Nacos2.3.x单机环境 ⏱️…

【NC20313】仪仗队

题目 仪仗队 欧拉函数&#xff0c;找规律 思路 这好像是一道非常简单的找规律问题&#xff0c;所以你从 1 1 1 开始枚举&#xff0c;计算出当 N i Ni Ni 时的结果 a n s i ans_i ansi​&#xff0c;所以你得出了以下结果&#xff1a; Nans10233549513621725837 令人失望…

招聘自媒体编辑岗位的人才测评方案

人才测评工具在招聘入职的方案&#xff0c;在线工具网根据自媒体岗位的特性和需求来分析&#xff0c;并制定自媒体主编的测评方案。 自媒体作为互联网时代的产物&#xff0c;自然也为我们带来了很多的福利&#xff0c;例如&#xff1a;海量的信息、快捷的传媒方式&#xff0c;那…

学习次模函数-第2章 定义

纵观本专著&#xff0c;我们认为及其幂集&#xff08;即&#xff0c; 所有子集的集合&#xff09;&#xff0c;其基数为。我们也考虑一个实值集函数&#xff0c;使得。 与凸函数的一般约定相反&#xff08;见附录A&#xff09;&#xff0c;我们不允许函数有无穷大的值。 次模分…

一文搞懂数据链路层

数据链路层 1. 简介2. MAC3. 以太网 1. 简介 &#xff08;1&#xff09;概念 链路(link)是一条无源的点到点的物理线路段&#xff0c;中间没有任何其他的交换结点。 数据链路(data link) 除了物理线路&#xff08;双绞线电缆、同轴电缆、光线等介质&#xff09;外&#xff0…

Java获取方法参数名称方案||SpringBoot配置顺序注解

一: Java获取方法参数名称的方法 普盲: getDeclaredMethods与getMethods的的区别 1、getMethods返回一个包含某些 Method 对象的数组&#xff0c;这些对象反映此 Class 对象所表示的类或接口的公共 member 方法。 2、getDeclaredMethods返回 Method 对象的一个数组&#xff0c…

STM32+ESP8266水墨屏天气时钟:简易多级菜单(数组查表法)

项目背景 本次的水墨屏幕项目需要做一个多级菜单的显示&#xff0c;所以写出来一起学习&#xff0c;本篇文章不单单适合于水墨屏&#xff0c;像0.96OLED屏幕也适用&#xff0c;区别就是修改显示函数。 设计思路 多级菜单的实现&#xff0c;一般有两种实现的方法 1.通过双向…

HTTPS协议的工作原理:保护网络通信的安全盾牌

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