JavaScript的基础

于 2023-04-18 10:13:37 发布
阅读量273 收藏 3
点赞数 1
分类专栏： 前端基础学习 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51884452/article/details/130212853
版权

文章目录

一、JavaScript 声明提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

以下两个实例将获得相同的结果：

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x 

var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

要理解以上实例就需要理解 “hoisting(声明提升)”。

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

  • JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

以下两个实例结果结果不相同：

 var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

在这里插入图片描述

 var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

在这里插入图片描述
实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

实例 2 类似以下代码:

var x = 5; // 初始化 x
var y;     // 声明 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

y = 7;    // 设置 y 为 7

二、JavaScript 严格模式(use strict)

JavaScript 严格模式（strict mode）即在严格的条件下运行。

  • 使用 “use strict” 指令

“use strict” 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

在函数内部声明是局部作用域 (只在函数内使用严格模式):

x = 3.14;       // 不报错
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

为什么使用严格模式:

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它。

  • 严格模式的限制

不允许使用未声明的变量：

 "use strict";
x = 3.14;                // 报错 (x 未定义)

不允许删除变量或对象。

 "use strict";
var x = 3.14;
delete x;                // 报错

不允许删除函数。

 "use strict";
function x(p1, p2) {};
delete x;                // 报错  

不允许变量重名:
"use strict";
function x(p1, p1) {};   // 报错



不允许使用八进制:
"use strict";
var x = 010;             // 报错



不允许使用转义字符:
"use strict";
var x = \010;            // 报错



不允许对只读属性赋值:
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 报错



不允许对一个使用getter方法读取的属性进行赋值
"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;            // 报错



不允许删除一个不允许删除的属性：
"use strict";
delete Object.prototype; // 报错



变量名不能使用 "eval" 字符串:
"use strict";
var eval = 3.14;         // 报错



变量名不能使用 "arguments" 字符串:
"use strict";
var arguments = 3.14;    // 报错



不允许使用以下这种语句:
"use strict";
with (Math){x = cos(2)}; // 报错



由于一些安全原因，在作用域 eval() 创建的变量不能被调用：
"use strict";
eval ("var x = 2");
alert (x);               // 报错
  • 禁止this关键字指向全局对象。
function f(){
    return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 
    "use strict";
    return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

function f(){
    "use strict";
    this.a = 1;
};
f();// 报错，this未定义

"use strict" 指令只允许出现在脚本或函数的开头。

三、JavaScript 表单

JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段**(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：**


function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

以上 JavaScript 代码可以通过 HTML 代码来调用：


<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>


forms 集合返回当前页面所有表单的数组集合。
语法
document.forms[].property

在这里插入图片描述

  • HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：


<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>
  • 数据验证

数据验证用于确保用户输入的数据是有效的。

典型的数据验证有：

必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?

大多数情况下，数据验证用于确保用户正确输入数据。

数据验证可以使用不同方法来定义，并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

  • HTML 约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

HTML 约束验证基于：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

在这里插入图片描述在这里插入图片描述

四、JavaScript 表单验证

  • JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？
验证输入是否是一个正确的email地址？
验证日期是否输入正确？
验证表单输入内容是否为数字型？
  • 必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：


function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

以上函数在 form 表单提交时被调用:

<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
	
</body>

在这里插入图片描述

  • E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
在这里插入图片描述在这里插入图片描述

<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>

在这里插入图片描述

五、JavaScript 验证 API

约束验证 DOM 方法
在这里插入图片描述以下实例如果输入信息不合法，则返回错误信息：
在这里插入图片描述

  • 约束验证 DOM 属性
    在这里插入图片描述
  • Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:
在这里插入图片描述

  • 实例

如果输入的值大于 100，显示一个信息：
rangeOverflow 属性
在这里插入图片描述

  • JavaScript 保留关键字

在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

学习来自“https://www.runoob.com/js”

总结

清晨的小猫，看见我就跑。就像阳光下的泡沫，一触就破。

SPIRT00
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础
02-24
JavaScript基础 模块挑战是学生独立完成的下午项目或作业。 这是在先前由讲师完成的指导项目的基础上扩展的。 高级CSS和JavaScript JavaScript基础 目标 使用let，const，var并演示它们之间的差异。 了解并能够使用...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
挣钱买房买车的博客
08-18 1万+
JavaScript基础入门详细总结
JavaScript基础语法
m0_67683346的博客
11-02 5287
javascript中的一些基础语法
JavaScript 基础概念
weixin_52682120的博客
04-20 3015
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaScript基础入门
dangfulin的博客
08-21 5358
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
Javascript 基础知识学习
岳来的博客
11-23 6513
javascript 基础学习
JavaScript基础知识点
qq_40046544的博客
08-06 1927
JavaScript是一门完备的动态编程语言。当应用于HTML文档时，可为网站提供动态交互特性。由布莱登布兰登·艾克发明。字面量是用于表达源代码中的一个固定值的表示法字面量有数字字面量、字符串字面量、数组字面量、对象字面量等变量是计算机中用来存储数据的容器，简单理解是一个盒子。未定义是比较特殊的类型，只有一个值undefined只声明变量未赋值的情况下，变量的默认值为undefined简介：数组是一种可以按顺序保存数据的数据类型元素：数组中保存的每一个数据都叫做数组元素下标：数组中数据的编号。...
Javascript基础
02-26
Javascript基础
JavaScript 基础
02-16
主要为个人学习笔记 超详细
JavaScript基础语法笔记
04-12
JavaScript基础语法笔记(for、对象、js基础语法截图等...)
javaScript基础详解
10-20
本文主要介绍了javaScript的基础知识，具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript基础知识
最新发布
06-03
JS的引入 let的声明 数据类型
javascript基础语法
03-31
一些个人学习js基础语法的笔记

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值