目录
一、JavaScript导读
网页的三大基石:
-
HTML---结构(结构化查询语言)
-
CSS----美化(网页样式)
-
JavaScript--动态效果
1.1 什么是JavaScript
JavaScript简称“JS”是一种轻量级的客户端脚本语言,用来在网页中添加一些动态效果与交互功能;可以部署在多种环境,最常见的部署环境是浏览器。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的操作方法。
1.2 JavaScript的起源(即历史)
JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发(这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。)。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
图:布兰登·艾奇,JavaScript 创始人
之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。
同一时期,微软和 Nombas(一家名为 Nombas 的公司)也分别开发了 JScript 和 ScriptEase 两种脚本语言,与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准,不能互用。为了解决这一问题,1997 年,在 ECMA(欧洲计算机制造商协会)的协调下,Netscape、Sun、微软、Borland(一家软件公司)组成了工作组,并以 JavaScript 为基础制定了 ECMA-262 标准(ECMAScript)。
第二年,ISO/IEC(国际标准化组织及国际电工委员会)也采用了 ECMAScript 作为标准(即 ISO/IEC-16262)。
JavaScript与ECMAScript的关系:ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。
1.3 JavaScript的组成
1.ECMAScript:也就是JavaScript的基础语法
2.DOM:全称叫做Document Object Model(页面文档模型) 可以通过DOM提供的接口对页面上的各种元素进行操作(大小,位置,颜色等),这里不去具体谈论DOM,在JavaScript基础语法学完后再去学习
3.BOM:全称Browser Object Model(浏览器对象模型) 可以与浏览器窗口进行互动的对象结构 可以操作浏览器窗口 ,例如:弹出框,控制浏览器跳转,获取分配率等,这里也是在基础学习完成后再进行BOM学习,由此可见JavaScript基础语法的重要性。
1.4 JavaScript的书写方式
1.4.0 引号拓展问题
在JavaScript中括号里面的内容加引号时,可以用双引号,也可以使用单引号(当然,嵌套除外),而在HTML中括号里采用双引号,所以在JavaScript里面推荐使用单引号,以便将二者进行区分。
1.4.1 行内
在HTML页面中的</body>标签里去写 代码如下(示例):
<input type="button" value="shaka" onclick="alert('helloworld')">
1.4.2 内嵌(也叫做标签引用)
在HTML的页面去书写script标签,然后在标签里输入内容 代码如下(示例):
<script type="text/javascript">
alert('helloworld');
</script>
1.4.3外部(也叫做文件引用)
建立一个.js文件,在.js文件里面输入内容,这里命名为one.js 代码如下(示例):
one.js
alert('helloworld');
然后在HTML界面中将其引入 代码如下(示例)
<script src="one.js" type="text/javascript" charset="utf-8"></script>
1.5 JavaScript注释
所谓注释,就是解释代码内容(不参与程序的运行)
在js中,有两种注释方法
1.单行注释:// 快捷键为ctrl + / 代码如下(示例):
<script type="text/javascript">
//单行注释
</script>
2.多行注释: /* */ 快捷键为shift + alt +a 代码如下(示例):
<script type="text/javascript">
/*
多行注释
*/
</script>
1.6 JavaScript常用的输入输出语句
1.6.1 浏览器弹出警示框
浏览器弹出警示框,在上面用的就是这个,是可以直观展示给用户的 代码如下(示例):
<script type="text/javascript">
alert('helloworld');
</script>
1.6.2 控制台打印输出信息
输出在控制台上的,给我们程序员自己看的 代码如下(示例):
<script type="text/javascript">
console.log('控制台输出信息')
</script>
1.6.3 浏览器页面输出
向浏览器页面中输出文本,类似于HTML 代码如下(示例):
<script type="text/javascript">
document.write('helloworld')
</script>
1.6.4 输入框输入
浏览器弹出一个输入框,用户可以输入内容 代码如下(示例)
<script type="text/javascript">
prompt("请输入一个数字");
</script>
<-------------------------------------------------------------------------------------->
//输入消息对话框(具体示例)
prompt("提示信息","输入框的默认信息");
prompt("请输入姓名","张三");
prompt("请输入姓名");
//对输入的信息进行捕捉:
var a=prompt("请输入","0");
var b=prompt("请输入","0");
var c=a+b; //注意,这里的+是连接符
alert(c);
prompt()得到的数据类型是字符串,+变成了连接符。
1.6.5 确认框语句
浏览器弹出一个确认输入框,确认true,取消false(示例)
//弹出确认框,确认得到true,取消是false
var flag =confirm("我很帅!");
//可以通过true|false来进行条件筛选
if(flag===true){
alert("嗯,可以!");
}else{
alert("那肯定是超级帅咯!");
}
二、JavaScript基础语法(ECMAScript)
1.变量
1.1 什么是变量
本质:变量的本质是程序在内存中申请一块用来存放数据的空间 这个本质可能小白们听不太懂,用白话来说就是:我们需要存入数据,而这个数据需要一个容器来存放它,也就是说,变量就是用来存放数据的容器
1.2 变量是用来做什么的
上面说到了,变量是用来存数据的,它可以存入我们程序员写的代码内容,同时它也可以存入用户输入的内容,变量这个概念非常非常重要,以后可以说是,哪里都得用这个东西!很重要哦!
1.3 变量的写法以及初始化
变量的声明:需要一个关键字var来声明变量 代码如下(示例):
<script type="text/javascript">
var name = '张三';//用var关键词来声明一个变量 name
</script>
1.5 变量的命名规范
(1)由字母,数字,下划线(_),美元符号($)组成
(2)不能以数字开头 (3)严格区分大小写
(4)不能是关键字,保留字 例如:var 、while、for等等(这个关键字和保留字在csdn可以查到全的,我这里就不再总结了)
(5)变量名最好有意义(能看懂),比如 name,age这种单词,或者是str等,方便观看
(6)驼峰命名法:首字母小写,后面单词首字母大写,例如:myFirstName
2.数据类型
2.1 为什么需要数据类型
在计算机中,不同数据所需占用的存储空间不同,便于把数据分成所需内存大小不同的数据,充分利用存储空间,所以有了数据类型。
2.2 变量的数据类型
基本数据类型(值类型):String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
引用数据类型(引用类型):Object( 对象,函数,数组)。
2.3 typeof(); 获取数据类型
<script type="text/javascript">
var num = 10;
console.log(typeof(num))
</script>
2.4 typeof(x) 返回x的数据类型:
- undefined 未定义,变量被声明后,未被赋值
- boolean true和false
- string 用单引号或双引号来声明的字符串
- number 整数或浮点数
- object javascript中的对象、数组和null
3 运算符
3.1 什么是运算符
运算符(operator):用来实现赋值,比较和执行运算功能的符号
3.2 运算符的分类
算数运算符:加(+)减(-)乘(*)除(/),以及一个很重要的取余(%)++,--
比较运算符:==,===,>,<,<=,>=
逻辑运算符:&&,||
赋值运算符:=,+=,-=,....
3.8 运算符优先级
从高到低排序
小括号 :()
一元运算符 :++,- -,!
算数运算符 :先* / %,后+ -
关系运算符 :> ,>=,<,<=
相等运算符 := =,!=,= = =,!==
逻辑运算符 :先&& 后||
赋值运算符 : =
逗号运算符 :,
3.9 运算符注意事项:
//只做运算,不做取整
alert(10/3); //结果:3.33333335
alert(parseInt(10/3)); //结果:取整数部分:3
4 JavaScript流程控制(条件语句)
4.1 什么是流程控制
流程控制的本质:在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能 即 :控制我们的代码按照一定的结构顺序来执行 流程控制,也就是我们常说的 条件表达式 总的分为三种
if表达式 swith表达式 三元表达式
4.2 条件语句并不是循环
4.3 if条件语句
if(条件表达式){ //执行语句 }else{ }
4.4 三元表达式
条件表达式 ? 表达式1 : 表达式2
4.5 swith条件语句
swith(条件表达式){ case value1: 执行语句1; break; case value2; 执行语句2; break; … default; 执行最后的语句; } (如果不使用break结束,自动执行后面所有的执行语句,除非遇到break)
5 循环
5.1 什么是循环
循环就是我们看到的,例如:for,while这种的就是循环 那么,循环是用来做什么的呢:在实际问题中,有许多具有规律性的重复操作, 因此在程序中要完成这类操作需要执行某些语句,即循环
5.2 JavaScript中常见三种类型循环
-
for循环(最重点,最常用)
-
while循环
-
do…while循环
5.3 for循环
for(初始化变量;条件表达式;操作表达式){ //循环体 }
5.4 while循环
while(条件表达式){ //循环体 }
5.5 do while循环
do{ //循环体 }while(条件表达式)
5.6 continue关键字
continue关键字用于立即跳出本次循环,继续下一次循环
5.7 break关键字
break关键字跟continue关键字的区别是:break关键字用于跳出整个循环,就不继续执行了