JavaScript（二）

shifting_sand

已于 2023-02-15 16:36:34 修改

阅读量76

点赞数

分类专栏：前端文章标签： javascript

于 2021-07-15 10:03:37 首次发布

本文链接：https://blog.csdn.net/shunjianxaioshi/article/details/118675485

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript比较和逻辑运算符

用于测试true或false
比较运算符，给定x=5：

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true

if (age<18 document.write("Too young")

逻辑运算符，x=6，y=3

运算符	描述	例子
&&	and	(x<10&&y>1)为true
\|\|	or	(x==5\|\|y==5)为false
!	not	!(x==y)为true

条件运算符

variablename=(condition)?value1:value2

JavaScript if…Else语句

if 语句
if … else 语句
if… else if …else语句
switch语句

if (条件)
  {
  只有当条件为 true 时执行的代码
  }

if (条件)
  {
  当条件为 true 时执行的代码
  }
else
  {
  当条件不为 true 时执行的代码
  }
  
if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮来显示今天是周几：</p>

<button onclick="myFunction()">点击这里</button>

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

<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  default:
  	x="期待周末";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>

</html>

JavaScript For循环

for 循环代码块一定的次数
for/in 循环遍历对象的属性
while 指定条件为true时循环指定的代码块
do/while 指定条件为true时循环制定的代码块

for (var i=0,len=cars.length;i<len;i++)
{
	document.write(cars[i]+"<br>");
}

var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}

语句1，语句2，语句3都可以省略。
语句二省略需要里面有break

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
  {
  txt=txt + person[x];
  }

JavaScript while循环

while (条件)
  {
  需要执行的代码
  }

do
  {
  需要执行的代码
  }
while (条件);

JavaScript break和continue语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }

for (i=0;i<=10;i++)
 {
 if (i==3) continue;
  x=x + "The number is " + i + "<br>";
  }

cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块

JavaScript数据类型

JavaScript中有6种数据类型：
- string
- number
- boolean
- object
- function
- symbol
3种对象类型：
- Object
- Date
- Array
2个不包含任何值的数据类型：
- null
- undefined
constructor属性

constructor属性返回所有JavaScript变量的构造函数

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }

document.getElementById("demo").innerHTML = myVar;

myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

// "0" 转换为boolean值为true  []也是

// 判断是否为数组。

<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
/*return myArray.constructor.toString().indexOf("Array") > -1;这句话怎么解释?

1、myArray 是函数 isArray 的参数，这里调用函数的时候，会传来数组 fruits。

2、constructor 是一个属性，构造函数属性，不同类型的数据，会得到相应不同的值。因为 myArray 是个数组，这里的 myArray.constructor 的值就是 function Array() { [native code] }。(如果 myArray 是个字符串，myArray.constructor 的值就是function String() { [native code] }。还有 number，boolean，object，等等。)
3、toString() 是个方法，变字符串的方法，这里把 function Array() { [native code] } 变成字符串，为了后面好检索。

4、indexOf("Array") 是个方法，检索字符串，这里看字符串 function Array() { [native code] } 里有没有Array，有就返回首次出现的位置，是一个数值，这里是 9。如果出现在第一个字符，会返回 0。空格参与计数。如果没有找到，就返回 -1。只要 >-1，就说明有 Array，就能判断原来那个函数调用传来的 fruits 是一个数组。如果 myArray.constructor.toString().indexOf("Object")>-1，那么 myArray 就是一个 Object 对象。不过那样地话，这个参数的名字就没取好了，应该叫做 myObject。*/

JavaScript错误-Throw、Try和Catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在try和catch语句之后，无论是否有触发异常，该语句都会执行。

try
  {
  //异常的抛出
  }
catch(err)
  {
  // 异常的捕获与处理
  }
finally{
 // 结束处理
}

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

<script>
function myFunction(){
	var message, x;
	message = document.getElementById("p01")
	message.insertHTML = "";
	x = document.getElementById("demo").value;
	try{
	    if(x=="")    throw "empty";
	    if(isNaN(x)) throw "not a number";
	    x = Number(x);
	    if(x>10)     throw "too high";
	    if(x<5)      throw "too low";
	  }
	catch(err){
		message.innerHTML = "error": + err + ".";
	}
	finally{
		docment.getElementById("demo").value="";
	}
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

JavaScript 调试

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。

设置断点
- 在调试窗口中，你可以设置 JavaScript 代码的断点。
debugger 关键字
- debugger 关键字用于停止执行 JavaScript，并调用调试函数。如果没有调试可用，debugger 语句将无法工作。

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

JavaScript 声明提升

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript 只有声明的变量会提升，初始化的不会。

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

var getName=function(){
  console.log(2);
}

function getName(){
  console.log(1);
}

getName();
//结果为2
//可能会有人觉得最后输出的结果是 1。但是 getName 是一个变量，因此这个变量的声明也将提升到顶部，而变量的赋值依然保留在原来的位置。需要注意的是，函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。

//函数、变量声明提升后
function getName(){    //函数声明提升到顶部
  console.log(1);
}

var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
  console.log(2);
}

getName();    // 最终输出：2

JavaScript 严格模式(use strict)

JavaScript 严格模式（strict mode）即在严格的条件下运行。
“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

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

switch 语句会使用恒等计算符(===)进行比较
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。

for (var i = 0; i < 10; i++) {
    // some code
}
return i; # 10

在ES6中提出了 let 的概念，使用 let 声明的变量将具有作用域的限制

for (let i = 0; i < 10; i++) {
}
return i;

JavaScript表单验证

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

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

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
- 用户是否已填写表单中的必填项目？
- 用户输入的邮件地址是否合法？
- 用户是否已输入合法的日期？
- 用户是否在数据域 (numeric field) 中输入了文本？

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

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

输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
- 约束验证 HTML 输入属性。disabled：规定输入的元素不可用
- 约束验证 CSS 伪类选择器。 :disabled：选取属性为 “disabled” 属性的 input 元素

shifting_sand

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（二）

JavaScript比较和逻辑运算符用于测试true或false比较运算符，给定x=5：运算符描述例子 == 等于 x==8 为 false === 全等（值和类型） x===5 为 true；x==="5" 为 false != 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false <=
复制链接

扫一扫

专栏目录