zoukankan      html  css  js  c++  java
  • 了解JavaScript

    JavaScript 是一种可以用来给网页增加交互性的编程语言

    在HTML 页面上,因为脚本文本包围在<script>标签中,所以它不会显示在用户的屏幕上,而Web 浏览器知道应该运行JavaScript程序。<script>标签常常放在HTML 页面的<head>部分。

    JavaScript 是一种客户端语言。也就是说,设计它的目的是在用户的机器上而不是服务器上执行任务

     JavaScript 不允许写服务器机器上的文件。

     JavaScript 不能关闭不是由它自己打开的窗口

     JavaScript 不能从来自另一个服务器的已经打开的网页中读取信息

    JavaScript 是一种面向对象(object-oriented)的语言,可以将对象、属性和方法组合在一起,从而更好地描述对象或过程.

    在网页上,组成页面(或文档)的对象被组织在一个树型结构中.页面的顶级包含在<html>标签中,在其中会找到<head>和<body>标签,而其他标签包含在这两个标签中,用来表示文档中对象的标准模型就称为

    DOM(Document Object Model,文档对象模型),

    树中的每个对象也称为树的节点(node)。可以使用JavaScript 修改树的任何方面,包括添加、访问、修改和删除树上的节点。树上的每个对象是一个节点。如果节点包含HTML 标签,那么它就称为元素节点(element

    node),否则,就称为文本节点(textnode),当然,元素节点可以包含文本节点。

    事件(event)是用户在访问页面时执行的操作。JavaScript 使用称为事件处理程序(event handler)的命令来处理事件。用户在页面上的操作会触发脚本中的事件处理程序。

    事件处理程序 :

    onabort 用户终止了页面的加载
    onblur 用户离开了对象
    onchange 用户修改了对象
    onclick 用户单击了对象
    onerror 脚本遇到了一个错误
    onfocus 用户激活了对象
    onload 对象完成了加载
    onmouseover 鼠标指针移动到对象上
    onmouseout 鼠标指针离开了对象
    onselect 用户选择了对象的内容
    onsubmit 用户提交了表单
    onunload 用户离开了页面

    x++和++x 都是给x 加1,但是它们并不相同。前者在完成赋值之后再将x 加1,而后者将x 加1 之后再赋值

    比较

    x == y 如果x和y相等,那么返回true
    x === y 如果x和y完全相同,那么返回true
    x != y 如果x和y不等,那么返回true
    x !== y 如果x和y不完全相同,那么返回true
    x > y 如果x大于y,那么返回true
    x >= y 如果x大于等于y,那么返回true
    x < y 如果x小于y,那么返回true
    x <= y 如果x小于等于y,那么返回true
    x && y 如果x和y都是true,那么返回true
    x || y 如果x或y之一是true,那么返回true
    !x 如果x是false,那么返回true

    CSS 是一种用于Web 的标准布局语言,可以控制版面、颜色以及元素和图像的大小和位置。HTML文档应该利用外部样式表来定义文档中使用的样式。JavaScript 也应该放在外部文档中,这个文档应
    该只包含JavaScript 代码。按照这种方式进行分离,站点将包含以下3 种文本文件。
     HTML:包含页面的内容和结构。
     CSS:控制页面的外观和表现。
     JavaScript:控制页面的行为。

    HTML 有两个用来标出范围的标签:<div>和<span>。<div>是一个块级(block-level)元素,也就是说,它与前后元素之间有物理换行。但<span>不是块级的,它是行内的(inline),所以可以将它应用于句子中的一

    个短语。

    class和id

    类(class)标识出可能会多次使用的元素。

    .movieTitle {
    font: bold 14px;
    color: #000099;
    }
    应该将页面上的每个电影标题包围在一个标签中,并指定这个标题类型的class 属性,如下所示:

    <p>We're currently showing <span class="movieTitle">The Aviator</span> and <span class="movieTitle">
    The Outlaw</span>.</p>

    id 标识出的元素对于文档是唯一的。

    #theaterName {
    font: bold 28px;
    color: #FF0000;
    }
    只需在标签中添加这个id 属性:
    <h1 id="theaterName">The Raven Theater Presents:</h1>

    在给定的页面上,一个id 只能出现一次。“1”是一个数字,而
    井号(#)也称为数字符,所以这个符号用于id。

    脚本可以放在HTML 页面上的两个位置:<head>和</head>标签之间(称为头脚本,header script),或者<body>和</body>标签之间(体脚本,body script),签以<script>开头,以</script>结束

    函数由单词function 加上函数名组成。函数名后面是圆括号,再后面是左花括号。组成函数内容
    的语句出现在后面的行上,然后用右花括号结束这个函数。函数的形式如下所示:
    function saySomething() {
    alert("Four score and seven years ago");
    }

    在script 标签中添加src 属性会使浏览器寻找引用的文件。

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

    alert("Welcome to my JavaScript page!");

    警告对话框帮助你与用户进行通信

    if (confirm("Are you sure you want to do that?")) {
    confirm()方法有一个参数(向用户询问的问题),并根据用户的响应返回true 或false

    prompt()方法用于显示一个带有提示信息,并且用户可以输入的对话框。prompt(text,defaultText);

    基于链接对用户进行重定向

    <a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>

    返回指定 ID 的元素:

    document.getElementById("demo");
     

    <!DOCTYPE html>
    <html>
    <head>
    <title>Switch/Case handling</title>
    <script src="script09.js"></script>
    </head>
    <body>
    <h2>Famous Presidential Quotes</h2>
    <form action="#">
    <input type="button" id="Lincoln" value="Lincoln">
    <input type="button" id="Kennedy" value="Kennedy">
    <input type="button" id="Nixon" value="Nixon">
    </form>
    </body>
    </html>

    window.onload = initAll;
    function initAll() {
    document.getElementById("Lincoln").onclick = saySomething;
    document.getElementById("Kennedy").onclick = saySomething;
    document.getElementById("Nixon").onclick = saySomething;
    }
    function saySomething() {

    switch(this.id) {
    case "Lincoln":
    alert("Four score and seven years ago...");
    break;
    case "Kennedy":
    alert("Ask not what your country can do for you...");
    break;
    case "Nixon":
    alert("I am not a crook!");
    break;
    default:
    }
    }

    window.onload = initAll;
    当加载页面时,调用initAll()函数。

    何使用JavaScript 的try/throw/catch 命令产生友好、有用的错误消息。

    var ans = prompt("Enter a number","");

    try {
    if (!ans || isNaN(ans) || ans<0) {
    throw new Error("Not a valid number");
    }
    alert("The square root of " + ans + " is " + Math.sqrt(ans));
    }
    catch (errMsg) {
    alert(errMsg.message);
    }

    table 在网页上显示表格数据
    tr 在表格中开始一行
    th 表格中列的标题单元格
    td 包含表格中的每个单元格

    innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容

    <div id="temp">内容</div>

     document.getElementById('temp').innerHTML 获取对象内容

    document.getElementById('temp').innerHTML='new 内容'; 设置内容

    方法是对要寻找的对象进行条件测试,如下所示:
    if (document.getElementById) {

    .......}

    else 

    {.....  }

    JavaScript 支持不同类型的循环:

    • for - 循环代码块一定的次数
    • for/in - 循环遍历对象的属性
    • while - 当指定的条件为 true 时循环指定的代码块
    • do/while - 同样当指定的条件为 true 时循环指定的代码块,该循环至少会执行一次

    for (语句 1; 语句 2; 语句 3)
    {
        被执行的代码块
    }

    var x;
    var txt="";
    var person={fname:"Bill",lname:"Gates",age:56};
    for (x in person){
    txt=txt +" "+ person[x];
    }

    while (i<5)

    {

    x=x + "The number is " + i + "<br>";

    i++;

    }

    do {

    x=x + "The number is " + i + "<br>";

    i++;

    } while (i<5);

    break 语句用于跳出循环。

    continue 用于跳过循环中的一个迭代。

     

    为了产生动画的效果,需要确保替换图像立刻出现,而不能有从服务器获得图像所造成的延迟。为此,使用JavaScript 预先将所有图像加载到浏览器的缓存中(这样,当需要它们时,它们已经在用户的硬盘上了),并且将图像放进脚本使用的变量中。

     

  • 相关阅读:
    C#中的async和await
    Windows 10 error code 0x80072efd
    Winform中调用js函数
    Windows 10 x64 安装 Visual Basic 6.0 SP6
    用谷歌浏览器来当手机模拟器
    Windows 10 解决 0x80070021 错误
    正则匹配所有中英文标点
    本地网站部署注意细节
    电信光猫 路由+拨号混合设置 备忘
    Restful 支持 自定义序列化
  • 原文地址:https://www.cnblogs.com/playforever/p/12510961.html
Copyright © 2011-2022 走看看