Javascript技术原来也是用在网页里面的,弄一些花里胡哨的动态效果,但现在它满足了一 个现实,人有时懒的连报纸都不想翻,就想在报纸上用手指划划就想翻页,Javascript 的 技术能够实现,所以现在又发达起来了。

Nodejs 技术的出现也使 Javascript 风光了起来。

JavaScript

安装

安装好浏览器和代码编辑器,打开浏览器控制台进行执行和测试。

函数

function命令

1
2
3
  function print(s) {
      console.log(s);
  }

表达式

1
2
3
  var print = function(s) {
      console.log(s);
  };

函数参数的解构赋值

1
2
3
4
  const person = { name: '小明', age: 11}
  function printPerson({name, age}) { // 函数参数可以解构一个对象
      console.log(`姓名:${name} 年龄:${age}`);
  }

箭头函数

1
2
3
4
5
  let getSum2=(x, y)=> {
      return x + y;
  }
  // 简写,只能用于一行代码
  let getSum2=(x, y)=> x + y;

避免使用全局变量和函数

1
2
3
4
5
6
7
8
  var myApp = {
      lang: "en",
      debug: true,
  };

  myApp.setLang = function (arg) {
      this.lang = arg;
  }

DOM (文档对象模型)

这个技术的产生是因为我们看报纸,不光是看,还想直接跟报纸互动。怎么跟报纸互动呢, 就是浏览器把报纸上的内容提供接口,然后用JavaScript 语言具体编码

document 接口

属性

  • cookie 设置或返回与当前文档有关的所有 cookie

  • domain 返回当前文档的域名

  • lastModified 返回文档被最后修改的日期和时间

  • referrer 返回载入当前文档的文档的 URL

  • title 返回当前文档的标题

  • URL 返回当前文档的 URL

方法

  • getElementById() 返回对拥有指定 id 的第一个对象的引用

  • getElementsByName() 返回带有指定名称的对象集合

  • getElementsByTagName() 返回带有指定标签名的对象集合

  • getElementsByClassName() 返回带有指定 class 的对象集合

  • write() 向文档写 HTML 表达式 或 JavaScript 代码

节点接口

因为HTML是按照 树的模型构造的,所以里面都是枝枝叉叉,操作的也是枝枝叉叉(节点)。

节点属性

  • innerHTML 获取元素内容

  • nodeName 规定节点的名称

  • nodeValue 规定节点的值

修改

1
2
3
  var para=document.createElement("p");
  var node=document.createTextNode("This is new.");
  para.appendChild(node);
  • insertBefore 插到节点前面

  • removeChild 删除子节点

  • replaceChild 替换节点

事件接口

报纸的行为不仅可以内部控制,外部还能触发。

window

  • onload 页面结束加载之后触发(最慢,要所有图片都下载完)

  • onresize 当浏览器窗口被调整大小时触发

页面或图像

  • onload

  • onUnload

表单

  • onFocus

  • onBlur

  • onChange

  • onselect 在元素中文本被选中后触发

  • onsubmit 在提交表单时触发

键盘

  • onkeydown 在用户按下按键时触发

  • onkeypress 在用户敲击按钮时触发

  • onkeyup 当用户释放按键时触发

鼠标

  • onclick

  • ondblclick

  • onmousedown

  • onmouseup

  • onscroll

  • onMouseOver

  • onMouseOut

Media

  • onabort

  • onplay