JavaScript-小笔记-01

JavaScript

// function to say hello
function hello(){
    alert('hello')
}

Events

onclick
onmouseover
onkeydown
onkeyup
onload
onblur # 失去聚焦
…

// function to change heading so say goodbye
function hello(){
    document.querySelector('h1').innerHTML = 'Goodbye!' // 修改首个h1的内部html
}

querySelector

• querySelector(‘tag’)
• querySelector(’#id’)
• querySelector(’.class’)
  // HTML 文档被完全加载和解析完成之后DOMContentLoaded被触发
  // DOMContentLoaded被触发后，执行匿名的回调函数

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('button').onclick = count;
});

let counter = 0;
function count(){
    counter++;
    document.querySelector('#counter').innerHTML = counter;

    if ( counter % 10 == 0 ){
        // ${counter} 模板文字(ES6), "`"反引号（backquote）或 backtick
        alert(`counter is at ${counter}`); 
    }
}

<h1 id="counter">0</h1>
<button>click me!</button>

Variables

const # 必须初始化，不能再引用到其它对象
let # 函数作用域
var # 块级作用域

document.querySelector('DOMContentLoaded', function(){
    document.querySelector("#form").onsubmit = function(){
        const name = document.querySelector('#name').value;
        alert(`hello ${name}!`);
    };
});
<form id="form">
    <input id="name" autocomplete="off" autofocus placeholder="Name" type="text">
    <input type="submit">
</form>

note
　　autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注释：autocomplete 属性适用于 ，以及下面的 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

https://developer.mozilla.org/zh-CN/docs/Web/API

querySelectorAll将返回一个静态NodeList对象
https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

data-, 自定义数据属性
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.color-change').forEach(button => {
        button.onclick = () => {
            document.querySelector('#hello').style.color = button.dataset.color;
        };
    };
});

<h1 id="hello">Hello</h1>
<button class="color-change" data-color="red">Red</button>
<button class="color-change" data-color="blue">Blue</button>
<button class="color-change" data-color="green">Green</button>

Arrow Functions

() => {
    alert('Hello, world!')
}
x => x*2 // 返回x*2

• () 表示没有参数
• => 将左边内容的作为输入

---

将文本框的内容加入列表

document.querySelector("#submit").disabled = True;

// Enable button only if there is text in the input field
document.querySelector("#task").onkeyup = () => {
    if(document.querySelector('#task').value.length > 0)
        document.querySelector('#submit').disabled = false;
    else
        document.querySelector("#submit").disabled = true;
};

document.querySelector('#new-task').onsubmit = () => {
    const li = document.createElement('li')
    li.innerHTML = document.querySelector('#task').value;

    document.querySelector('#tasks').append(li);

    document.querySelector('#task').value = '';
    document.querySelector('#submit').disabled = true;

    // Stop form from submitting
    return false;
};

<ul id="tasks">
</ul>
<form id="new-task">
    <input id="task" autocomplete="off" autofocus placeholder="New Task" type="text">
    <input type="submit">
</form>

https://developer.mozilla.org/zh-CN/docs/Web/API/Storage

Window.localStorage 以key-value形式的本地存储

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/LocalStorage

if( !localStorage.getItem('counter') )
    localStorage.setItem('counter', 0);

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#counter').innerHTML = localStorage.getItem('counter');

    document.querySelector('button').onclick = () => {
        let counter = localStorage.getItem('counter');
        counter++;    

        document.querySelector('#counter').innerHTML = counter;
        localStorage.setItem('counter',counter);
    };
});

---

转载请声明

---