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

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

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

相关文章

数据库-数据库分类

数据库可以分为关系型数据库和非关系型数据库&#xff0c;常见的数据库如下 关系型数据库 关系型数据库是一种采用关系模型来组织数据的数据库&#xff0c;它以行和列的形式存储数据&#xff0c;以便于用户理解。关系型数据库中的数据以二维表的形式组织&#xff0c;被称为表…

MSSQL-识别扩展extended event(扩展事件)中的时间单位

经常使用sqlserver extended event(扩展事件)&#xff0c;但是总是忘记扩展事件使用的时间单位&#xff0c;不确定它们是 秒、毫秒、还是微秒&#xff1f; 以下下代码能够从 相关DMV中提取description字段内容来识别时间单位&#xff1a; SELECT [p].[name] [package_name],[o…

mac PyCharm 上传文件到远程服务器+远程服务器下载到本地

1 部署配置 选择SFTP name&#xff1a;test6 输入ssh账号和密码。保存密码和30s心跳。 2 目录映射 Local path&#xff08;本地mac机器&#xff09;&#xff1a;/Users/clevercode/PycharmProjects/test6 Root path&#xff08;远程服务机器&#xff09;&#xff1a;/home/…

k8s---ingress对外服务(traefik)

目录 ingress的证书访问 traefik traefik的部署方式&#xff1a; deamonset deployment nginx-ingress与traefix-ingress相比较 nginx-ingress-controller ui访问 deployment部署 ingress的证书访问 ingress实现https代理访问: 需要证书和密钥 创建证书 密钥 secre…

汽车科技迎来新纪元!奔驰、宝马、谷歌、亚马逊、高通的下一代布局!

不久的将来&#xff0c;你将能够直接通过汽车支付。为了减少支付服务的复杂性&#xff0c;高通正在与摩根大通合作设计一款车载钱包&#xff0c;简化支付体验。这将使驾驶员能够直接通过汽车支付流媒体内容、电动车充电、停车或得来速餐食物。 下一代智能车会是什么样子&#…

KubeSphere平台使用

KubeSphere官网地址&#xff1a;https://kubesphere.io/zh/ KubeKey一键部署K8S集群&#xff1a;https://kubesphere.io/zh/docs/v3.4/installing-on-linux/introduction/multioverview/ 一台master node&#xff08;初始化主节点&#xff09;、两台 work node&#xff08; joi…

【分布式监控】zabbix与grafana连接

1.在zabbix- server服务端安装grafana&#xff0c;并启动服务 先在官网下载软件 https://grafana.com/grafana/download/9.4.7?editionenterprise&pggraf&plcmtdeploy-box-1#可以翻译成中文介绍&#xff0c;很详细的教程 yum install -y https://dl.grafana.com/ent…

Git 基本命令与操作流

记录 Git 中的基本命令和创建仓库、提交文件、删除文件等方面的操作 Git 基本命令 git status&#xff1a;查看状态 nothing to commit, working directory clean&#xff1a;所有已跟踪文件在上次提交后都未被更改过&#xff0c;或者说当前目录下没有出现任何处于未跟踪状态…

Python GUI 新手入门教程:轻松构建图形用户界面

Python 凭借其简单性和多功能性&#xff0c;已经成为最流行的编程语言之一。被广泛应用于从 web 开发到数据科学的各个领域。 在本教程中&#xff0c;我们将探索用于创建图形用户界面&#xff08;GUIs&#xff09;的 Python 内置库&#xff1a; Tkinter&#xff1a;无论你是初…

Maven普通工程和web工程创建

文章目录 创建项目前设置maven工程前设置工作创建项目前--》设置utf-8配置maven参数Maven普通工程和web工程创建Maven简单工程第一步&#xff1a;File–New–Project 第二步&#xff1a;选择maven然后下一步&#xff1a;填写后询选择finish初始化maven工程目录简介maven简单工程…

非常好用的Mac清理工具CleanMyMac X 4.14.7 如何取消您对CleanMyMac X的年度订购

CleanMyMac X 4.14.7是Mac平台上的一款非常著名同时非常好用的Mac清理工具。全方位扫描您的Mac系统&#xff0c;让垃圾无处藏身&#xff0c;您只需要轻松单击2次鼠标左键即可清理数G的垃圾&#xff0c;就这么简单。瞬间提升您Mac速度。 CleanMyMac X 4.14.7下载地址&#xff1a…

密码学学习笔记(二十四):TCP/IP协议栈

TCP/IP协议栈的基础结构包括应用层、传输层、网络层、数据链路层和物理层。 应用层 应用层位于TCP/IP协议栈的最顶层&#xff0c;是用户与网络通信的接口。这一层包括了各种高级应用协议&#xff0c;如HTTP&#xff08;用于网页浏览&#xff09;、FTP&#xff08;用于文件传输…

京东ES支持ZSTD压缩算法上线了:高性能,低成本 | 京东云技术团队

1 前言 在《ElasticSearch降本增效常见的方法》一文中曾提到过zstd压缩算法[1]&#xff0c;一步一个脚印我们终于在京东ES上线支持了zstd&#xff1b;我觉得促使目标完成主要以下几点原因&#xff1a; Elastic官方原因&#xff1a;zstd压缩算法没有在Elastic官方的开发计划中&…

【mars3d】 graphic.bindPopup(inthtml).openPopup()无需单击小车,即可在地图上自动激活弹窗的效果。

实现效果&#xff1a;new mars3d.graphic.FixedRoute({无需单击小车&#xff0c;即可在地图上实现默认打开弹窗的激活效果。↓↓↓↓↓↓↓↓ 相关链接说明&#xff1a; 1.popup的示例完全开源&#xff0c;可参考&#xff1a;功能示例(Vue版) | Mars3D三维可视化平台 | 火星科…

CentOS 8.5 安装图解

特特特别的说明 CentOS发行版已经不再适合应用于生产环境&#xff0c;客观条件不得不用的话&#xff0c;优选7.9版本&#xff0c;8.5版本次之&#xff0c;最次6.10版本&#xff08;比如说Oracle 11GR2就建议在6版本上部署&#xff09;&#xff01; 引导和开始安装 选择倒计时结…

外卖系统创新:智能推荐与用户个性化体验

外卖系统的日益普及使得用户对于更智能、个性化的体验有着不断增长的期望。在这篇文章中&#xff0c;我们将探讨如何通过智能推荐技术&#xff0c;为用户提供更贴心、更符合口味的外卖选择。我们将使用 Python 和基于协同过滤的推荐算法作为示例&#xff0c;让您更深入地了解智…

Vue3 在 history 模式下通过 vite 打包部署白屏

Vue3 在 history 模式下通过 vite 打包部署后白屏; 起因 hash 模式 url 后面跟个 # 强迫症犯了改成了 history,就此一波拉锯战开始了 ... 期间 nigix 和 router 各种反复排查尝试最终一波三折后可算是成功了 ... Vue官方文档 具体配置可供参考如下: 先简要介绍下,当前项目打包…

计算机毕业设计 基于SpringBoot的红色革命文物征集管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

常用中间件漏洞

IIS6 IIS7 安装 控制面板-----打开关闭windows功能 添加角色-----添加IIS 启动之后访问localhost 复现 服务器换成IIS7 访问报错 大概就是缺少CGI模块 问题解决 添加php-cgi的路径 添加脚本映射 修改php.ini文件 将 cgi.fix_pathinfo1 然后设置一个图片 访问 在后缀加上/.…

前端react入门day03-react获取dom与组件通信

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 受控表单绑定 React中获取DOM 组件通信 父传子 父传子-基础实现 父传子-props说明 父传子 - 特殊的…