(Java高级教程)第四章必备前端基础知识-第三节1:JavaScript简介和基础语法

news/2024/2/21 4:13:29

文章目录

  • 一:JavaScript简介
    • (1)JavaScript概述
    • (2)JavaScript特点
    • (3)JavaScript运行过程
    • (4)JavaScript组成
    • (5)JavaScript的引入方式和基本使用
    • (6)JavaScript的注释
    • (7)JavaScript的输出
      • ①:弹窗输出
      • ②:控制台输出
      • ③:页面输出
  • 二:JavaScript基础语法
    • (1)标识符与关键字
    • (2)变量
    • (3)数据类型
        • ①:number
        • ②:string
      • ③:boolean
      • ④:undefined
    • ⑤:null
    • (4)运算符
    • (5)语句

一:JavaScript简介

(1)JavaScript概述

JavaScript:JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。为了解决前端验证的问题,当时的浏览器巨头NetScape(网景)公司就开发出一种脚本语言,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript,但注意Java和JavaScript的关系就像老婆和老婆饼的一样,没有任何关系。下面是JavaScript的发展历程

年份事件
1995年网景公司开发出了JavaScript
1996年微软发布了和JavaScript兼容的JScript
1997年ECMAScript第1版
1998年ECMAScript第2版
1998年DOM Level1的制定
1998年新型语言DHTML登场
1999年ECMAScript第3版
2000年DOM Level2的制定
2005年新型语言AJAX登场
2009年ECMAScript 第5版
2009年新型语言HTML5登场

(2)JavaScript特点

JavaScript特点

  • 解释型语言:无需编译直接执行,但运行速度较慢
  • 动态语言:动态语言中一切内容都是不确定的,性能要比静态语言差
  • 语法结构类似于Java:像forif等结构和Java基本是一致的,所以如果有Java基础的话学起来比较轻松,但Java和JavaScript也只是看起来像而已
  • 基于原型的面向对象:后面会说
  • 严格区分大小写

(3)JavaScript运行过程

JavaScript运行过程:如下图

在这里插入图片描述

浏览器有如下两个引擎

  • 渲染引擎:解析HTML和CSS,也即“内核”
  • JS引擎:也即JS解释器,Chrome中为V8

在这里插入图片描述

(4)JavaScript组成

JavaScript组成:一个完整的JavaScript应该由以下三个部分组成

  • ECMAScript:JavaScript的语法
  • DOM:页面文档对象模型,对页面中的元素进行操作
  • BOM:浏览器对象模型,对浏览器窗口进行操作

(5)JavaScript的引入方式和基本使用

JavaScript的引入方式和基本使用:和CSS一样,JavaScript也有三种引入方式,分别是行内式、内嵌式外部式。其中第三种方式最为常用,介绍如下

首先创建一个test.html

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>test</title>  
</head>  
<body>  
<div>  你好JavaScript  
</div>  </body>  
</html>

建立一个JavaScript文件javascript.js,使用alert("Hello JS")让浏览器在打开时弹出一个对话框并显示"Hello JS"

  • 注意:在JavaScript中单引号和双引号都表示字符串
alert("Hello JS")

然后在test.html中通过script引入javascript.js

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>test</title>  <script src="javascript.js"></script>  
</head>  
<body>  
<div>  你好JavaScript  
</div>  </body>  
</html>

打开浏览器效果如下
在这里插入图片描述

(6)JavaScript的注释

JavaScript的注释:分为如下两种,这和Java一致

  
// JavaScript单行注释  /*  JavaScript多行注释  */  
alert("Hello JS")

(7)JavaScript的输出

①:弹窗输出

前文已经展示,使用alert()函数即可,但注意弹窗输出一般不会轻易使用,因为频繁使用弹窗会降低用户的使用体验

②:控制台输出

如下,使用console向控制台输出信息

  • console.log():输出日志信息
  • console.info():输出一条消息
  • console.warn:输出警告信息
  • csonsole.error:输出一条错误

打开浏览器调试工具,然后查看控制台

在这里插入图片描述

③:页面输出

可以使用document.write()向页面输出一句话

document.write("Hello JS By document.write")

在这里插入图片描述

二:JavaScript基础语法

  • 注意:由于JavaScript和Java部分内容相似,所以介绍时可能会一笔带过甚至不介绍,这里重点介绍它们之间不一样的地方

(1)标识符与关键字

标识符:JavaScript标识符命名建议规则如下

  • 第一个字符必须是一个字母、_$
  • 其它字符可以是字母、下划线、美元符号或数字
  • 按照惯例,ECMAScript 标识符采用驼峰命名法
  • 标识符不能是关键字和保留字符

关键字:JavaScript关键字如下,以下关键字不能用作标识符

在这里插入图片描述

保留字符:JavaScript保留字符如下,以下保留字符不能用作标识符
在这里插入图片描述

(2)变量

变量:在JavaScript中也是需要先声明变量然后再赋值的,如下

var name = "张三";  
var age = 18;  console.log("name:", name);  
console.log("age:", age);

在这里插入图片描述

但与Java这种静态语言有所不同的是,JavaScript是一门动态语言,这意味着JavaScript的变量类型是程序在运行的过程中才能确定的(这也是为什么它声明变量时只需要一个关键字var),并且随着程序的运行变量的类型也可能随时发生变化

var name = "张三";  
var age = 18;  console.log("name:", name);  
console.log("age:", age);  
console.log("\n");  name = 18  
age = "张三"  console.log("name:", name);  
console.log("age:", age);

在这里插入图片描述

(3)数据类型

数据类型:JavaScript中共有如下五种基本数据类型

  • number: 不区分整数和小数
  • booleantrue为真;false为假
  • string
  • undefined:表示未定义的值(唯一值)
  • null:空值(唯一值)

①:number

进制表示

var a = 192; // 十进制数  
var b = 0o14; // 八进制数  
var c = 0xa; // 十六进制  
var d = 0b10; // 二进制数  console.log(a);  
console.log(b);  
console.log(c);  
console.log(d);

在这里插入图片描述

特殊的数字

  • infinity:表示无穷大,超过此范围就会返回infinity
  • -infinity:表示无穷小,超过此范围就会返回-infinity
  • NaN:表示不是数字(可以使用isNaN()函数判定是否为非数字)
console.log(Number.MAX_VALUE);  
console.log(Number.MIN_VALUE); // 表示最小的正数  console.log(isNaN('hello'- 10));

在这里插入图片描述

②:string

单双引号表示字符串均可

console .log('Hello World!');  
console .log("Hello World!");

在这里插入图片描述

转义字符

转义字符含义
\n换行
\\斜杠
\t制表
\b空格
\r回车
console .log("我的名字叫做\"Michael Jackson\"");

在这里插入图片描述

求字符串长度

var str = "HelloBY";  
console.log(str.length);

在这里插入图片描述

字符串拼接

var str1 = "Hello";  
var str2 = "World";  
var str3 = str1 + str2;  
console.log(str3);  
console.log(str1 + "World");

在这里插入图片描述

字符串比较 直接使用==即可

var str1 = "Hello";  
var str2 = "World";  
var str3 = str1 + str2;  
console.log(str3 == "HelloWorld");

在这里插入图片描述

③:boolean

JavaScript中布尔类型只能取truefalse

var a = true;  
var b = false;  console.log(typeof (a));  
console.log(b)

在这里插入图片描述

JavaScript中布尔类型会发生隐式转换,truefalse参与运算时分别会看作1和0

var a = true;  
var b = false;  console.log(a + 1);  
console.log(b - 1);

在这里插入图片描述

④:undefined

如果一个变量在定义的时候没有初始化那么它就是undefined

在这里插入图片描述

undefined和字符串、数字运算效果如下

var a;  console.log(a + "str");  
console.log(a + 10);

在这里插入图片描述

⑤:null

null表示当前的变量是一个空值

var a = null;  console.log(a);

在这里插入图片描述

(4)运算符

运算符:JavaScript中的运算符和Java中的运算符基本一致,这里不再详细介绍

  • 算数运算符
    • +
    • -
    • **
    • /
    • %
  • 赋值运算符
    • =
    • +=
    • -=
    • *=*
    • /=
    • %=
  • 自增自减运算符
    • ++
    • --
  • 比较运算符
    • <
    • >
    • <=
    • >=
    • ==:比较是否相等(会进行隐式类型转换)
    • !=
    • ===:(不会进行隐式类型转换)
    • !==
  • 逻辑运算符
    • &&
    • ||
    • !
  • 位运算符
    • &
    • |
    • ~
    • ^
  • 移位运算符
    • <<
    • >>
    • >>>

(5)语句

语句:JavaScript中的条件语句、循环语句与Java基本一致,这里不再介绍


http://www.ppmy.cn/news/19886.html

相关文章

别总写代码,这130个网站比涨工资都重要

今天推荐一些学习资源给大家&#xff0c;当然大家可以留言评论自己发现的优秀资源地址 搞学习 找书籍 冷知识 / 黑科技 写代码 资源搜索 小工具 导航页&#xff08;工具集&#xff09; 看视频 学设计 搞文档 找图片 搞学习 TED&#xff08;最优质的演讲&#xff09;&#xff1…

Git速成指南

文章目录版本管理工具概念版本管理工具介绍版本管理发展简史SVN(SubVersion)GitGit工作流程图Git安装基本配置为常用指令配置别名&#xff08;可选&#xff09;解决GitBash乱码问题Git常用命令获取本地仓库基础操作指令查看修改的状态&#xff08;status&#xff09;添加工作区…

JavaEE day6 初识JavaScript

什么是JS JS是通行在各种浏览器的一种语言&#xff0c;JAVA后端代码运行在服务器上&#xff0c;JS代码内容配合HTML&#xff0c;浏览器对JS代码进行解释运行&#xff0c;然后展现在浏览器上&#xff0c;web开发离不开JS。 一般步骤为&#xff1a;&#xff08;index.html与scr…

力扣刷题记录——697. 数组的度、728. 自除数 、821. 字符的最短距离

本专栏主要记录力扣的刷题记录&#xff0c;备战蓝桥杯&#xff0c;供复盘和优化算法使用&#xff0c;也希望给大家带来帮助&#xff0c;博主是算法小白&#xff0c;希望各位大佬不要见笑&#xff0c;今天要分享的是——《力扣刷题记录——697. 数组的度、728. 自除数 、821. 字…

C++基础(2) - 变量和常量

文章目录变量1、什么是变量2、如何使用变量3、变量的命名3.1 标识符3.2 命名方案常量1、C如何确定常量的类型2、符号常量2.1 const 限定符2.2 预处理器方式 —— #define变量 1、什么是变量 程序必须记录3个基本属性&#xff1a; 信息将存储在哪里&#xff1b;要存储什么值&…

Python eval()和exec()函数详解

eval() 和 exec() 函数都属于 Python 的内置函数&#xff0c;由于这两个函数在功能和用法方面都有相似之处&#xff0c;所以将它们放到一节进行介绍。eval() 和 exec() 函数的功能是相似的&#xff0c;都可以执行一个字符串形式的 Python 代码&#xff08;代码以字符串的形式提…

0、Spring工程构建Spring快速入门Spring配置文件详解注入Sprint相关API

1、Spring工程构建 创建工程项目目录文件夹 IDEA选择项目new一个module 配置案例 aop创建 创建并下载完毕后&#xff0c;点击file选择projert 选择按照的jdk版本 output选择当前目录&#xff0c; 点击右下方apply 选择facets&#xff0c;点击""号选择web 选择当前…

金融风控09

迁移学习 为什么要&#xff1f; 源域样本与目标域样本分布有区别&#xff0c;目标域样本量不够 平时建模用的迁移学习场景 1、新开某个消费分期场景样本量少&#xff0c;需要用其他场景的数据建模 2、业务被迫停滞3个月再重启&#xff0c;大部分训练样本比较老旧&#xff…

一起自学SLAM算法:8.2 Cartographer算法

连载文章&#xff0c;长期更新&#xff0c;欢迎关注&#xff1a; Gmapping代码实现相对简洁&#xff0c;非常适合初学者入门学习。但是Gmapping属于基于滤波方法的SLAM系统&#xff0c;明显的缺点是无法构建大规模的地图&#xff0c;这一点已经在第7章中讨论过了。而基于优化的…

下班前几分钟,我彻底弄懂了并查集

目录一、并查集的由来二、代表元法2.1 初始化2.2 查询2.3 合并2.4 设计理念三、并查集的应用3.1 合并集合3.2 连通块中点的数量3.3 亲戚3.4 省份数量References一、并查集的由来 考虑这样一个场景。 现有 nnn 个元素&#xff0c;编号分别为 1,2,⋯,n1,2,\cdots,n1,2,⋯,n&…

Android Studio 开启视图绑定 viewBinding

Google 在 Android Studio 3.6 Canary 11 及更高版本中提供了一个 viewBinding 的开关&#xff0c;可以开启视图绑定功能&#xff0c;以此来替代 findViewById。 viewBinding功能可按模块启用。要在某个模块中启用viewBinding&#xff0c;请将 viewBinding 元素添加到其 build…

ESP32设备驱动-MCP4725数模转换器驱动

MCP4725数模转换器驱动 1、MCP4725介绍 MCP4725 是一款单通道、12 位、电压输出数模转换器,具有集成 EEPROM 和 I2C 兼容串行接口。MCP4725有如下特性: 12 位分辨率板载非易失性存储器 (EEPROM)0.2 LSB DNL(典型值)外部 A0 地址引脚正常或掉电模式6s(典型值)的快速建立…

Hal GPIO控制--LED/Delay实现

环境配置在CubeMx Pinout view 中点击可以设置管脚模式 &#xff0c;右击 可以配置管脚名称这里以点PB8灯为例&#xff0c;可以设置灯输出电平 &#xff0c;模式为输出&#xff0c;不进行上下拉&#xff0c; 速度 模式设置以及用户自定义名称。。时钟树配置&#xff0c;使用HSI…

OpenWrt软路由空间扩容

文章目录预备知识OpenWrt系统固件分类EXT4固件扩容方式新建分区扩容操作步骤直接扩容操作步骤SQUASHFS固件扩容方式新建分区扩容直接扩容EFI引导固件的额外操作参考预备知识 OpenWrt系统固件分类 EXT4固件 固件包名称中包含有ext4关键字&#xff0c;可以参考固件分类关键字示意…

时序数据处理中的拟合问题

对于深度学习或机器学习模型而言,我们不仅要求它对训练数据集有很好的拟合(训练误差),同时也希望它可以对未知数据集(测试集)有很好的拟合结果(泛化能力),所产生的测试误差被称为泛化误差。度量泛化能力的好坏,最直观的表现就是模型的过拟合(overfitting)和欠拟合(…

3.3 Python组织列表

在你创建的列表中&#xff0c;元素的排列顺序常常是无法预测的&#xff0c;因为你并非总能控制用户提供数据的顺序。Python提供了很多组织列表的方式&#xff0c;可根据具体情况选用。 3.3.1 使用sort()对列表进行永久性排序Python方法sort()让你能够较为轻松地对列表进行排序。…

XPath入门

好久没用XPath了&#xff08;之前没做笔记&#xff09;&#xff0c;最近要用的时候又到处查。。。&#xff08;痛苦.jpg&#xff09;&#xff0c;还是记录下吧&#xff08;π_π&#xff09; XPath&#xff0c;是XML Path Language的缩写&#xff0c; 是一门在 XML 文档中查找…

【自然语言处理】情感分析(四):基于 Tokenizer 和 Word2Vec 的 CNN 实现

情感分析&#xff08;四&#xff09;&#xff1a;基于 Tokenizer 和 Word2Vec 的 CNN 实现本文是 情感分析 系列的第 444 篇&#xff0c;前三篇分别是&#xff1a; 【自然语言处理】情感分析&#xff08;一&#xff09;&#xff1a;基于 NLTK 的 Naive Bayes 实现【自然语言处…

分享145个ASP源码,总有一款适合您

ASP源码 分享145个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 145个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1gxm3rFFLu8pUhVncQga6-g?pwd7n85 提取码&#x…

Python学习——(数据类型及其常用函数)

目录 一、数据类型 判断数据类型type() 二、数据类型的转换 三、运算符 (一)算数运算符 (二)赋值运算符 (三)复合赋值运算符 (四)比较运算符 (五)逻辑运算符 四、输入输出 (一)输出 (二)输入 五、各数据类型常用函数 (一)数值函数 1.绝对值abs(x) 2.最大值max(…
最新文章