了解JS以及JS的书写、输出语法
一、了解JS
在一个网页里面:
html表示网页的结构;
css表示网页的样式;
js表示网页的行为。
1.JS的三大核心
- ECMAScript :JS的语法、标准;
- BOM(Browser Object Model,浏览器对象模型):是一整套操作浏览器的属性和方法;
- DOM(Document Object Model,文档对象模型):是一套操作文档流的属性和方法;
2.JS的本质
是通过JS的语法,让浏览器发生变换,让文档发生变化。
二、JS的书写
1.行内式(强烈不推荐)
但凡用行内式可以解决的,都可以用内嵌式和外链式解决。
a标签:因为a标签本身就有行为出现;
当我点击的时候需要区分你是跳转还是执行JS代码;
在href
属性里面书写一个javascript:JS代码;
<body>
<a href="javascript: alert('Hello World!');">
点我一下试试!
</a>
</body>
非a标签:因为没有自己的i行为,我们需要给他加一个行为。
写一个onclick
属性,表示单击事件,当点击是触发事件;
属性值的位置书写JS代码
<div onclick="alert('Hello World !')">点我一下试试</div>
接触第一个JS代码:
alert('Hello World!');
含义:在浏览器弹出一个提示框,里面有一段文本呢,是 Hello World! 。
注意:写在小括号里面的需要用引号来包裹,如果是数字就不需要了。
2.内嵌式(不推荐)
在页面内书写一个script
标签,把JS代码书写在标签内部;
注意:不需要任何行为,打开页面就可以执行。
特点:一个页面内可以写入多个script
标签;
会按照从上到下的顺序依次执行;
理论上script
标签可以放在页面的任何位置,可以放在<html></html>
标签外面;
推荐放在<body>或者<head>
标签的末尾;
3.外链式(推荐)
把JS代码书写在一个后缀为.js
的文件中;
在页面上通过script标签src属性
引入页面。
<script src="../js/text.js"></script>
注意:不需要任何行为,打开页面就可以执行。
特点:1.和内嵌式一样;
2.当一个script标签当作外链式使用的时候,那么写在标签对里面的内容没有意义
哪怕你写了src属性,但是没有引入文件,也不能当作内嵌式使用。
三、JS的输出语法
当你用任何一种输出语法的时候,只要不用引号就表示你在输出一个变量
1.alert()
以浏览器弹出层的形式展示内容(不点击后面的代码没法执行);
小括号里面输入要输出的内容分;
只要不是纯数字,都要用引号包裹(单引号双引号无所谓);
alert('Hello World!');
alert(123456789);
2.console.log()
在浏览器控制台打印你要输出的内容;
小括号里面输入要打印的内容分;
只要不是纯数字,都要用引号包裹(单引号双引号无所谓);
控制台(开发者工具):
Elements(看结构)、Console(看控制台输出内容的位置)、Sources(看代码源码)、NetWork(看网络任务)
console.log('Hello World!');
3.document.write()
在页面直接写入你要输出的内容
小括号里面输入要输出的内容分;
只要不是纯数字,都要用引号包裹(单引号双引号无所谓);
特殊:直接把内容写在页面上,所以可以解析标签
document.write('Hello World!');