【JavaScript】JavaScript之快速入门
一、基本概念
JavaScript是一种基于对象（Object Based）和事件驱动（Event Driver）的脚本语言，它本身提供了非常丰富的内部对象供开发人员使用。
JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。
下面是第一个JavaScript程序，用于说明其如何被嵌入到HTML文档中的：
<html>
<head>
My first JavaScript!
</head>
<body>
This is a normal HTML document.
<script language="JavaScript">
<!--
document.write("这是用JavaScript显示的!")
//-->
</script>
Back in HTML again.
</body>
</html>
-----------------------------------------------------------------------
JavaScript代码由<script language="JavaScript"> ... </script>标识，之间可加入JavaScript脚本。
通过<!-- ... //-->标识说明：若不认识JavaScript代码的浏览器，则所有在其中的标识均被忽略；若认识，则执行其结果。
document.write()是JavaScript的窗口对象方法，其功能是显示一串文字到HTML文件中，JavaScript还有很多类似的方法。
二、数据类型
JavaScript提供4种基本的数据类型来处理数字和文字，具体如下：
|
类型 |
解释 |
|
|
String字符串型 |
“John” |
任何不在引号内的数字 |
|
Boolean布尔型 |
true仅能取这两者之一的值 |
|
|
Null空值 |
null |
<span "="" style="word-wrap: break-word;">空值 |
三、变量
变量的命名规则与其它程序设计语言类似，变量事先可以声明也可以直接使用，变量的类型在赋值时由赋值数据的类型确定：
var mytest; //声明变量
var mytest="This is a book" //定义变量并赋值
x=true; //直接使用
JavaScript中， 全局变量是 定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对该函数可见，其它函数不可见。
四、常量
整型常量：可以使用十六进制、八进制和十进制来表示其值。
实型常量：用整数加小数部分组成，也可以用科学记数法表示，比如：12.32、5E7。
布尔值：只能是Ture或者False。
字符型常量：使用单引号或双引号括起来几个字符表示，比如：“Hello World”。
空值：Null，表示什么也没有，比如：试图引用一个没定义的变量，则返回一个Null值。
特殊字符：与C语言一样，JavaScript中也有些以反斜杠（/）开头的不可显示的特殊字符，即控制字符。
五、表达式与运算符
JavaScript表达式是变量、常量、运算符等的集合。
JavaScript运算符与C语言类似，也有优先级，但建议用括号来改变执行顺序而不依赖优先级。
JavaScript也有单目运算符、双目运算符和三目运算符，规则同C语言。
三目运算符：操作数?结果1:结果2。
双目算术运算符包括：+、-、*、/、%、|、&、<<、>>、>>>（右移，零填充）。
单目算术运算符包括：-（取反）、~（取补）、++、--。
比较运算符包括：<、>、<=、>=、==、!=。
逻辑运算符包括：!、&=、&、!=、|、^=、^、?:、||、==、!=。
六、函数
JavaScript函数可以封装那些在程序中可能要多次用到的模块，并且可作为事件驱动的结果所调用的程序，从而实现一个函数与事件驱动相关联。
函数定义的基本格式如下：
function 函数名(参数,变元) {
函数体;
return 表达式;
}
当调用函数时，所用变量或字面量均可作为变元传递，返回值通过return返回，函数名对大小写敏感。
函数中的参数可以是多个，类似于C语言中变长参数，参数个数可以通过arguments.length来获得。
JavaScript中有一批系统函数或内部方法，它们与任何对象无关，使用这些函数不需要创建任何实例，可直接使用，比如：
返回字符串表达式中的值，即eval（字符串表达式），例如：test=eval("8+9+5/2");
返回字符串ASCII码，即unEscape(string);
返回字符的编码，即escape(character);
返回实数，即parseFloat(floustring);
返回不同进制的数，即parseInt(numberstring, rad.X);其中，rad.X是数的进制，numberstring是字符串数。
七、程序流程
JavaScript中的常用程序控制流结构如下：
1、if条件语句
基本格式：
if (表达式) {
语句段1;
}
else {
语句段2;
}
嵌套格式：
if (布尔值) 语句1;
else if (布尔值) 语句2;
else 语句3;
2、for循环语句
基本格式：
for (初始化; 条件; 增量) {
循环体语句段;
}
3、while循环语句
基本格式：
while (条件) {
循环体语句段;
}
4、break和continue语句
与C语言相同，使用break语句跳出循环体，使用continue语句跳出本层循环。
八、对象的使用
1、对象的基本概念
JavaScript中的对象是由属性（Properties）和方法（Methods）两个基本元素构成的，这两者分别对应于面向对象中的变量与函数。
一个对象在被引用前必须存在，否则会出错，JavaScript可以通过如下3种方式来引用对象（即要么创建新的对象，要么利用现存的对象）：
（1）引用JavaScript内部对象；
（2）由浏览器环境中提供；
（3）创建新对象。
JavaScript是基于对象而不是面向对象的语言，因此，也没有抽象、继承、重载的概念，但提供了一些用于操作对象的语句、关键字和运算符：
（1）for...in语句
格式如下：
for (对象属性名 in 已经对象名)
该语句的功能是将一个已知对象的所有属性循环赋值给一个变量，而不是使用计数器实现，其优点是无需知道对象中属性的个数即可进行操作。
比如：要遍历数组中的所有元素，如果用普通for循环就需要知道数组元素个数来控制下标，但是如果用该语句就简单多了：
for (var prop in object)
document.write(object[prop]);
上面代码在循环体中，for自动将对象的属性取出来复制给prop，直到循环体结束。
（2）with语句
格式如下：
with object {
}
在该语句体内，任何对变量的引用都被认为是对这个对象的属性的操作，以节省代码。
（3）this关键字
this是对当前对象的引用。
（4）new运算符
使用new运算符来创建一个新的对象，格式如下：
Newobject=new Object(Parameters table);
其中，Object是已经存在的对象，Newobject是新创建的对象，Parameters table是参数表，new是运算符，比如：
birthday=new Date(December 12.2014);
之后就可以使用birthday作为一个新的日期对象了。
2、对象属性的引用
对象属性的引用可由下列3种方式之一实现：
（1）使用点“.”运算符
university.Name="湖南省";
university .city="常德市";
university.Date="2014";
（2）通过对象的下标实现引用
universit[0]="湖南省";
university[1]="常德市";
university[2]="2014";
（3）通过字符串的形式现实
university["Name"]="湖南省 ";
university[" city"]="常德市 ";
university["Date"]="2014 ";
3、对象方法的引用
在JavaScript中对象方法的引用是非常简单的：
ObjectName.methods();
引用math内部对象中的方法更简单：
with(manth)
document.write(cos(30));
document.write(cos(90) );
4、常用对象的属性和方法
JavaScript提供了一些非常有用的常用内部对象和方法，提供了string（字符串）、math（数值计算）和date（日期）3种对象和其它相关方法。
（1）串对象
mytest="helloworld";
串对象只有一个属性length，表示字符串中的字符个数。
串对象方法有19个，主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换，主要方法如下：
锚点anchor()，比如：string.anchor(anchorName);
字符显示控制方法：big()大字体显示、italics()斜体字显示、bold()粗体字显示、blink()字符闪烁显示、small()字符用小体字显示、fixed()固定高亮度字显示以及fontsize(size)控制字体大小等。
字体颜色方法：fontcolor(color)。
字符串大小写转换：toLowerCase()转换为小写、toUpperCase()转换为大写，比如：string = stringValue.toUpperCase();
字符搜索：indexOf[charactor,fromIndex]，即从指定fromIndex位置开始搜索第一次出现charactor的位置。
求子字符串：substring(start,end)，即从start开始到end的字符全部返回。
（2）算术函数math对象
math对象提供除加、减、乘、除以外的一些算术运算，比如：对数、平方根运算等。
math提供了6个属性，即数学中常用的常数E、以10为底的自然对数LN10、以2为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2、2的平方根SQRT2。
math提供的主要方法包括绝对值abs()、正弦值sin()、余弦cos()、反正玄asin()、反余弦acos()、正切tan()、反正切atan()、四舍五入round()、平方根sqrt()、基于几次方的值pow(base,exponent)。
（3）日期及时间对象
提供了一个有关日期和时间的对象，必须使用New运算符创建一个实例，比如：
MyDate=New Date();
Date对象没有提供直接访问的属性，只具有获取和设置日期和时间的方法。
日期起始值：1770年1月1日00:00:00。
获取日期和时间的方法包括返回年数getYear()、返回当月号数getMonth()、返回当日号数getDate()、返回星期几getDay()、返回小时数getHours()、返回分钟数getMintes()、返回秒数getSeconds()、返回毫秒数getTime()。
设置日期和时间的方法包括设置年份setYear()、设置当前日期setDate()、设置当前月份setMonth()、设置小时数setHours()、设置分钟数setMintes()、设置秒数setSeconds()、设置毫秒数setTime()。
九、事件驱动
JavaScript是基于对象（Object-Based）的语言，这与Java不同，Java是面向对象的语言，而基于对象的基本特征，就是采用事件驱动（Event-Driven）。它是在用图形界面的环境下，使得一切输入变得简单化。通常鼠标或热键的动作称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driven）。而对事件进行处理的程序或函数，称之为事件处理程序（Event Handler）。
在JavaScript中对象事件的处理通常由函数担任，其基本格式与函数一样，可以将函数作为事件处理程序，格式如下：
function 事件处理名(参数表){
事件处理语句集;
}
JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的，它主要有以下几个事件：
1、单击事件onClick
当用户单击鼠标按钮时，产生onClick事件，同时，onClick指定的事件处理程序或代码将被调用执行。能产生该事件的对象包括button（按钮对象）、checkbox（复选框或检查列表框）、radio（单选按钮）、reset buttons（重置按钮）、submit buttons（提交按钮），例如，可通过下列按钮激活change()：
<form>
<input type="button" value="改变" onClick="change()">
</form>
在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中的内部函数，还可以直接使用JavaScript的代码，比如：
<input type="button" value=" " onClick=alert("这是一个例子")>;>
2、onChange改变事件
当利用text或texturea元素输入字符值改变时引发该事件，同时，当在select表格项中一个选项状态改变后也会引发该事件，比如：
<form>
<input type="text" name="Test" value="Test" onChange="check(this.test)">
</form>
3、选中事件onSelect
当text或textarea对象中的文字被加亮后，引发该事件。
4、获得焦点事件onFocus
当用户单击 text或 textarea以及select对象时，产生该事件，此时该对象成为前台对象。
5、失去焦点onBlur
当text对象或textarea对象以及select对象不再拥有焦点而退到后台时，引发该事件，它与onFocas事件是一个对应的关系。
6、载入文件onLoad
当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。
7、卸载文件onUnload
当Web页面退出时引发onUnload事件，并可更新cookie的状态。
下面是一个自动装载和自动卸载文件的例子：
<html>
<head>
<script language="JavaScript">
<!--
function loadform(){
alert("开始自动装载！");
}
funtion unloadform(){
alert("开始自动卸载！");
}
//-->
</script>
</head>
<body onLoad="loadform()" onUnload="unloadform()">
<a href="anther.html"> 进入调用页面 </a>
</body>
</html>
打开浏览器执行上面代码，在装载页面时，会执行自动装载，弹出“开始自动装载”对话框，在关闭浏览器时，会弹出“开始自动卸载”对话框。
【JavaScript】JavaScript之快速入门相关推荐
- JavaScript教程之快速入门
##JavaScript教程 #js简介 javaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛 ...
- JavaScript脚本语言快速入门
目录 一.JavaScript入门 二.事件处理 三.常用对象 四.DOM技术 一.JavaScript入门 什么是JavaScript 一种不需要编译,直接嵌入HTTP页面中的,把静态页面转变成支持 ...
- JavaScript基础语法快速入门
文章目录 基础语法 JavaScript的位置 预前知识 注释 原则 字面量.变量.标识符 Unicode编码 数据类型 字符串 数值 布尔值 NULL UNDEFINED 强制转换String 强制 ...
- Javascript 20分钟快速入门
简介: JavaScript是目前web开发中不可缺少的脚本语言,js是解释性语言,不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码. 诞生于1995年,当时的主要目 ...
- Konva（一个HTML5 Canvas JavaScript 框架）快速入门
1.引入Konva 方法一:使用包管理器: npm install konvaf 方法二:用 <script> 标签: <script src="https://unpkg ...
- JavaScript(一)——快速入门
文章目录 1. JavaScript概述 2. 历史 3. 快速入门 3.1 引入JavaScript方式 3.2 基本语法 3.3 数据类型 4. 严格检查模式 1. JavaScript概述 Ja ...
- 前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
- JavaScript快速入门（四）——JavaScript函数
函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
- 10 分钟，带你快速入门前端三大技术（HTML、CSS、JavaScript)
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
- 【JavaScript：快速入门】
文章目录 JavaScript 1. 快速入门 1.1 引入JavaScript 1.2 基本语法入门 1.3 数据类型 1.4 严格检查模式 'use strict' JavaScript Java ...
最新文章
- Web开发之Goahead
- PAT甲级1001.A+B Format(20)
- python可以做什么工作好-会python语言能做什么工作
- LightTools 切趾角度设置
- opencvsharp打开相机并视频显示
- python 编程效率_五个Python编程Tips，帮你提高编码效率
- C++ 转 Python 这三年，我都经历了什么？
- vmware挂载san存储_戏说 块存储 文件存储 对象存储
- AI 深度关键短语生成
- 练习1，从文件到数据库
- 吃着火锅唱着歌学会Docker
- linux匿名邮件,Linux下用mutt给QQ邮箱发匿名邮件
- AT4896 [ABC161C] Replacing Integer
- Python练习--模仿王者荣耀定义两个英雄类
- 浪潮全球化的一面：从OEM到JDM，从ODCC到OCP
- manifold 流形
- python爬虫----汽车之家的汽车论坛的最新精华帖
- uniapp微信小程序引入第三方字体库
- moxa串口服务器网页访问失败,moxa串口服务器连接设置
- 互联网金融 面试 java_Java笔试题（互联网金融方向）