JavaScript学习笔记[1]

JavaScript学习笔记[1]

• 使用的是廖雪峰JavaScript教程。

面向对象编程

• 创建函数

function Student(props) {
    this.name = props.name || '匿名'; // 默认值为'匿名'
    this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {})
}

• 原型继承

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

• class继承

浏览器

• 获取浏览器窗口大小,对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);

• navigator

alert('appName = ' + navigator.appName + '
' +
      'appVersion = ' + navigator.appVersion + '
' +
      'language = ' + navigator.language + '
' +
      'platform = ' + navigator.platform + '
' +
      'userAgent = ' + navigator.userAgent);

• location

if (confirm('重新加载当前页' + location.href + '?')) {
    location.reload();
} else {
    location.assign('/discuss'); // 设置一个新的URL地址
}

• document

document.title = '努力学习JavaScript!';

• DOM

  • 操作DOM，获取DOM节点

  // 返回ID为'test'的节点：
  var test = document.getElementById('test');
  
  // 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
  var trs = document.getElementById('test-table').getElementsByTagName('tr');
  
  // 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
  var reds = document.getElementById('test-div').getElementsByClassName('red');
  
  // 获取节点test下的所有直属子节点:
  var cs = test.children;
  
  // 获取节点test下第一个、最后一个子节点：
  var first = test.firstElementChild;
  var last = test.lastElementChild;
  

  • 更新DOM, innerText相较于textContent能修改子树

  // 获取<p id="p-id">...</p>
  var p = document.getElementById('p-id');
  // 设置CSS:
  p.style.color = '#ff0000';
  p.style.fontSize = '20px';
  p.style.paddingTop = '2em';
  

  • 插入DOM, createElement(),insertElement()

  <!-- HTML结构 -->
  <!-- 把Haskell插入到Python之前 -->
  <div id="list">
      <p id="java">Java</p>
      <p id="python">Python</p>
      <p id="scheme">Scheme</p>
  </div>
  
  var
      list = document.getElementById('list'),
      ref = document.getElementById('python'),
      haskell = document.createElement('p');
  haskell.id = 'haskell';
  haskell.innerText = 'Haskell';
  list.insertBefore(haskell, ref);
  

  • 删除DOM, removeChild(),删除多个节点时,注意child的索引一直在变化。

• 操作表单

  • text、password、hidden以及select都可以用input.value,对于单选框和复选框，用input.checked判断是否被选中。
  • 提交表单,没有name属性的 的数据不会被提交

  <!-- HTML -->
  <form id="login-form" method="post" onsubmit="return checkForm()">
      <input type="text" id="username" name="username">
      <input type="password" id="input-password">
      <input type="hidden" id="md5-password" name="password">
      <button type="submit">Submit</button>
  </form>
  
  <script>
  function checkForm() {
      var input_pwd = document.getElementById('input-password');
      var md5_pwd = document.getElementById('md5-password');
      // 把用户输入的明文变为MD5:
      md5_pwd.value = toMD5(input_pwd.value);
      // 继续下一步:
      return true;
  }
  </script>
  

• 操作文件，上传file。

• AJAX

• Promise

• Canvas