HTML快速恢复之 JavaScript基础

作者: 平安喜乐698 | 来源:发表于2018-02-25 15:18 被阅读3039次

目录
    1. JavaScript
    2. Prototype

1. JavaScript

JavaScript参考手册

概念

最流行的脚本语言，借JAVA出名但和JAVA一点关系没有。

根据所在位置分为2种：
    内部脚本
        必须位于 <script> 与 </script> 之间，可放在 <body> 和 <head> 中
    外部脚本
        <script src="myScript.js"></script>放在head中，.js不能再写<script></script>


例：
  1.向HTML写入内容
    document.write("<h1>This is a heading</h1>");
    注意：在文档加载后（js某函数中）使用该方法，会覆盖整个文档。
  2.获取指定元素（根据ID）
    x=document.getElementById("demo");  
  3.改变元素内容
    x.innerHTML="Hello JavaScript";    // 文本
    imgOne.src="/i/eg_bulboff.gif";    // 图片
  4.修改元素样式
    x.style.color="#ff0000";           // 样式
  5.内容是否为空
    if isNaN(x) {alert("Not Numeric")};
  6.事件
    <button type="button" onclick="alert('Welcome!')">点击这里</button>
    或
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction(){
        alert('Welcome!')
    }
    </script>
    </head>
    <body>
        <button type="button" onclick="myFunction()">Try it</button>
    </body>
    </html>

1.1 语法

    浏览器会逐行执行脚本代码
    一行多个语句时需要；
    大小写敏感
    会忽略多余的空格
    在文本字符串中使用反斜杠对代码行进行换行
        document.write("Hello \
        World!");

注释：
    单行注释 // 
    多行注释 /**/

变量：
    变量必须以字母、$ 和 _ 开头，大小写敏感。尽量见名知意
    var x=2.3;
    var y=3;
    var z=x+y;
    var str="hello";

    var name="Gates", age=56, job="CEO";
    var name="Gates",
    age=56,
    job="CEO";

    var cc=undefined;  等价于  var cc;  

    var carname="Volvo";    
    var carname;      依旧是"Volvo"

1.1.1 数据类型

    字符串、数字、布尔、数组、对象、Null、Undefined

    var x                // x 为 undefined
    var x = "Bill";      // x 为字符串
    var x = 6;           // x 为数字
    var z=0xFF;       // x 为数字（八进制）
    var x=true;          // x 为bool

    // cars：数组
    var cars=new Array();
    cars[0]="Audi";
    cars[1]="BMW";
    cars[2]="Volvo";
    // 
    var cars=new Array("Audi","BMW","Volvo");

    // 对象
    var person={firstname:"Bill", lastname:"Gates", id:5566};
    //
    var person={
    firstname : "Bill",
    lastname  : "Gates",
    id        :  5566
    };
    // 使用对象
    name=person.lastname;
    name=person["lastname"];

    // 清空变量
    cars=null;

日期

当前日期
    var d=new Date();
重新设置date
    d.setDate(myDate.getDate()+5)
从 1970/01/01 至今已过去多少毫秒
    d.getTime()
设置年月日
    d.setFullYear(1992,10,3)
转换为字符串
    d.toUTCString()
返回0～6:周日到周六
    d.getDay()
小时 分钟 秒
    var h=d.getHours()
    var m=d.getMinutes()
    var s=d.getSeconds()
比较日期
    >

字符串
    是存储字符的变量。用双引号或单引号。

var txt="Hello World!"
长度
    txt.length
获取下标（没找到则-1，找到则首字母下标）
    str.indexOf("Hello")
是否含有指定字符串（含有则返回字符串，不含则反null）
    str.match("world")
替换字符串
    str.replace(/Microsoft/,"W3School")
变大
    txt.big()
变小
    txt.small()
变粗
    txt.bold()
斜体
    txt.italics()
？
    txt.blink()
？
    txt.fixed()
删除线
    txt.strike()
颜色
    txt.fontcolor("Red")
大小
    txt.fontsize(16)
全小写
    txt.toLowerCase()
全大写
    txt.toUpperCase()
下标
    txt.sub() 
上标
    txt.sup()
链接
    txt.link("http://www.w3school.com.cn")

数字
    所有 JavaScript 数字均为 64 位。没有不同类型的数字。
    可以带小数点，也可以不带。
    精度
        整数（不使用小数点或指数计数法）最多为 15 位。
        小数的最大位数是 17，但是浮点运算并不总是 100% 准确.

属性：
    MAX VALUE
    MIN VALUE
    NEGATIVE INFINITIVE
    POSITIVE INFINITIVE
    NaN
    prototype
    constructor
方法：
    toExponential()
    toFixed()
    toPrecision()
    toString()
    valueOf()

Math

四舍五入
    Math.round(0.60)
0～1随机数
    Math.random()
比大数
    Math.max(5,7)
比小数
    Math.min(5,7)

常数
    Math.E
圆周率
    Math.PI
2的平方根
    Math.SQRT2
1/2的平方根
    Math.SQRT1_2
2的自然数
    Math.LN2
10的自然数
    Math.LN10
以2为底e
    Math.LOG2E
以10为底e
    Math.LOG10E

布尔
    布尔（逻辑）只能有两个值：true 或 false。
    无初始值或者其值为 0、-0、null、""、false、undefined 或者NaN则为false，否则为true

创建
    var myBoolean=new Boolean("e")

数组
    数组下标是基于零的

创建数组
    var mycars = new Array()
    mycars[0] = "Saab"
    mycars[1] = "Volvo"
    mycars[2] = "BMW"
    或
    var mycars=new Array("Saab","Volvo","BMW")
访问数组元素
    mycars[0]
修改数组元素
    mycars[0]="Opel";

遍历数组
    for (i=0;i<mycars.length;i++){
    }
合并数组
    arr.concat(arr2)
拼接数组（默认以,）
    arr.join()    arr.join(".")
按a-z排序
    arr.sort()
数字从小到大排序
    arr.sort(sortNumber)
    function sortNumber(a, b){
        return a - b
    }

对象
    对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
Undefined 和 Null
    设置为 null 来清空变量

也可以先声明变量类型，再赋值
    var carname=new String;
    var x=      new Number;
    var y=      new Boolean;
    var cars=   new Array;
    var person= new Object;

对象（JavaScript 是面向对象的语言，但 JavaScript 不使用类）

    JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。还可以自定义对象。

对象拥有属性和方法：
    属性（与对象相关的值）。
    方法是能够在对象上执行的动作。

举例：
    var txt = "Hello";
    txt.length
    txt.indexOf(0)
    txt.replace()
    txt.search()

自定义对象，添加属性并赋值
    person=new Object();
    person.firstname="Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";
    或
    person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
     或
     function person(firstname,lastname,age,eyecolor){
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;
        方法
        this.changeName=changeName;
        function changeName(name){
          this.lastname=name;
        }
    }
    person=new person("Bill","Gates",56,"blue");

RegExp 是正则表达式的缩写

创建
    var patt1=new RegExp("e");
是否含有e
    patt1.test("The best things in life are free")
是否含有e，当含有时返回e，没有时返回null
    patt1.exec("The best things in life are free")
改变匹配内容（将e改为d）
    patt1.compile("d");

函数

    在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
    在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
alert("Hello World!");
}
</script>
</head>

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

function functionname(){
}
function myFunction(var1,var2){
}

document.getElementById("demo").innerHTML=myFunction();
function myFunction(){
    var x=5;
    return x;
}

运算符

算数运算符

+   加   
-   减   
*   乘   
/   除   
%   求余数 (保留整数)
++  累加  
--  递减

赋值运算符

=   x=y     x=5
+=  x+=y    x=x+y   x=15
-=  x-=y    x=x-y   x=5
*=  x*=y    x=x*y   x=50
/=  x/=y    x=x/y   x=2
%=  x%=y    x=x%y   x=0

比较运算符

==  等于             x==8 为 false
=== 全等（值和类型）   x===5 为 true；x==="5" 为 false
!=  不等于           x!=8 为 true
>   大于             x>8 为 false
<   小于             x<8 为 true
>=  大于或等于        x>=8 为 false
<=  小于或等于        x<=8 为 true

条件运算符

variablename=(condition)?value1:value2

+ 拼接字符串

txt1="5";
txt2="5";   或  txt2=5;
txt3=txt1+txt2; 55

1.1.2 语法结构

if (true){
}

if (true){
}else{  
}

if (true){
}else if(true){  
}else{
}

switch(n){
case 1:
  break;
case 2:
  break;
default:
  其他
}

for (var i=0;i<cars.length;i++){
}

var i=0,len=cars.length;
for (; i<len; ){
    I++;
}

for (x in person){
}

while (true){
}
do{
}while (true);

跳出循环
break;

跳出本次循环，进行下一个循环
continue;


可以对 JavaScript 语句进行标记
label:{
break label;
continue label;
}

处理错误
    1.语法错误
    2.由于浏览器差异 
    3.由于来自服务器或用户的错误输出而导致的错误
    4.其他

try{
  // 可能出错的代码
  // 或
  // 主动抛出
  throw "empty";

  }
catch(err){
  // 处理错误
}

指定出错时的错误方法
onerror=handleErr;

1.1.3 使用场景

JavaScript 表单验证

    是否已填写所有必填项目
    填写是否合法（正则或日期）

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt){
with (field){
  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}
  }
}



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>

1.2. 文档模型DOM（Document Object Model)

    当网页被加载时，浏览器会创建页面的文档对象模型。

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

DOM树

获取指定元素
    通过 id 获取
        var x=document.getElementById("intro");
    通过标签名获取
        var y=document.getElementsByTagName("p");
        var y=x.getElementsByTagName("p");
    通过类名获取


创建并追加元素
    var para=document.createElement("p");
    var node=document.createTextNode("这是新段落。");
para.appendChild(node);
    var element=document.getElementById("div1");
    element.appendChild(para);


删除已有元素
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);


重新设置地址
    document.location.href="/index.html"

<!DOCTYPE html>
<html>
<body>

<script>
改变输出流（切记不要在文档加载完毕后调用）
document.write(Date());

改变 HTML元素 内容
document.getElementById("p1").innerHTML="New text!";

改变属性
document.getElementById("image").src="landscape.jpg";
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>

事件

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>


也可以在js中添加事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

其他例子：
1. onload 和 onunload 事件会在用户进入或离开页面时被触发。
<body onload="checkCookies()" onunload ="leave()">

2. 当输入内容改变时，获得焦点时，会调用
<input type="text" id="fname" onchange="upperCase()" onfocus="myFunction(this)">

3. 鼠标移动进入或离开时调用
<div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面</div>

4. 鼠标点下或松开时调用
<div onmousedown="mDown(this)" onmouseup="mUp(this)" >请点击这里</div>

计时事件（计时）
var t=setTimeout("javascript语句",毫秒);
clearTimeout(t)；

function timedMsg(){
    5s后跳出弹框
    var t=setTimeout("alert('5 秒！')",5000);  
    2s后修改元素内容
    var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
    1s后调用函数
    var t=setTimeout("timedCount()",1000)

    清空计时器
    setTimeout("document.getElementById('txt').value=0",0);
    clearTimeout(t);
}

1.3 浏览器对象模型（BOM）

    浏览器对象模型（Browser Object Model）尚无正式标准。

Window 对象
    表示浏览器窗口
    全局变量是 window 对象的属性。
    全局函数是 window 对象的方法。

document 也是 window 对象的属性之一
    window.document.getElementById("header");
    等价于
    document.getElementById("header");



获取浏览器窗口的宽高（不包括工具栏和滚动条)
    var w=window.innerWidth||document.documentElement.clientWidth|| document.body.clientWidth;
    var h=window.innerHeight||document.documentElement.clientHeight|| document.body.clientHeight;
打开新窗口
    window.open()
关闭当前窗口 
    window.close() 
移动当前窗口
    window.moveTo() 
调整当前窗口的尺寸
    window.resizeTo()

Screen对象（window.screen对象）

可用的屏幕宽度（像素）
    screen.availWidth 
可用的屏幕高度（像素）
    screen.availHeight

location对象(window.location 对象)

返回 web 主机的域名
    location.hostname 
返回当前页面的路径和文件名（域名后面的路径）
    location.pathname 
返回 web 主机的端口 （80 或 443）
    location.port 
返回所使用的 web 协议（http:// 或 https://）
    location.protocol 
返回当前url
    location.href
加载新页面
    window.location.assign("http://www.w3school.com.cn")

history对象(window.history对象)包含浏览器的历史

向前一页
    history.back() 
向后一页
    history.forward()

navigator 对象(window.navigator 对象). 浏览器的信息

浏览器CodeName
    navigator.appCodeName
浏览器name
    navigator.appName
浏览器版本
    navigator.appVersion
浏览器是否支持cookie
    navigator.cookieEnabled
？
    navigator.platform
？
    navigator.userAgent
？
    navigator.systemLanguage

消息框

警告框
    alert("文本")
确认框
    confirm("文本")
提示框
    prompt("文本","默认值")

<html>
<head>
<script type="text/javascript">
function getCookie(c_name){

判断Cookie长度是否大于0
    if (document.cookie.length>0){ 

获取Cookie
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1 
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
              return unescape(document.cookie.substring(c_start,c_end))
        } 
    }
    return ""
}

function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)

添加Cookie（名，值，过期天数）
    document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie(){
    username=getCookie('username')
    if (username!=null && username!=""){
      alert('Welcome again '+username+'!')
    }else {
      username=prompt('Please enter your name:',"")
      if (username!=null && username!=""){
        setCookie('username',username,365)
      }
    }
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

图像映射

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>

<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14"
onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />

<area shape="circle" coords="129,161,10"
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />

<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />

</map>

<p id="desc"></p>

</body>
</html>

1.4 JavaScript 框架（库）

广受欢迎的框架

jQuery    最受欢迎
    使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象)
    提供 companion UI（用户界面）和插件
Prototype
    提供用于执行常见 web 任务的简单 API(Application Programming Interface）
MooTools
    含有一些轻量级的效果和动画函数

其他框架

YUI （ Yahoo! User Interface Framework）
    涵盖大量函数的大型库，从简单的 JavaScript 功能到完整的 internet widget。
Ext JS 
    可定制的 widget，用于构建富因特网应用程序（rich Internet applications）。
Dojo 
    用于 DOM 操作、事件、widget 等的工具包。
script.aculo.us 
    开源的 JavaScript 框架，针对可视效果和界面行为。
UIZE 
    Widget、AJAX、DOM、模板等等。

    许多不同的网站使用相同的 JavaScript 框架,把框架库存放在一个通用的位置供每个网页分享。
    CDN (Content Delivery Network) 解决了这个问题.

2. Prototype

head中引用 Prototype
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">

js方式

function myFunction(){
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
onload=myFunction;

等价

Prototype 方式

function myFunction(){
    $("h01").insert("Hello Prototype!");
    
    $("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

HTML快速恢复之 JavaScript基础

1. JavaScript

1.1 语法

1.4 JavaScript 框架（库）

2. Prototype

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

网站开发之HTML基础快速恢复

跨平台

HTML快速恢复 之 JavaScript基础

1. JavaScript

1.1 语法

1.4 JavaScript 框架（库）

2. Prototype

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

网站开发之HTML基础快速恢复

跨平台

HTML快速恢复之 JavaScript基础