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操作　

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

相关阅读:
第二章--MYSQL体系结构和管理
 第一章 -- MySQL简介及安装
 CentOS 7.5静默安装oracle 11g
tomcat日志
 配置常用远程源
 mybatis与ibatis--个人总结。
单纯的简单的ibatis
一些缩写词
 单纯的简单的mybatis有注解
 单纯的简单的mybatis无注解
原文地址：https://www.cnblogs.com/floraCnblogs/p/single-javascript.html