JavaScript的基础语法学习

这篇具有很好参考价值的文章主要介绍了JavaScript的基础语法学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、JavaScript let 和 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。

  • 全局变量

在函数外声明的变量作用域是全局的:

<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
		"我可以显示 " + carName;
}
</script>

JavaScript的基础语法学习全局变量在 JavaScript 程序的任何地方都可以访问。

  • 局部变量

在函数内声明的变量作用域是局部的(函数内):

<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是:" +  typeof carName;
function myFunction() 
{
    var carName = "Volvo";
}
</script>

JavaScript的基础语法学习函数内使用 var 声明的变量只能在函数内访问,如果不使用 var 则是全局变量。

  • JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到。

JavaScript的基础语法学习

  • 重新定义变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量:

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题,因为它只在 let 命令所在的代码块 {} 内有效。

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10
  • HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象:

<script>
var carName = "Volvo";

// 可以使用 window.carName 访问变量
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

JavaScript的基础语法学习

使用 let 关键字声明的全局作用域变量不属于 window 对象:

<script>
let carName = "Volvo";

// 不能使用 window.carName 访问变量
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>

JavaScript的基础语法学习
JavaScript的基础语法学习

  • 变量提升

JavaScript 中,var 关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明(JavaScript 变量提升)。

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

let 关键字定义的变量则不可以在使用后声明,也就是变量需要先声明再使用。

  • const 关键字

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:

<script>
try {
    const PI = 3.141592653589793;
    PI = 3.14;
}
catch (err) {
    document.getElementById("demo").innerHTML = err;
}

JavaScript的基础语法学习const定义常量与使用let 定义的变量相似:

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

const声明的常量必须初始化,而let声明的变量不用
const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。

JavaScript的基础语法学习

  • 并非真正的常量

const 的本质: const 定义的变量并非常量,并非不可变,它定义了一个常量引用一个值。使用 const 定义的对象或者数组,其实是可变的。下面的代码并不会报错:


// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

但是我们不能对常量对象重新赋值:

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

以下实例修改常量数组:


// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
 
// 修改元素
cars[0] = "Toyota";
 
// 添加元素
cars.push("Audi");

二、JavaScript JSON

JSON 是用于存储和传输数据的格式

JSON 通常用于服务端向网页传递数据

  • 什么是 JSON?

    JSON 英文全称 JavaScript Object Notation
    JSON 是一种轻量级的数据交换格式。
    JSON是独立的语言 *
    JSON 易于理解。

  • JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递

  • JSON 实例

以下 JSON 语法定义了 sites 对象: 3 条网站信息(对象)的数组:


{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

  • JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

  • JSON 语法规则

    数据为 键/值 对。
    数据由逗号分隔。
    大括号保存对象
    方括号保存数组

  • JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。

键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:

"name":"Runoob"
  • JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对:

{"name":"Runoob", "url":"www.runoob.com"} 
  • JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象:


"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

在以上实例中,对象 “sites” 是一个数组,包含了三个对象。

每个对象为站点的信息(网站名和网站地址)。

  • JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据,并在网页中显示数据。

简单起见,我们网页中直接设置 JSON 字符串

首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:


var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

JavaScript的基础语法学习JavaScript的基础语法学习

三、javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢?

javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值

语法格式如下:

JavaScript的基础语法学习下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。


<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

以下实例中,在用户点击链接后显示警告信息:

<body>
	
<p>点击以下链接查看结果:</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
	
</body>

JavaScript的基础语法学习以下实例中参数 a 将返回 undefined

<script type="text/javascript">
function getValue(){
   var a,b,c;
   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
</script>
</head>
<body>
	
<p>点击以下按钮查看结果:</p>
<form>
<input type="button" value="点我" onclick="getValue();" />

JavaScript的基础语法学习

  • href="#"与href="javascript:void(0)"的区别

#包含了一个位置信息,默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。


<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

四、JavaScript 异步编程

异步的概念
简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

JavaScript的基础语法学习

  • 什么时候用异步编程

在前端编程中(甚至后端有时也是这样),我们在处理一些简短、快速的操作时,例如计算 1 + 1 的结果,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。所以,当一个事件没有结束时,界面将无法处理其他请求。

现在有一个按钮,如果我们设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。

为了避免这种情况的发生,我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情,比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程,所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限:一旦发射了以后就会与主线程失去同步,我们无法确定它的结束,如果结束之后需要处理一些事情,比如处理来自服务器的信息,我们是无法将它合并到主线程中去的。

为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

  • 回调函数

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 3 秒,然后执行回调函数 “print”,在命令行输出 “RUNOOB!”。

当然,JavaScript 语法十分友好,我们不必单独定义一个函数 print ,我们常常将上面的程序写成:

setTimeout(function () {
    document.getElementById("demo1").innerHTML="RUNOOB-1!";
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";

结果:

RUNOOB-1!
RUNOOB-2!

- 异步 AJAX

除了 setTimeout 函数以外,异步回调广泛应用于 AJAX 编程
XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调:

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

XMLHttpRequest 的 onload 和 onerror 属性都是函数,分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库,也可以更加优雅的使用异步 AJAX:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

JavaScript的基础语法学习
学习来自“https://www.runoob.com/js”

总结

天空带了一层面纱,树上的鸟儿叽叽喳喳,路上的行人都忙着gogo,一不小心就嘎嘎.文章来源地址https://www.toymoban.com/news/detail-420743.html

到了这里,关于JavaScript的基础语法学习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Rust】001-基础语法:变量声明及数据类型

    “一切能用 Rust 重写的项目都将或者正在用 Rust 重写” Rust 入门与实践:https://juejin.cn/book/7269676791348854839?utm_source=course_list 代码演示 执行结果 依赖 Cargo.toxml 代码 执行命令 根目录执行 整型标量类型 只要记得最低从 8 开始,到 128 结束(当然,正常情况下我们最多用到 64,

    2024年02月10日
    浏览(48)
  • HarmonyOS(二)—— 初识ArkTS开发语言(下)之ArkTS声明式语法和组件化基础

    通过前面ArkTS开发语言(上)之TypeScript入门以及ArkTS开发语言(中)之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进,知道了ArkTS具备了声明式语法和组件化特性,今天,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使

    2024年02月04日
    浏览(58)
  • 17. C++ static、const 和 static const 类型成员变量声明以及初始化

    1. C++ static、const 和 static const 类型成员变量声明以及初始化 const 定义的常量在超出其作用域之后其空间会被释放; static 定义的静态常量在函数执行后不会释放其存储空间; 1.2 static static 表示的是静态的 类的静态成员函数、静态成员变量是和类相关的,而不是和类的具体对

    2024年01月18日
    浏览(60)
  • JavaScript基础——1.js基础语法

    js全称JavaScript,是一种轻量级的面向对象的 编程语言 ,既能用在浏览器中控制页面交互,也能用在服务器端作为网站后台(借助 Node.js),因此 JavaScript 是一种全栈式的编程语言。 JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页,其中: HTML 用来定义网页的内容,例如标

    2024年04月28日
    浏览(36)
  • JavaScript的基础语法

    目录 一、初识JavaScript(简称JS) 1.JavaScript 运行过程 2.JavaScript 的组成 二、JavaScript的规范与调试 1.JavaScript 的书写形式 1.1 行内式 1.2  内嵌式(建议写在之前) 1.3 外部式(建议写在之前) 1.4 总结  2.调试过程(建议使用edge、google浏览器) 3.注释 4.输入输出 4.1 输入 prompt

    2024年02月03日
    浏览(34)
  • 1 JavaScript的基础语法

    JS概念 javaScript是用于实现 用户交互 、 动态控制文档的外观和内容 ,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言; 特点 是基于对象的弱类型语言 弱类型语言:是一种弱类型定义的语言,某一个变量被定义类型,该变

    2024年02月06日
    浏览(44)
  • JavaScript (二) -- 基础语法

    目录 1.  输入输出语句 1.1  prompt()(对话框) : 1.2  alert() (弹出框) 1.3  console.log()(控制台输出) 1.4  document.write() (网页输出) 2.  变量与常量 3.  原始数据类型 4.  typeof()方法 5.  运算符 5.1  算数运算符 5.2  比较运算符 5.3  逻辑运算符 6.  流程控制语句(

    2024年02月02日
    浏览(41)
  • JavaScript基础语法

    速通回顾一遍 一般会把 script 标签置于 body 元素底部,改善显示速度: 内部脚本: script/script 标签内 外部脚本: script src=\\\"\\\"/script 配置 src 外部js文件中,只包含js代码,不包含 script 标签 script 标签不能自闭合 区分大小写,同 Java 每行结尾的分号可有可无 单行注释和多行注释

    2024年01月19日
    浏览(37)
  • 【JavaEE初阶】JavaScript基础语法

    摄影分享: JavaScript (简称 JS) 是世界上最流行的编程语言之一 JS最初只是为了进行前端页面开发.后来JS也被赋予了更多的功能.比如可以用来开发桌面程序,手机APP,服务器端的程序… 是一个脚本语言, 通过解释器运行 JS是一种动态类型, 弱类型的脚本语言, 通过解释器运行, 主要在

    2024年02月13日
    浏览(39)
  • 【JavaEE】_JavaScript基础语法

    目录 1. JavaScript概述 1.1 JavaScript简介 1.2 HTML、CSS、JavaScript的关系 1.3 JavaScrip的组成 2. JavaScript的书写形式 2.1 内嵌式  2.2 行内式 2.3 外部式 3. 输出 3.1 alert 3.2 console.log 4. 变量的使用 4.1 创建变量 4.1.1 使用var 4.1.2 使用let 4.1.3 动态类型变量 4.2 基本数据类型 4.3 运算符 5. 数组

    2024年02月07日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包