JavaScript
JavaScript概述
- JavaScript是什么?有什么作用?
HTML:就是用来写网页的。(人的身体)
CSS:就是用来美化页面的。(人的衣服)
JavaScript:前端大脑、灵魂。(人的大脑、灵魂)
JavaScript是WEB上强大的脚本语言。
脚本语言无法独立运行,必须嵌入到其他语言中,结合使用。
- 作用: 控制页面特效显示。
例如:
JS可以对HTML元素进行动态的控制。
JS可以对表单项进行校验。
JS可以控制CSS样式。
- JavaScript入门案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
//声明变量a,并赋值
var a = 10;
//声明变量b,并赋值
var b = 20;
//弹框变量a + 变量b的值
alert(a + b);
</script>
</head>
<body>
</body>
</html>
- JavaScript的语言特征即编程注意事项
特征:
- JavaScript无需编译,直接被浏览器解释执行。
- JavaScript 无法单独运行,必须嵌入到HTML代码中运行。
- JavaScript的执行过程由上到下一次执行。
注意:
- JavaScript没有访问系统文件的权限。
- 由于JavaScript无需编译,是由上到下依次解释执行,所以在保证可读性的情况下,允许使用链式编程。
- JavaScript和Java没有任何关系。
- JavaScript的组成
- ECMAScript(核心):规定了JS的语法和基本对象。
- DOM文档对象模型:处理网页内容的方法和接口。
- BOM浏览器对象模型:与浏览器交互的方法和接口。
JavaScript的引入方式
- 内部脚本
在当前网页内部写<script></script>
标签,script内部即可书写JavaScript代码。
格式:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
/*JavaScript代码*/
</script>
</head>
<body>
</body>
<html>
注:script标签理论上可以书写在HTML文件的任意位置。
- 外部引用
在HTML文档中,通过<script src=""></script>
标签引入.js文件。
格式:
- <script type="text/javascript" src="javascript文件路径"></script>
- 示例1:
<script type="text/javascript" src="demo.js"></script>
注:外部引用时script标签内容体不能有script代码,即使写了也不会执行。
- script标签的放置位置
开发规范规定,script标签的放置位置为:</body>结束标签前。
如图所示:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Hello</h1>
<script>alert("Hello World
")</script>
</body>
</html>
优点:
- 保证HTML展示内容优先加载,最后加载脚本,增强用户体验性。
JavaScript语法及规则
注释
- 单行注释:
//
- 多行注释:
/**/
示例:
<script type="text/javascript">
//单行注释
/*多行注释*/
</script>
变量
- 变量简述
变量:标示内存中的一块空间,用于存储数据,且数据是可变的。
变量的声明:
- var 变量名;//变量赋予默认值,默认值为undefined。
变量的声明和赋值:
- var 变量名 = 值; //变量赋予对应的值。
在声明JavaScript变量时,需要遵循以下命名规范:
- 必须以字母或下划线开头,中间可以是数字、字符或下划线。
- 变量名不能包含空格等字符。
- 不能使用JavaScript关键字作为变量名。如:
function
。- JavaScript严格区分大小写。
基本数据类型
类似于Java中的基本数据类型。
- string 字符串类型。"" 和''都是字符串。JavaScript中没有单个字符。
- boolean 布尔类型。 固定值为true和false。
- number 数字类型。 任意数字。
- null 空。一个占位符。
- undefined 未定义类型。该类型只有一个固定值,及undefined,便是变量声明却未定义具体的值。
注:因为undefined是从null中派生出来的,所以undefined == null。
JavaScript区别于Java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。
<script type="text/javascript">
var a ;
a = 10;
a = "10";
a = true;
alert(a);
</script>
通过typeof运算符可以分辨变量值输入哪种基本数据类型。
<script type="text/javascript">
var a ;
a = 10;
a = "10";
a = true;
alert(typeof(a));
</script>
注:null属于基本数据类型,typeof(null)->obj。
引用数据类型
引用数据类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
标准创建方式:
var str = new String();
//和Java相同
var str=new String;
//JS独有的方式
运算符
- 比较运算符
运算符 | 描述 | 例子 |
---|---|---|
== | 等于 | 5 == 8为 false |
=== | 全等(值和类型) | 5 === 5 为 true; 5 === "5" 为 false |
!= | 不等于 | 5 != 8 为 true |
> | 大于 | 5 > 8 为 false |
< | 小于 | 5 < 8 为 true |
>= | 大于或等于 | 5 >= 8 为 false |
<= | 小于或等于 | 5 <= 8 为 true |
== 逻辑等,仅仅比对值。
=== 全等。比对值并且比对类型,如果值和类型都相同则为true,否则为false。
- 逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (5 >1 && 5 < 8)为 true |
|| | or | (5 < 1 || 5 > 8)> 为 false |
! | not | !(5 == 8) 为 true |
注:JavaScript逻辑运算符中没有单个&、单个|。