初识JavaScript
一、什么是JavaScript
1、JavaScript概述
(1)JavaScript:是Web开发领域中的一种功能强大的编程语言,主要用于开发交互式的Web页面。
在计算机、手机等设备上浏览的网页,其大多数的交互逻辑几乎都是由JavaScript实现的。
(2)网页组成:对于制作一个网页而言,HTML、CSS和JavaScript分别代表了结构、样式和行为,
三者之间的区别如下:
HTML:决定网页的结构和内容,相当于人的身体。
CSS:决定网页呈现给用户的模样,相当于给人穿衣服、化妆。
JavaScript:实现业务逻辑和页面控制,相当于人的各种动作。
(3)JavaScript内嵌于HTML网页中,通过浏览器内置的JavaScript引擎进行解释执行,
把一个原本只用来显示的页面转变成支持用户交互的页面程序。
浏览器是访问互联网中各种网站所必备的工具,JavaScript主要就是运行在浏览器中的。
(4)常见浏览器及特点:
Internet Explorer:Windows操作系统的内置浏览器,用户数量较多
Microsoft Edge:Windows10操作系统提供的浏览器,速度较快、功能较多
Google Chrome:目前市场占有率较高的浏览器,具有简洁、快速的特点
Mozilla Firefox:一款优秀的浏览器,市场占有率低于Google Chrome
Safari:主要应用在苹果iOS、macOS操作系统中的浏览器
(5)浏览器内核的分类
渲染引擎(也称为排版引擎):负责解析HTML与CSS,如Chrome浏览器的Blink。
JavaScript引擎:是JavaScript语言的解释器,用于读取网页中的JavaScript代码,
对其处理后执行,如Chrome浏览器的V8引擎
JavaScript代码的执行特点:逐行执行
2、JavaScript的诞生与发展
(1)诞生: 在1995年时,Netscape(网景)公司(现在的Mozilla)的布兰登·爱奇(Brendan Eich)
在网景导航者浏览器上首次设计出了JavaScript。Netscape最初将这个脚本语言命名为LiveScript,
后来Netscape公司与Sun公司合作之后将其改名为JavaScript。
(2)发展: 在设计之初,JavaScript是一种可以嵌入到网页中的编程语言,
用来控制浏览器的行为。例如,直接在浏览器中进行表单验证,用户只有填写格式正确的内容
后才能够提交表单,这样避免了用户因表单填写错误导致的反复提交,节省了时间和网络资源,
3、JavaScript的用途:可以嵌入到网页中的编程语言,用来控制浏览器的行为。
案例应用如下:
利用前后端分离模式进行开发,基于React技术栈开发的移动Web项目
基于Angular构建的响应式移动Web项目
使用WePY框架并结合ES 6语法开发小程序电商项目
基于Vue.js全套技术栈开发出来的网页端后台管理系统
4、JavaScript的特点:
①、JavaScript是一种脚本语言,特点是简单、易学、易用,语法规则比较松散,
能够快速完成程序的编写工作
②、JavaScript可以跨平台,它不依赖操作系统,仅需要浏览器的支持
③、JavaScript支持面向对象,可以使JavaScript开发变得快捷和高效,降低开发成本
5、JavaScript的组成
JavaScript由ECMAScript、DOM、BOM三部分组成。
(1)ECMAScript:是JavaScript的核心。它规定了JavaScript的编程语法和基础核心内容,是所
有浏览器厂商共同遵守的一套JavaScript语法工业标准
(2)DOM:文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM提供
的接口,可以对页面上的各种元素进行操作
(3)BOM:浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
通过BOM,可以对浏览器窗口进行操作
/*Web前端中常用的开发工具有很多,例如Visual Studio Code、Sublime Text、Hbuilder、Adobe Dreamweaver、WebStorm*/
二、JavaScript的使用方法
1、行内式:是将单行或少量的JavaScript代码写在HTML标签的事件属性中
事件名="JavaScript代码"
2、内嵌式(嵌入式):使用<script>标签包裹JavaScript代码,
<script>标签可以写在<head>或 <body>标签中
<script>JavaScript代码</script>
3、外部式(外链式):将JavaScript代码写在一个单独的文件中,一般使用“js”作为文件
的扩展名,在HTML页面中使用<script>标签进行引入,适合JavaScript代码量比较多的
情况。注意外部式的<script>标签内不可以编写JavaScript代码(推荐使用)
(1)先创建.js文件
(2)通过<script src="js文件名"></script>标签将外部的js文件链接到页面中
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/3.js" type="text/javascript"></script>
<title>Document</title>
</head>
三、JavaScript的语法规则
在编写JavaScript代码时,需要注意基本的语法规则:
1、JavaScript严格区分大小写,在编写代码时一定注意大小写的正确性
2、JavaScript代码对空格、换行、缩进不敏感,一条语句可以分成多行书写
3、如果一条语句结束后,换行书写下一条语句,后面的分号可以省略
4、单行注释:以“//”开始,到该行结束或<script>标签结束之前的内容都是注释。
快捷键:ctrl + /
5、多行注释:以“ /*”开始,以 “*/”结束。需要注意的是,多行注释中可以嵌套单行注释,
但不能再嵌套多行注释。快捷键:shift + alt + a
四、JavaScript的输入输出
JavaScript代码中提供了输入和输出语句,可以在网页中实现用户交互效果。常用的输入和输出语句如下所示:
1、消息框:alert(字符串) 浏览器弹出警告框
2、确认消息框:confirm(字符串);
3、控制台输出:console.log(字符串) 浏览器控制台输出信息
4、输入消息框:prompt("字符串") 浏览器弹出输入框,用户可以输入内容
5、在页面内创建一个按钮
<input type="button" value="取消" onclick="alert('这是一个按钮')"> <!--创建按钮的第一种方式 -->
<button type="button" onclick="confirm('确定删除吗?')">删除</button> <!-- 创建按钮的第二种方式,建议使用 -->
使用方法案例:
①alert()方法的使用
<script>
alert('这是一个警告框');
</script>
②console.log()方法的使用
<script>
console.log('在控制台输出信息');
</script>
③prompt()方法的使用
<script>
prompt('这是一个输入框');
</script>
<input type="button" value="取消" onclick="alert('这是一个按钮')"> <!--创建按钮的第一种方式 -->
<br><br>
<button type="button" onclick="confirm('确定删除吗?')">删除</button> <!-- 创建按钮的第二种方式,建议使用 -->
5、控制台的使用
浏览器的控制台中也可以直接输入JavaScript代码中来执行语句,这为初学者提供了很大的便利。
五、JavaScript中的变量
1、变量:是内存中一块存储空间,是程序在内存中申请的一块用来存放数据的空间。例如,程序在内存中保存字符串“小明”和“小张”
2、变量的使用:声明变量和变量赋值。
①声明变量
var 变量名 —>在内存中分配一块存储区
var age; // 声明一个名称为age的变量
②变量赋值 变量名 = 数据
var age
age = 10 // 为age变量赋值
③变量初始化 声明变量的同时赋值
var age = 18 // 声明变量的同时赋值
注:’+'的作用
(1)算术运算的加法:运算对象必须是数值型数据
(2)连接符:可以将变量和字符串进行连接,连接的结果是一个字符串
var age = 25
var str = "年龄:"+age
变量的应用案例
①使用变量保存个人信息,示例
var myName = '小明';
var address = 'XX市XX区';
var age = 18;
var email = 'xiaoming@localhost'; console.log(myName); // 输出myName的值
console.log(address); // 输出address的值
console.log(age); // 输出age的值
console.log(email); // 输出email的值
②使用变量保存用户输入的值
var myName = prompt('请输入您的名字');
alert(myName);
③更新变量的值
var myName = '小明';
console.log(myName); // 输出结果:小明
myName = '小红'; // 更新变量的值
console.log(myName); // 输出结果:小红
④同时声明多个变量
var myName, age, email;
var myName = '小明',
age = 18,
email = 'xiaoming@localhost';
⑤声明变量的特殊情况
a、只声明变量,但不赋值
var age;
console.log(age); /*控制台输出undefined*/
b、不声明变量,直接输出变量的值
console.log(age); /*控制台会报错*/
c、不声明变量,只进行赋值
age1 = 10;
console.log(age1);
注意:直接赋值一个未声明的变量,也可以正确输出变量的值。这个情况是JavaScript语言的特性
3、变量的命名规范
由字母、数字、下划线和美元符号($)组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
要尽量做到“见其名知其意”
建议遵循驼峰命名法,首字母小写,后面的单词首字母大写
案例:交换两个变量的值
var temp
var apple1 = "青果"
var apple2 = "红果"
console.log("交换前的值:")
console.log("apple1:"+apple1)
console.log("apple2:"+apple2)
console.log("-------------------")
//交换两个变量的值
temp = apple1
apple1 = apple2
apple2 = temp
console.log("交换后的值:")
console.log("apple1:"+apple1)
console.log("apple2:"+apple2)