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.hqwc.cn/news/415150.html

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

相关文章

排序:计数排序

目录 思想&#xff1a; 操作步骤&#xff1a; 思路&#xff1a; 注意事项&#xff1a; 优缺点&#xff1a; 代码解析&#xff1a; 完整代码展示&#xff1a; 思想&#xff1a; 计数排序又称为鸽巢原理&#xff0c;是对哈希直接定址法的变形应用。 操作步骤&#xff…

5G+物联网:连接万物,重塑智慧社区,开启未来生活新纪元,助力智慧社区的革新与发展

一、5G与物联网&#xff1a;技术概述与基础 随着科技的飞速发展&#xff0c;第五代移动通信技术&#xff08;5G&#xff09;和物联网&#xff08;IoT&#xff09;已经成为当今社会的热门话题。这两项技术作为现代信息社会的核心基础设施&#xff0c;正深刻地改变着人们的生活和…

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

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

ROS学习笔记8——实现ROS通信时的常用命令

机器人系统中启动的节点少则几个&#xff0c;多则十几个、几十个&#xff0c;不同的节点名称各异&#xff0c;通信时使用话题、服务、消息、参数等等都各不相同&#xff0c;一个显而易见的问题是: 当需要自定义节点和其他某个已经存在的节点通信时&#xff0c;如何获取对方的话…

Mac中安装JDK1.8和JDK11双版本并任意切换

首先区官网下载JDK8和JDK11安装包&#xff0c;安装后打开bash $ cd /Library/Java/JavaVirtualMachines $ ls -al 可以看到两个版本安装成功 然后编辑环境变量 现在在bash中输入jdk8或者jdk11就会切换版本了&#xff0c;输入java -version即可查看&#xff0c;成功&#xff0…

杂记 | 在Linux上使用Docker-compose安装单机版Milvus向量数据库并配置访问控制和可视化面板(Attu)

文章目录 01 Milvus向量数据库简介02 安装前的准备03 安装3.1 创建milvus工作目录3.2 下载并编辑docker-compose.yml3.3 下载milvus.yml文件3.4 启动milvus 04 访问可视化面板并修改密码 01 Milvus向量数据库简介 Milvus是一款开源的向量数据库&#xff0c;它专为AI应用设计&a…

jetlinks 规则编排中的函数节点使用 js 脚本格式化输出当前系统时间的坑

网上搜到的都是类似如下这种&#xff1a; // 获取当前时间 var date new Date();// 格式化输出当前时间 var year date.getFullYear(); var month date.getMonth(); var day date.getDate(); var hour date.getHours(); var minute date.getMinutes(); var second date.…

智能化未来:NFC技术助力数字化社区

引言 数字化转型深刻改变着社区管理的方式&#xff0c;其中NFC技术作为一种近场通讯技术&#xff0c;正在为数字社区的智能化未来提供强有力的支持。 NFC技术简介 近场通讯技术(NFC)是一种无线通信技术&#xff0c;能够实现设备之间的近距离通讯。在数字社区建设中&#xf…

JS-元素尺寸与位置

通过js的方式&#xff0c;得到元素在页面中的位置 获取宽高 元素.offsetWidth 元素.offsetHeight 1&#xff09;获取元素的自身宽高、包括元素自身设置的宽高paddingborder 2&#xff09;获取出来的是数值&#xff0c;方便计算 3&#xff09;注意&#xff1a;获取的是可视…

30分钟带你深入优化安卓Bitmap大图

30分钟带你源码深入了解Bitmap以及优化安卓大图 一、前言二、Bitmap入门1. 如何创建Bitmap?2. Bitmap的堆内存分布在哪里3. 图片文件越大&#xff0c;Bitmap堆内存会越大吗&#xff1f;4. 如何管理Bitmap的内存&#xff1f;5. 实战修改Bitmap的堆内存&#xff0c;改变图片的图…

Linux Shell脚本入门

目录 介绍 编写格式与执行方式 Shell脚本文件编写规范 脚本文件后缀名规范 首行格式规范 注释格式 shell脚本HelloWord入门案例 需求 效果 实现步骤 脚本文件的常用执行三种方式 介绍 3种方式的区别 小结 多命令处理 Shell变量 环境变量 目标 Shell变量的介绍 变量类型 系统环境…

安全帽识别-赋能深圳自贸中心智慧工地

在当今的建筑行业中&#xff0c;安全管理一直是一个至关重要的议题。深圳自贸中心项目在这方面进行了一次有益的尝试——实施智慧工地安全帽识别系统。本文将对这一创新举措进行简要介绍。 项目背景 深圳自贸中心&#xff0c;作为一项标志性建设项目&#xff0c;承载着城市发展…