Web前端开发学习日记6

经过一段时间的学习，可以编写HTML，CSS相应代码，对三大件中的两件都有了了解，那么我们接下来学习三大件中最重要的交互部分JavaScript。

JavaScript概述

JavaScript是一种运行与JavaScript解释器/引擎中的解释型脚本语言，以下简称JS。
解释型脚本语言：运行之前是不需要编译，运行之前不会检查错误，直到碰到问题为止。
JS由三部分组成：

  • 核心基础语法（ECMAScript）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
    	<script>
    		var a=[1,2,3,4]//var 定义变量
    		var sum=0;
    		for(var i=0;i<a.length;i++)
    		{
    			sum+=a[i];
    		}//循环结构
    		document.write(sum);//单行注释，/*多行注释*/
    	</script>
    </body>
  • 文档对象模型（DOM,Document Object Model），让JS有能力与网页对话，访问和改变 HTML 文档的所有元素
    1
    2
    3
    4
    <body>
    	<p id="changeStyle">通过改变DOM样式，字号变为24px</p>
    	<button onclick="document.getElementById('changeStyle').style.fontSize='24px'">点击改变字号</button>
    </body>
  • 浏览器对象模型（BOM,Browser Object Model），让JS有能力与浏览器进行对话
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <head>
    	<script>
    		function load()
    		{
    			window.open('http://www.baidu.com','_blank','width=600,height=400,top=100px,left=50px')
    		}
    	</script>
    </head>
    <body>
    	<button onclick="load()">百度</button>
    </body>

JS的特点

  • 开发工具简单，记事本即可
  • 无需编译，直接由JS引擎负责执行
  • 弱类型语言，由数据来决定数据类型
  • 面向对象

JavaScript基础语法

JS代码用分号表示结束；大小写敏感。
JS代码的引用方式：
1、JS代码嵌入元素中，行内添加

1
2
3
4
5
<body>
	<button onclick="console.log('hello world');">
		打印消息
	</button>
</body>

2、JS代码嵌入script标记中，内嵌添加（可以写在head/body里）

1
2
3
4
5
6
<body>
	<script>
		document.write('<b>欢迎</b>');
		console.log('脚本执行结束了');
	</script>
</body>

3、JS代码写在外部脚本文件中（XX.js），外部添加

1
2
3
<head>
	<script src="XX.js"></script>
</head>

JavaScript输出

  • 使用window.alert() 写入警告框
  • 使用document.write() 写入HTML输出（该方法会删除已有的HTML，仅测试）
  • 使用innerHTML 写入HTML元素
  • 使用console.log() 写入浏览器控制台