hooyantsing's Blog

第55次课程

字数统计: 827阅读时长: 4 min
2019/09/09

源辰74班

第55次课程

09.09.2019

内容

JS基本语法[廖彦]

0.知识要点

alert(“字符串”);    将字符串以弹窗的形式显示

document.write(“<>字符串</>”);    将生成HTML代码在页面上显示

1.JS内联、内部和外部

和CSS十分相似

01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--内部-->
    <script type="text/javascript">
       alert("hello world!");
    </script>
    <!--外部-->
    <script type="text/javascript"  src="01.js"></script>
    <!--内联-->
    <button onclick="alert('你好衡阳')">按钮</button>
               <!--双引号内部使用单引号-->
</body>
</html>

01.js

1
alert("你好中国!");

**2.**function

02.html

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    
    function add( a,b ){
       return a + b;
    }
    
    sub = function( a,b ){
       return a - b;
    }
    
    //js 没有重载,后写的同名函数会覆盖之前的函数
    function add( a,b,c ){
       //arguments 用于存放传入函数的所有参数
       var sum = 0;
       for(var i=0;i<arguments.length;i++){
           sum += arguments[i];
       }
       return sum;
    }
    
    //js 函数的参数可以任意输入
    alert(add(1,2,3,4,5,6));
    alert(sub(3,2));
    
</script>
</body>
</html>

**3.**全局变量/局部变量

03.html

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- js 全局变量/局部变量 -->
<script type="text/javascript">
    //在script标签内定义变量是全局变量
    var a = 100;
    
    function test(){
       //在函数内定义变量是局部变量
       var b = 200;
       
       alert("test():"+a);
       alert("test():"+b);
    }
    
    test();
</script>
<script type="text/javascript">
    alert("after input:"+a);
    alert("after input:"+b);
</script>
</body>
</html>

4.for-in

04.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    var a = 100;
    var b = "100";
    document.write((a==b) + "
");
    document.write((a===b) + "
");
    //定义数组
    var arr = [11,22,33,44];
    //for-in 类似java中  增强for
    for(var a in arr){
       document.write(arr[a] + "
");
    }
</script>
</body>
</html>

5.[案例]海盗旗

05HaiDaoQi.html

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    var level = 5;
    //打印海盗旗
    for(var i=0;i<level;i++){
       for(var j=0;j<=i;j++){
           document.write("*");
       }
       document.write("
");
    }
    
    //打印金字塔
    for (var i = 1; i <= level; i++) {
           for (var j = 1; j <= level - i;  j++)  {
               //几种不同类型的空格 nbsp ensp  emsp
               document.write("&nbsp;");
           }
           for (var k = 1; k <= i * 2 - 1;   k++) {
               document.write("*");
           }
           document.write("
");
       }
    
    //打印表情海盗旗
    for(var i=0;i<level;i++){
       for(var j=0;j<=i;j++){
           //html标签 引入图片
           document.write("<img  src='img/timg.jpg' width='50px'");
       }
       document.write("
");
    }
</script>
</body>
</html>
CATALOG