JavaScript学习笔记[1]

JavaScript学习笔记[1]

面向对象编程

  • 创建函数
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 + '\n' +
      'appVersion = ' + navigator.appVersion + '\n' +
      'language = ' + navigator.language + '\n' +
      'platform = ' + navigator.platform + '\n' +
      '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

posted on 2017-08-25 17:54  炮二平五  阅读(137)  评论(0编辑  收藏  举报

导航