js复习笔记day4

最新推荐文章于 2024-09-03 16:07:32 发布

Luna_hua

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量211

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/huali_1995/article/details/77389257

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript 表单

JavaScript 表单验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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"
οnsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

HTML 表单自动验证

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

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

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

数据验证

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

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证。

javascript:void(0) 含义

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

<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()

或者

void(func())
javascript:void(func())
//-->
</script>
</head>

下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

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

<a href="javascript:void(alert('Warning!!!'))">点我!</a>//会有弹窗

//以下实例中参数 a 将返回 undefined
<head>
<script type="text/javascript">
<!--
function getValue(){
  var a,b,c;
  a = void ( b = 5, c = 7 );
  document.write('a = ' + a + ' b = ' + b +' c = ' + c );//运行后  a = undefined b = 5 c = 7

}
//-->
</script>
</head>

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

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

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

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

<a href="javascript:void(0);">点我没有反应的!</a> //不会跳转
<a href="#pos">点我定位到指定位置!</a> //会跳转

JavaScript 函数定义

函数声明后不会立即执行，会在我们需要的时候调用到。

function myFunction(a, b) {
    return a * b;
}

函数表达式

JavaScript 函数可以通过一个表达式定义。

var x = function (a, b) {return a * b};//函数表达式可以存储在变量中

函数存储在变量后，变量可作为函数使用

<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

以上函数实际上是一个匿名函数 (函数没有名称)。

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

函数提升（Hoisting）

自调用函数

如果表达式后面紧跟 () ，则会自动调用

<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但是JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有属性和方法。

arguments.length 属性返回函数调用过程接收到的参数个数：

function myFunction(a, b) {
    return arguments.length;
}

toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
//结果为：function myFunction(a, b) { return a * b; }

通过值传递参数

在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

隐式参数的改变在函数外是不可见的。

通过对象传递参数

在JavaScript中，可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部（全局变量）。

修改对象属性在函数外是可见的。

JavaScript 函数调用

JavaScript 函数有 4 种调用方式。

每种方式的不同方式在于 this 的初始化。

this 关键字

一般而言，在Javascript中，this指向函数执行时的当前对象。

调用 JavaScript 函数

在之前的章节中我们已经学会了如何创建函数。

函数中的代码在函数被调用后执行

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20
//始终是默认的全局对象

全局对象

当函数没有被自身的对象调用时， this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口（window 对象）。

该实例返回 this 的值是 window 对象:

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

函数作为方法调用

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

两个方法都使用了对象本身作为第一个参数。两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

全局和局部变量即便名称相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

JavaScript 闭包

JavaScript 变量可以是局部变量或全局变量。

私有变量可以用到闭包。

全局变量

全局和局部变量即便名称相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

变量生命周期

局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。

function add() {
    var counter = 0;
    counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违，输出的都是 1 !

改变一下：

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

实例解析

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。

自己成熟的速度一定要大于父母老去的速度！坚持！祝老妈早日康复！

Luna_hua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js复习笔记day4

JavaScript 表单JavaScript 表单验证function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false;
复制链接

扫一扫

专栏目录