认识javascript
js是javascript的缩写,是一种基于对象和事件驱动并且具有相对安全性的客户端脚本语言,也是一门轻量级的开发语言。
js可以给页面添加效果,例如图片轮播,点击弹出等等。
js还可以用来进行前后台交互 从后台获取数据或者向后台反馈数据
js是由哪些部分组成的呢?
- ECMAScript:这里面规定了js中的规范,基本操作语句,变量,数据类型等基本知识 这个是js的核心,现在我们主要使用的是版本5、6、7,,也就是ES5、ES6等;
- DOM:document object model 文档对象模型;
- BOM:browser object model 浏览器对象模型。
那么我们首先来学习一下ECMAScript中最基础的操作
js和html文件进行关联
浏览器直接加载html文件,通过html文件来加载js和css文件,那么js文件怎么引入到html页面中呢。
- 行内式:直接写在html标签内的js代码
<p onclick="alert('我是一个字符串')">请点击 你会有一个惊喜</p>
这种方式不推荐使用,很容易被篡改,安全性低。
- 外链式:通过script标签里面的src属性引入一个外部js文件。
<script src="url" type="text/javascript"></script>
- 内嵌式:写在script标签内的代码块
<script type="text/javascript">
document.write("我是又一个字符串");
// 这是内嵌式
</script>
这里需要注意,写在外链式标签中的代码是不会被运行的;
js代码需要放置在html结束位置,因为浏览器从上到下加载运行,而js是操作DOM元素的语言,我们需要先将DOM元素加载出来,在进行js的添加和操作。
js的输出方式
- 直接在浏览器的弹出框输出内容
<script type="text/javascript">
alert("content");
</script>
- 在浏览器的控制台输出内容
<script type="text/javascript">
console.log("content");
</script>
- 向文档中输出内容
<script type="text/javascript">
document.write("欢迎大家来到珠峰培训!");
</script>
- 动态向页面中添加代码或者内容
<script type="text/javascript">
document.innerHTML="<h1>欢迎大家来到珠峰培训!</h1>";
</script>