zoukankan      html  css  js  c++  java
  • JavaScript学习

    JavaScript:写入 HTML 输出:

    document.write("<h1>This is a heading</h1>");
    若文档已经加载完成,则会覆盖整个文档内容.

    JavaScript:对事件作出反应:

    <button type="button" onclick="alert('Welcome!')">点击这里</button>

    JavaScript:改变 HTML 内容:

    x=document.getElementById("demo")  //查找元素
    x.innerHTML="Hello JavaScript";    //改变内容

    JavaScript:改变 HTML 图像:

    改变 HTML <image> 的来源 (src):

    element=document.getElementById('myimage')   //查找元素
    element.src="/i/eg_bulboff.gif";                        //改变图像

    JavaScript:改变 HTML 样式:

    x=document.getElementById("demo")  //找到元素
    x.style.color="#ff0000";           //改变样式

    JavaScript:验证输入:

    if isNaN(x) {alert("Not Numeric")};

    <head> 或 <body> 中的 JavaScript

    通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

    外部的 JavaScript

    外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

    如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

    <script src="myScript.js"></script>

    重新声明 JavaScript 变量

    在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

    var carname="Volvo";
    var carname;

    JavaScript 数组

    创建名为 cars 的数组:

    var cars=new Array();
    cars[0]="Audi";
    cars[1]="BMW";
    cars[2]="Volvo";

    或者 (condensed array):

    var cars=new Array("Audi","BMW","Volvo");

    或者 (literal array):

    var cars=["Audi","BMW","Volvo"];

    Undefined 和 Null

    Undefined 这个值表示变量不含有值。

    可以通过将变量的值设置为 null 来清空变量。

    cars=null;
    person=null;

    声明变量类型

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

    var x= 123;

    var x= ‘hello’;

    可以使用关键词 "new" 来声明其类型

    var x= new Number;
    如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
    提示:绝不要在数字前面写零,除非您需要进行八进制转换。
    var y=0377;
    var z=0xFF;

    JavaScript 对象

    JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。

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

    例如:

    var message="Hello World!";
    var x=message.length;   // 对象属性
    var x=message.toUpperCase();  //对象方法

    定义对象

    对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。

    var person={firstname:"Bill", lastname:"Gates", id:5566};
    对象属性有两种寻址方式:
    name=person.lastname;
    name=person["lastname"];

    也可以如下定义:

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

    对象构造器

    function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor;

      function changeName(name)
      {
       this.lastname=name;
      }

    }

    myFather=new person("Bill","Gates",56,"blue");

    JavaScript 函数

    function functionname(argument1,argument2)
    {
    这里是要执行的代码
    }

    向未声明的 JavaScript 变量来分配值

    如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

    这条语句:

    carname="Volvo";

    将声明一个全局变量 carname,即使它在函数内执行。

    比较运算符

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

    For/In 循环

    循环遍历对象的属性

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

    JavaScript 表单验证

    <html> <head> <script type="text/javascript"> 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} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return 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>

    setTimeOut和setInterval的用法

    setTimeout("function",time) 设置一个超时对象
    setInterval("function",time) 设置一个超时对象
    SetInterval为自动重复,setTimeout不会重复。

  • 相关阅读:
    若没有特殊说明,博文密码都是我的生日
    「考前日志」11.18
    「考前日志」11.17
    洛谷 P2018 消息传递
    「考前日志」11.16
    「考前日志」11.15
    「考前日志」11.14
    2020.11.13 “考试”
    「考前日志」11.13
    AcWing277 饼干
  • 原文地址:https://www.cnblogs.com/dorothychai/p/4311525.html
Copyright © 2011-2022 走看看