javascript基础复习--2016.6.16

男娘i 2022-09-21 05:46 119阅读 0赞

1.javascript引入

**对比css**

2.javascript输出  
访问某个html元素，可以使用`document.getElementById(id)`方法

<div id="div1" >
    这里是一段原来的文字
    </div>
    <script> document.getElementById("div1").innerHTML="修改后的文字"; </script>

**写到文档输出**

document.write("直接写到网页上的文字");

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

<h1>My First Web Page</h1>
    
    <p>My First Paragraph.</p>
    
    <button onclick="myFunction()">点击这里</button>
    
    <script> function myFunction() { document.write("糟糕！文档消失了。"); } </script>

3.数组

var cars=new Array();
    cars[0]="Audi";
    cars[1]="BMW";
    cars[2]="Volvo";
    //或者
    var cars=new Array("Audi"，"BMW","Volovo");
    //或者
    var cars=["Audi"，"BMW","Volvo"];

4.对象  
对象由花括号分割。在括号内部，对象的属性以名称和值对的形式定义。

var person={firstname:"Bill",lastname:"Gates",id:0329};

输出：

document.write(person.lastname + "<br />");
    document.write(person["lastname"] + "<br />");

Undefined 这个值表示变量不含有值。  
可以通过将变量的值设置为 null 来清空变量。

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

声明变量类型

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

创建javascript对象

person=new Object();
    person.firstname="Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";

访问对象的属性

var txt="hello javascrpit";
    var x=message.toUpperCase();

5函数

<DOCTYPE html>
    <html>
    <head>
    <script> function clickFunction() { alert("hello javascript"); } </script>
    </head>
    <body>
    <button onclick="clickFunction()">点击按钮</button>
    </body>
    </html>

**局部变量和全局变量**  
通过var在函数内部声明的变量称为局部变量，所以只能在函数内部访问它。函数运行完毕，本地变量就会自动被删除。  
在函数外部声明的变量是全局变量，网页上所有的脚本和函数都能访问它。在页面关闭后会被删除。  
如果直接使用**未声明的变量**，该变量将自动作为**全局变量。**  
6.运算符

//数字和字符串相加，结果将成为字符串
    x=5+5;
    document.write(x);//10
    
    x="5"+"5";
    document.write(x);//55
    
    x=5+"5";
    document.write(x);//55
    
    x="5"+5;
    document.write(x);//55

7循环语句

<button onclick="clickFunction()">点击按钮</button>
    <p id="demo"></p>
    <script> function clickFunction() { var x=""; var time=new Date().getHours();//获取当前的小时数 if(time<20) { x="Good day"; } document.getElementById("demo").innerHTML=x; } </script>

//获取今天是星期几，其中星期日为0，星期一为1。。。
    var day=new Date().getDay();

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

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

8.错误  
try语句测试代码块的错误  
catch语句处理错误，try代码块发生错误时，所执行的代码块  
throw语句创建自定义错误  
当错误发生时，javascript通常会停止，抛出一个错误。

<input type="button" value="查看消息" onclick="message()" />//定义一个按钮
    <script> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="本页有一个错误。\n\n"; txt+="错误描述：" + err.message + "\n\n"; txt+="点击确定继续。\n\n"; alert(txt); }//发生错误后显示的信息 } </script>

throw允许我们创建自定义错误

<p>请输入 5 到 10 之间的数字：</p>
    <input id="demo" type="text" />//输入的文本框
    <button type="button" onclick="myFunction()">测试输入值</button>
    <p id="mess"></p>
    <script> function myFunction() { try { var x=document.getElementById("demo").value;//获取输入的值 if(x=="") throw "值为空"; if(isNaN(x)) throw "不是数字"; if(x>10) throw "太大"; if(x<5) throw "太小"; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="错误：" + err + "。"; } } </script>

9.表单验证  
表单的数据被送往服务器之前对HTML表单中的这些输入数据进行验证。

<html>
    <head>
    <script type="text/javascript"> function validate_required(field,alerttxt) { with (field)//with 语句：为语句设定默认对象。with (object){ statements } { if (value==null||value=="") {alert(alerttxt);return false} else { return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false}//光标显示在email，返回false } } </script>
    </head>
    
    <body>
    <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> //表单提交时调用验证有效性的函数
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
    </body>
    
    </html>