JavaScript基本介绍

JavaScript的用途

JavaScript用来制作web页面交互效果,提升用户体验。
简单列出几个JavaScript能够制作的页面效果,它能干什么:

轮播图

Tab栏(选项卡)

地图

表单验证

web前端三层来说:w3c的规范:行内样式(淘汰)

结构层 HTML 从语义的角度,描述页面结构
样式层 CSS 从审美的角度,美化页面
行为层 JavaScript 从交互的角度,提升用户体验

什么是JS

Js由网景公司开发;是一款基于客户端浏览器的脚本语言,用户与组件之间的交互。必须伴随着其他语言运行。

JS特点

1. 简单、易学、易用; 

2. 跨平台;IE、Navigator 

3. 符合ECMA(欧洲计算机制造协会)标准,可移植; 

4. 事件驱动式的脚本程序设计思想; 

5. 动态、交互式的操作方式。 

JavaScript历史背景介绍

1995年在网景公司,发明的JavaScript。
一开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。
同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。

JavaScript的作用:

1. 交互式操作; 

2. 表单验证; 

3. 网页特效; 

4. Web游戏 

5. 服务器脚本开发等。 

JavaScript和ECMAScript的关系

ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association,制定的标准。

JavaScript是由公司开发而成的,公司开发而成的一定是有一些问题,不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织,牵头制定JavaScript的标准,取名为ECMAScript。

简单来说ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)。就是说,你JavaScript学完了,Flash中的程序也会写了。

ECMAScript在2015年6月,发布了ECMAScript 6版本,语言的能力更强。但是,浏览器的厂商不能那么快的去追上这个标准。

今天的JavaScript:承担更多责任
2003年之前,JavaScript被认为“牛皮鲜”,用来制作页面上的广告,弹窗、漂浮的广告。什么东西让人烦,什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。

2004年JavaScript命运开始改变了,那一年谷歌公司,开始带头使用Ajax技术了,Ajax技术就是JavaScript的一个应用。并且,那时候人们逐渐开始提升用户体验了。
百度的智能感应
再比如:
网易的Ajax验证

2007年乔布斯发布了iPhone,这一年开始,用户就多了上网的途径,就是用移动设备上网。
JavaScript在移动页面中,也是不可或缺的。并且这一年,互联网开始标准化,按照W3C规则三层分离,人们越来越重视JavaScript了。
聚划算的手机页面

2010年的时候,人们更加了解HTML5技术了,HTML5推出了一个东西叫做Canvas(画布),工程师可以在Canvas上进行游戏制作,利用的就是JavaScript。
canvas制作的水果忍者

2011年,Node.js诞生,使JavaScript能够开发服务器程序了。

今天,JavaScript工程师是绝对的吃香,能够和iOS、Android工程师比肩,毫不逊色的。
现在,公司都流行WebApp,就是用网页技术开发手机应用。什么意思呢?手机系统有iOS、安卓、windows phone。那么公司比如说开发一个“携程网”APP,就需要招聘三队人马,比如iOS工程师10人,安卓工程师10人,windows工程师10人。共30人,工资开销大。并且,如果要改版,要改3个版本。所以,现在公司,都用web技术,用html+css+javascript技术来开发app。好处是不用招聘那么多工程师,只需要几个前端开发工程师即可。并且也易于迭代,就是网页一改变,所有的终端都变了。

JavaScript非常好学
JavaScript在“对初学者友好的语言”排行榜中排名第一。
JavaScript是有界面效果的,比如你学习C语言,对不起,白底黑字。而JavaScript有绚丽的效果,效果是可见的。你的劳动,是真真正正有效果啊。

一段简单的js 代码分析

什么是javascript

    1. onmouseover 鼠标进入当前元素的事件  当鼠标进入时...执行一段JS代码

    2. onmouseout 当鼠标离开时...执行一段JS代码

    3. this   this代表当前元素

    4. className  类名

取消IE安全设置
更改IE设置的方法:

    ie--工具---internet选项--高级--勾选"允许活动内容"

JS实现的过程

1. 获取元素

2. 给该元素绑定事件

3. 一般事件由用户出发

4. 执行结果

什么是事件

事件是用来捕获用户行为,当...出发一个事件...执行结果(带有功能性的JS代码)

事件

1. onmouseover  鼠标进入

2. onmouseout   鼠标离开

3. onclick      鼠标单击
 
4. onload事件    先加载窗体,我们先读取HTML代码再读取JS代码

DOM对象:里边封装了很多方法,通过点语法调用。

write方法

document中的write("")方法允许用户通过js实现在html文档中写入标签或文本的功能

JS中常用的属性

1. 动态获取或者添加文本(标记) innerHTML

2. style

获取页面中的元素

沟通ID去获取页面中的元素,由于ID是唯一的,所以拿到的是一个元素

getElementById() ps:所有英文单词后面加小括号的都是方法(函数)

在获取页面元素时一定要通过document对象获取 document.

代码分析

document.getElementById('box').style.display = 'block'

通过文档对象获取页面中的box元素,让box元素的样式里的display属性等于显示

显示隐藏元素

1. display:none 隐藏 block 显示

2. visibility:hidden 隐藏 (隐藏元素后仍然占位置)

JS的引入方式

1. 

2. 

JS中的注释

1. //   单行注释

2. /**/ 多行注释

JS结构

1. ECMAscript  标准规范

2. DOM  文档对象模型

3. BOM  浏览器对象模型

javascript的初体验:
将来在编写代码的时候一定不要写,这个标签不存在。

javascript代码的书写位置:

可以有两个:
1.0可以放在head标签之中的title标签之下,如果页面上还有样式,那么一般情况下javascript会放在样式的下面。

2.0还可以放在body标签之中。

javascript的书写规则:

1.0javascript与html,css一样,对空格、换行,以及缩进是不敏感的
2.0如果代码末尾不加分号,必须换行,如果不换行页面会报错。
3.0书写的规范:每句javascript写完之后必须加”;”,必须换行。

javascript代码的执行顺序:

从上到下依次执行。

javascript中的注释:

sublime:ctrl+/
1.0单行://
2.0多行注释:/**/

window对象的弹窗方法(常用来调试):

alert();
作用:在页面上打开一个弹出框,框上显示的内容就是alert()括号中的内容。
特点:一旦这个弹出框打开以后,页面就无法关闭,和移动。
将来写代码尽可能不要使用alert(“”);

console.log(内容);
作用:也是向页面上输出一句话,不是以弹出框的形式输出。(给开发人员用的)
特点:不会让页面”卡死”,直接在控制台中输出。

confirm() 确认框

prompt()
作用:在页面上弹出一个输入框,输入框上面的提示文本就是prompt()括号中的内容。

开发人员工具调试javascript代码的错误:

1.0打开开发人员工具
2.0注意开发人员工具的右上角(小红点):
3.0点击小红x,打开console(控制台:检查页面输出的信息(自己输出的信息,以及页面的错误信息。))
4.0点击控制台中错误信息的链接,定位到具体的错误。就可以排除错误了。

直接量:
定义:可以直接使用的数据叫做直接量。
“123”,123就叫做直接量。

数据类型:

在javascript中有很多的数据类型:
string:字符串。
作用:就是一段文本(可以理解为人说的一句话)。
特点:

1.0所有的字符串都是用””引起来的。
2.0可以当作直接量。
3.0字符串的引号可以是单引号’’也可以双引号””.

** isNaN() 是不是一个数字吗 当返回true时不是数字 ps:此方法只判断是否为数字,不判断数据类型。 此函数特殊,当数字外面有单引号套着时,也会检测出来是数字,而不会是字符串**

number:数字
作用:就是用来表示所有的数字。
123,-123,0.1,-0.1
特点:

1.0数字用来表示物品的数量;
2.0如果数字加上了引号之后就不是number类型是string类型。

boolean:bool类型:
作用:判断对和错。
对:true
错:flase
但是它的表达式有很多:

undefined:未定义
一个变量申明但没有赋值,就叫做undefined

typeof:判断数据的类型

如何判断:

1.0直接将直接量放在typeof的后面,将来得到的结果会以字符串的形式返回回来。
typeof 直接量
2.0将直接量放在typeof后面的括号中。
typeof (直接量)

通过sublime来设置一个页面的模板

1.0工具--->新代码段
2.0打开以后会打一个新的文档,这个文档的内容就是模板

3.0将画红框的代码删掉,换成我们想要的模板代码

4.0将注释的tabTrigger标签打开,将标签之中的内容修改成我们自己的命名。将文件保存。

运算符:

算数运算符
+(加):
作用:

1.0两个数值进行相加
2.0将两个数据进行连接

-(减)
*(乘)
/(除)
%(取余)
()(提高优先级)
算术运算符在编写的时候可以简写:
var a = 3; a = a + 3;可以简单写为:a +=3;(+=之间不能有空格)

自增,自减运算符:

1.0:自增:
作用:都是让数据在原来的基础上加一。
a = a + 1;可以简写成 a++(数据的自增);
先加加
++a
特点:先自增,再运算
后加加
a++
特点:先运算,再自增

2.0:自减:
作用:在原来的基础上将数据减一:
先减减:
--a:
特点:先自减,再运算
b后减减
a--:
特点:先运算再自减;

注意:自增最多只算两层,如果增加到三层以上,不但同学们会晕,开发工具也会晕(不同的开发工具,产生的结果是不一样的)。
也就是 var a = 1;var b = a++ + ++a + a ++;(本身就存在争议)

高级运算对象:Math(平方,立方,4次方,sin,cos)

1.0Math.pow(a,b)//求a的b次方的值。
2.0Math.round(c)//将c以小数后面一位开始四舍五入。
3.0Math.ceil(d);//将d进行向上取整(天花板函数)
4.0Math.floor(e);//将e进行向下取整(地板函数)
5.0Math.max(a,b,c);//在a,b,c中取得其中最大小的数据
6.0Math.min(a,b,c);//在a,b,c中取得最小的数据
7.0Math.random();//生成一个大于0小于1的随机数。

逻辑运算符
==逻辑运算符一般跟boolean类型一起使用。==
跟boolean有关:

&& :与(并且)
1 > 3 &&1 < 3
特点:一false都false

**|| :或 **
1>3 || 1<3
特点:一true都true;

!:非(取反)
特点:取相反的值。

赋值运算符(=)
作用:将等号右边结果赋值给等号左边的变量。
var a = 1;
var b = 2;
var c = a + b;
var a = b = c = 1;

逗号运算符:
如果将来要申明多个变量,不想写多个var可以使用逗号运算符。
var a ;var b ;var c ;
var a,b,c;

注意:算术运算符有自己的优先级:先乘除再加减,
逻辑运算符也有自己的优先级:先算&&,再算||,如果有!先算!

比较运算符:

var a = 3;var b =”3”; var c = a = =b;==>c =true;

注意:==在比较的时候比较的是内容,没有关注数据的类型。
===(全等)

var a = 3;var b = “3”;var c = a== =b;==>c=false;

注意:===在比较的时候比较的是内容,还有类型。

!=
注意:!=比较的是内容

!==
注意:!==比较的内容和类型

你可能感兴趣的:(JavaScript基本介绍)