1.JS简介
- JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)
- 解释型语言：程序执行之前，不需要编译，直接运行时边解析边执行的语言
- 编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件
- 组成部分
- ECMAScript：JavaScript的语法标准
- DOM(Document Object Model) 通过js操作网页元素
- BOM(Browser Object Model) 通过api操作浏览器
- 特点
- 简单易用
- 解释执行
- 编译执行 java c# 转化为.dll可执行文件==>电脑读取.dll可执行文件
- 基于对象面向过程
2.JS的书写位置
-
内嵌式
</body> ... ... <script type="text/javascript"> alert("hello world"); </script> </body>- 通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
- HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
-
外链式
<script src="1.js"></script>- 外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="01-js书写格式.js"> alert("hello world"); // 不会被执行 </script> -
注意
- 写js代码的时候，分号不能省略
- 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度
3.JS中输出消息的几种方式
- alert() 在页面弹出一个对话框，早期JS调试使用
- Confirm() 在页面弹出一个对话框, 常配合if判断使用
- console.log() 将信息输入到控制台，用于js调试
- prompt() 弹出对话框，用于接收用户输入的信息
- document.write()在页面输出消息
- document.write不仅能输出信息，还能输出标签。
alert("哈哈");
confirm("哈哈");
console.log("哈哈");
prompt("哈哈");
document.write("第一行<br><strong>第二行</strong>")
3.JS的注释
- 快捷键 ctrl+/
- 单行注释 //
- 多行注释 /* */
4.变量
- 定义变量
- 给变量赋值
- 定义并赋值
var name;//定义变量
name = "李四";//给变量赋值
var name = "李四";//定义变量并且赋值
- 变量的命名规范
- 不能以数字或者纯数字开头来定义变量名
- 不推荐使用中文来定义变量名
- 不能使用特殊符号或者特殊符号开头(-除外)
- 不推荐使用关键字和保留字来定义变量名
-
在JS中严格区分大小写的
关键字保留字.png
5.JS中的数据类型
- 查看数据类型 typeof()
var n1 = 100;
alert(typeof(n1));
- Number 数字类型
- 包含整数和小数
var num1 = 100; var num2 = 1.05; alert(typeof(num1)); alert(typeof(num2));- 数字类型的表达方式
- 十进制
- 十六进制(从0-9，a(A)-f(F)表示数字。以0x开头。)
- 八进制(0开头，0-7组成。)
- 最大小值,无穷大小值(由于内存的限制，ECMAScript 并不能保存世界上所有的数值)
- 最大值：Number.MAX_VALUE
- 最小值：Number.MIN_VALUE
- 无穷大：Infinity, 如果超过了最大值就会返回该值
- 无穷小：-Infinity, 如果超过了最小值就会返回该值
- NaN 非法数字（Not A Number）,JS中当对数值进行计算时没有结果返回，则返回NaN
- String 字符串
- 凡是用双引号或者单引号引起的都是字符串。
var str1 = "哈哈"; var str2 = '哈哈'; alert(typeof(num1)); alert(typeof(num2)); - Boolean 布尔数据类型
- 只有2个值一个是true, 一个是false. 实际运算中true=1,false=0
var n1 = 1; var n2 = 2; alert(typeof(n1==n2);//false alert(typeof(n1<n2);//true - Undefined 变量未初始化
- 定义了变量，没有给变量赋值,但变量在内存中是存在的
var n1; alert(n1); - Null 空值(变量未引用)
- 在内存中是找不到这个变量的
var n1 = null;
6.比较运算符
- 大于>
- 小于<
- 大等>=
- 小等<=
- 等于 ==
- 不等于 !=
7.算术运算符
- +号
- 两个数字类型的变量相加，得到的是一个数字类型。
- 一个数字类型和一个字符串相加，得到的是一个字符串。
- -号
- 两个数字类型的变量相减，得到的是一个数字类型。
- 一个数字类型和一个数字字符串相减，得到的是一个数字类型。
- 一个数字类型和一个非数字字符串相减，得到的是NaN,是一个数字类型。
- /号
- 两个数字类型的变量相除，得到的是一个数字类型。
- 一个数字类型和一个数字字符串相除，得到的是一个数字类型。
- 一个数字类型和一个非数字字符串相除，得到的是NaN,是一个数字类型。
- 0做为除数的时候，得到结果 Infinity （无限大），是一个数字类型。
- %(取余数)
8.带操作的运算符
| 运算符 | 示例 | 等价于 |
|---|---|---|
| += | a+=b | a=a+b |
| -= | a-=b | a=a-b |
| *= | a*=b | a=a*b |
| /= | a/=b | a=a/b |
网友评论