前段三剑客之JavaScript-02

目录

简介

核心

函数

字符串对象

事件

运算符和控制语句

DOM

正则表达式

BOM

JSON


简介

JavaScript由JavaScript语法,DOM和BOM组成

JS中提供了一些输入输出语句:

        alert(); //浏览器弹出警示框

        console.log(); //控制台打印

        prompt(); //浏览器弹出输入框

        var 变量名 = 值; //可以赋任何值,弱类型语言

        只声明,不赋值:默认赋值 undefined

        不声明,不赋值:报错

        不声明,只赋值:可以用

typeof运算的语法格式:

        typeof 变量名

typeof运算符的运算结果是以下六个字符串之一:

        undefined string boolean object number function

全局变量:浏览器打开时声明,浏览器关闭时销毁

注意:

        省略var声明的变量,无论是在函数体内还是函数体外定义的都是全局变量

        声明局部变量,一定要用var语句

转换为字符串

        num.toString();

        String(num);

        num + "字符串"

转换为数字

        parseInt(str);

        parseFloat(str);

        Number(str);

null NaN undefined 这三个值有什么区别?

null:object

NaN:number

undefined:undefined

但是null和undefined可以等同

核心

函数的定义方式:

        function 函数名(形参){

                函数体;

        }

        函数名 = function(形参){

                函数体;

        }

        JS中的函数不需要指定返回值类型,返回什么类型都行

        可以作为属性值调用,οnclick="函数"

JS定义类的语法:

        function 类名(形参){

                this.属性 = 属性值,

                this.方法 = function(){}

        }

        var 类名 = function(形参){}

        var 类名 = {}

        可以通过prototype这个属性来给类动态扩展属性以及函数

        类名.prototype.方法 = function(){}

创建数组的两种方式:

        var 数组名 = new Array();

        var 数组名 = [];

函数

obj.getFullYear();
obj.getMonth();
obj.getDate();
obj.getDay();
obj.getHours();
obj.getMinutes();
obj.getSeconds();

字符串对象

concat(str1,str2,str3)
substr(start,length)
slice(start,end)
substring(start,end)
toUpperCase()
toLowerCase()

事件

任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。

onXXX这个事件句柄出现在一个标签的属性位置上。

注册事件的两种方式:

        1、直接在标签中使用事件句柄

        2、先获取这个按钮对象,给按钮对象的onclick属性赋值

运算符和控制语句

void运算符:

        语法:void(表达式)

        运算原理:执行表达式,但不返回任何结果

                javascript:void(0)

即保留超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转

<a href="javascript:void(0)"> </a>

数组定义语法:

        var 数组名 = [];

        for..in

        for(var i in array){

                alert(i);

        }

        with

        with(对象名){

                alert(属性);

        }

DOM

根据id名获取:document.getElementById("id名");

根据标签名获取:document.getElementsByTagName("标签名");

根据类名获取:document.getElementsByClassName("类名");

根据选择器获取:document.querySelector("选择器");

根据选择器获取:document.querySelectorAll("选择器");

获取body元素:document.body

获取html元素:document.documentElement;

innerText和innerHTML属性有什么区别?

相同点:都是设置元素内部的内容

不同点:innerText不识别html标签;innerHTML识别html标签

关于dom操作,主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建:

        1、document.write

        2、innerHTML

        3、createElement

增加:

        1、appendChild

        2、insertBefore

删除:

        1、removeChild

修改:

        1、修改元素属性:src、href、title

        2、修改普通元素内容:innerHTML、innerText

        3、修改表单元素:value、type、disabled

        4、修改元素样式:style、className

查询:

        1、DOM提供的API方法:getElementById、getElementsByTagName

        2、querySelector、querySelectorAll

        3、利用节点操作获取元素:parentNode、children、previousElementSibling、nextElementSibling

属性操作:

        1、setAttribute

        2、getAttribute

        3、removeAttribute

正则表达式

什么是正则表达式,有什么用?

        Regular Expression

        正则表达式主要用在字符串格式匹配方面

BOM

BOM编程中,window对象是顶级对象,代表浏览器窗口

window.open()

window.close()

window.alert()

window.confirm()

window.history.back()

window.history.go(-1)

window.history.go(1)

以上相当于网页左上角的前进和后退箭头

window.localtion.href //当前页面的地址

document.location //也是地址

总结:有哪些方法可以通过浏览器往服务器发请求?

        1、表单form的提交

        2、超链接

        3、document.location

        4、window.location

        5、window.open("url")

        6、直接在浏览器地址栏上输入url

以上所有的请求方式都可以携带数据给服务器,只有通过表单提交的数据才是动态的。

JSON

什么是JSON,有什么用?

        JavaScript Object Notation

        主要的作用是:一种标准的数据交换格式,目前非常流行

JSON是一种标准的轻量级的数据交换格式。特点是:体积小,易解析

在实际的开发中有两种数据交换格式,使用最多,其一是JSON,另一个是XML。

        XML体积较大,解析麻烦,语法严谨

        通常银行相关的系统站之间进行数据交换的话使用XML

HTML的XML有一个父亲:SGML

HTML主要做页面展示:语法松散

XML主要做数据存储和数据描述的:语法相当严格

//创建JSON对象
var student = {no : '01',name : '张三',age : 20,sex : '男'
}
//遍历JSON对象
for(var s in student){alert(student[s]);
}//一个复杂的json对象
var jsonData = {name : '张三',   age : 20,address : {city : '北京',street : '朝阳区'},interest : ['smoke', 'drink']
}

Java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的字符串,将json格式的字符串响应到浏览器也就是说java响应到浏览器上的仅仅是一个JSON格式的字符串,还不是一个json对象,可以使用eval函数,将json格式的字符串拼接成json对象。

eval函数的作用是:将字符当作一段JS代码解析并执行

var str = "{name : 'jack', age : 22}";window.eval("var json2 = " + str);
alert(json2.name);

在JS当中: []和{}有什么区别?

        []是数组

        {}是JSON

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

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

相关文章

Qiskit:量子计算模拟器

参考文献&#xff1a; IBM Qiskit 官网Qiskit DocumentationQiskit Benchpress packageQiskit Algorithms package量子计算&#xff1a;基本概念常见的几类矩阵&#xff08;正交矩阵、酉矩阵、正规矩阵等&#xff09;Qiskit 安装指南-博客园使用Python实现量子电路模拟&#x…

【Elasticsearch】Elasticsearch 核心技术(二):映射

Elasticsearch 核心技术&#xff08;二&#xff09;&#xff1a;映射 1.什么是映射&#xff08;Mapping&#xff09;1.1 元字段&#xff08;Meta-Fields&#xff09;1.2 数据类型 vs 映射类型1.2.1 数据类型1.2.2 映射类型 2.实际运用案例案例 1&#xff1a;电商产品索引映射案…

serv00 ssh登录保活脚本-邮件通知版

适用于自己有服务器情况&#xff0c;ssh定时登录到serv00&#xff0c;并在登录成功后发送邮件通知 msmtp 和 mutt安装 需要安装msmtp 和 mutt这两个邮件客户端并配置&#xff0c;参考如下文章前几步是讲配置这俩客户端的&#xff0c;很简单&#xff0c;不再赘述 用Shell脚本实…

前端 Electron 桌面应用学习笔记

前端 Electron 桌面应用学习笔记 介绍Electron是什么?为什么选择Electron?创建你的第一个桌面应用程序启动项目运行结果截图打开调试面板方法生命周期函数常用配置配置窗口标题配置小图标隐藏菜单栏关闭调试面板是否可以使用Node.js隐藏 Electron 标题、小图标和菜单栏获取窗…

LeetCode - 94. 二叉树的中序遍历

题目 94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09; 什么是中序遍历 二叉树的中序遍历是按照"左-根-右"的顺序访问二叉树中的所有节点。 具体过程&#xff1a; 先遍历左子树&#xff08;递归&#xff09;然后访问根节点最后遍历右子树&#xff…

PyTorch——搭建小实战和Sequential的使用(7)

import torch from torch import nn from torch.nn import Conv2d, MaxPool2d, Flatten, Linearclass TY(nn.Module):def __init__(self):"""初始化TY卷积神经网络模型模型结构&#xff1a;3层卷积池化&#xff0c;2层全连接设计目标&#xff1a;处理32x32像素的…

C#、VB.net——如何设置窗体应用程序的外边框不可拉伸

以Visual studio 2015为例&#xff0c;具体操作如下&#xff1a; 1、将窗体的“FormBorderStyle”属性值修改为“FixedSingle”&#xff1a; 2、点击“格式”——“锁定控件”&#xff1a; 这样生成的程序边框即可固定住&#xff0c;无法拉伸。

深入了解NIO的优化实现原理

网络 I/O 模型优化 网络通信中&#xff0c;最底层的就是内核中的网络 I/O 模型了。随着技术的发展&#xff0c;操作系统内核的网络模型衍生出了五种 I/O 模型&#xff0c;《UNIX 网络编程》一书将这五种 I/O 模型分为阻塞式 I/O、非阻塞式 I/O、I/O 复用、信号驱动式 I/O 和异步…

【前端】vue3性能优化方案

以下是Vue 3性能优化的系统性方案&#xff0c;结合核心优化策略与实用技巧&#xff0c;覆盖渲染、响应式、加载、代码等多个维度&#xff1a; ⚙️ 一、渲染优化 精准控制渲染范围 v-if vs v-show&#xff1a; v-if&#xff1a;条件为假时销毁DOM&#xff0c;适合低频切换场景&…

在MATLAB中使用自定义的ROS2消息

简明结论&#xff1a; 无论ROS2节点和MATLAB运行在哪&#xff0c;MATLAB本机都必须拥有自定义消息源码并本地用ros2genmsg生成&#xff0c;才能在Simulink里订阅这些消息。只要你想让MATLAB或Simulink能识别自定义消息&#xff0c;必须把消息包源码(.msg等)拷到本机指定目录&a…

spring重试机制

数据库死锁处理与重试机制实现指南 1. 业务场景 1.1 问题现象 高并发批量数据处理时频繁出现数据库死锁主要发生在"先删除历史数据&#xff0c;再重新计算"的业务流程中原有逐条处理方式&#xff1a;list.forEach(item -> { delete(); calculate(); }) 1.2 死…

QEMU源码全解析 —— 块设备虚拟化(24)

接前一篇文章:QEMU源码全解析 —— 块设备虚拟化(23) 本文内容参考: 《趣谈Linux操作系统》 —— 刘超,极客时间 《QEMU/KVM源码解析与应用》 —— 李强,机械工业出版社 特此致谢! QEMU写入一个文件的完整过程 前边用了十来篇文章的篇幅,解析了QEMU启动过程中的存储…

java中static学习笔记

较重要知识点 static修饰的变量是共享的在类加载时创建可以不通过实例来访问静态方法只能访问静态的成员和方法&#xff1b;而非静态的可以访问静态的和非静态的。静态方法一般用在通用的方法&#xff0c;这样方便调用&#xff0c;不然一个通用的方法每一次调用都要创建实例&a…

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…

spring中的@KafkaListener 注解详解

KafkaListener 是 Spring Kafka 提供的一个核心注解&#xff0c;用于标记一个方法作为 Kafka 消息的消费者。下面是对该注解的详细解析&#xff1a; 基本用法 KafkaListener(topics "myTopic", groupId "myGroup") public void listen(String message)…

多区域协同的异地多活AI推理服务架构

&#x1f310;多区域协同的异地多活AI推理服务架构 #mermaid-svg-TTnpRKKC7k3twxhE {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TTnpRKKC7k3twxhE .error-icon{fill:#552222;}#mermaid-svg-TTnpRKKC7k3twxhE .er…

极客时间:在 Google Colab 上尝试 Prefix Tuning

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Android设备推送traceroute命令进行网络诊断

文章目录 工作原理下载traceroute for android推送到安卓设备执行traceroutetraceroute www.baidu.com Traceroute&#xff08;追踪路由&#xff09; 是一个用于网络诊断的工具&#xff0c;主要用于追踪数据包从源主机到目标主机所经过的路由路径&#xff0c;以及每一跳&#x…

【Linux应用】Linux系统日志上报服务,以及thttpd的配置、发送函数

【Linux应用】Linux系统日志上报服务&#xff0c;以及thttpd的配置、发送函数 文章目录 thttpd服务安装thttpd配置thttpd服务thttpd函数日志效果和文件附录&#xff1a;开发板快速上手&#xff1a;镜像烧录、串口shell、外设挂载、WiFi配置、SSH连接、文件交互&#xff08;RADX…

Linux 内核内存管理子系统全面解析与体系构建

一、前言: 为什么内存管理是核心知识 内存管理是 Linux 内核最核心也最复杂的子系统之一&#xff0c;其作用包括&#xff1a; 为软件提供独立的虚拟内存空间&#xff0c;实现安全隔离分配/回收物理内存资源&#xff0c;维持系统稳定支持不同类型的内存分配器&#xff0c;最优…