标题图
目录
- 初始JavaScript
- 学会使用编辑工具
- 如何引入脚本代码
- 常用语句
- 常见浏览器兼容性问题
了解前端开发技术JavaScript，JavaScript的发展，JavaScript特点，JavaScript的组成及其作用。
发展
- 由布兰登·艾奇（Brendan Eich）发明
- 于1995年出现在Netscape
Netscape与SUN合作，将LiveScript改为JavaScript，成为强力的WEB页开发工具。
是一种基于对象和事件驱动的脚本语言。
使用它的目的是与HTML（超文本标记语言）一起实现网页中的动态交互功能。
JavaScript使网页变得更加生动。
脚本功能强大
图片
实现功能强大
可视性、动态性和交互性于一体的HTML网页
特点
JavaScript是一种基于对象和事件驱动的客户端脚本语言
其主要特点：
- 基于对象：运用自己创建的对象
- 事件驱动：采用事件驱动并执行指定的操作
- 解释性语言：无须专门的编译器进行编译
- 简单性：变量类型采用弱类型
- 安全性：实现信息浏览或动态交互，对
数据的操作是安全的 - 动态性：直接对用户或客户的输入做出响应
- 跨平台性：与操作环境无关
JavaScript的组成
图片
ECMAScript.png
定义了脚本语言的所有属性、方法和对象
浏览器对象模型BOM
图片
文档对象模型DOM
Document Object Model（文档对象模型）
DOM.png
脚本执行原理
原理
嵌入JavaScript语言
<script language="javascript" type="text/javascript">
document.write("欢迎来到JavaScript世界！");
</script>
脚本编辑器
- 记事本
- EditPlus
- UltraEdit
- Dreamweaver
- FrontPage
- Visual Studio等
将JavaScript脚本代码嵌入到HTML文档中
<script language="javascript" type="text/javascript">
document.write("欢迎来到JavaScript世界！");
</script>
<script language="javascript" src="javascript.js"></script>
<input type="button" name="mybtn" value="伪URL引入" onclick="javascript:alert('鼠标单击！')">
<script language="javascript" type="text/javascript">
function clickme()
{
alert("鼠标单击！");
}
</script>
<form name="myform">
<input type="button" name="mybtn" value="按钮" onclick="clickme()">
</form>
脚本代码的位置
在<head></head>标记对之间放置
在<body></body>标记对之间放置
常用语句
- 警告对话框alert( )
- 提示对话框prompt(“提示信息”,”输入框的默认信息”);
图片
图片
- 输出document.write(“输出内容” )；
<script type="text/javascript">
document.write("<h1>个人信息</h1>");
document.write("<h3>班级：1024<br/>学号：123456<br/>姓名：1234<br/>性别：女<br/>爱好：跳舞、爬山</h3>");
</script>
拓展
JavaScript和Java 的区别
基于对象和面向对象
Java 是一种面向对象的语言
JavaScript 是种脚本语言，是一种基于对象和事件驱动的编程语言
解释和编译
Java的源代码必须经过编译
JavaScript 是一种解释性编程语言，不需经过编译，而是将字符代码发送给客户端由浏览器解释执行
强变量和弱变量
Java采用强类型，变量在编译之前必须作声明
JavaScript采用其弱类型，变量在使用前不需作声明
代码格式不一样
嵌入方式不一样
终极目标
- 用HTML方式和JavaScript脚本方式在页面显示信息
- 在web页面引入JavaScript文件
- 将用户输入的信息在页面输出
- 使用伪URL方式引入JavaScript代码等
代码
图片
图片
图片
图片
送❤
网友评论