0
0

前端~javascript~JS介绍/输入输出/语法概览/特殊动态类型/基本数据类型/与Java的对比

文章目录

JS介绍

JavaScript,简称JS.
JS是世界上最流行的编程语言之一，并且是一门脚本语言，通过解释器运行，一般在客户端（浏览器上）运行，现在也可以基于node.js在服务器端运行。在Chrome内置的JS引擎叫做V8worker.（这个是当前最流行的一个JS引擎）

JavaScript功能

  • 网页开发（更复杂的特效和用户交互）
  • 网页游戏开发
  • 服务器开发（node.js）
  • 桌面程序开发（像Electron,VSCode…）
  • 手机app开发

关于Java和JavaScript的关系：
在这里插入图片描述
JS、HTML、CSS三者关系：
在这里插入图片描述
HTML构建出基本架构，CSS进行页面美化，JS构建页面行为。

JavaScript运行
类比Java,在Java中，主要是依靠JVM,我们写下的Java源程序被编译成.class文件(二进制字节码)加载到内存中，然后解释执行，将字节码转成CPU命令。
JS的运行依赖网络，我们写下HTML代码，浏览器加载HTML,然后html通过一些方式引入js（大概率是网络下载），然后浏览器调用v8引擎来将JS代码翻译成二进制机器指令执行。

JavaScript组成

  • ECMAScript(简称ES)，JS的语法
  • DOM：页面文档对象模型，对页面中的元素进行操作。
  • BOM：浏览器对象模型，对浏览器窗口进行操作。

ES可以对标Java中的SE部分，是对基础语法的一些介绍
DOM:页面文档对象，本质上就是浏览器提供了一组api让js能够操作网页中的元素。
BOM:本质上是浏览器提供了一组API让JS能操作浏览器窗口

DOM和BOM可以对标Java中的一些库和框架，类似于Spring这种的存在~

JS基础语法

JS书写形式
1.行内式
直接将JS嵌入到html元素内部

<inputtype="button"value="我是一个按钮"onclick="alert('hello')">

JS中的字符串可以单引号表示，也可以使用双引号表示，（JS不区分字符串和字符）
可以自由搭配使用。

html的有些属性，是可以嵌入一段JS的代码的。例如上面的onclick属性，功能是捕获“点击事件”。用户点击这个元素，就会触发点击事件，通过onclick就能够捕获这个点击事件，进一步就触发了对应的JS代码。、

2.外部式
把js代码写到一个单独的文件中，由html来引入。

如下

<scriptsrc="TestDemo2.html"></script>

这个操作会一般情况下触发一个网络请求，浏览器会根据当前src对应的路径来从服务器获取TestDemo2.js这个文件（当前这个是在本地的，没有触发网络i请求）
当加载好这个js后，就会立即执行。
script标签带有了src属性后，script内部就不能再写其他的js代码了，写了也不会生效。

如果一个页面中包含了 多个script标签，就会按照script 出现的先后顺序决定执行顺序~

3.内嵌式
JS可以通过script标签嵌入到html中。

<script><!--alert的功能是弹出一组对话框-->alert("hello world");</script>

输入输出

输入prompt
弹出一个输入框

prompt(“请输入您的姓名”)；

输出alert
弹出一个警示对话框。

alert（“hello”）;

输出console.log
打印日志

<script>
    console.log("hello world");</script>

在控制台中可以看到输出的信息
在这里插入图片描述

什么是日志？
日志是程序员调试程序的重要手段。
举个例子，去医院看病时医生让我们做各种检查，血常规，CT，…这些检查的结果就是“日志”。医生可以通过这些信息来诊断病情。
程序员可以通过程序日志来直到程序 的问题/信息。

console

console 是一个js对象， .（点）表示取对象中的某个属性或者 某个方法。可以直观理解成“的”。 console.log 意思是使用“控制台”对象的 log 方法.(ps： 个人感觉和java对象调用方法差别不大…)

语法概览

大多数的编程语言其实可以分成两个大类，一个是 类C ，和C相似，即C++ ，Java，JS… 第二大类就是 类lisp ,和lisp相似，函数式编程。

JS语法有很多和Java相似，但也有不同。

变量的创建
在Java中，创建一个变量需要指明变量类型，是整型，短整型，还是浮点型，字符型等，但在JS中，创建变量不需要显示的指定类型，变量的实际类型，会根据初始化/赋值来确定~

例如

var=10;

var 是JS中的一个关键字，就表示num是一个变量。

在这里插入图片描述
如上下图，将变量赋值成 数字，就是数字类型(number)，将变量赋值成 字符串，就是字符串类型（String）
在这里插入图片描述

除了 var关键字之外，还有一个let关键字与其功能类似，甚至更强大。（var是在九几年出现的，而let是在201x年 ES6引入的相对新的机制），且var本身有一些缺陷，建议统一使用let,且let变量的作用域，生命周期等都和Java类似。至于var关键字的缺陷，这里不多介绍，有兴趣的可以自己 查询。
在这里插入图片描述
在这里插入图片描述

动态类型

JS是一门动态类型 的语言，动态类型 即指的是 变量 的类型 在运行时是可以改变的。

Java是一个静态类型的语言，一个变量的 类型，在编译阶段就固定了，在运行时，不能改变。如int num=10; num固定就是 int 类型 ，代码指定过程中 不管把 num 如何修改 ，始终都是int 类型。

变量的类型和赋的值息息相关.如下图

<script>let num=20;
    console.log(typeof num);
    num='hello';
    console.log(typeof num);</script>

在这里插入图片描述
JS 的动态类型，为JS代码本身引入了很多的灵活性。例如 函数的参数类型也是动态的。传参的时候不需要考虑参数的类型，返回的 时候也不需要考虑返回的类型（即一个函数可以返回不同 的类型），但动态类型也有缺点，即不利于多人团队开发，函数互相调用之间容易发生混乱。

基本数据类型

JS中内置的几种类型：

  • number：数字.不区分整数和小数。
  • boolean:true是真，false 是假
  • string:字符串类型
  • underfined:只有唯一的值，underfined。表示未定义的值。
  • null：只有唯一的值 null.表示空值

1.number数字类型

JS中不区分整数和浮点数，统一都使用“数字类型”来表示。

JS中的数字进制：

计算机中都使用二进制来表示数据，而我们在平常生活中都是使用十进制。而在JS中，二进制01数字太多，使用起来不方便。所以在表示二进制数字时，往往使用八进制和十六进制来表示二进制数字。

常用进制：

var a=07; //八进制整数，以0开头
 var b=0xa; //十六进制整数 ，以0x开头
  var c=0b10;//二进制整数，以0b开头

特殊数字值

  • Infinity:无穷大，大于任何数字，表示数字已经超过了JS能表示的范围。
  • -Infinity：负无穷大，小于任何数字，表示数字已经超过了JS能表示的范围。
  • NaN：表示当前的结果不是一个数字。（not a number）

演示:
字符串减去数字 就不是数字。会返回NaN.

<script>
    console.log("sg"-10);</script>

在这里插入图片描述

2.string字符串类型

<script>let s='hello';var str='world';</script>

在这里插入图片描述
转义符

将一些会发生歧义的字符进行转义，方便使用。
在这里插入图片描述
求字符串长度

通过使用String的length属性即可。

<script>var a='hehe';
    console.log(a.length);var b='哈哈';
    console.log(b.length);</script>

效果如下，字符串长度分别为4，2.
在这里插入图片描述
3…boolean布尔类型

true 真 false 假，不多赘述。
这里主要提一下和Java中布尔类型的区别。

Java是一个强类型语言，不太支持隐式类型转换，Java中的布尔 仅仅是 布尔，即仅能表示真假，不能做别的事情，而JS是一个弱类型语言，能支持一些隐式类型转换，JS中的布尔，也被当作 1 和 0.

如下:

<script>let a=true;
    console.log(a+1);//这里的a会被当作数字1</script>

输出：
在这里插入图片描述
4.undefined未定义数据类型

输出一个没有初始化的变量，结果就是undefined，即undefined类型。

<script>let a;
    console.log(a);</script>

undefined 和字符串进行相加，结果进行字符串拼接

<script>let a;
    console.log(a+"10");//undefined10</script>

undefined 和数字进行相加 ，结果为NaN.

<script>let a;
    console.log(a+10);//NaN</script>

5.null空值类型

null 表示当前变量是“空”。

<script>let a;
    console.log(a+10);//NaN</script>

注意：null和undefined都是表示一个非法的状态，
null 是空值，用户可以手动设定，而undefined特指没有初始化。undefined和null 都是一种内置类型，而其值分别只有一个，即undefined和null。一般情况下，编程语言里面存在一个概念能够表示“非法状态”就可以了，所以除了JS,大部分语言都有null，但是没有undefined。

运算符

JS中的运算符和Java中的用法相同，这里就不再过多赘述。特别注意一点：

  • == :比较相等（会进行隐式类型转换）
  • === ：比较相等（不会进行隐式类型转换）

Java中不存在’===’，而JS中存在。

标签： 数据结构 java 前端
本文转载自: https://blog.csdn.net/Merciful_Lion/article/details/123348012
版权归原作者 白菜田田 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端~javascript~JS介绍/输入输出/语法概览/特殊动态类型/基本数据类型/与Java的对比”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航