初识JavaScript 第三节

最新推荐文章于 2024-05-30 21:04:01 发布
最新推荐文章于 2024-05-30 21:04:01 发布
阅读量469 收藏 1
点赞数 3
分类专栏： 从单调到花里胡哨 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57376815/article/details/122356973
版权

初识JavaScript

JavaScript 赋值

JavaScript 赋值运算符

运算符：

  • =
  • +=
  • -=
  • *=
  • /=
  • %=
  • <<=
  • >>=
  • >>>=
  • &=
  • ^=
  • |=
  • **=

提示：**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。
赋值实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = 2525252;
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 数据类型

  JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = 15455 + "Jager";
		document.getElementById("demo").innerHTML = x;
		</script>

		</body>
</html>

在这里插入图片描述

JavaScript 拥有动态类型

  JavaScript 拥有动态类型。这意味着相同变量可用作不同类型。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x;               
		var x = 545587;         
		var x = "Jager";      

		document.getElementById("demo").innerHTML = x;
		</script>

		</body>
</html>

在这里插入图片描述

JavaScript 字符串值

字符串（或文本字符串）是一串字符（比如 “Jager”）。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var carName1 = "Jager 215454";
		var carName2 = 'Jager 15428545';

		document.getElementById("demo").innerHTML =
		carName1 + "<br>" + 
		carName2; 
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 数值

  JavaScript 只有一种数值类型。超大或超小的数值可以用科学计数法来写。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x1 = 545.00;
		var x2 = 854;
		var x3 = 5.68;

		document.getElementById("demo").innerHTML =
		x1 + "<br>" + x2 + "<br>" + x3;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 数组

  JavaScript 数组用方括号书写。数组的项目由逗号分隔。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var cars = ["Jager", "system", "jg"];

		document.getElementById("demo").innerHTML = cars[0];
		</script>

		</body>
</html>

在这里插入图片描述

JavaScript 对象

  JavaScript 对象用花括号来书写。对象属性是 name:value，由逗号分隔。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>
	
		<script>
		var person = {
		    firstName : "Jager",
		    lastName  : "jg",
		    age       : 35,
		    eyeColor  : "blue"
		};

		document.getElementById("demo").innerHTML =
		person.firstName + " is " + person.age + " years old.";
		</script>

	</body>
</html>

在这里插入图片描述

typeof 运算符

  您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型，typeof 运算符返回变量或表达式的类型。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		document.getElementById("demo").innerHTML = 
		typeof "" + "<br>" +
		typeof "Jager" + "<br>" + 
		typeof "Jager jg";
		</script>
	</body>
</html>

在这里插入图片描述

Undefined

  在 JavaScript 中，没有值的变量，其值是 undefined,typeof 也返回 undefined。

空值

  空值与 undefined 不是一回事。空的字符串变量既有值也有类型。

Null

  在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。不幸的是，在 JavaScript 中，null 的数据类型是对象。我们可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

JavaScript 函数

  JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		function myFunction(p1, p2) {
		    return p1 * p2;
		}
		document.getElementById("demo").innerHTML = myFunction(87, 8);
		</script>

		</body>
</html>

在这里插入图片描述

JavaScript 函数语法

  JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

函数调用

  函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）

函数返回

  当 JavaScript 到达 return 语句，函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = myFunction(654, 7);
		document.getElementById("demo").innerHTML = x;

		function myFunction(a, b) {
		    return a * b;
		}
		</script>

	</body>
</html>

在这里插入图片描述

为何使用函数？

  我们能够对代码进行复用：只要定义一次代码，就可以多次使用它。您能够多次向同一函数传递不同的参数，以产生不同的结果。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		function toCelsius(f) {
		    return (5/9) * (f-32);
		}
		document.getElementById("demo").innerHTML = toCelsius(123.8);
		</script>

	</body>
</html>

在这里插入图片描述

() 运算符调用函数

  使用上面的例子，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

用作变量值的函数

  函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

局部变量

  在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量只能在函数内访问。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo1"></p>

		<p id="demo2"></p>

		<script>
		myFunction();

		function myFunction() {
		    var carName = "Jager";
		    document.getElementById("demo1").innerHTML =
		    typeof carName + " " + carName;
		}

		document.getElementById("demo2").innerHTML =
		typeof carName;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 对象

  我们之前已经学到，JavaScript 变量是数据值的容器。这段代码把一个单一值（porsche）赋给名为Jager的变量。

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var Jager = "jg";
		document.getElementById("demo").innerHTML = Jager;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 事件

  HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
HTML 事件的例子：

  • HTML 网页完成加载
  • HTML 输入字段被修改
  • HTML 按钮被点击
    实例：
<!DOCTYPE html>
<html>
	<body>

		<button onclick="document.getElementById('demo').innerHTML=Date()">点我显示时间</button>

		<p id="demo"></p>

	</body>
</html>

在这里插入图片描述
下面是一些常见的 HTML 事件：

  • onchange HTML 元素已被改变
  • onclick 用户点击了 HTML 元素
  • onmouseover 用户把鼠标移动到 HTML 元素上
  • onmouseout 用户把鼠标移开 HTML 元素
  • onkeydown 用户按下键盘按键
  • onload 浏览器已经完成页面加载

JavaScript 字符串

JavaScript 字符串

  JavaScript 字符串是引号中的零个或多个字符。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = "Jager";
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>

在这里插入图片描述

字符串长度

  内建属性 length 可返回字符串的长度。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var txt = "566546546546846546546";
		document.getElementById("demo").innerHTML = txt.length;
		</script>

	</body>
</html>

在这里插入图片描述

特殊字符

  由于字符串必须由引号包围，JavaScript 会误解这段字符串，避免此问题的解决方法是，使用 \ 转义字符。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>

		var x = "\"Jager\"";
		document.getElementById("demo").innerHTML = x; 

		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 字符串方法

查找字符串中的字符串

  indexOf() 方法返回字符串中指定文本首次出现的索引（位置）。
实例：

<!DOCTYPE html>
<html>
	<body>
		<p id="demo"></p>

		<script>
		var str = "The full name of China is the People's Republic of China.";
		var pos = str.indexOf("full");
		document.getElementById("demo").innerHTML = pos;
		</script>

	</body>
</html>

在这里插入图片描述

检索字符串中的字符串

  search() 方法搜索特定值的字符串，并返回匹配的位置。

提取部分字符串

有三种提取部分字符串的方法：

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

slice() 方法

  slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

substring() 方法

  substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。

substr() 方法

  substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。

替换字符串内容

  replace() 方法用另一个值替换在字符串中指定的值。

转换为大写和小写

  通过 toUpperCase() 把字符串转换为大写。通过 toLowerCase() 把字符串转换为小写。

concat() 方法

  concat() 连接两个或多个字符串。

String.trim()

  trim() 方法删除字符串两端的空白符。
提取字符串字符

  • charAt(position)
  • charCodeAt(position)

charAt() 方法

  charAt() 方法返回字符串中指定下标（位置）的字符串。

charCodeAt() 方法

  charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码。

JavaScript 字符串搜索

搜索字符串的 JavaScript 方法：

  • String.indexOf()
  • String.lastIndexOf()
  • String.startsWith()
  • String.endsWith()

JavaScript 字符串模板

  • Template Literals
  • Template Strings
  • String Templates
  • Back-Tics 语法

第三节到这里就结束了

我爬得越高，眼前的风景就越发迷人。

敬故
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript练习
09-20
其中包含javaScript上机题目，以及答案源码 题目如下 1、 页面两侧的可关闭的对联广告 2、 窗口加载的时候打开一个无状态栏，地址栏的广告窗口 3、 页面中五张轮换播放的最新产品图片 4、 用户名和密码不能为空，...
JS判断当前对象是否为null和undefined和空
Bruce小鬼
11-10 3635
通过上面的代码结果显示null和undefined和空 时都返回了true，想判断一个值是undefined、null和空字符串中的一种，只要用!如果想判断一个值不是undefined、null和空字符串中的一种，则用!
JavaScript判断变量是否为undefined的两种写法
weixin_47353884的博客
12-26 4887
如果要判断一个变量是否未定义（既未声明也未赋值），可以使用 window.variable 来进行判断，如果变量未定义，则会抛出一个 ReferenceError 错误。操作符来判断一个变量是否为 undefined 类型。来判断一个变量是否为 undefined。也可以使用严格相等运算符。因为它会在比较之前进行。，可能导致意外的结果。
JavaScript基础
dongmucat的博客
03-08 382
JavaScript 基础知识总结 数据 值类型 字符串：string 数字：number 布尔：boolean 空：null 未定义：undefined 独一无二的值（ES6）：symbol 引用数据类型 对象：Object 数组：Array 函数：Function typeof 使用 typeof 数据 可以返回以及判断该数据的类型 typeof "John" // 返回 string //特别注意 typeof NaN // 返回
Javascript 中的非空判断 undefined,null, NaN的区别
热门推荐
oscar999的专栏
07-17 4万+
JS 数据类型 在介绍这三个之间的差别之前， 先来看一下JS  的数据类型。 在 Java ,C这样的语言中， 使用一个变量之前，需要先定义这个变量并指定它的数据类型，是整型，字符串型，.... 但是在js 中定义变量统一使用 var , 或者不使用var 也可以使用。 那么js 中是否有数据类型的概念呢？ 当然有， 使用 typeof 就可以判断这个变量的数据类型： Ne
Javascript中判断一个值是否为undefined的方法详解
qq_39459412的博客
05-22 1万+
相信大家都知道当声明一个变量，并且没有给赋值的情况下，它的初始值是undefined。但是在javascript中，怎么检查一个值是否为undefined呢？简单来说，在现代浏览器中，你可以安全的比较变量是否为undefined?1if (name === undefined) {...}一些人反对直接使用undefined变量进行比较，因为在旧的浏览器中允许它的值被重新赋值，比如下面这样:?1u...
第一章之初识Bootstrap
11-26
本节课我们主要了解一下 Boostrap 历史、特点、用途，以及为什么选择 Boostrap 来开发我们的 Web 项目。 一．Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS...
JavaScript实战
12-20
第3章 为程序添加逻辑和控制 45 3.1 使程序智能地响应 45 3.1.1 条件语句基础 46 3.1.2 添加备用计划 49 3.1.3 测试多个条件 49 3.1.4 更复杂的条件 51 3.1.5 嵌套条件语句 53 3.1.6 编写条件语句的技巧 54 3.2 教程...
JavaScript的概念、声明、变量、运算符以及流程控制语句的介绍
01-08
JavaScript基础一初识JavaScriptJavaScript的概念实现特点JavaScript的声明第一种声明方式第二种声明方式第三种声明方式第四种声明方式JavaScript的变量变量的概念变量存储数据的六种数据类型基本数据类型引用数据...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
第3章 01 网络基础和dos命令 02 为何学习linux 03 课程内容介绍 04 操作系统内核与系统调用 05 操作系统安装原理 06 linux操作系统安装 07 初识linux命令 08 linux操作系统目录结构 09 目录及文件操作 第4章 01 ...
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1089
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
【redis】Spring之RedisTemplate配置与使用
05-30 321
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1195
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 508
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
解决renren-fast地图使用echarts报错
Start_t的博客
05-30 204
原因：renrenfast 框架 中 plugins预设了 echarts 插件（3.8.5），并且设置了 // 引入外部库, 无需webpack打包处理。如果引用自己安装的echarts 需要 注释掉build\webpack.base.conf.js 中 externals 的echarts。始终报错，无法安装自己定义的echarts版本（5.4.1），console.log出来是3.84。会提示以下错误或者其他。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 172
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React基础知识笔记
山雀的博客
05-29 823
react基础知识
React-useState
weixin_46479909的博客
05-29 319
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
vue 笔记03
最新发布
m0_47045804的博客
05-30 867
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
第1关：初识数据之特征选择
09-14
3. 数组的长度是固定的，一旦创建后就不能改变。数组的初始化方式有多种，可以通过直接赋值、使用循环赋值等方式进行初始化。使用数组时，可以通过索引来访问数组中的元素。在给定的示例中，可以通过定义一个int类型...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值