JavaScript基础

字数统计: 2.3k字   |   阅读时长≈ 10分钟

1.1第一个 JavaScript 程序

1
2
3
4
5
6
7
8
9
#这段代码的效果是，弹出一个小框，显示“hello world!”
<html>
  <head></head>
    <body>
      <script>
        alert("hello world!");
      </script>
    </body>
</html>

2.变量的声明

在 JavaScript 中，变量用 Var 命令做声明：

1
2
var test ;    // 声明了一个名为 test 的变量。
var test_2 = "shiyanlou" ;  // 声明一个名为 test_2 的变量，并赋值为“shiyanlou”。

在 JavaScript 中，变量也可以不作声明，而在使用时再根据数据的类型来确其变量的类型，如：
1
2
3
4
x = 100 ;     // 变量 x 为整数
y = "hello" ; // 变量 y 为字符串
z = True ;    // 变量 z 为布尔型
cars=["Audi","BMW","Volvo"]; // cars 是一个数组

3.Javascript语句

  • if/else
  • switch/case
  • for
  • while
  • break/continue

4.JavaScript函数

1
2
3
4
5
6
function 函数名 (参数1，参数2)
{
  函数体;

  return 返回值;
}

5.事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
  <script>
    function click_button() {     // 事件处理程序，弹出提示窗
      alert('welcome to shiyanlou');
    }
  </script>
</head>

<body align="center">
  <br></br>
  <button onclick="click_button()">click me</button>  <!--发生事件 onclick 的时候，执行 click_button()-->
</body>
</html>

常用事件

name function
onclick 单击
ondblclick 双击
onfocus 元素获得焦点
onblur 元素失去焦点
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开

其中，onmouseover 和 onmouseout 事件可用于在鼠标移至 HTML 元素上和移出元素时触发函数。比如这一例子：

1
2
3
4
5
6
7
8
9
<html>
<head></head>
    <body>
        <div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
          onmouseover="this.innerHTML='good'"
          onmouseout="this.innerHTML='you have moved out'"
        >move your mouse to here</div>
    </body>
</html>

onmousedown, onmouseup 是鼠标 压下 和 松开 的事件。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件。
举例说明：
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
<html>
<head>
  <script>
    function mDown(obj)    // 按下鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="release your mouse"
    }
    function mUp(obj)     // 松开鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="press here"
    }
  </script>
</head>
<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"

onmousedown="mDown(this)"
onmouseup="mUp(this)"
>press here</div>
</body>

</html>
``` 
##6.对象
###6.1创建对象

student = new Object(); // 创建对象“student”

student.name = “Tom”; // 对象属性 名字
student.age = “19”; // 对象属性 年龄

student.study =function() { // 对象方法 学习
alert(“studying”);
};

student.eat =function() { // 对象方法 吃
alert(“eating”);
};

1
以上方法在创建多个对象时，会产生大量重复代码，所以我们也可以采用函数的方式新建对象：

function student(name,age) {
this.name = name;
this.age = age;
this.study = function() {
alert(“studying”);
};
this.eat = function() {
alert(“eating”);
}
}
1
然后通过 new 创建 student 对象的实例：

var student1 = new student(‘Tom’,’19’);
var student2 = new student(‘Jack’,’20’);
1
2
####6.2访问对象的属性与方法
新建的 student1 对象，可以这样使用：

1
当我们需要 反复访问 某对象的时候，可以使用 with 语句简化操作，而不需要反复地用“.”符号，比如：
with(student1) { var x = name; var y= age; study(); eat(); } 
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
###7.内置对象
####1.String
>属性：string.length

|方法|功能|
|:---:|:---:|
|charAt(n) |返回该字符串第 n 位的单个字符。（从 0 开始计数）
|charCodeAt(n) |返回该字符串第 n 位的单个字符的 ASCII 码。
|indexOf() |用法：string_1.indexOf(string_2,n); 从字符串 string_1 的第 n 位开始搜索，查找 string_2，返回查找到的位置，如果未找到，则返回 -1，其中 n 可以不填，默认从第 0 位开始查找。
|lastIndexOf() |跟 indexOf() 相似，不过是从后边开始找。
|split('分隔符') |将字符串按照指定的分隔符分离开，返回一个数组，例如：'1&2&345&678'.split('&')；返回数组：1,2,345,678。
|substring(n,m) |返回原字符串从 n 位置到 m 位置的子串。
| substr(n,x) |返回原字符串从 n 位置开始，长度为 x 的子串。
|toLowerCase() |返回把原字符串所有大写字母都变成小写的字符串。
|toUpperCase() |返回把原字符串所有小写字母都变成大写的字符串。

####2.Math

|属性|作用|
|:---:|:---:|
|E |返回常数 e (2.718281828...)。|
|LN2 |返回 2 的自然对数 (ln 2)。|
|LN10 |返回 10 的自然对数 (ln 10)。|
|LOG2E |返回以 2 为低的 e 的对数 (log2e)。|
|LOG10E |返回以 10 为低的 e 的对数 (log10e)。|
|PI |返回π（3.1415926535...)。|
|SQRT1_2 |返回 1/2 的平方根。|
|SQRT2 |返回 2 的平方根。|

|方法|作用|
|:---:|:---:|
|abs(x) |返回 x 的绝对值。
|round(x) |返回 x 四舍五入后的值。
|sqrt(x) |返回 x 的平方根。
|ceil(x) |返回大于等于 x 的最小整数。
| floor(x) |返回小于等于 x 的最大整数。
|sin(x) |返回 x 的正弦。
|cos(x) |返回 x 的余弦。
|tan(x) |返回 x 的正切。
|acos(x) |返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。
|asin(x) |返回 x 的反正弦值。
|atan(x) |返回 x 的反正切值。
|exp(x) |返回 e 的 x 次幂 (e^x)。
|pow(n, m) |返回 n 的 m 次幂 (nm)。
|log(x) |返回 x 的自然对数 (ln x)。
|max(a, b) |返回 a, b 中较大的数。
|min(a, b) |返回 a, b 中较小的数。
|random() |返回大于 0 小于 1 的一个随机数。

###3.Array数组对象
>注意：JavaScript只有一维数组，要使用多维数组，请用这种虚拟法：
>`var myArray = new Array(new Array(), new Array(), new Array(), ...);`
>调用这个“二维数组”的元素时：
>`myArray[2][3] = ...;`

属性：length
返回数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
想添加一个元素，只需要： myArray[myArray.length] = ...; 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

####(2)Array 的方法

- join("指定分隔符") ：返回一个字符串，把数组元素串起来，元素间用指定分隔符隔开。

- toString() ：把数组转为字符串，并返回结果。

- reverse() ：使数组元素倒序。

- slice(n,m) ：返回子数组，从数组第 n 个元素到第 m 个元素。

- sort(SortFunction) ：按照指定的 SortFunction 将数组的元素排序。

- concat(Array\_1,Array\_2) ：用于连接两个或多个数组。


#8.DOM
>DOM 是 文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的，所以，DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。

- 选取文档元素
(1)通过ID选取
我们可以使用方法 getElementById() 通过元素的 ID 而选取元素，并对其做操作，比如：

</body>
</html>

1
(2)通过名字（Name）或标签名（TagName）选取

</body>
</html>

1
2
3
4

##9.节点、属性操作和文档遍历
- 查询和设置元素属性
可以通过 getAttribute() 和 setAttribute() 查询和设置元素的属性：


before:
after: 
1
2
- 父节点
通过 parentNode() 方法可以查看并操作一个节点的父节点，示例：找到 id 为 demo 的元素的父节点，并输出其 class 的名称：


</body>
</html>

1
2
3
4
5

- 创建和插入节点
JavaScript 可以动态地在页面中创建并插入节点，这便需要用到 createElement()、appendChild() 方法，它们的作用分别是创建节点和插入节点。

比如：创建一个 div 并为其设置高度（100px）和背景色（red），并追加到 body 后面：


</body>
</html>

1
2
- 删除节点
除了创建，我们还可以删除一个节点，通过 removeChild() 方法：



</body>
</html>
```

打赏

扫一扫，分享到微信

微信分享二维码

请我喝杯咖啡吧~

支付宝
微信