初识JavaScript
特点:脚本语言、可跨平台、支持面向对象
一、JavaScript引入方式:
1.嵌入式——使用<script>
标签包裹JavaScript代码,直接写到HTML文件中
语法
<script>
JavaScript语句;
</script>
示例:
<script type="text/JavaScript”>
JavaScript语句;
</script>
type属性用于告知浏览器脚本的类型。
type默认值为text/JavaScript(HTML5),可以省略type属性。
2.外链式——将JavaScript代码保存到哟个单独的文件夹中,通常用“js”作为文件拓展名,然后使用<script>
标签的scr属性引入文件中。
语法:
HTML文件
......
<script scr="js/text.js" ><script>
......
示例
js/text.js文件
......
alert('Hello')
......
3.行内式——将JavaScript代码作为HTML标签的属性值使用
用法一
<a href="javascript:alert('Hello');">test</a>
用法二
<input type="button" onclick="alert('Hello');" value="test">
二、JavaScript异步加载
存在问题引入JavaScript代码时,也免得下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。
**解决的办法1:**对于不需要提前执行的代码,将<script>
标签放在<body>
标签的底部,可以减少对整体页面下载的影响。
解决办法2:可用HTML5为<script>
标签新增的两个可选属性:async和defer。
用法示例
方法一:async
<script scr="js文件地址" async><script>
方法二:defer
<script scr="js文件地址" defer></script>
async异步加载,即先下载文件,不断阻塞其他代码执行,下载完成后再执行。
defer用于延后执行,即先下载文件,直到页面加载完成后再执行。
共同点:即使文件下载失败,也不会阻塞后面的JavaScript代码执行
三、常用输出语句
alert()警告框
console.log()控制台输出
document.write()文档页面输出
四、数据与运算
1.数学运算: 四则运算规律
2.比较两个数字的大小
比较结果是true和false,这是一种布尔类型的值,表示真和假。
如果比较结果为true,表示成立,反之,不成立。
3.使用字符串保存数据
在JavaScript中,,使用单引号或双引号包裹的数据是字符串。
4.比较两个字符串是否相同
使用 “==”运算符
5.字符串与数字的拼接
“+”运算符的操作数只要有一个是字符串,就表示字符串拼接。
“+”运算符的操作数全部为数字式,表示相加。
例:
根据比较结果执行不同的代码
if…else语句用于需要根据比较的结果,来执行不同的代码。
6.使用变量保存数据
场景: 当一个数据需要多次使用时,可以利用变量将数据保存起来.
概念: 变量是保存数据的容器,每一个变量都有唯一的名称.
**定义: ** 利用var关键字定义
五、函数
1.函数的用途
问题:代码量增多,维护困难,条理不清,阅读困难。
解决办法:模块化、组件化
实现方式:将某些常用功能编写成函数,通过调用函数来实现
2.函数的返回值
函数执行后可返回一个表示执行结果的值。
例如:prompt()
var name = prompt('请输入你的名字:')
3.函数的参数
函数支持传入一个或多个参数,多个参数用逗号分隔。
例:
prompt('请输入你的名字','张三')
4.自定义函数
除直接调用JavaScript内置的函数,用户还可以自己定义函数,用于封装代码。
六、对象
1.对象的用途
一个对象的成员由属性和方法组成。
属性就是变量,方法就是函数
2.window对象
Window 对象是JavaScript与浏览器之间交互的主要接入点。
提供了用于JavaScript脚本控制浏览器的一些接口。
例: 弹出警告框、输入框,或者更改网页文档内容等效果。
3.document对象
document对象是window对象的属性之一,主要用于与网页文档进行交互。
例:
4.String对象
在代码中直接定义的字符串,就可以作为对象来使用。
String对象用于对字符串进行处理。
例:
5.自定义对象
除了直接使用JavaScript中的内置对象,用户也可以自己创建一个自定义对象
例: