JavaScript第一章快速入门

最新推荐文章于 2024-04-01 13:59:12 发布

幸有我来山未孤-

最新推荐文章于 2024-04-01 13:59:12 发布

阅读量384

点赞数

本文链接：https://blog.csdn.net/weixin_45831889/article/details/105730686

版权

初识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脚本控制浏览器的一些接口。
例：弹出警告框、输入框，或者更改网页文档内容等效果。
在这里插入图片描述