AfarX

A Rookie of R.

JavaScript学习笔记

Menu
  1. 1. 嵌入JS代码
  2. 2. 注释
  3. 3. 变量
  4. 4. 数据
  5. 5. 字符串
  6. 6. 数组
  7. 7. 判断与循环
    1. 7.1. if
    2. 7.2. switch
    3. 7.3. while
    4. 7.4. for
  8. 8. 函数
    1. 8.1. 格式:
    2. 8.2. 函数声明
    3. 8.3. 函数表达式
    4. 8.4. 变量范围
  9. 9. 对象
    1. 9.1. 创建对象
    2. 9.2. 创建数组
    3. 9.3. 方法
  10. 10. DOM
    1. 10.1. 获取元素
  11. 11. 事件
    1. 11.1. 监听事件
    2. 11.2. 停止传播

注:

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

嵌入JS代码

使用scirpt包裹。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="script.js"></script>

</body>
</html>

注释

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

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

变量

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

1
var band="beyond",love;

使用CamelCase驼峰式命名。

数据

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

字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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]
"小可爱"

数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

1
2
3
4
5
6
7
8
9
10
var weather='sun';
if ((weather === 'sun')&&(tep<=26) ) //判断条件

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

} else {
alert('bad!')
}

if/else if/if

switch

1
2
3
4
5
6
7
8
9
10
var weather='下雨'

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

while

1
2
3
4
5
6
7
8
var i=0;
while(i<10){
i++;
if (i%2===0){
continue;
}
console.log(i);
}

for

1
2
3
4
5
for (var i = 0; 
i < 10;
i++) {
console.log(i);
}

函数

格式:

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

调用参数时parameter是argument;

函数声明

1
2
3
4
5
function alertMessage(){
alert('hello');
}

alertMessage();

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

1
2
3
4
5
function alertMessage(message){
alert(message);
}

alertMessage('hellop');

函数表达式

1
2
3
4
5
var alertMessage= function(message){
alert(message);
}

alertMessage('hellop');

变量范围

全局变量

1
2
3
4
5
6
var message='yoxi'
var alertMessage= function(message){
alert(message);
}

alertMessage();

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

对象

property 属性
method 方法

创建对象

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

de.formedIn

创建数组

1
2
3
4
5
6
7
var beyond={
a: '66',
b: '222',
c: ['wf','asf']
}

console.log(beyond);

方法

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

DOM

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>


1
2
3
4
5
6
7
document
HTML
HEAD
TITLE
BODY
H1
P

获取元素

1
2
3
4
document.getElementById('pt')
document.getElementsByTagName('h1')
document.querySelectorAll('')
document.querySelector('')

事件

弹出页面or提示文字

1
2
3
4
5
6
7
8
9
10
var btn=document.querySelector('.btn');
btn.onclick=function(){
console.log('被点了');
};
btn.onmouseover=function(){
console.log('shui被点了');
};
btn.onmouseout=function(){
console.log('ni被点了');
};

对应的html

1
2
3
4
5
6
7
8
9
10
<!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向下捕获

1
2
3
4
5
6
var btn=document.querySelector('.btn');

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

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

停止传播

1
event.stopPropagation();

参考文献:

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