• JavaScript


      JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的、并具有安全性能的脚本语言。它与HTML(超文本编辑语言)一起,在一个Web页面中链接多个对象,与Web客户实现交互。无论在客户端还是在服务器端,JavaScript应用程序都要下载到浏览器的客户端执行,从而减轻了服务器端的负担。

     总结其特点如下。

    1.JavaScript主要用来向HTML页面中添加交互行为。

    2.JavaScript是一种脚本语言,语法和Java类似。

    3.一般用来编写客户端的脚本。

    4.JavaScript是一种解释性语言,边执行边解释。

    JavaScript的组成。

    1.ECMASScript标准

    2.浏览器对象模型(Browser Object Model,简:BOM)

    3.文档对象模型(Document Object Model,简:DOM)

    1.JavaScript:对事件作出反应 ---onclick 事件

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

    alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

    onclick 事件是众多事件之一。

    2.JavaScript:改变 HTML 内容

    使用 JavaScript 来处理 HTML 内容是非常强大的功能。

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

    您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

    DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。

    示例代码:(改变图片 改变样式用法类似)

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>我的第一段 JavaScript</h1>
     6 
     7 <p id="demo">
    //JavaScript 能改变 HTML 元素的内容。
     9 </p>
    10 
    11 <script>
    12 function myFunction()
    13 {
    14 x=document.getElementById("demo"); // 找到元素
    15 x.innerHTML="Hello JavaScript!"; // 改变内容
    16 }
    17 </script>
    18 
    19 <button type="button" onclick="myFunction()">点击这里</button>
    20 
    21 </body>
    22 </html>

    3.JavaScript:验证输入

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

    注:isNaN() 函数用于检查其参数是否是非数字值。

    如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false。返回值

    isNaN() 函数可用于判断其参数是否是 NaN,该值表示一个非法的数字(比如被 0 除后得到的结果)。

    如果把 NaN 与任何值(包括其自身)相比得到的结果均是 false,所以要判断某个值是否是 NaN,不能使用 == 或 === 运算符。正因为如此,isNaN() 函数是必需的。

    实现:

    4.<script> 标签

    如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

    <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

    <script> 和 </script> 之间的代码行包含了 JavaScript:

    <body> 中的 JavaScript

    在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

    实例

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <script>
     6 document.write("<h1>This is a heading</h1>");
     7 document.write("<p>This is a paragraph</p>");
     8 </script>
     9 
    10 </body>
    11 </html>

    5.<head> 或 <body> 中的 JavaScript

    
    

    您可以在 HTML 文档中放入不限数量的脚本。

    脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

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

    6.外部的 JavaScript

    也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

    外部 JavaScript 文件的文件扩展名是 .js。

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

    实例

    1 <!DOCTYPE html>
    2 <html>
    3 <body>
    4 <script src="myScript.js"></script>
    5 </body>
    6 </html>

    7.操作 HTML 元素

    如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

    请使用 "id" 属性来标识 HTML 元素:

    例子

    通过指定的 id 来访问 HTML 元素,并改变其内容:

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>My First Web Page</h1>
     6 <p id="demo">My First Paragraph</p>
     7 
     8 <script>
     9 document.getElementById("demo").innerHTML="My First JavaScript";
    10 </script>
    11 
    12 </body>
    13 </html>

    一、输出: 

    8.写到文档输出

    
    

    下面的例子直接把 <p> 元素写到 HTML 文档输出中:

    
    
     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>My First Web Page</h1>
     6 
     7 <script>
     8 document.write("<p>My First JavaScript</p>");
     9 </script>
    10 
    11 </body>
    12 </html>


    但是使用 document.write() 仅仅向文档输出写内容。

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

    实例

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>My First Web Page</h1>
     6 
     7 <p>My First Paragraph.</p>
     8 
     9 <button onclick="myFunction()">点击这里</button>
    10 
    11 <script>
    12 function myFunction()
    13 {
    14 document.write("呃!文档消失了。");
    15 }
    16 </script>
    17 
    18 </body>
    19 </html>

     点击按钮后运行结果:呃!文档消失了。

    二、语句:

    1.JavaScript 语句

    JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

    下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World":

    1 document.getElementById("demo").innerHTML="Hello World";

    1)同样用分号来结束语句
    2) 对大小写敏感
    3)添加空格提高可读性
    4)您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
    1  document.write("Hello
    2       World!");

    不过,您不能像这样折行:
    1  document.write 
    2     ("Hello World!");

    5)JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

    2.JavaScript 代码

    JavaScript 代码(或者只有 JavaScript)是 JavaScript 语句的序列。

    浏览器会按照编写顺序来执行每条语句。

    本例将操作两个 HTML 元素:

    1 document.getElementById("demo").innerHTML="Hello World";
    2 document.getElementById("myDIV").innerHTML="How are you?";

    三、JavaScript 变量

    1.JavaScript 数据类型

    
    

    JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

    当您向变量分配文本值时,应该用双引号或单引号包围这个值。

    当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

    例子

    1 var pi=3.14;
    2 var name="Bill Gates";
    3 var answer='Yes I am!';

    1)我们使用 var 关键词来声明变量,变量声明之后,该变量是空的(它没有值)。
    2)一条语句,多个变量---您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:
    1  var name="Gates", age=56, job="CEO";

           声明也可横跨多行:

      
    1 var name="Gates",
    2   age=56,
    3   job="CEO";
    3)Value = undefined 在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined
    在执行过以下语句后,变量 carname 的值将是 undefined: var carname;但是:如果重新声明 JavaScript 变 量,该变量的值不会丢失:在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
     
    1  var carname="Volvo";
    2   var carname;

    2.JavaScript 数据类型--字符串、数字、布尔、数组、对象、Null、Undefined

     1)JavaScript 拥有动态类型
    这意味着相同的变量可用作不同的类型:
    1   var x                // x 为 undefined
    2   var x = 6;           // x 为数字
    3   var x = "Bill";      // x 为字符串
     2)JavaScript 字符串

    字符串可以是引号中的任意文本。您可以使用单引号或双引号:

      实例

     
    1  var carname="Bill Gates";
    2   var carname='Bill Gates';

      您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

      实例

     
    1  var answer="Nice to meet you!";
    2   var answer="He is called 'Bill'";
    3   var answer='He is called "Bill"';
    3)JavaScript 数字

      JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

     
    1  var x1=34.00;      //使用小数点来写
    2   var x2=34;         //不使用小数点来写

      极大或极小的数字可以通过科学(指数)计数法来书写:

     
    1  var y=123e5;      // 12300000
    2   var z=123e-5;     // 0.00123


    4)JavaScript 布尔 布尔(逻辑)只能有两个值:true 或 false
    5)JavaScript 数组
      下面的代码创建名为 cars 的数组:
     
     1  var cars=new Array();
     2   cars[0]="Audi";
     3   cars[1]="BMW";
     4   cars[2]="Volvo";
     5 
     6  // 或者 (condensed array):
     7   var cars=new Array("Audi","BMW","Volvo");
     8    
     9   //或者 (literal array):
    10   var cars=["Audi","BMW","Volvo"];
    6)JavaScript 对象
      
      对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号 分隔:
      
    1 var person={firstname:"Bill", lastname:"Gates", id:5566};

      上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

      空格和折行无关紧要。声明可横跨多行:

      
    1 var person={
    2   firstname : "Bill",
    3   lastname  : "Gates",
    4   id        :  5566
    5   };

      对象属性有两种寻址方式:

     
    1  name=person.lastname;
    2   name=person["lastname"];

    7)Undefined 和 Null

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

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

     
    1 cars=null;
    2  person=null;


    8)声明变量类型

    当您声明新变量时,可以使用关键词 "new" 来声明其类型:
    1 var carname=new String;
    2 var x=      new Number;
    3 var y=      new Boolean;
    4 var cars=   new Array;
    5 var person= new Object;


    JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

    3.属性和方法

     1) 举例:汽车就是现实生活中的对象。

       汽车的属性:

      
    1 car.name=Fiat
    2 
    3   car.model=500  

       汽车的方法:

     
    1  car.start()
    2 
    3   car.drive()
      对象创建实例:

      

     1 <!DOCTYPE html>
     2   <html>
     3   <body>
     4 
     5   <script>
     6   person=new Object();
     7   person.firstname="Bill";
     8   person.lastname="Gates";
     9   person.age=56;
    10   person.eyecolor="blue";
    11   document.write(person.firstname + " is " + person.age + " years old.");
    12   </script>
    13 
    14   </body>
    15   </html>

    2)访问对象的属性

    访问对象属性的语法是:

    1 objectName.propertyName

    本例使用 String 对象的 length 属性来查找字符串的长度:

    1 var message="Hello World!";
    2 var x=message.length;

    在以上代码执行后,x 的值是:

    12

    3)访问对象的方法

    您可以通过下面的语法调用方法:

    1 objectName.methodName()

    这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写:

    1 var message="Hello world!";
    2 var x=message.toUpperCase();

    在以上代码执行后,x 的值是:

    HELLO WORLD!

    4)javaScript 函数语法

    函数就是包裹在花括号中的代码块,前面使用了关键词 function:

    1 function functionname()
    2 {
    3  //这里是要执行的代码
    4 }

    当调用该函数时,会执行函数内的代码。

    5)JavaScript 变量的生存期

    JavaScript 变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除。

    全局变量会在页面关闭后被删除。

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

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

    这条语句:

    carname="Volvo";

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

    四、JavaScript 运算符

    1.用于字符串的 + 运算符

    + 运算符用于把文本值或字符串变量加起来(连接起来)。

    1 txt1="What a very";
    2 txt2="nice day";
    3 txt3=txt1+" "+txt2;

    对字符串和数字进行加法运算--如果把数字与字符串相加,结果将成为字符串

    例子:

      

     1 <html>
     2 
     3   <body>
     4 
     5   <script type="text/javascript">
     6   x=5+5;
     7   document.write(x);
     8   document.write("<br />");
     9   x="5"+"5";
    10   document.write(x);
    11   document.write("<br />");
    12   x=5+"5";
    13   document.write(x);
    14   document.write("<br />");
    15   x="5"+5;
    16   document.write(x);
    17   document.write("<br />");
    18   </script>
    19 
    20   <h3>规则是:</h3>
    21 
    22   <p><strong>如果把数字与字符串相加,结果将成为字符串。</strong></p>
    23 
    24   </body>
    25   </html>

    2.比较和逻辑运算符用于测试 true 或 false。(无特别之处)

    3.if else while for 用法不再赘述。

    五、JavaScript 错误 - Throw、Try 和 Catch

    1.JavaScript 测试和捕捉

    1)

    try 语句允许我们定义在执行时进行错误测试的代码块。

    catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

    JavaScript 语句 try 和 catch 是成对出现的。

    语法

    1 try
    2   {
    3   //在这里运行代码
    4   }
    5 catch(err)
    6   {
    7   //在这里处理错误
    8   }

    实例

    在下面的例子中,我们故意在 try 块的代码中写了一个错字。

    catch 块会捕捉到 try 块中的错误,并执行代码来处理它。

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script>
     5 var txt="";
     6 function message()
     7 {
     8 try
     9   {
    10   adddlert("Welcome guest!");
    11   }
    12 catch(err)
    13   {
    14   txt="There was an error on this page.
    
    ";
    15   txt+="Error description: " + err.message + "
    
    ";
    16   txt+="Click OK to continue.
    
    ";
    17   alert(txt);
    18   }
    19 }
    20 </script>
    21 </head>
    22 
    23 <body>
    24 <input type="button" value="View message" onclick="message()">
    25 </body>
    26 
    27 </html>
    
    

    2)Throw 语句

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

    正确的技术术语是:创建或抛出异常(exception)。

    如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

    语法

    throw exception

    异常可以是 JavaScript 字符串、数字、逻辑值或对象。

    实例

    本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

     1 <script>
     2 function myFunction()
     3 {
     4 try
     5   {
     6   var x=document.getElementById("demo").value;
     7   if(x=="")    throw "empty";
     8   if(isNaN(x)) throw "not a number";
     9   if(x>10)     throw "too high";
    10   if(x<5)      throw "too low";
    11   }
    12 catch(err)
    13   {
    14   var y=document.getElementById("mess");
    15   y.innerHTML="Error: " + err + ".";
    16   }
    17 }
    18 </script>
    19 
    20 <h1>My First JavaScript</h1>
    21 <p>Please input a number between 5 and 10:</p>
    22 <input id="demo" type="text">
    23 <button type="button" onclick="myFunction()">Test Input</button>
    24 <p id="mess"></p>

    六、JavaScript 表单验证

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

    被 JavaScript 验证的这些典型的表单数据有:

    • 用户是否已填写表单中的必填项目?
    • 用户输入的邮件地址是否合法?
    • 用户是否已输入合法的日期?
    • 用户是否在数据域 (numeric field) 中输入了文本?

    1)必填(或必选)项目

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

    1 function validate_required(field,alerttxt)
    2 {
    3 with (field)
    4 {
    5 if (value==null||value=="")
    6   {alert(alerttxt);return false}
    7 else {return true}
    8 }
    9 }

    2)E-mail 验证

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

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

     1 function validate_email(field,alerttxt)
     2 {
     3 with (field)//索引“@” 与 “.”的位置
     4 {
     5 apos=value.indexOf("@")
     6 dotpos=value.lastIndexOf(".") 
     7 if (apos<1||dotpos-apos<2) 
     8   {alert(alerttxt);return false}
     9 else {return true}
    10 }
    11 }

    七、JavaScript HTML DOM

    1.HTML DOM (文档对象模型)

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

    HTML DOM 模型被构造为对象的树。

    下面有一张图片,放大了自己看!(y老师曾说过:自己要有动手能力和搜索能力)

    DOM HTML 树

    通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

    • JavaScript 能够改变页面中的所有 HTML 元素
    • JavaScript 能够改变页面中的所有 HTML 属性
    • JavaScript 能够改变页面中的所有 CSS 样式
    • JavaScript 能够对页面中的所有事件做出反应

    1.查找 HTML 元素

    通常,通过 JavaScript,您需要操作 HTML 元素。

    为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

    • 通过 id 找到 HTML 元素
    • 通过标签名找到 HTML 元素
    • 通过类名找到 HTML 元素

    1)通过 id 查找 HTML 元素

    在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

    本例查找 id="intro" 元素:

    1 <script>
    2 x=document.getElementById("intro");
    3 document.write('<p>id="intro" 的段落中的文本是:' + x.innerHTML + '</p>');
    4 </script>

    结果:id="intro" 的段落中的文本是:Hello World!

    如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

    如果未找到该元素,则 x 将包含 null。

    2)通过标签名查找 HTML 元素

    实例

    本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:

    1 var x=document.getElementById("main");
    2 var y=x.getElementsByTagName("p");
    3 document.write('id 为 "main" 的 div 中的第一段文本是:' + y[0].innerHTML);

    2.JavaScript HTML DOM - 改变 HTML

    1)改变 HTML 输出流

    JavaScript 能够创建动态的 HTML 内容:

    今天的日期是: Thu Aug 15 2013 14:47:02 GMT+0800 (CST)

    在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

    实例

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <script>
     6 document.write(Date());
     7 </script>
     8 
     9 </body>
    10 </html>

    提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

    2)改变 HTML 内容

    修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

    如需改变 HTML 元素的内容,请使用这个语法:

    document.getElementById(id).innerHTML=new HTML

    本例改变了 <h1> 元素的内容:

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1 id="header">Old Header</h1>
     6 
     7 <script>
     8 var element=document.getElementById("header");
     9 element.innerHTML="New Header";
    10 </script>
    11 
    12 </body>
    13 </html>

    例子解释:

    • 上面的 HTML 文档含有 id="header" 的 <h1> 元素
    • 我们使用 HTML DOM 来获得 id="header" 的元素
    • JavaScript 更改此元素的内容 (innerHTML)

    3)改变 HTML 属性

    如需改变 HTML 元素的属性,请使用这个语法:

    document.getElementById(id).attribute=new value

    本例改变了 <img> 元素的 src 属性:

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <img id="image" src="smiley.gif">
     6 
     7 <script>
     8 document.getElementById("image").src="landscape.jpg";
     9 </script>
    10 
    11 </body>
    12 </html>

    例子解释:

    • 上面的 HTML 文档含有 id="image" 的 <img> 元素
    • 我们使用 HTML DOM 来获得 id="image" 的元素
    • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg"

    3.JavaScript HTML DOM - 改变 CSS

    1)改变 HTML 样式

    如需改变 HTML 元素的样式,请使用这个语法:

    document.getElementById(id).style.property=new style

    例子 

    本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:

    1 <h1 id="id1">My Heading 1</h1>
    2 
    3 <button type="button" onclick="document.getElementById('id1').style.color='red'">
    4 点击这里
    5 </button>

    2)HTML DOM Style 对象参考手册  http://www.w3school.com.cn/htmldom/dom_obj_style.asp

    4.JavaScript HTML DOM - 事件

    1)对事件做出反应

    我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

    如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

    onclick=JavaScript

    HTML 事件的例子:

    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图像已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当提交 HTML 表单时
    • 当用户触发按键时

    例子 1

    在本例中,当用户在 <h1> 元素上点击时,会改变其内容:

    <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

    例子 2

    本例从事件处理器调用一个函数:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script>
     5 function changetext(id)
     6 {
     7 id.innerHTML="谢谢!";
     8 }
     9 </script>
    10 </head>
    11 <body>
    12 <h1 onclick="changetext(this)">请点击该文本</h1>
    13 </body>
    14 </html>

    2)HTML 事件属性

    如需向 HTML 元素分配 事件,您可以使用事件属性。

    向 button 元素分配 onclick 事件:

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

    点击按钮就可以执行 displayDate() 函数。 

    3) 使用 HTML DOM 来分配事件

    HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:

    实例

    向 button 元素分配 onclick 事件:

    1 <script>
    2 document.getElementById("myBtn").onclick=function(){displayDate()};
    3 </script>

    在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。 

    4)onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发。

    onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

    onload 和 onunload 事件可用于处理 cookie。

    <body onload="checkCookies()">

    实例:

      

     1 <!DOCTYPE html>
     2   <html>
     3   <body onload="checkCookies()">
     4 
     5   <script>
     6   function checkCookies()
     7   {
     8   if (navigator.cookieEnabled==true)
     9   {
    10   alert("已启用 cookie")
    11   }
    12   else
    13   {
    14   alert("未启用 cookie")
    15   }
    16   }
    17   </script>
    18 
    19   <p>提示框会告诉你,浏览器是否已启用 cookie。</p>
    20   </body>
    21   </html>

    5)onchange 事件

    onchange 事件常结合对输入字段的验证来使用。

    下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

    <input type="text" id="fname" onchange="upperCase()">

    实例:

      

     1 <!DOCTYPE html>
     2   <html>
     3   <head>
     4   <script>
     5   function myFunction()
     6   {
     7   var x=document.getElementById("fname");
     8   x.value=x.value.toUpperCase();
     9   }
    10   </script>
    11   </head>
    12   <body>
    13 
    14   请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
    15   <p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
    16 
    17   </body>
    18   </html>
    19 
    20 6)onmouseover 和 onmouseout 事件
    21 
    22 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
    23 
    24 实例:
    25 
    26   <!DOCTYPE html>
    27   <html>
    28   <body>
    29 
    30   <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-  color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
    31 
    32   <script>
    33   function mOver(obj)
    34   {
    35   obj.innerHTML="谢谢"
    36   }
    37 
    38   function mOut(obj)
    39   {
    40   obj.innerHTML="把鼠标移到上面"
    41   }
    42   </script>
    43 
    44   </body>
    45   </html>

    7)onmousedown、onmouseup 以及 onclick 事件

    onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

    八、JavaScript HTML DOM 元素(节点)

    1.创建新的 HTML 元素

    如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

    实例

     1 <div id="div1">
     2 <p id="p1">这是一个段落</p>
     3 <p id="p2">这是另一个段落</p>
     4 </div>
     5 
     6 <script>
     7 var para=document.createElement("p");
     8 var node=document.createTextNode("这是新段落。");
     9 para.appendChild(node);
    10 
    11 var element=document.getElementById("div1");
    12 element.appendChild(para);
    13 </script>

    例子解释:

    这段代码创建新的 <p> 元素:

    var para=document.createElement("p");

    如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

    var node=document.createTextNode("这是新段落。");

    然后您必须向 <p> 元素追加这个文本节点:

    para.appendChild(node);

    最后您必须向一个已有的元素追加这个新元素。

    这段代码找到一个已有的元素:

    var element=document.getElementById("div1");

    这段代码向这个已有的元素追加新元素:

    element.appendChild(para);

    2.删除已有的 HTML 元素

    如需删除 HTML 元素,您必须首先获得该元素的父元素:

    实例

     1 <div id="div1">
     2 <p id="p1">这是一个段落。</p>
     3 <p id="p2">这是另一个段落。</p>
     4 </div>
     5 
     6 <script>
     7 var parent=document.getElementById("div1");
     8 var child=document.getElementById("p1");
     9 parent.removeChild(child);
    10 </script>

    例子解释:

    这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:

    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    

    找到 id="div1" 的元素:

    var parent=document.getElementById("div1");

    找到 id="p1" 的 <p> 元素:

    var child=document.getElementById("p1");

    从父元素中删除子元素:

    parent.removeChild(child);

    提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。

    不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

    这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

    var child=document.getElementById("p1");
    child.parentNode.removeChild(child);
     运行结果:这是另一个段落。

    九、JavaScript Window - 浏览器对象模型

    1.Window 对象

    所有浏览器都支持 window 对象。它表示浏览器窗口。

    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

    全局变量是 window 对象的属性。

    全局函数是 window 对象的方法。

    甚至 HTML DOM 的 document 也是 window 对象的属性之一:

    window.document.getElementById("header");

    与此相同:

    document.getElementById("header");

    1)Window 尺寸

    有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

    对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

    • window.innerHeight - 浏览器窗口的内部高度
    • window.innerWidth - 浏览器窗口的内部宽度

    对于 Internet Explorer 8、7、6、5:

    • document.documentElement.clientHeight
    • document.documentElement.clientWidth

    或者

    • document.body.clientHeight
    • document.body.clientWidth

    实用的 JavaScript 方案(涵盖所有浏览器):

    实例

    1 var w=window.innerWidth
    2 || document.documentElement.clientWidth
    3 || document.body.clientWidth;
    4 
    5 var h=window.innerHeight
    6 || document.documentElement.clientHeight
    7 || document.body.clientHeight;

    2)其他 Window 方法

    一些其他方法:

    • window.open() - 打开新窗口
    • window.close() - 关闭当前窗口
    • window.moveTo() - 移动当前窗口
    • window.resizeTo() - 调整当前窗口的尺寸

    2.JavaScript Window Screen

    window.screen 对象在编写时可以不使用 window 这个前缀。

    一些属性:

    • screen.availWidth - 可用的屏幕宽度
    • screen.availHeight - 可用的屏幕高度

    1)Window Screen 可用高度

    screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

    实例

    返回您的屏幕的可用高度:

    <script>
    document.write("可用高度:" + screen.availHeight);
    </script>

    以上代码输出为:可用高度:1058

    JavaScript到此结束  谢谢你的观看!

                                                                                                                        生命不息,编码不止。

                                                                                         爱自己 爱生活  爱代码  爱音乐 爱文字 爱交友

     

    ©北京你好!

          

    作者:微冷的风
                出处:http://www.cnblogs.com/smbk/ 
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    并发编程之线程进阶
    并发编程之线程
    进程间通信(队列和管道)
    在python程序中的进程操作
    操作系统之进程
    网络编程之黏包
    树莓派 websocket 控制LED
    lua 调用 C -- 实例 C函数作为应用程序的一部分
    linux 环境下进程什么时候会被 killed掉
    STM32 + cJSON 死机问题解决
  • 原文地址:https://www.cnblogs.com/smbk/p/5513905.html
Copyright © 2020-2023  润新知