一、什么是JavaScript(简称js)
1.首先要了解前端页面的组成(前端页面的三层结构)
-
HTML 表示了你的页面内有什么,组成页面的骨架 (结构层)
-
CSS 表示了你的页面中每一个内容是什么样子的(样式层)
-
JavaScript(简称js) 表示了你的页面中每一个内容如何发生变化, 有什么行为内容(行为层)
2.JavaScript
是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。
二、JavaScript的组成
1.ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2.BOM (Browser Object Model): 浏览器对象模型
有一套成熟的可以操作浏览器的 API,通过 BOM 可以操作浏览器。比如:弹出框、浏览器跳转、获取分辨率等
3.DOM (Document Object Model): 文档对象模型
有一套成熟的可以操作页面元素的 API,通过 DOM 可以操作页面中的元素。比如:增加个 div,减少个 div,给 div 换个位置等
总结:JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果
三、JavaScript的执行环境
JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行JavaScript 代码,JavaScript代码的书写位置和 css 一样,我们的 js 也可以有多种方式书写在页面上让其生效,js 也有多种方式书写,分为行内式, 内嵌式,外链式。
第一段 JS 代码,在开始之前, 我们先来学习第一段 js 代码
alert("hello world")
作用 :
在浏览器出现一个弹出框, 弹出框内显示的内容就是小括号内书写的文本
注意 :
-
小括号内的内容如果不是纯数字内容, 需要被引号包裹(单引号或双引号都可以)
-
行内式 JS 代码(不推荐) a标签 因为a标签有自己的跳转行为,这个是这个标签本身就有的,当我们点击的时候会自动跳转到指定的页面
-
我们只要在a标签的herf属性的位置写上javascript:;就不会跳转
-
我们在冒号和分号之间写上js代码,就会执行我们写的这个js代码。
<a href="javascript:alert('hello world');">点击一下试试</a>
非a标签
如果是非a标签,本身不具备这个跳转的能力,我们就需要认为的赋予它这个能力,先学第一个能力,onclick,这是一个点击的行为,在值的位置, 直接书写 js 代码就行, 不需要 javascript:; 了,写在标签上的 js 代码需要依靠事件(行为)来触发。
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
</