注:

  1. JAVA每行语句后需使用分号。
  2. JAVA区分大小写。(html不区分)
  3. 索引从0开始

嵌入JS代码

使用scirpt包裹。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script src="script.js"></script>

</body>
</html>

注释

使用//表示一行注释
使用/**/包裹一行注释

p.s.
css使用/**/表示;
html使用<!---->表示;

变量

字母、下划线、$、数字(非开头)

var band="beyond",love;

使用CamelCase驼峰式命名。

数据

undefined 声明变量但不做判断,相当于false
引号包裹默认是字符串。
parseInt取整
parseFloat保留小数

字符串

var words="我是好人"
undefined
words.length
4
words.charAt(0)
"我"
words.charAt(words.length-1)
"人"
words.indexOf('好')
2
words.substring(0,3)
"我是好"
words.replace('我','你')
"你是好人"
words='我,小可爱'
"我,小可爱"
words.split(',')
(2) ["我", "小可爱"]
var ne=words.split(',')
undefined
ne
(2) ["我", "小可爱"]
ne[0]
"我"
ne[1]
"小可爱"

数组

var trackD1=['a','b','c']
trackD1[1]
"b"
trackD1.push('aaa','aaaaaa')
5
trackD1
(5) ["a", "b", "c", "aaa", "aaaaaa"]
trackD1.pop()
"aaaaaa"
trackD1
(4) ["a", "b", "c", "aaa"]
trackD1.shift()
"a"
trackD1
(3) ["b", "c", "aaa"]
delete trackD1[2]
true
trackD1
(3) ["b", "c", empty]
trackD1.splice(2)
[empty]
trackD1
(2) ["b", "c"]
var tr2=['2','22']
undefined
var tr=trackD1.c
undefined
var tr3=trackD1.concat(tr2)
undefined
tr3
(4) ["b", "c","2", "22"]

判断与循环

&&
||
=== 相等
条件用括号括起来。

if

var weather='sun';
if ((weather === 'sun')&&(tep<=26) ) //判断条件

//执行内容
{ 
    alert('good!');

} else {
    alert('bad!')
}

if/else if/if

switch

var weather='下雨';

switch(weather){
case '下雨':
    alert('sad');
    break;
default:
    alert('good');
    break;    
}

while

var i=0;
while(i<10){
    i++;
    if (i%2===0){
        continue;
    }
    console.log(i);
}

for

for (var i = 0; 
    i < 10; 
    i++) {
    console.log(i);
}

函数

格式:

function functionName(parameter1,parameter2……){...}

调用参数时parameter是argument;

函数声明

function alertMessage(){
    alert('hello');    
}

alertMessage();

看教程的时候,皓说“显示一个‘hello’的提示窗口”,我听成了“显示一个很low的提示窗口”……
英语听力还有救吗?
制定参数:

function alertMessage(message){
    alert(message);    
}

alertMessage('hellop');

函数表达式

var alertMessage= function(message){
    alert(message);    
}

alertMessage('hellop');

变量范围

全局变量

var message='yoxi'
var alertMessage= function(message){
    alert(message);    
}

alertMessage();

局部变量:函数外部不能访问函数内部定义的变量

对象

property 属性
method 方法

创建对象

var de={};
de.formedIn='1983';
de['foundedIn']='香港';
console.log(de);

de.formedIn

创建数组

var beyond={
    a: '66',
    b: '222',
    c: ['wf','asf']
}

console.log(beyond);

方法

beyond.bb=function(){
    for (var i = Things.length - 1; i >= 0; i--) {
        Things[i]
    }
};

DOM

文档对象模型DOM(Document Object Model)
not 语言 is 规范

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

document
 HTML
  HEAD
   TITLE
  BODY
   H1
   P

获取元素

document.getElementById('pt')
document.getElementsByTagName('h1')
document.querySelectorAll('')
document.querySelector('')

事件

弹出页面or提示文字

var btn=document.querySelector('.btn');
btn.onclick=function(){
    console.log('被点了');
};
btn.onmouseover=function(){
    console.log('shui被点了');
};
btn.onmouseout=function(){
    console.log('ni被点了');
};

对应的html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <a href="#" class="btn">一个链接</a>
    <script src="script.js" charset="utf-8"></script>
</body>
</html>

监听事件

监听事件后有三个参数
false向上传播
true向下捕获

var btn=document.querySelector('.btn');

function showmessage(event){
    console.log(event);
}
btn.addEventListener('click',showmessage,false);

事件是向上传递的,执行上面的事件。
从上向下传递,称为事件的捕获。

停止传播

event.stopPropagation();

参考文献:

  1. 宁皓网
    https://ninghao.net/blog/5846
  2. D3.js教程
    http://javascript.ruanyifeng.com/library/d3.html