一、基本概念

  • 由浏览器所执行的脚本语言,其源代码随网页网页下载到浏览器之中,在客户端执行。注意:JavaScript不是Java,只是参考Java的语法所设计。
  • 写在HTML文件的<head>标签内,利用<script></script>来指示JavaScript代码
    <head>
    <script type="text/javascript">code</script>
    </head>
  • 将JavaScript代码写入.js文档,在<script>标签以src属性导入js文档
    <head>
    <script src="code.js" type="text/javascript"></script>
    </head>

1.简单示例

html代码
  • html代码如下
    <html>
    <head>
    <title>JavaScript Demo</title>
    <script src="run.js" type="text/javascript"></script>
    </head>
    <body>
    <input id="b" type="button" value="RUN" onclick="run();"/>
    <div id="content"></div>
    </body>
    </html>
  • 上述代码第7行,作为一个输入标签,type属性表示是一个按钮,onclick属性使得按下按钮的动作与JavaScript程序产生关联,属性值表示按下时调用并执行run()函数
  • 函数是JavaScript中功能群组的单位,最简单直接由浏览器显示结果的不需要用到函数,但若要与HTML元素互动,则需要定义相应函数。
JavaScript代码
  • JavaScript中run()函数定义如下
    function run() {
    var c = document.getElementById("content");
    // 将id属性为content的元素赋值给变量c
    var n = document.createElement("p");
    // 新建一个`<p>`段落元素,并赋值给变量n
    var message = "Hello, JavaScript!";
    // 新建一个字符串变量,内容为"Hello, JavaScript!"
    n.appendChild(document.createTextNode(message));
    // 将message加入到n之中,即在<p>段落元素中加入文字
    c.appendChild(n);
    // 将<p>段落元素加入到c之中
    }
  • 代码分析:
    • function为JS关键字,表示函数,紧跟其后的为函数名,()中可放置函数参数
    • {}中的代码为函数功能的定义部分
    • var也是关键字,表示变量,紧跟其后的为变量名
    • document为JavaScript的DOM对象,DOM表示文件对象模式(document object model),代表执行此JavaScript程序的HTML文件,可通过document来存取各元素。
    • 函数的最终效果是每按一次按钮,就会增加一个含有Hello, JavaScript!字串的<p>段落元素

2.调试

  • 打开google chrome浏览器,在‘更多工具’选项中选择‘开发者工具’

3.标记

  • 浏览器利用标记解析程序的功能,包括保留字、自定义名、字符常量、运算符
  • 注意比较运算符中的相等比较,有‘==’和‘===’,坚持使用后者,如果数据类型不一致,返回false;而’==‘则会自动转换数据类型再比较。

4.数据类型

  • Undefined、Null、Boolean、String、Number、Object、Reference、Array、List、Completion
  • null表示一个‘空’值,与0和空字符串‘’不同,undefined表示‘未定义’
  • 通过typeof()获取数据的类型
对象
  • 对象是一组由键-值组成的无序集合,用{...}表示,键值对以xxx: xxx形式申明,用,隔开,最后一个后面不加,
  • 对象属性访问用.操作符,前提是变量名必须是有效的;若包含特殊字符,必须用‘’括起来,属性访问也必须用['xxx']形式
  • 可以用in操作符判断是否拥有某一属性,但有可能是继承;若要判断自身拥有,而不是继承,可以使用hasOwnProperty()方法
  • Map和Set
  • Map是一组键值对的结构,具有快速查找的特性。Map([xxx, xxx], [xxx, xxx], ...)
    var m = new Map();
    m.set('ou', 23); //新增
    m.has('ou'); //判断是否存在
    m.get('ou'); //获取
    m.delete('ou'); //删除
  • Set是一组key的集合,不存储value。Set([xxx, xxx, ...])。通过add(key)新增,delete(key)删除

    5.变量与常量

  • var定义变量,const定义常量。申明变量不用预先指定数据类型
  • 变量名以大小写字母、数字、$和_组合,不能以数字开头,不能是关键字
  • 作用域。不在任何函数定义的变量具有全局作用域,被绑定到window的一个属性
strict模式
  • 通过在第一行加入'use strict';启用,为了弥补早先不强制要求用var申明变量带来的调试困扰

6.类型转换

  • Boolean()、Number()、String()为全局函数,分别转换成布尔、数字、字串。另有两个全局函数parseFloat()与parselnt()可将含有其它符号的字串转换成数字,前者包含小数点,后者不包含

二、函数

  • 函数定义的另一种方式,与示例等价,只是函数最后需加;
    var run = function () {
    var c = document.getElementById("content");
    // 将id属性为content的元素赋值给变量c
    var n = document.createElement("p");
    // 新建一个`<p>`段落元素,并赋值给变量n
    var message = "Hello, JavaScript!";
    // 新建一个字符串变量,内容为"Hello, JavaScript!"
    n.appendChild(document.createTextNode(message));
    // 将message加入到n之中,即在<p>段落元素中加入文字
    c.appendChild(n);
    // 将<p>段落元素加入到c之中
    };
  • arguments与rest。arguments只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数;rest参数在参数列表的最后,前面用...标识,表示传入参数先绑定a 、 b,多余的以数组形式交给变量rest,若有没多余,则rest为空数组
    function run(a, b, ...rest) {
    ...
    }
  • 对象中绑定的函数,称为该对象的方法。注意this和apply的使用,方法内部,this始终指向当前对象

1、高阶函数

  • 可以接收另一个函数作为参数的函数

笔记参考以下网站中的JavaScript教程:
http://pydoing.blogspot.com/2010/11/javascript-overview.html
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

最后由 oucb 编辑于2016年05月03日 17:26