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

news2024/10/7 2:27:22

文章目录

  • 一：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：像for、if等结构和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： 不区分整数和小数
  • boolean：true为真；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中布尔类型只能取true或false：

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

在这里插入图片描述

JavaScript中布尔类型会发生隐式转换，true和false参与运算时分别会看作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.coloradmin.cn/o/179503.html

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

相关文章

Flask电影网站项目

Flask电影网站项目

1 开发环境搭建 1.1 Windows环境 下载Python。下载PyCharm。下载virtualenv。下载MySQL。可以安转一个数据库GUI。 1.2 Linux环境 下载VMware Workstation Pro。下载ubuntu和xshell。 用xshell需要是虚拟机桥接。 下载Python。 pip install 名字 -i https://mirrors.aliy…
阅读更多...
图片标签img

图片标签img

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>图片标签img</title> </head> <body bgcolor"beige"><!-- bgcolor 设置网页背景颜色 --> <…
阅读更多...
【笔记】transformer

【笔记】transformer

一.前置知识 1.什么是注意力机制 【参考知乎】一文读懂注意力机制 1&#xff09;原理是什么&#xff1f;怎么实现&#xff1f; step&#xff1a; &#xff08;1&#xff09;通过打分函数计算查询向量q和输入h的相关性 &#xff08;2&#xff09;softmax归一化获得注意力分布…
阅读更多...
【设计模式】结构型模式·组合模式

【设计模式】结构型模式·组合模式

学习汇总入口【23种设计模式】学习汇总(数万字讲解体系思维导图) 写作不易&#xff0c;如果您觉得写的不错&#xff0c;欢迎给博主来一波点赞、收藏~让博主更有动力吧&#xff01; 一.概述 又称为部分整体模式&#xff0c;用于把一组相似的对象当作一个单一的对象。组合模式依…
阅读更多...
AI医生来啦，ChatGPT在医疗领域的未来可期

AI医生来啦，ChatGPT在医疗领域的未来可期

最新消息&#xff0c;chatGPT推出了付费版&#xff01;每月&#xff04;42美元&#xff0c;不限流使用&#xff0c;你会付费使用吗&#xff1f;OpenAI 推出的聊天机器人 ChatGPT &#xff0c;获得了巨大的吸引力&#xff0c;目前用户数量超过 100 万。(要知道&#xff0c;Netfl…
阅读更多...
2023 Flutter Forward 大会回顾，快来看看 Flutter 的未来会有什么

2023 Flutter Forward 大会回顾，快来看看 Flutter 的未来会有什么

Flutter Forward 作为一场 Flutter 的突破性发布会&#xff0c;事实上 Flutter 3.7 在大会前已经发布 &#xff0c;所以本次大会更多是介绍未来的可能&#xff0c;核心集中于 come on soon 的支持&#xff0c;所以值得关注的内容很多&#xff0c;特别是一些 Feature 让人十分心…
阅读更多...
layui框架学习（1：布局）

layui框架学习（1：布局）

Layui是开源的 Web UI 组件库&#xff0c;虽然目前已不算是最主流的前端框架&#xff0c;但很多开源项目都采用Layui设计页面&#xff0c;为了学习相关的项目&#xff0c;同时也为了掌握Layui的基本用法&#xff0c;特此基于B站的Layui教学视频及Layui的官网教程&#xff0c;从…
阅读更多...
【DockerCE】使用docker运行HertzBeat

【DockerCE】使用docker运行HertzBeat

HertzBeat是一款免Agent的监控平台&#xff0c;拥有强大自定义监控能力&#xff0c;可以对应用服务、数据库、中间件、操作系统、云原生等进行监控&#xff0c;配置告警阈值&#xff0c;以及告警通知(邮件微信钉钉飞书)。关于这个软件的介绍&#xff0c;我这里就不做过多的介绍…
阅读更多...
在线工具轻松设计电商直通车主图，无需下载

在线工具轻松设计电商直通车主图，无需下载

电商直通车主图设计教程&#xff01;无门槛在线设计&#xff0c;零基础轻松入门的电商设计工具&#xff0c;轻松就能搞定的主图设计工具&#xff0c;下面跟着小编的设计教程&#xff0c;一起学习如何使用在线工具乔拓云轻松设计专属的商品直通车主图&#xff0c;在线模板轻松设…
阅读更多...
QTableWidget表格使用及美化

QTableWidget表格使用及美化

QTableWidget使用 选中一行、选中单个目标、禁止编辑 ui->tableWidget->setSelectionBehavior(QAbstractItemView::SelectRows);//选中的时候选中一行ui->tableWidget->setSelectionMode(QAbstractItemView::SingleSelection);//只能选中单个目标ui->tableWidg…
阅读更多...
C++程序设计——泛型编程、函数模板、类模板

C++程序设计——泛型编程、函数模板、类模板

一、泛型编程 假如需要实现一个通用的加法函数&#xff0c;即可以实现多种类型的数据相加。这里当然可以使用函数重载来实现&#xff0c;但是其中会存在一些不好的地方&#xff0c;比如&#xff1a; &#xff08;1&#xff09;重载的函数仅仅是类型不同&#xff0c;代码复用率…
阅读更多...
尚硅谷Vue3 笔记总结及代码

尚硅谷Vue3 笔记总结及代码

✨作者&#xff1a;猫十二懿 ❤️‍&#x1f525;账号&#xff1a;CSDN 、掘金 、个人博客 、Github &#x1f389;公众号&#xff1a;猫十二懿 笔记结合了总结视频中总结的内容 尚硅谷张天禹老师课程 空降视频 Vue3官网 1、Vue3简介 1.1 性能的提升 打包大小减少41%初次渲…
阅读更多...
从源码解析代理模式

从源码解析代理模式

大纲代理模式&#xff08;结构型设计模式&#xff09;通过代理类去访问实现类中的方法&#xff0c;使用场景比如&#xff1a;已有接口和实现类的情况下&#xff0c;想要在已实现的方法基础上扩展更多的功能的场景。代理模式里的主要类&#xff1a;接口实现类&#xff0c;需实现…
阅读更多...
数据结构 第三章 栈和队列(栈)

数据结构 第三章 栈和队列(栈)

天空之外&#xff1a;点击收听 1 基本知识点 1、栈顶是指允许进行插入和删除操作的一端&#xff0c;另外一端称为栈底 2、进栈是指在栈顶位置插入元素(也叫入栈或者压栈)&#xff0c;出栈是指删除栈顶元素(也叫弹栈或者退栈) 3、栈溢出是指&#xff1a; 当栈满的时候&#x…
阅读更多...
led和白炽灯哪个对眼睛好？分享光线舒适的LED护眼灯

led和白炽灯哪个对眼睛好？分享光线舒适的LED护眼灯

最近对于白炽灯与LED灯哪个更护眼的话题受到很多人关注&#xff0c;经过综合考虑&#xff0c;LED灯更适合家庭使用的。 LED灯是电致发光的半导体芯片&#xff0c;抗震性能好&#xff0c;内置三基色荧光粉&#xff0c;让光线更加柔和&#xff0c;做到使用寿命长达10万小时&#…
阅读更多...
通信原理简明教程 | 基本概念

通信原理简明教程 | 基本概念

文章目录1 通信及通信系统1.1 通信系统的基本组成模型1.2 通信系统的分类1.3 模拟通信和数字通信系统2 调制和解调2.1 调制解调的基本概念2.2 调制解调的分类2.3 调制解调的作用3 通信系统的质量指标3.1 模拟通信系统的质量指标3.2 数字通信系统的质量指标4 总结1 通信及通信系…
阅读更多...
算法导论（二）：渐进符号、递归及解法

算法导论（二）：渐进符号、递归及解法

渐近符号 基本的渐近符号&#xff1a; O 表示上界&#xff0c;即小于等于 ≤ Ω 表示下界&#xff0c;即大于等于 ≥ Θ 表示渐近等于 &#xff08;上一集也有使用这个符号&#xff09; 还有几个严格符号&#xff1a; o 表示小于 < ω 表示大于 > 渐近符号O 主要详细讲…
阅读更多...
Latex中给图表添加中英文标题及生成相关目录

Latex中给图表添加中英文标题及生成相关目录

通常我们都是用\caption{这里是标题}的方式给图表添加对应的标题&#xff0c;如果我们需要同时给出两个标题呢&#xff1f;&#xff08;例如某些毕业论文中要求同时给出中英文标题&#xff09;如果我们还要生成对应的图表目录呢&#xff1f;这些问题都可以利用bicaption这个包来…
阅读更多...
【论文翻译】A simple yet effective baseline for 3d human pose estimation

【论文翻译】A simple yet effective baseline for 3d human pose estimation

【论文】https://arxiv.org/abs/1705.03098v2 【pytorch】weigq/3d_pose_baseline_pytorch: A simple baseline for 3d human pose estimation in PyTorch. (github.com) 【tensorflow】https://github.com/una-dinosauria/3d-pose-baseline 摘要 随着深度卷积网络的成功&am…
阅读更多...
手把手教你如何在项目中使用阿里字体图标IconFont

手把手教你如何在项目中使用阿里字体图标IconFont

阿里图标官网地址&#xff1a;IconFont-阿里巴巴矢量图标库 一、注册账号 要使用阿里图标&#xff0c;首先你要在它的官网注册一个账号&#xff0c;注册的方式有多种&#xff08;手机号&#xff0c;Github&#xff0c;微博&#xff0c;阿里域账号&#xff09;&#xff0c;根据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023