前端入门(一)JavaScript语法、数据类型、运算、函数

news2024/12/23 8:51:34

文章目录

  • 概念
  • JavaScript编写的位置
  • 基本语法
    • 数据类型
      • 变量声明var、let、const
      • undefined与null的区别
      • 字符串类型
      • 数组
      • Map和Set
      • 函数定义与参数传递
  • 变量的作用域let、const
  • 方法的定义与调用
  • 常用内部对象
  • json
  • 对象原型
  • 操作BOM对象
  • 操作DOM对象
  • 表单操作(验证)+MD5算法检验密码
  • jQuery

概念

  • JavaScript是用于浏览器交互操作的脚本语言。
  • 为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同制定了JS的标准命名为ECMAScript

JavaScript编写的位置

  • 写在HTML中的script标签中
  • 写在.js文件中,然后在script标签中使用src引入
  • 写在按钮标签的"onclick"属性中
  • 写在超链接标签"href"属性中

JS既有专门的.js文件,在html文件中使用script标签,添加src属性引入js文件,也可在html文件中直接使用,用script标签,script标签必须成对出现
在这里插入图片描述
三个简单的JavaScript语句:

  • alert(“弹窗信息”):控制浏览器弹出一个警告框
  • document.write():让计算机在页面中输出一个内容,即向body输出一个内容
  • console.log(“控制台输出内容”): 向控制台输出一个内容

js代码也可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护。

在这里插入图片描述

基本语法

  • JS中严格区分大小写
  • JS中每一条语句都以分号(;)结尾,如果不写分号,浏览器会自动添加,但是会消耗一定的系统资源
  • JS中忽略多个空格和换行

JS中只有var类型变量,语句类似于Java。
在浏览器中调试JS需要注意:

在这里插入图片描述Element:元素(html框架)
Console:命令控制台,如console.log(“”/var),控制台输出,相当于print
Sources:源码
Network:抓包
Application:应用,查看缓存等

数据类型

  • number: 数字类型,JS中不分小数和整数
  • string:字符串类型
  • boolean:布尔值类型
  • object:对象类型
  • function:函数类型
  • undefined:未定义类型

变量声明var、let、const

letconst是ES6新增的关键字
var、let、const的区别在于:

  • let和var用来声明变量,而const用来声明常量,但是const声明的引用类型是可以改变的
  • var是函数作用域,let是块作用域
    • var是函数作用域,在整个函数内都是有效的,在for循环内定义一个var变量,实际上在for循环外,函数内,都是可以访问的
    • let和const是块级作用域,只在代码块内有效,例如for循环内定义的,for循环外不可访问。 所谓块级作用域,就是用{}包含的区域,我们常用的有for,while,if等。但是在块级作用域中用let声明变量,那么此变量就有了块级作用域,就必须只有在此块级作用域才能访问此变量。
    • const实际保证的并不是变量的值不可变,而是变量指向的内存地址不可变,有点类似Java中的final,因此,对象不可变,对象的属性是可变的。
    • 如果在全局作用域使用var声明变量,此变量会默认成为window的一个属性
    • var声明的变量有变量提升特性,let声明则没有这个特性,所谓变量提升,就是js引擎把变量的声明部分和函数的声明部分提升到代码开头的行为;变量提升后,会给变量默认赋值为undefined

例如下边代码:

console.log(a)
var a = 1

这里会打印undefined,这是因为变量提升后,实际代码是下边这个样子:

var a
console.log(a)
a = 1

undefined与null的区别

  • undefined表示只定义了变量,并没有给变量赋值
  • null表示数值为空值,给变量赋了null

字符串类型

  • 字符串类型用单引号或者双引号包裹
  • 可以使用转译字符’',或者字符模板${变量名},在字符串中引用字符串
  • JS中的字符串是不可变的

在这里插入图片描述在这里插入图片描述在这里插入图片描述

数组

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

Map和Set

在这里插入图片描述

函数定义与参数传递

在这里插入图片描述
在这里插入图片描述
关键字throw,抛出异常,类似汇报异常报告

在这里插入图片描述
关键字:arguments,一个包含所有函数输入参数的数组

变量的作用域let、const

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
全局变量绑定在window的下边

在这里插入图片描述在这里插入图片描述

方法的定义与调用

在这里插入图片描述
在这里插入图片描述方法.apply(对象1,参数)
apply修饰方法,可以将方法中的this指向为apply的第一个参数,对象名,apply的第二的参数是给方法输入参数赋值

在这里插入图片描述

常用内部对象

typeof()
Date()
注:Date(timestamp)可由时间戳返回时间
在这里插入图片描述

json

json是数据在传输时的存在形式,在抓包中可以看见。
在这里插入图片描述

在这里插入图片描述

对象原型

.proto:指向某个对象作为原型,类似父类对象
其实proto只是指向了原型对象,并不是真正意义上的继承,如果对象指定一个原型对象后,当对象再指定第二个原型时,对象有的第一个原型的属性会丢失,即不再与第一个原型有指向关系。。

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

既然类似Java的继承父类,JS后来引入了class关键字

在这里插入图片描述
使用class定义的对象,可以使用new关键字直接继承这个类的属性

也可用extend,在构建子类时继承父类
在这里插入图片描述

操作BOM对象

浏览器对象模型(Browser Object Model (BOM))允许 JavaScript 与浏览器对话。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

document

在这里插入图片描述
在这里插入图片描述

操作DOM对象

DOM为网页的文档树,全称是Document Object Model,翻译过来是文档对象模型的意思
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

  • 在已有节点下追加节点
    使用append给父级节点追加新节点:
    在这里插入图片描述
  • 创建新的节点
    在这里插入图片描述

表单操作(验证)+MD5算法检验密码

  • 获取表单信息
    在这里插入图片描述
  • 表单提交绑定事件
    onsubmit = function/class
<form action="" method="post" onsubmit="functionName() "></form>

<script>
    function functionName(){
        alert(1)
    }  
  • 按钮绑定事件

onclick = function/class

<p>
    <input type="button" onclick="functionName()">
</p>

在这里插入图片描述
在这里插入图片描述

jQuery

在这里插入图片描述
jQuery CDN加速

jQuery中文文档

jQuery 使用公式:$选择器().action()
/“拿钱给人办事”/

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

年轻人开发谁用默认背景?我直接美图安排上

文章目录 一、你还在用传统的开发界面吗二、年轻人的界面 1.动漫型2.偶像型3.提神型 三、更换背景的操作 第一步第二步第三步 一、你还在用传统的开发界面吗 不比不知道&#xff0c;一比吓一跳&#xff0c;都2023年了&#xff0c;你还在用Pycharm的默认背景写代码吗&#xf…

面试必考精华版Leetcode215. 数组中的第K个最大元素

题目&#xff1a; 代码&#xff08;2023年10月27日首刷看解析&#xff09;&#xff1a; class Solution { public:int findKthLargest(vector<int>& nums, int k) {return quickselect(nums,k);}int quickselect(vector<int>& nums,int k){vector<int&…

【Axure教程】中继器制作树元件

树元件在计算机科学和软件工程中常常用于构建和操作树形数据结构&#xff0c;提供了一种有效的方式来处理和查询具有层次性关系的数据&#xff0c;使开发人员能够更容易地组织和检索信息&#xff0c;用于组织和管理数据&#xff0c;具有各种应用。 那Axure里面也自带了一个树元…

C++中invoke与function的区别

C invoke invoke是C17标准引入的一个函数模板&#xff0c;用来调用可调用对象&#xff08;Callable Object&#xff0c;如函数指针、函数对象、成员函数指针等&#xff09;并返回结果。 invoke提供了统一的调用语法&#xff0c;无论可调用对象的类型是什么&#xff0c;都可以…

工业自动化产品抗干扰笔记

工业自动化产品抗干扰笔记 名词解释&#xff1a; 耦合矢量控制寄生振荡热噪点闪变噪点尖峰噪点反电势集肤效应交流电阻感抗容抗寄生电容共模与差模电场和磁场漏电流浪涌电压电流传输与电压传输各种地线解析 一、干扰来源&#xff1a; 任何一个电磁干扰现象都具有电磁干扰源…

大促期间的窜货低价怎么处理

产品窜货往往会伴随低价&#xff0c;所以监测窜货就是要先监测低价&#xff0c;当然有些产品卖价不低价也窜货&#xff0c;但这些正价或者高价卖的链接对渠道影响并不太大&#xff0c;所以治理低价窜货更重要。 力维网络专业为品牌提供窜货治理&#xff0c;低价监测的需求&…

NodeRed Modbus学习一(配置Modsim32)

新手小白 第一次使用这个玩意 会弹出一个小白框&#xff0c;不用管它。 新建File 下面两张图可以看出值在变化 通过下图可以看出还没有链接 创建连接 好了

在项目管理中,项目经理要控制这三个重要因素:进度、成本、质量

项目管理贯穿项目的整个生命周期&#xff0c;对项目的整个过程进行管理&#xff0c;对项目进行计划、组织、指导和控制的手段。 在项目的生命周期内&#xff0c;进行资源的配置和协调&#xff0c;做出科学决策&#xff0c;从而使项目执行的全过程处于最佳的运行状态&#xff…

04.Animation

参考JusterZhu视频和文档&#xff0c;ppt文档基本全抄 基本没看懂&#xff0c;过几天有时间了研究下 一、Animation 1.什么是Animation&#xff1f; 动画是快速循环播放一系列图像&#xff08;其中每个图像与下一个图像略微不同&#xff09;给人造成的一种幻觉。再回到WPF开发…

微信公众号分销商城源码系统+多商户入驻+互动直播+整点秒杀 带部署教程

今天罗峰来给大家分享一款微信公众号分销商城源码系统。微信公众号的普及以及电商行业的兴起&#xff0c;一种新型的商业模式——微信公众号分销商城应运而生。这种模式通过微信平台&#xff0c;将线上与线下的商业活动完美结合&#xff0c;为企业提供了更广阔的销售渠道。以下…

如何在群晖NAS中搭建WebDav服务,并实现公网访问

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《速学数据结构》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 1. 在群晖套件中心安装WebDav Server套件1.1 安装完成后&#xff0c;启动webdav服务&#xff0c;并勾选HTTP复选…

stable-diffusion-webui环境部署

stable-diffusion-webui环境部署 1. 环境创建2. 安装依赖库3.下载底模4.运行代码5. 报错信息报错1报错2 1. 环境创建 创建虚拟环境 conda create -n env_stable python3.10.0进入虚拟环境 conda activate env_stableclone源码 git clone https://github.com/AUTOMATIC1111/stab…

设备管理软件管理系统

从设备检查到设备保养&#xff0c;再到设备维护&#xff0c;全方位视角掌握设备状态的管理软件。让企业员工可以随时随地的查看设备的各种信息&#xff1a;巡检信息、保养计划、备件更换提醒、维修保养资料等。 1、一物一码&#xff0c;建立设备电子档案“身份证” 精准管控每一…

31 select max/min/avg/sum/count/group_concat 的实现

前言 avg, sum, max, min, count 的相关使用 这里来调试一下 具体的情况, 以及看一下 索引对于相关操作的影响 测试数据表如下 CREATE TABLE tz_test (id int(11) unsigned NOT NULL AUTO_INCREMENT,field1 varchar(12) DEFAULT NULL,field2 varchar(16) DEFAULT NULL,PRI…

漏洞复现--企望制造ERP系统 RCE

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

ADB加密实例

ADB加密实例 1. adb shell加密访问2 adb文件传输命令加密访问 通常我们的MIFI USB端口仅枚举rndis和mass端口&#xff0c;为了便于开发人员、工厂维护人员调试和运营商认证&#xff0c;会预留出可通过SCSI指令切口支持ADB端口&#xff0c;该机制可能会被作为切入点破解侵入系统…

OA管理系统源码

OA管理系统源码 功能介绍 1、个人办公 a、内部邮件&#xff08;写邮件&#xff0c;收邮件&#xff0c;草稿箱&#xff0c;已删除&#xff0c;已发送&#xff09; b、Internet邮件&#xff08;写邮件&#xff0c;收邮件&#xff0c;草稿箱&#xff0c;已发送&#xff0c;已删…

Java实现人脸识别和指纹认证

我们在开发中经常会有人脸识别的需求&#xff0c;今天就实现一个简单的人脸识别&#xff0c;调用的第三方SDK服务 0.先去注册服务 登录网址 虹软视觉开放平台—以免费人脸识别技术为核心的人脸识别算法开放平台 点击进行注册 进入之后新增我的服务 成功之后点击首页人脸识别…

《SpringBoot项目实战》第一篇—接口参数的一些弯弯绕绕

系列文章导航 第一篇—接口参数的一些弯弯绕绕 第二篇—接口用户上下文的设计与实现 第三篇—留下用户调用接口的痕迹 第四篇—接口的权限控制 第五篇—接口发生异常如何统一处理 本文参考项目源码地址&#xff1a;summo-springboot-interface-demo 前言 大家好&#xff01;…

MessageQueue 深入理解Android卷2 学习笔记

MessageQueue类封装了与消息队列有关的操作&#xff0c;一个以消息驱动的系统中&#xff0c;最重要部分就是消息队列和消息处理循环。 MessageQueue的核心代码在native层&#xff0c;可以处理java和native的事件 1.1MessageQueue创建 构造方法&#xff0c;调用nativeInit fra…