JavaScript 的学习

最新推荐文章于 2024-05-25 13:46:03 发布
最新推荐文章于 2024-05-25 13:46:03 发布
阅读量384 收藏 1
点赞数 1
分类专栏： 前端基础学习 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51884452/article/details/130150071
版权

文章目录

一、JavaScript 语法

JavaScript 是一个程序语言。语法规则定义了语言结构。
JavaScript 是一个脚本语言。

它是一个轻量级，但功能强大的编程语言。

  • JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

<body>
	
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 123e5;
</script>
	
</body>

在这里插入图片描述

  • 字符串（String）字面量 可以使用单引号或双引号:
<body>
	
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
	
</body>
  • 数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10]
在这里插入图片描述

  • JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

<body>

<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>

</body>

输出：6

变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
变量是一个名称。字面量是一个值。

  • JavaScript 操作符
  • JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

  • JavaScript使用赋值运算符给变量赋值：

x = 5
y = 6
z = (x + y) * 10

- JavaScript语言有多种类型的运算符：
在这里插入图片描述

  • JavaScript 语句

在 HTML 中，JavaScript 语句用于向浏览器发出命令。

语句是用分号分隔：

x = 5 + 6; y = x * 10;

  • JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
var 关键字告诉浏览器创建一个新的变量：

var x = 5 + 6; var y = x * 10;

JavaScript 同样保留了一些关键字，在以后 JavaScript 扩展中会用到。

以下是 JavaScript 中最​​重要的保留关键字（按字母顺序）：
在这里插入图片描述

  • JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：

// 我不会执行

  • JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

		var length = 16;                                  // Number 通过数字字面量赋值
	var points = x * 10;                              // Number 通过表达式字面量赋值
	var lastName = "Johnson";                         // String 通过字符串字面量赋值
	var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
	var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
  • 数据类型的概念

编程语言中，数据类型是一个非常重要的内容。

为了可以操作变量，了解数据类型的概念非常重要。

如果没有使用数据类型，以下实例将无法执行：

16 + “Volvo”

  • JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。


function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}
  • JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

  • JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符，包含标点等字符。

二、JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

  • JavaScript 语句

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：

<body>

<h1>我的网页</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "你好 Dolly";
</script>

</body>
  • 分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

<body>

<h1>我的网页</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("demo2").innerHTML = z;
</script>

</body>
  • JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

<body>

<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction(){
	document.getElementById("myPar").innerHTML="你好世界！";
	document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时，两个元素会改变。</p>

</body>

输出：
在这里插入图片描述

  • JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：
在这里插入图片描述

  • 空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
在这里插入图片描述

  • 对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
在这里插入图片描述
知识点：JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

  • JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。

  • JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
  • 一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;

x,y 为 undefined， z 为 1。

三、JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
在这里插入图片描述

  • JavaScript 拥有动态类型
    JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

变量的数据类型可以使用 typeof 操作符来查看：

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
  • JavaScript 字符串

字符串是存储字符（比如 “Bill Gates”）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

<body>

<script>
var carname1="Volvo XC60";
var carname2='Volvo XC60';
var answer1='It\'s alright';
var answer2="He is called \"Johnny\"";
var answer3='He is called "Johnny"';
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>

结果：
var answer=“It’s alright”;
var answer=“He is called ‘Johnny’”;
var answer=‘He is called “Johnny”’;

  • JavaScript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
  • JavaScript 对象
    对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式：

<body>

<script>
var person=
{
	firstname : "John",
	lastname  : "Doe",
	id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

</body>

结果：
在这里插入图片描述

  • Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

<body>

<script>
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
</script>

</body>

在这里插入图片描述

  • 声明变量类型

当您声明新变量时，可以使用关键词 “new” 来声明其类型：


var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

来自“https://www.runoob.com/js/js-datatypes.html”

总结

捡起儿时的乐趣，一路向前。

SPIRT00
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习
08-10
JavaScript学习
javascript 学习
05-16
js知识积累
JavaScript学习目录
过客如期的博客
06-07 1061
背景介绍 语言特性 代码流程控制 数值介绍 字符串介绍 数组介绍 对象介绍 函数介绍 函数中this指向 闭包函数 面向对象编程 代码预解析 JavaScript执行机制
javascript学习总结
weixin_59049031的博客
07-10 1458
这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习，我对于JavaScript是什么，JavaScript的基本用法和语法有了初步的了解。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由
ArcGIS API for Javascript学习
mjy555的博客
03-07 5003
ArcGIS API for Javascript学习
JavaScript 学习指南
最好的就是聚焦
03-08 1656
-怎么学JavaScript？https://zhuanlan.zhihu.com/p/23265155?refer=dreawer
JavaScript学习手册十一：JSON
qq_45823118的博客
04-21 5410
JSON1、JSON对象任务描述相关知识什么是JSON对象JSON对象与Javascript对象的区别在JavaScript中使用JSON对象代码文件2、JSON数组任务描述相关知识JSON属性对应的值(value)是一个数组数组的一些操作代码文件3、JSON字符串任务描述相关知识JSON字符串JSON字符串到JavaScript对象JSON对象转换为JSON字符串代码文件 1、JSON对象 任务描述 本关任务：练习在JavaScript中定义JSON对象。 具体要求如下： 定义一个JSON对象JSONO
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 74万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
19 JavaScript学习：调试
sixpp的博客
04-28 7706
使用控制台：在浏览器的开发工中的控台输入代码实时查看的函数等信息，帮调试程序4. 使用调试工具一些开环境（）或者浏览器插件提供了专门的调试工具，如Chrome DevTools、Firefox Developer Tools等，可以更，开发者可以发的错误，并及时修复，代码质量和开发效率。使用断点：在浏览器的开发者工具中设置断点，当程序执行到断点处时暂停执行，开发者可以查看当前变量的值、调用栈等信息，帮助定位问题。关键字可以手动触发断点，不需要依赖开发者工具中的设置断点功能，方便在代码中灵活地进行调试。
JavaScript学习手册四：JS对象
qq_45823118的博客
04-18 5004
JS对象引言A、对象的创建任务描述相关知识代码文件B、属性的增删改查任务描述相关知识代码文件C、属性的检测和枚举任务描述相关知识代码文件 引言 1、JavaScript是基于对象的语言，在JavaScript中，一切都可以被称为对象，包括字符串、数字、布尔型、HTML Element等。这些JavaScript中已有的对象称为内置对象，而用户自己定义的对象叫做自定义对象。自定义对象是数据和函数（也叫方法）的集合。 2、这里要特别提醒的是，JavaScript虽然也是一门基于对象的语言，但是它实现对象的
JavaScript学习--splice()函数详解
sebeefe的博客
03-11 1万+
splice()函数详解 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释：该方法会改变原始数组。 参数： index —— 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany —— 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, …, itemX —— 可选。向数组添加的新项目。 返回值 Array —— 包含被删除项目的新数组，如果有的话。 一、情况一(只有一个参数) splice(inde
10 JavaScript学习：函数
sixpp的博客
04-23 7421
使用 function 关键字：// 函数体使用函数表达式：// 函数体使用箭头函数（ES6）：// 函数体// result 等于 5// result 等于 6。
javascript学习
02-14
javascript学习
Javascript学习指南
10-25
本文结合自己学习javascript的经验，向大家推荐了循序渐进的学习javascript的自学的轨迹，非常的合理，给有需要的小伙伴们参考下吧。
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 215
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1070
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
global_coding的博客
05-24 295
vue 使用 export default
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 893
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
React18+TypeScript搭建通用中后台项目实战04 封装常用工具函数
最新发布
Python私教
05-25 235
此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。修改 src/api/request.ts。修改 src/page/Index.tsx。修改 src/page/Index.tsx。修改 src/page/Index.tsx。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值