什么是JavaScript
它是一种基于事件和对象驱动的,具有安全性的脚本语言。
JS也是一门面向对象的编程语言,它是一种面向原型(prototype)的面向对象(原型链)。
历史:JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代,用户填写完一个表单点击提交,需要等待几十秒,完了服务器反馈给你说某个地方填错了…在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape**(网景)公司,决定着手开发一种客户端语言,用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发,Netscape与Sun公司成立了一个开发联盟。而此时,Netscape为了搭上媒体热炒Java的顺风车,临时把LiveScript改名为JavaScript,所以从本质上来说JavaScript和**Java没什么关系。(语法上模拟了Java)
JavaScript这种语言目前也是发展的非常好,而且基于它产生了很多的框架和库。
Angular、React、Node、Vue、jQuery…JS插件等…
JavaScript脚本语言和Java这种非脚本静态语言的区别
- 编译器
- 编译器:Java这类非脚本静态语言,它们是先进行编译,然后编译后的代码才可以在某些机器上运行。
- 优点:当编译完后,如果下次再执行,无需编译直接执行。
- 缺点:如果修改了源代码那么Java这种静态语言必须要重新编译。
- 解释器:一般解释器作为编译器的都是一些脚本语言/动态语言,无需编译,写完就可以运行
- 优点:无需编译,修改完直接可以展示最新。
- 缺点:每次都需要进行编译(解释),速度慢。
- 编译器:Java这类非脚本静态语言,它们是先进行编译,然后编译后的代码才可以在某些机器上运行。
JavaScript的组成:
- ECMAScript - 核心语法(标准)欧洲计算机制造商协会设立的标准。目前最常用版本5.1,最新版为6.
- BOM 浏览器对象模型
- DOM文档流对象模型
JavaScript基本语法
需要在body标签内加入script标签,在script标签内编写逻辑代码
<script type="text/javascript">
<!--
document.write("<h1>Hello World!</h1>");
-->
</script>
JavaScript引入方式
-
行内引入
借助于标签内置的事件属性,来实现。常用的事件属性有:onclick 点击事件 onmouseover 鼠标悬浮事件 onblur 失去焦点事件
<input type="button" value="点我清除缓存" onclick="alert('清除成功!');" />
- 内部引入
在body上编写script标签(规范),然后内部编写JS代码,有些时候行内和内部会结合使用。
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
-外部引入
在</body>上编写<script src=""> 标签,来引入外部的JS文件。 (*.js文件)
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
JS中的变量
JavaScript的变量和Java的变量组成几乎一样
- 变量的数据类型
- var (variable) 动态类型识别
- 变量名
- 它由数字、字母、下划线、$等组成,但是数字不能开头
- 见名知义
- 采用小驼峰命名法
- 也可以采用_连接命名法
- 变量值(单一类型的数据)
// 先声明再赋值
var num;
num = 10;
// 声明并赋值
var num = 10;
JS中的数据类型
- undefined:未定义 如果一个变量没有赋值过它的类型就是undefined
- null:表示一个空值 它可以和undefined做相等判断
- number:表示数值,整数或浮点数
- boolean:表示真和假 true、false
- string:表示字符串 (单引号或双引号引起来的内容)
- object:表示对象类型 (因为历史原因,以前的bug,所以当你测试null类型的数据时显示的是object)
JS中的常用运算符
- 算术运算符
+ - * / % ++ --
- 关系/比较运算符
> < >= <= == != === !==
=== 和 == 的区别
== 只会比较内容而=== 不仅比较内容 还比较数据类型
var str1 = "12";
var num1 = 12;
alert(str1 === num1); // false
alert(str1 == num1); // true
- 赋值运算符
= 复合赋值:+= -= *=...
- 逻辑运算符
&& || !
JS中的控制语句
选择结构
JavaScript内的选择结构和Java中的用法一样,分别有以下几种选择结构
- 基础if选择结构
- if-else选择结构
- 多重if结构
- 嵌套if选择结构
- switch选择结构
控制结构
JavaScript内的循环结构只有while循环和for循环两种,没有do-while循环
- while循环
- for循环
控制循环的关键字也和Java一样 - break 结束循环
- continue 结束本次循环,进入下次循环
数组
// 1.
var arr = new Array(3);
arr[0] = "小明";
arr[1] = "小红";
arr[2] = "小绿";
// 2.
var arr = new Array("赵子龙","赵云","赵父龙");
// 3.
// JSON
var arr = ["周杰伦","林俊杰","罗志祥"];
JavaScript函数
基本系统函数使用
- 输出:alert(); 会弹出一个带有确定按钮的提示框。
- 输入:prompt(); 会弹出一个带有输入框的提示框。
// 如果输入了 则返回输入的内容 否则为null
// p1:提示的内容 p2:输入框中默认的文本内容
var pwd = prompt("请输入您的密码:");
alert("您输入的是:"+pwd);
- parseInt() 转换为整数
var num1 = parseInt(prompt("请输入第一个整数:"));
var num2 = parseInt(prompt("请输入第二个整数:"));
- parseFloat() 转换为小数
var num1 = parseFloat(prompt("请输入第一个小数:"));
var num2 = parseFloat(prompt("请输入第二个小数:"));
需要注意的是,在进行计算时,由于prompt()返回的是字符串类型的数据,所以在使用加号时会进行自动拼接,从而不会出现相加结果,而是出现拼接的结果。
可以用在式子后加入 - 0来解决
var num1 = prompt("请输入第一个整数:") - 0;
var num2 = prompt("请输入第二个整数:") - 0;
JavaScript内的方法分类
在JS中方法的声明是用function关键字来进行声明,在写完方法后,和Java一样需要进行调用
- 无反无参
function 方法名(){
// 方法体
}
// 调用方法
方法名();
- 无反有参
function 方法名(参数列表){
// 方法体
}
// 调用方法
方法名();
- 有反无参
function 方法名(){
// 方法体
// 返回值
return 返回值;
}
// 调用方法
方法名(); - 有返有参
function 方法名(参数列表){
// 方法体
// 返回值
return 返回值
}
// 调用方法
方法名();
函数中的变量作用域
// 成员变量
var i = 11;
function method1(){
// 局部变量
var i = 10;
alert(i);
}
function method2(){
alert(i);
}
method1();
// method2(i);