JavaScript基础语法

速通回顾一遍

引入方式

一般会把<script>标签置于<body>元素底部,改善显示速度:

  • 内部脚本:<script></script>标签内
  • 外部脚本:<script src=""></script>配置src
    • 外部js文件中,只包含js代码,不包含<script>标签
    • <script>标签不能自闭合

书写语法

  • 区分大小写,同Java
  • 每行结尾的分号可有可无
  • 单行注释和多行注释,同Java
  • 大括号表示代码块,同Java

输出语句

使用window.alert('hello')写入警告框
使用document.write('hello')写入HTML
使用console.log('hello')写入浏览器控制台

变量

JavaScript是一门弱类型语言,可以存放不同类型的值。
var

  • 作用域比较大,全局变量。
  • 可以重复定义。

ES6新增let

  • 变量范围只在所在代码块内有效。
  • 不允许重复声明。

ES6新增const

  • 用来声明一个只读的常量。

数据类型

https://www.w3school.com.cn/js/pro_js_primitivetypes.asp

对变量或值调用 typeof 运算符将返回下列值之一:

  • undefined:如果变量是Undefined类型的
  • boolean:如果变量是Boolean类型的
  • number:如果变量是Number类型的
  • string:如果变量是String类型的
  • object:如果变量是一种引用类型或Null类型的

注释:您也许会问,为什么 typeof 运算符对于 null 值会返回 “Object”。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

image.png

函数

形参不需要类型,JavaScript是弱类型语言。
返回值不需要定义类型,在需要时直接return返回。

JS对象

  • 数组:Array
  • 字符串:String
  • JavaScript对象符号:JSON
  • 浏览器对象模型:BOM
  • 文档对象模型:DOM

Array

image.png

JSON

key必须使用引号并且是双引号标记,value可以是任意数据类型。

{
  "key":value,
  "key":value,
  "key":value
}

json字符串转换为json对象:

  • var obj = JSON.parse(jsonstr);

json对象转换成json字符串:

  • JSON.stringify(obj)

BOM

window对象指的是浏览器窗口对象,是JavaScript的全部对象,所以对于window对象,我们可以直 接使用,并且对于window对象的方法和属性,我们可以省略window。 对于window对象的属性和方法,我们都是采用简写的方式。
我的个人域名跳转到CSDN主页的解决方案,也是通过window对象。

  • window.location.href = "https://edu.csdn.net/me/m0_49303993";

DOM

image.png
HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示:
image.png

常见事件

已经学过一部分vue了,感觉这部分可以直接忽略,用vue@解决。
image.png

MVVM

一个完整的html页面包括了视图和数据,数据是通过请求 从后台获 取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。 正因为这种开发流程,所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想, 即让我们开发者更加关注数据,而非数据绑定到视图这种机械化的操作。

  • Model:数据模型,特指前端中通过请求从后台获取的数据。
  • View:视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据。
  • ViewModel:数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上 。

MVVMPattern.png

  • 其中的Model我们可以通过Ajax来发起请求从后台获取。
  • 对于View部分,我们 将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View。
  • 侧重于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作。

参照

  • https://www.bilibili.com/video/BV1m84y1w7Tb/
  • day02-JavaScript-Vue.pdf

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

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

相关文章

Cacti 前台SQL注入漏洞复现(CVE-2023-39361)

0x01 产品简介 Cacti 是一套基于 PHP,MySQL,SNMP 及 RRDTool 开发的网络流量监测图形分析工具。 0x02 漏洞概述 该漏洞存在于graph_view.php文件中。默认情况下,访客用户无需身份验证即可访问graph_view.php,在启用情况下使用时会导致SQL注入漏洞。 攻击者可能利用此漏洞…

跨平台兼容,无限可能:Apple Remote Desktop for Mac让远程控制更简单

Apple Remote Desktop for Mac是一款远程桌面管理软件&#xff0c;提供了一系列强大的功能&#xff0c;让用户可以轻松地管理和控制远程计算机。以下是该软件的一些主要功能和特点&#xff1a; 实时远程访问和控制&#xff1a;使用Apple Remote Desktop&#xff0c;用户可以在…

文件操作函数总结(Linux)

目录 一、fopen/fclose 二、fgetc/getc/getchar 三、fputc/putc/putchar 四、fgets/gets 五、fputs/puts 六、fread/fwrite 六、open/close 七、ftell/fssek/rewind/fflush 八、sprintf/sscanf/fprintf/fscanf 九、opendir/closedir/readdir 十、stat 十一、动态/静态…

一款开源且不限制大小可以设置过期时间的支持分享的的开源文件共享系统picoshare 部署教程

1.拉取镜像 2.部署 创建目录 mkdir -p /opt/picoshare/data 部署 其中:"somesecretpass"是密码 docker run \--env "PORT4001" \--env "PS_SHARED_SECRETsomesecretpass" \--publish 10005:4001/tcp \--volume "/opt/picoshare/data:…

UG阵列-数字递增

在UG中&#xff0c;我们对一个文本进行阵列&#xff0c;可以得到很多个相同文本&#xff0c;但是如果文本中的数据是递增数列&#xff0c;需要用到表达式 先画一根参考线&#xff0c;标注参考线长度&#xff0c;并记录系统生成对应长度的表达式&#xff0c;例如p15 然后插入一个…

IO、NIO、IO多路复用

IO是什么&#xff1f; IO分为两类&#xff0c;它们之间是有区别的&#xff0c;而且有很大的区别&#xff1b;1. 文件系统的IO 也叫本地io&#xff0c;就是和磁盘或者外围存储设备进行读写操作&#xff0c;外围设备有USB、移动硬盘等等&#xff1b;2. 网络的IO 将数据发送给对方…

Android12 授予APK默认权限

不同于以往的Android版本 可以直接在此处设置: Android/frameworks/base/services/core/java/com/android/server/pm/permission/DefaultPermissionGrantPolicy.java private void grantDefaultSystemHandlerPermissions(PackageManagerWrapper pm, int userId) {Log.i(TAG, &q…

flutter 环境搭建异常记录

flutter 环境搭建异常记录 1.执行flutter doctor自检报错 排查Android studio里配置的sdk是哪个 SDK Platforms选中 8.0 SDkTools也只勾选8.0 2.bash_profile 文件配置 没有的话 在根目录新建 export PUB_HOSTED_URLhttps://pub.flutter-io.cn export FLUTTER_STORAGE_…

【Npm】一文了解透彻package.json里的script字段以及相关知识

本文会从介绍npm run的原理、script字段作用、node_modules/.bin文件夹是什么 一、什么是npm script 在package.json里面定义的scripts字段就是&#xff0c;它的每一个属性都对于一段脚本。 {// ..."scripts": {"build": "node build.js"} }其…

6.3.5编辑视频

6.3.5编辑视频 除了上面的功能外&#xff0c;Camtasia4还能进行简单的视频编辑工作&#xff0c;如媒体的剪辑、连接、画中画等。 下面我们就利用Camtasia4的强大功能来实现一个画中画效果&#xff0c;在具体操作之前&#xff0c;需要准备好两个视频文件&#xff0c;一个作为主…

docker:Java通过nginx获取客户端的真实ip地址

问题现象 我们的平台使用Spring Cloud微服务架构&#xff0c;使用Spring Boot构建Java服务&#xff0c;使用google的jib插件打成docker镜像包我们使用docker虚拟化部署&#xff0c;使用docker-compose统一管理所有服务&#xff0c;包括Java服务和nginx等组件我们前后端分离&am…

蓝天采集器,功能逆天的网站数据抓取神器,轻松助你成为采集达人,附带搭建配置文档

源码介绍 蓝天采集器是一款专为web服务器打造的数据采集神器。与市面上常见的桌面端采集工具&#xff08;如火车头等&#xff09;相比&#xff0c;蓝天采集器在易用性、上手成本和灵活性方面更胜一筹。它部署简便&#xff0c;无需复杂的设置&#xff0c;即可迅速融入您的web服…

路由器初始化配置、功能配置

实验环境 拓扑图 Ip规划表&#xff08;各组使用自己的IP规划表&#xff09; 部门 主机数量 网络地址 子网掩码 网关 可用ip Vlan 市场部 38 192.168.131.0 255.255.255.0 192.168.131.1 2-254 11 研发部 53 192.168.132.0 255.255.255.0 192.168.132.1 2-2…

浅析CXL P2P DMA加速数据传输拥堵问题的解决方案

接上文&#xff1a;CXL P2P DMA加速数据传输的拥堵问题 为了改善这个问题&#xff0c;CXL 3.0引入了Unordered-IO和Back Invalidate Snoop新机制&#xff0c;允许更直接和高效点对点数据传输&#xff0c;以减轻上游CXL通道的压力并减少延迟。 (1)Unordered-IO (UIO) 在传统PCI…

Java如何做到无感知刷新token含示例代码(值得珍藏)

1. 前言 在系统页面进行业务操作时&#xff0c;有时会突然遇到应用闪退&#xff0c;并被重定向至登录页面&#xff0c;要求重新登录。此问题的出现&#xff0c;通常与系统中用于存储用户ID和token信息的Redis缓存有关。具体来说&#xff0c;这可能是由于token过期所导致的身份…

shell编程-3

文章目录 shell学习第三天while 循环第一天的小游戏练习: 编写抽同学回答问题的脚本要想让这个脚本永久有效如何知道两个文件里的内存一样&#xff1f;如何判断某个人已经抽过了 文本处理相关命令seqxargsuniqsorttrcutawkpastesplitcoljoin小结一下作业 小知识点写脚本的流程怎…

【蓝桥杯EDA设计与开发】资料汇总以及立创EDA及PCB相关技术资料汇总(持续更新)

[18/01/2024]&#xff1a;目前为了准备蓝桥杯做一些资料贴&#xff0c;于是写下这一篇博客。 各种资料均来源于网络以及部分书籍、手册等文档&#xff0c;参考不保证其准确性。 如果在准备蓝桥杯&#xff0c;可与我私信共同学习&#xff01;&#xff01;&#xff01;&#xf…

【人工智能课程】计算机科学博士作业一

【人工智能课程】计算机科学博士作业一 1 任务要求 模型拟合&#xff1a;用深度神经网络拟合一个回归模型。从各种角度对其改进&#xff0c;评价指标为MSE。掌握技巧&#xff1a; 熟悉并掌握深度学习模型训练的基本技巧。提高PyTorch的使用熟练度。掌握改进深度学习的方法。 …

sc.pl.umap 画feature plot

今天有时间尝试测试了这个scanpy的feature plot,其实很简单&#xff0c;就是使用 sc.pl.umap(adata,color"gene name"), 但是这个地方就有一个问题&#xff0c;这个画出来的值是原始的基因值还是scale之后的&#xff0c;这个我得搞清楚 首先看使用例子&#xff0c;参…

Linux shell编程学习笔记40:stat命令

程序员必备的面试技巧 “程序员必备的面试技巧&#xff0c;就像是编写一段完美的代码一样重要。在面试战场上&#xff0c;我们需要像忍者一样灵活&#xff0c;像侦探一样聪明&#xff0c;还要像无敌铁金刚一样坚定。只有掌握了这些技巧&#xff0c;我们才能在面试的舞台上闪耀…