一、认识JavaScript
(1)浏览器分为两类:渲染引擎和JS引擎。渲染引擎负责执行HTML和CSS语言(渲染引擎被称为是内核,如Chrome中的blink),JS引擎负责执行JavaScript语言(JS引擎又被称为“JS解释器”,如Chrome中的v8)。
(2)JavaScript是一种高级编程语言,并不能直接被浏览器执行,它需要通过JS引擎将JavaScript高级语言转换成机器语言,JS引擎将JavaScript代码进行逐句解释,JavaScript代码才可以被浏览器执行,所以JavaScript又名脚本语言。
二、JS三部分
(1)ECMAScript:JavaScript语法。
(2)DOM:文档对象模型,是可拓展标记语言的标准编程接口。通过DOM提供的接口可以对网页上的各种元素进行操作(大小、位置和颜色等)。
(3)BOM:浏览器对象模型,可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口(如弹出框、控制浏览器旋转、获取分辨率等)。
三、JS的书写方法
JS的书写方法有三种:行内式、内嵌式和外部式。
(1)行内式(易出错、特殊时使用)
下面以一个按钮打开警示窗为例展示JS行内式的书写表达:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
</style>
</head>
<body>
<!-- 行内式 -->
<input type="button" value="周星驰" onclick="alert('大话西游')">
</body>
</html>
效果图如下:
(2)内嵌式(最常用)
下面以一个警示窗为例展示JS内嵌式的书写表达:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
/* 内嵌式 */
<script>
alert('大话西游');
</script>
</head>
<body>
</body>
</html>
效果图如下:
(3)外部式(代码量大时使用)
下面以一个警示窗为例展示JS外部式的书写表达:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
/*外部式:先创建一个js文件,再将js文件引入Html文件中*/
<script src="TEST1.js"></script>
</head>
<body>
</body>
</html>
JS代码:
alert('大话西游')
效果图如下:
四、JS输入输出语句
(1)alert()——弹出警示窗:
例子如下:
效果图:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
/* 内嵌式 */
<script>
alert('大话西游');
</script>
</head>
<body>
</body>
</html>
(2)prompt()——弹出输入框:
例子如下:
效果图:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script> prompt('请输入您的成绩:')</script>
</head>
<body>
</body>
</html>
(3)console.log()——控制台输出(用于程序员测试,当然用户也可以输入):
例子如下:
效果图:
运行出来的页面是一个空格页面,我们按F12键在页面右侧就会出现以下画面:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script> console.log('请输入您的成绩:')</script>
</head>
<body>
</body>
</html>
五、JS中的变量
变量在使用时分为两步:声明和赋值。
声明变量的关键词使用的是var
(1)变量的定义:用于存放数据的集合,通过变量名辨别变量以及获取数据,甚至对数据进行修改。其实,我们可以将变量理解成一个装东西的盒子。
(2)变量的使用:有两种方式。
一种是先声明,再赋值,后输出:(不常用)
如:
var age;//声明
age = 20;//赋值
console.log(age);//输出
另一种是声明并赋值再输出:(又名初始化,是最常用变量使用方法)
如:
var age = 20;//声明并赋值
console.log(age);//输出
(3)变量案例一:个人信息表
案例效果图:
案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script>
var name = '崇志';
var age = 20;
var sex = '男';
var marry = '未婚';
var nation='中国';
console.log(name)
console.log(age)
console.log(sex)
console.log(marry)
console.log(nation)
</script>
</head>
<body>
</body>
</html>
(3)变量案例二:弹出用户信息窗
案例效果图:
案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script>
var name = prompt('请输入您的姓名:');
alert(name);
</script>
</head>
<body>
</body>
</html>
(4)变量的语法拓展:
①第一种情况是:更新变量。变量值以最后赋值为准。
第一种情况的代码:
var age = 12;
age = 90;
此时age的值就变成了90。
②第二种情况是:同时声明多个变量。此时,只需要写一个var,多个变量之间用英文逗号隔开即可。
第二种情况的代码:
var name = '崇志',age=12, sex='男',marry='未婚';
③第三种情况是:只声明不赋值。
第三种情况的代码:
var age;
console.log(age);//undefined系统显示未定义的
第三种情况的效果图:
④第四种情况是:只赋值不声明。
第四种情况的代码:
age=99;
console.log(age);
第四种情况的效果图:
五、变量名
(1)命名规范:
①变量名只能由大小写字母、数字、下划线(_)或美元符($)组成。
②不能以数字开头。
③变量不能是关键字,如var、for、while(我们在变量名中尽量少用name,多用myName等)。
④变量名必须有含义,如userName(用户名)。
⑤变量名命名方法:驼峰命名法,首个字母小写,后面的单词首字母大写,如myFirstName。
⑥变量名严格区分大小。
举例子:
var a √ var userName √ var passWord √
var 2 × var $name √ var pass Word ×
var age12 √ var _sex √ var pass_Word √
vae 12age × var &name × var for ×
六、交换两个变量的值
这时候,我们需要使用一个临时的变量进行存储,我们将这个临时变量命名为temp。
交换两个变量的案例效果图:
案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script>
var thingOne='红烧排骨';
var thingTwo='清蒸甲鱼汤';
var temp;
temp=thingOne;
thingOne=thingTwo;
thingTwo=temp;
console.log(thingOne);
console.log(thingTwo);
</script>
</head>
<body>
</body>
</html>
小结:
(1)浏览器分为哪几类?
浏览器分为两类:渲染引擎和JS引擎。渲染引擎负责执行HTML和CSS语言(渲染引擎被称为是内核,如Chrome中的blink),JS引擎负责执行JavaScript语言(JS引擎又被称为“JS解释器”,如Chrome中的v8)。
(2)JS分为哪三个部分?
ECMAScript、DOM、BOM。
(3)变量是什么?
变量是用于存放数据的集合,通过变量名辨别变量以及获取数据,甚至对数据进行修改。其实,我们可以将变量理解成一个装东西的盒子。
(4)JS的书写方法有哪几种?
行内式、内嵌式和外部式。
(5)变量的使用有哪两种方式?
先声明再赋值后输出、同时声明并赋值输出。
(6)变量的语法拓展有哪几种情况?
更新变量、同时声明多个变量、只声明不赋值、只赋值不声明。
(7)变量名的命名规范有哪些?
①变量名只能由大小写字母、数字、下划线(_)或美元符($)组成。
②不能以数字开头。
③变量不能是关键字,如var、for、while(我们在变量名中尽量少用name,多用myName等)。
④变量名必须有含义,如userName(用户名)。
⑤变量名命名方法:驼峰命名法,首个字母小写,后面的单词首字母大写,如myFirstName。
⑥变量名严格区分大小。
(8)如何交换两个变量的值?
使用一个临时的变量temp进行存储。