首页 > 编程语言 >Javascript入门博客【入门复习(学习)使用】

Javascript入门博客【入门复习(学习)使用】

时间:2024-06-19 18:57:49浏览次数:10  
标签:JavaScript const log Javascript 复习 typeof console 赋值 入门

JavaScript是一门高级,解释形语言,大量用于关于web网站的开发,可以和网页联动做出更多有趣的动画效果。其运行方式大都是嵌入在网页中运行。其实在定义方面如果过你是初学者来学习和这方面相关的知识,知道上面这些就已经足够了。

我们可以在浏览器中直接进行对代码的控制,进入浏览器后点按键盘上的F12键就可以见到控制台了,这是入门JavaScript最为入门的方式。也是最为简答的,无需编译器,无需环境安装,回车直出运行结果!但是本博客选择使用VS Code来进行代码的演示,对于有前端经验的朋友们来说,就先不讲这种入门级别的配置了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello world!</h1>
    <script>
        //在这里就可以进行Javascript代码的输入了
    </script>
</body>
</html>

在这里要注意的是<script>标签需要放在body标签的末尾,主要原因是为了提升网页的加载速度,避免阻塞渲染。这样可以更好的提高用户的使用体验!其次我们也可以专门新建一个关于存放Js代码的文件通过src来让文件之间取得联系!具体做法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

在这里我们可以看到这里通过一个<script>标签的src链接了一个js文件!

现在我们可以在JavaScript中完成一些简单的算术计算以及字符串的输出。

//在Javascript中进行代码的交互此时控制台就会带有“Hello World!”这一串字符
console.log('Hello World!');
//又或者你可以输入简单的加减法
1 + 1

 好了,恭喜你已经成功入门了Javascript!

接下来,我们来认识声明数据变量的三个关键字:

‘var’:在函数中声明的变量,不受块级作用域的设置,可多次声明和赋值

下面是一个使用var的一个简单的示例代码:

console.log(x); //未定义的初始值输出为undefined
var x = 5;
console.log(x); //5
if (true) {
  var y = 10;
}
console.log(y); //10

运行结果如批注所示

‘let’: 仅限于块级作用域,不允许重复声明,但是可以重新赋值

注意了,同志们这个代码示例是有错误的!!!

console.log(a); // 报错:不能在声明前使用
let a = 5;
console.log(a); // 5
if (true) {
  let b = 10;
}
console.log(b); // 报错:b 只在 if 块内有效

首先console.log(a);这里就会出现报错,因为你没有定义空间来存储,所以let不可以在声明前使用这里可以做出区分。 

其次 let b = 10就是一个典型的块级作用域,只要出了if这个块级作用域你就没有办法得到b中存储的值了。

‘const’:同样仅限于块级作用域,不允许重复声明,也不可以重新赋值。

const c = 5;
console.log(c); // 5
c = 10; // 报错:不能重新赋值
const obj = { key: 'value' };
console.log(obj)
obj.key = 'newValue'; // 可以修改对象属性
console.log(obj.key); // 'newValue'

首先第一个错误在c = 10这里对c重新进行了赋值,const定义后是不可以重新赋值的;

key:‘value’赋值给了obj(字符串)后用.key更改属性后再次进行了二次赋值后输出‘newValue’。

接下来我们来看看在JavaScript中常见的数据类型

我们就看看这几个比较常见的String,number,Boolean,null,undefined

String:表示文本数据,使用单引号、双引号或反引号包围。

Number:表示整数和浮点数。JavaScript 中所有的数字都是 64 位浮点数。

Boolean:表示逻辑值,只有 truefalse

Null:表示一个空对象引用。需要注意的是,typeof null 返回 "object"

Undefined:一个变量声明了但未赋值时的默认值。

const username = "Mike";
const age = 19;
const rate = 5.5;
const isCool = true;
const x = null;
const y = undefined;
let z;

console.log(typeof username)
console.log(typeof age)
console.log(typeof rate)
console.log(typeof isCool)
console.log(typeof x)
console.log(typeof y)
console.log(typeof z)

输出结果如下图所示:

 

有趣的是在const x = null;这里的输出结果是‘object’,但这里的null并不是一个对象。

根据资料显示这是一个 JavaScript 的设计bug,从最早的 JavaScript 版本开始就存在,并且为了兼容性原因,已经不能更改,算是一个小细节!

到这里,其实就可以暂告一段落咯。

致力于做最简单的上手攻略!!! 

 

标签:JavaScript,const,log,Javascript,复习,typeof,console,赋值,入门
From: https://blog.csdn.net/m0_60816196/article/details/139750289

相关文章

  • shell语言入门
    前言Shell是一个用C语言编写的程序,它是用户使用Linux的桥梁,是linux内置的一款软件。通过编写Shell的脚本,可以更好的使用linux系统(比如、安装卸载软件、增删改查文件等等),毕竟大部分linux、系统都没有界面,不像windows那样鼠标点点就完成了大部分需求。shell软件的种类有很多......
  • OpenCV一文入门
    OpenCV一文入门官网地址OpenCV当前版本opencv-python4.9.0.80python包地址https://pypi.org/project/opencv-python/OpenCV(OpenSourceComputerVisionLibrary)是一个开源计算机视觉和机器学习软件库,由Intel最初开发,现由WillowGarage和Itseez维护。OpenCV旨......
  • Redis从入门到精通2024版 视频教程 下载
    Redis从入门到精通2024版视频教程下载├─第01章开篇│   001.Redis录制计划.mp4│   002.Redis介绍.mp4│   003.Redis安装.mp4│    ├─第02章基本数据类型│   01.在后台启动Redis.mp4│   02.基本数据类型-Stri......
  • yolov8 配置环境以及入门级识别 保姆级教程 小白一看就懂!!!
    研究了这么久的yolo姿态算法终于入门啦!!!!那么接下来由我带领大家进入yolo世界,首先安装软件,需要vscode,python以及Anaconda(它的下载路径不能有中文)。具体安装方法搜一下就有了,本文不详细介绍喽。还需要到网站去下载开源代码,当然你也可以进我主页找到对应资源包去下载。代码网址:Gi......
  • 如何使用JavaScript实现在线Excel附件的上传与下载?
    前言在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,例如在Excel中附带一些Word,CAD图等等。同样的,类比到Web端,现在很多人用的在线Excel是否也可以像本地一样实现附件文件的操作呢?答案是肯定的,不过和本地不同的是,Web端不会直接打开附件,而是使用超链接单元格的......
  • 【Ubuntu开发入门之“悟空派wukongpi/香橙派orangepi H3 linux开发②u-boot移植“】
    Ubuntu开发入门之"orangepiH3linux开发@u-boot移植"问题描述解决方法获取u-boot源码编译配置u-boot制作并烧录TF卡结束语郑重声明:本人原创博文,都是实战,均经过实际项目验证出货的转载请标明出处:攻城狮2015Platform:AllwinnerH3OS:Linuxubunt......
  • MySql入门操作集 6.0
    索引与完整性: 就是键之类的,通过键进行索引;看上图存在四种类型:nollnullprimarykeyuniqueforeignkey  对于键的设定可以在创建表的时候就添加相应的键:记得主键只设定一个作为索引吧好像;一般不设定实际意义,只是给他做一个标记作用用于索引其他的书写格式: 使......
  • 人大这波操作666! 国内首本中文版的LLM大语言模型入门指南!(附PDF)
    我就知道人大还留有后手。自从这篇中文大模型综述发布以后,在全网收到了一致好评。人大这边也一直没闲着,在后续一年之内修改了十多遍,收录了近千篇的参考文献,快马加鞭赶出了这本大语言模型中文版。一经发布就震惊国内高校和研究人员,是更适合中国体制的大模型指南。本书内容......
  • 入门/转行网络安全,实现自己“黑客梦”,看完这篇足够了!
    写这篇教程的初衷是很多朋友都想了解如何入门/转行网络安全,实现自己的“黑客梦”。文章的宗旨是:1.指出一些自学的误区2.提供客观可行的学习表3.推荐我认为适合小白学习的资源.大佬绕道哈!一、自学网络安全学习的误区和陷阱1.不要试图先成为一名程序员(以编程为基础的学习)......
  • AI大模型爆发,你还不学就晚了!抓住时代机遇,快速入门指南!
    AI大模型风起云涌,你准备好乘风破浪了吗?在一个阳光明媚的午后,小李坐在自己的工位上,眼前的代码如同繁星般繁多。他是一名资深的软件工程师,但在最近的技术浪潮中,他却感到了一丝不安。他的朋友圈里,不断有人分享关于AI大模型的最新成果,那些曾经遥不可及的科技前沿,如今似乎触手可......