Javascript学习笔记

发表于 | 分类于

JavaScript是一种在浏览器解释执行的代码，网页开发必备。

一般放在script属性中。而script 放在body和head中都可以。

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        
    </head>
    <body onload="alert('hi');">
        <script>
            document.write("hello world!");
        </script>
    </body>
</html>

一般来说，head中是JavaScript的函数声明和定义,body中一般是直接执行的JavaScript语句。document就是整个HTML文件对象。

1
document.write("hello world");

语法点

  1. 声明变量用var
  2. 对于习惯python的人，语句结束请不要忘了分号
  3. JavaScript变量本身是没有类型，但是值是有类型的
  4. 值得类型有字符串，数值，布尔值，JavaScript不区别整数和浮点数
  5. js脚本执行完成之后，才会执行docment.write()
  6. javascript支持switch(){},支持if ，这方面几乎和C语言一样。

函数定义语法

函数定义函数

1
2
3
4
function add(a,b){
    return a+b;
}
c=add(a,b);

函数变量，函数对象，类似于C语言的函数指针

1
2
3
var f = new Function("x","y","return x*y");
等价于
function f(x,y){return x*y;}

这样的好处是可以用数据来产生代码，是函数式编程的思想。对于已有的函数，尽可能在自己已有的函数上进行封装，避免函数的修改工作的繁琐。

1
2
3
4
5
6
7
function add(a,b)
{
    return a+b;
}
function calc(f,a,b){
    return f(a,b);
}

变量的作用域，定义在函数体外面的变量，整个页面都有效。函数内部，只有函数内有效。只有这两个层级，不存在像for{}之类的内部局部变量

数组

1
2
3
4
5
var my_array = new Array()
var my_array = new Array(100) //这个size随时可以增长
var my_array = new Array(d1,d2)
var my_array = [d1, d2]
my_array[0] //访问

数组长度 my_array.length,length随时可以改，随时可以写，取决于最大的下标志，一个append的写法就是

1
my_array[my_array.length]="hello"

数组的一些使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var colors=["red","green","blue];
alert(colors.length)
alert(colors.toString());
alert(colors.valueOf());
alert(colors);
alert(colors.join("."));
alert(colors.join("||"));
colors.push();
colors.pop();
colors.shift();
colors.sort();
colors.reverse();
concat(colors, colors);将两个数组连起来
colors.slice(1,4);切片

可以给sort传一个自己的compare函数，来实现不同的排序

1
2
3
4
5
6
7
8
9
10
11
function compare(a,b){
    if (a<b){
        return 1;
    }
    if (a>b){
        return -1;
    }
    if (a==b)
    	return 0;
}
my_array.sort(compare)

函数splice（删除起始位置，删除个数，插入的元素。。。）

1
2
3
splice(0,2)从第一个位置开始，删除两个元素
splice(2,0,"red")在第二个位置插入red
splice(2,1,"red")替换第二个元素为red

对象

JavaScript的对象就各种属性值的集合。JavaScript严格来说不算OOP，没有类的概念，不强调先设计类再制造对象

1
2
var o = new Object();
var circle = {x:0,y:0,radius:10};

访问和删除属性

1
2
3
4
5
var circle = {x:0, y:0, radius:10};
alert(circle.x);
delete circle.x;
circle.x = null;
alert(circle.x);//null

遍历所有属性

1
2
3
4
5
for(var e in o)
{
    alert(o[e]);//属性值
    alert(e);//属性的名字
}

构造函数

1
2
3
4
5
6
7
8
9
function Rect(w,h){
    this.width=w;
    this.height=h;
    this.area=function(){
        return this.width*this.height;
    }
}
var rect1 = new Rect(2,3);
alert(rect1.area());

原型对象prototype，其实可以理解为类属性，高于对象属性的一种属性，只要你不去改写它，那么所有的这一对象的实例都一样的。

但是需要注意，一定是改写，而不是其他的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(){
    Person.prototype.name="Nicholas";
    Person.prototype.sayname=function(){
        alert(this.name);
    }
}
var Nicholas=new Person();
var xiaozhang=new Person();
xiaozhang.name="xiaozhang";
Nicholas.sayname();
xiaozhang.sayname();
delete xiaozhang.name;
xiaozhang.sayname();

浏览器与JavaScript

浏览器的全局对象是Window，所有的变量都是window的成员

1
2
3
4
5
var value=12；
alert(window.value);
for (x in window){
    window.document.write(window[x]+"</br>");
}

JavaScript与浏览器的关系

  • 放在<script></script>标记中间
  • 放在<srcipt>的src属性中，从外部引入。
  • 放在HTML某个事件处理器中。
1
<script src="util.js"></script>

事件处理器

onmouseover和onmouseout事件

1
2
3
<p onmouseover="alert('hi');" onmouseout="alert('bye');" >
	一个段落
</p>

body事件onload onunload

1
2
3
<body onload="alert('hi');" >
	一个段落
</p>

简单对话框

  • alert
1
alert("hello world");
  • confirm
1
2
3
4
5
if(confirm("Yes or No?")){
    alert("yes");
}else{
    alert("no");
}
  • prompt
1
name = prompt("what is your name?");

计时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    <script>
        var count=10;
        alert(count);
        function update(){
            count--;
            alert(count);
        }
    </script>
</head>
	
<body onLoad="setInterval('update()',1000);">
    <p>一段</p>
</body>

Window的控制方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
    <script>
        var count=3;
        function close_small_close(){
            w.close();
        }
    </script>
</head>
	
<body onLoad="setInterval('close_small_close()',2000);">
    <script>
        var w=window.open("small.html",
                          "small",
                          "width=400,height=400,status=yes,resizeable=yes");
        w.moveTo(0,0);
    </script>
    <p>一段</p>
</body>

关闭window，使用Window.close()，window.location当前的url。如果使用JavaScript改写她，会加载改写的这个URL页面。

1
2
3
4
5
6
7
8
9
10
11
<head>
    <script>
        function jump(){
            location="http://www.baidu.com"
        }
    </script>
</head>
	
<body onLoad="setInterval('jump()',2000);">
    <p>一段</p>
</body>

文档对象模型 DOM

浏览器对象就是window，html页面则是document，里面的内容有五类，页面，表单，表格，链接，图片

可以通过getElementbyName和getElementbyId

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script type="text/javascript">
function getValue()
  {
      var x=document.getElementById("myHeader")
      alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>

操作DOM 进行动作，是JavaScript最好的使用场景。

以图片对象为例，做出动画片的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body onLoad="setInterval('show()',200)">
    <img name="anm" src="0.jpg" width=300></img>
</body>
<script>
    var images = new Array(6);
    var index = 1
    for (var i ;i<6;i++){
        images[i] = new Image();
        images[i].src = i+".jpg";
    }
    function show(){
        document.anm.src = images[index].src;
        index = (index + 1) % 6;
    }
</script>

总结

JavaScript则是网页开发的必备选择。我通过网易云的这门课堂，明白了JavaScript的一些理念，对其中的概念不再陌生。对于我现在的学习阶段，问题都很基础，一般来说W3C的网站上都有我的答案。