JavaScript 笔记整理

~~~ Basis ~~~

JS可以让网页呈现各种动态效果。先学习基础语法和如何使用DOM进行简单操作。

JS代码位置:javascript作为一种脚本语言可以放在html页面中任何位置。但浏览器解释html时是按先后顺序的,所以前面的script就先被执行。

内部JS:
外部独立JS: 其中script.js为独立的JS文件,例如:

JavaScript 笔记整理_第1张图片
独立的js

~~~ Grammar ~~~

1)JS格式:以分号 ; 结尾

2)JS注释:///* ... */

3)JS变量:var 变量名 (变量名由英文字母、数字、下划线(_)或者美元符($)组成,数字不能放开头)

4)JS函数:

function functionname(argu1, argu2){
     // code
     // (optional) return xxx; 在仅仅希望退出函数时 ,也可使用 return 语句,返回值可不写。
}

注意: 在 JavaScript 函数内部声明的变量

  • 使用 var声明的是局部变量,所以只能在函数内部访问它。会在函数运行以后被删除。
  • 没有使用 var 关键字的变量为全局变量。

~~~ function: dialog & window~~~

1)JS在网页上打印信息:document.write(String s)

2)JS消息对话框-警告:alert();
举例:


运行结果:


JavaScript 笔记整理_第2张图片
alert

3)JS消息对话框-确认:boolean confirm(String 要显示的文本);
举例:


运行结果:


JavaScript 笔记整理_第3张图片
confirm

4)JS消息对话框-提问:prompt(str1, str2);
str1: 要显示在消息对话框中的文本,不可修改。
str2: 文本框中的内容,可以修改
true时返回:文本框中的内容
false时返回:null

5)JS打开已存在/新建一个网页:window.open([URL], [窗口名称], [参数字符串])

JavaScript 笔记整理_第4张图片
Paste_Image.png

6)JS关闭窗口:window.close(); 或者 /[窗口对象].close();
第二种情况举例:


~~~ JS的DOM操作权 ~~~

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。


JavaScript 笔记整理_第5张图片
html文档

JavaScript 笔记整理_第6张图片
DOM模型

HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点:上图中、、

等都是元素节点,即标签。
**2. 文本节点: **向用户展示的内容,如结构图中三个

  • ...
  • 展现的文本。
    **3. 属性节点: **元素属性,如标签的链接属性href="http://www.imooc.com"。

    ~~~ JS 通过ID获取元素 ~~~

    网页由标签将信息组织起来,而标签的id属性值是唯一的,它们就像是人的身份证号。
    document.getElementById(“id”);
    -> 通过该方法获取的元素是一个对象!如想对元素进行操作,我们要通过它的属性或方法

    code

    run result

    ~~~ JS改变HTML内容 .innerHTML() ~~~

    用于获取或替换 HTML 元素的内容。
    Object.innerHTML
    注意:Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

    JavaScript 笔记整理_第8张图片
    innerHTML code

    JavaScript 笔记整理_第9张图片
    run result

    ~~~ JS改变HTML样式~~~

    Object.style.property=new style;
    注意:这里的Object是获取的元素对象,仍然通过document.getElementById("id")获取的元素。

    JavaScript 笔记整理_第10张图片
    JS改变html样式 code

    JavaScript 笔记整理_第11张图片
    run result

    自己试一下 » »
    以下是可修改的属性的一部分:
    JavaScript 笔记整理_第12张图片
    属性

    ~~~ JS改变HTML资源文件 ~~~

    document.getElementById("image").src = "picture.gif";
    自己试一下 » »

    ~~~ JS控制的显示和隐藏 ~~~

    Object.style.display = value
    注意:这里的Object是获取的元素对象,仍然通过document.getElementById("id")获取的元素。

    value for display
    JavaScript 笔记整理_第13张图片
    code

    ~~~ 控制类名(className 属性)~~~

    object.className = classname

    JavaScript 笔记整理_第14张图片
    code
    JavaScript 笔记整理_第15张图片
    run result

    ~~~ 万一有白目浏览器不支持咋JS怎么办?给个提示吧~~~


    自己试一下 » »

    ~~~ JS 对象 ~~~

    JavaScript 对象是拥有属性和方法的数据。


    JavaScript 笔记整理_第16张图片
    对象

    "JavaScript 对象是键值对的容器"。键值对通常写法为name : value (键与值以冒号分割), 举例:

    var person = {
        firstName:"John",
        lastName:"Doe",
        age:50,
        eyeColor:"blue"
    };```
    - 访问对象属性:
    

    person.lastName;
    // 或者
    person["lastName"];

    - 使用对象方法:
    

    name = person.fullName();

    ### ~~~ JS 触发HTML的事件 ~~~ 
    **HTML事件**可以是浏览器行为,也可以是用户行为。
    ![常见的HTML 事件的事件](http://upload-images.jianshu.io/upload_images/2662224-d4a3572f35bbdf4b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    你可能感兴趣的:(JavaScript 笔记整理)