zoukankan      html  css  js  c++  java

  • javaScript简单使用

    注意:此文档是对于w3school的学习与整理

    1. JavaScript 是一种轻量级的编程语言。是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。

    　　1). JavaScript：写入 HTML 输出

    document.write("<h1>This is a heading</h1>");
    只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

    2). JavaScript：对事件作出反应

    <button type="button" onclick="alert('Welcome!')">点击这里</button>
    alert() 函数一般用于代码测试

    3). JavaScript：改变 HTML 内容

    x=document.getElementById("demo")  //查找元素, 这个方法是 HTML DOM 中定义的
x.innerHTML="Hello JavaScript";

    4). JavaScript：改变 HTML 图像

    <script>
function changeImage() {
    element=document.getElementById('myimage');
    if (element.src.match("bulbon")) {
        element.src="/i/eg_bulboff.gif";
    }
    else {
        element.src="/i/eg_bulbon.gif";
    }
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>

    5).  JavaScript：改变 HTML 样式

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

    6). JavaScript：验证输入

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

    　　7). javaScript 注释可用于提高代码的可读性。

    　　单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。

    8). 声明变量

    1. var a = '';
2. 重新声明 JavaScript 变量: 
    var carname="test";
    var carname;
    依然是test

    9). JavaScript 数据类型: 字符串(string)、数字(数字均为 64 位)、布尔、数组、对象、Null、Undefined

    1. 对象属性有两种寻址方式：
  var person={
    firstname : "Bill",
    lastname  : "Gates",
    id        :  5566
  };
  name=person.lastname;
  name=person["lastname"];
2. 声明变量类型
  var carname=new String;
  var x=      new Number;
  var y=      new Boolean;
  var cars=   new Array;
  var person= new Object;
3. 数字: 整数（不使用小数点或指数计数法）最多为15位。小数的最大位数是17，但是浮点运算并不总是100%准确. 如果前缀为0，则解释为八进制数，如果前缀为 0x，则解释为十六进制数。
　　　1) 属性：MAX VALUE, MIN VALUE, NEGATIVE INFINITIVE, POSITIVE INFINITIVE, NaN, prototype, constructor
　　 2) 方法：toExponential(), toFixed(), toPrecision(), toString(), valueOf()
4. 字符串
  var txt = "Hello";
  txt.length=5;
  txt.big();txt.small();txt.bold();txt.fontcolor("Red");txt.toLowerCase();txt.toUpperCase()......
  txt.indexOf('e'); str.match("e");
  txt.replace('e', 'a');
  txt.search('e');
5. 数组　
  var x;
  var arr = new Array();
  arr[0] = "Saab";
  arr[1] = "Volvo";
  arr[2] = "BMW";
  for (x in arr)
  {
  　　document.write(arr[x] + "<br />")
  }
  var arr2=new Array("Saab","Volvo","BMW");

  arr.concat(arr2);
  arr.join(); //默认,
  arr.join(.);
  arr.sort();　　

    10. JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。

    1. 访问对象的属性: objectName.propertyName
2. 访问对象的方法: objectName.methodName()
    example:Math(): Math.round(), Math.random(), Math.max(), Math.min()

    11. break与continue

    1. 如果把数字与字符串相加，结果将成为字符串。
2. do/while 循环。该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行：
3. break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。
4. JavaScript 标签
    1)　标记 JavaScript 语句，请在语句之前加上冒号：
        label:
        语句
    2) break 和 continue 语句仅仅是能够跳出代码块的语句。
        语法
        break labelname;
        continue labelname;
    continue 语句（带有或不带标签引用）只能用在循环中。 break 语句（不带标签引用），只能用在循环或 switch 中。
    通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

    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>");
    }

    12. 在 JavaScript 中，有多少种不同类型的循环? 两种。for 循环和 while 循环。

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

    2. HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

    1. <head> 中的 JavaScript 函数

    <!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
　　document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
    点击时调用

    2. <body> 中的 JavaScript 函数

    <!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
　　document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
    我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。　　

    3. 外部的 JavaScript

    <body>
<script src="myScript.js"></script>
</body>
    外部脚本不能包含 <script> 标签。　

    3. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

    1). JavaScript 函数语法

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

    2). 调用带参数的函数

    function myFunction(var1,var2)
{
    这里是要执行的代码
}

    3). 带有返回值的函数

    function myFunction()
{
    var x=5;
    return x;
}
    var myVar=myFunction();

    4). 变量

    1>. 局部 JavaScript 变量
    　　在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
    　　您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
    　　只要函数运行完毕，本地变量就会被删除。
    2>. 全局 JavaScript 变量
    　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
    3>. JavaScript 变量的生存期
    　　JavaScript 变量的生命期从它们被声明的时间开始。
    　　局部变量会在函数运行以后被删除。
    　　全局变量会在页面关闭后被删除。
    4>. 向未声明的 JavaScript 变量来分配值
    　　如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
    　　这条语句：carname="Volvo";
    　　将声明一个全局变量 carname，即使它在函数内执行。

    4. DOM操作　

    1. JavaScript 能够改变页面中的所有 HTML 元素:innerHTML
    2. JavaScript 能够改变页面中的所有 HTML 属性:attribute
    3. JavaScript 能够改变页面中的所有 CSS 样式:style.property
    4. JavaScript 能够对页面中的所有事件做出反应　　
      1. onload 和 onunload 事件
        　　onload 和 onunload 事件会在用户进入或离开页面时被触发。
        　　onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
        　　onload 和 onunload 事件可用于处理 cookie。
      2. onclick 事件
      3. onchange 事件
      4. onmouseover 和 onmouseout 事件
      5. onmousedown、onmouseup 以及 onclick 事件构成了鼠标点击事件的所有部分。
        　　首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
    5. 如何添加或删除 HTML 元素: createElement, createTextNode, element.appendChild; getElementById, element.removeChild

     5. 正则匹配(http://www.cnblogs.com/floraCnblogs/p/regular-expression.html)

    RegExp 对象用于规定在文本中检索的内容。
    1. 定义 RegExp
    　　new RegExp(pattern, attributes);
    　　1) pattern为字符串, 如果 pattern 是正则表达式，而不是字符串，则必须省略attributes.
    　　2) attributes 是一个可选的字符串，包含属性 "g"(全局匹配)、"i"(区分大小写) 和 "m"(多行匹配)
    2. RegExp 对象的方法
    　　RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
    　　1) test() 方法检索字符串中的指定值。返回值是 true 或 false。

    var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //true

    　　2) exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

    var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); //e

    　　您可以向 RegExp 对象添加第二个参数，以设定检索。例如"g" 参数 ("global")可以找到所有某个字符的所有存在。原理如下：找到第一个 "e"，并存储其位置, 如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置.

    var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null) 
//eeeeeenull

    　　3) compile() 方法用于改变 RegExp。既可以改变检索模式，也可以添加或删除第二个参数。

    var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //true

patt1.compile("d");
document.write(patt1.test("The best things in life are free")); //false

    　　

    　

    　　
  • 相关阅读:
    PAIRING WORKFLOW MANAGER 1.0 WITH SHAREPOINT 2013
    Education resources from Microsoft
    upgrade to sql server 2012
    ULSViewer sharepoint 2013 log viewer
    Top 10 Most Valuable Microsoft SharePoint 2010 Books
    讨论 Setsockopt选项
    使用 Alchemy 技术编译 C 语言程序为 Flex 可调用的 SWC
    Nagle's algorithm
    Nagle算法 TCP_NODELAY和TCP_CORK
    Design issues Sending small data segments over TCP with Winsock
  • 原文地址：https://www.cnblogs.com/floraCnblogs/p/single-javascript.html
Copyright © 2011-2022 走看看