JavaScript概述

JS简介

外部JavaScript中文件的文件扩展名为.js,如果使用外部文件,那么标签需要设置它的src属性为文件路径

JavaScript输出

操作HTML元素

如果需要从JavaScript中访问HTML中的元素,您可以使用document.getElementById()方法,请使用id属性标识HTML元素

JavaScript由Web浏览器来执行,在这种情况下浏览器将访问id=”demo”的HTML元素并把它的内容(“innerHTML”)替换为”

写入文档输出

document.write(“”);

警告

请使用document.write仅仅写入内容,如果在文档完成后执行document.write,整个HTML页面将被覆盖

JavaScript语句

JavaScript语句向浏览器发出的命令,语句的作用是告诉浏览器该做什么,下面的JavaScript语句向id=”demo”的HTML元素输出文本”Hello,World”

document.getElementById(“id”).innerHTML = “写入的文本”;

分号用于分隔JavaScript语句

通常我们在每条JavaScript语句结尾添加分号

使用分号的另一条语句是编写多条语句

,您也有可能看到不带有分号的案例里,在JavaScript中,用分号来结束语句是可选的

JavaScript代码

JavaScript代码(或者只有JavaScript)是JavaScript语句的序列

浏览器会按照编写语句的顺序来执行每条语句

JavaScript代码块

JavaScript语句通过代码块的形式进行组合

JavaScript对大小写敏感

JavaScript对大小写是敏感的

当编写JavaScript语句时,请留意是否关闭大小写切换键

空格

JavaScript会忽略多余的空格,您可以向脚本添加空格,来提高其可读性

对代码进行拆行

您知道吗?

JavaScript是脚本语言。浏览器会在读取代码时,逐行的执行脚本代码而对于传统编程来说,会在执行前对所有代码进行编译

JavaScript中的注释

JavaScript中的注释可用于提高代码的可读性

JavaScript不会执行注释

我们可以添加注释对JavaScript进行解释,或者提高代码的可读性

单行注释以“//”开头

JavaScript多行注释

多行注释以“/*”开头,以“*/”结尾

使用注释来阻止执行

在行末使用注释

JavaScript变量

就像代数那样

在代数中,我们使用字母来保存值

通过表达式可以计算值

JavaScript变量

变量必须以字母开头

变量也能以“$”或“_”开头

变量名称对大小敏感

JavaScript数据类型

JavaScript变量有很多类型,我们只关注数字和字符串

当向变量分配值的时候应该用双引号或单引号包围这个值

当向数字变量分配制的时候,不要使用引号

JavaScript声明变量

var a = “1”;

var a = 1

一条语句多个变量

var name = ‘’.age = 1;

Value = underfined

在计算机程序中,经常会声明无值的变量

未使用值来声明的变量其值实际上是underfined

重新声明JavaScript变量

如果重新声明JavaScript变量,该变量的值不会丢失

JavaScript算数

您可以通过JavaScript变量来做算数,使用的是“=”和“+”

JavaScript中的数据类型

字符串、数字、布尔、数组、对象、Null、underfined

JavaScript拥有动态数据类型

JavaScript拥有动态数据类型,这意味着相同的变量可以为不同的数据类型

JavaScript字符串

字符串是存储字符的变量

字符串可以是引号中的任意文本,您可以使用单引号或双引号

JavaScript数字

JavaScript只有一种数字类型,数字可以带小数点也可以不带

JavaScript布尔

布尔(逻辑),只有两种数据类型,true和false

JavaScript数组:数组下标是基于0的,所以第一个项目是0第二个是1依次类推

(1)var cars = new Array(); cars[0] = “”; cars[1] = “”

(2)var cars = new Array(“”,””,””);

(3)var = [“”,””,””];

JavaScript对象

对象由花括号分割。在括号内部以名称和值对的形式来定义属性由逗号分割

空格和拆行无关紧要,声明克横跨多行

var person

{

firstName = “”;

age = “”;

}

underfined和Null

underfined表示不含有值

Null可以通过设置变量的值为Null来清空变量

声明变量类型

当声明新变量时,可以使用关键字“new”来声明其类型

JavaScript变量均为对象,当您声明了一个对象时,就创建了以恶搞新对象。

JavaScript对象

JavaScript中所有的事物都是对象:字符串、数组、日期等等

在JavaScript中,对象是拥有属性和方法的数据

属性和方法

属性是与对象相关的值,方法是能够在对象上执行的动作

例子:

汽车就是现实生活的对象

汽车的属性

car.name = “”;

car.model = “”;

汽车的方法

car.start();

JavaScript中的对象

在JavaScript中,对象是数据(变量),拥有属性和方法

创建JavaScript对象

JavaScript中,几乎所有的事物都是一个对象:字符串、数组、数字、日期、函数等等

你也可以创建自己的对象

访问对象的属性

对象名称.对象属性

访问对象的方法

对象名称.对象方法

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

JavaScript的函数语法

函数就是包裹着花括号中的代码块,前面使用了关键字function

当调用该函数时,会执行函数内部的代码

可以在某事件发生时直接调用函数(比如当用户点击按钮时)并且可以由JavaScript在任何位置调用,调用带参数的函数,当您声明函数时,请把参数作为变量来声明,变量和参数必须以一致的顺序出现,第一个变量就是第一个被传递的参数的给定的值

带有返回值的函数

有时,我们会希望将值返回调用它的地方

通过使用return语句就可以实现

在使用return语句函数会停止执行,并返回指定的值

局部JavaScript变量

在函数内部声明的变量是局部变量,所以只能在函数内部访问它,该变量的作用域是局部的,您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别该出变量,只要函数运行完毕本地变量就会被删除

全局JavaScript变量

在函数声明变量是全局变量,能够在整个页面访问

JavaScript生存期

JavaScript变量的生命期从它们被声明的时间开始

局部变量会在函数运行以后被删除

全局变量会在页面关闭以后被删除

向未声明的变量变量分配值

如果您把值赋给未声明的变量,该变量会自动作为全局变量声明

JavaScript运算符

运算符=用于赋值

运算符+用于加值

JavaScript算术运算符

+、-、*、/、%、++、--

JavaScript赋值运算符

=、+=、-=、*=、/=、%=

用于字符串的“+”的运算符

“+”运算符用于合并多个字符串为一个字符串

对字符串数组进行加法运算,如果数字与字符串相加,结果为字符串

JavaScript比较运算符:比较变量之间的值

==、===、!=、<、>、<=、>=

JavaScript逻辑运算符:测定变量之间的值

&&、||、!

JavaScript条件运算符:对变量进行赋值的条件表达式,问号表达式

var a = 100 ? 100 : 200

JavaScript if...else if...else...语句

基于不同的条件来执行不同的操作

条件语句

通常在写代码时,您总是需要为不同的决定进行不同的操作,您可以在代码中使用条件语句来完成该任务,在JavaScript中有

if...else当指定条件为true执行if代码块,当指定条件为false执行代码块

if...只有当指定条件为true才会执行此段代码

if...else if...多个代码块执行条件

Switch多个代码块同步执行

循环语句

多次循环执行代码块

不同类型的循环

for()

while()

for( ... in ...)

do ... while()

Break终止循环

Continue迭代循环

JavaScript错误

try:语句测试代码块的错误

catch:语句处理的错误

throw:语句创建自定义错误

错误一定会发生

当JavaScript引擎执行JavaScript代码,会发生各种错误,可能是语法错误,同场是程序员造成的编码错误或错别字,可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)可能是由于来自服务器或用户的错误输出而导致的错误,当然,也可能是由于许多其它不可预知的因素

JavaScript抛出错误

当错误发生时当事情出问题时,JavaScript引擎通?;嵬V?,并生成一个错误消息

描述这种情况的技术术语是:JavaScript将抛出一个错误。

JavaScript测试和捕捉

try:允许我们定义在执行时进行错误测试的代码块

catch:允许我们定义在执行时进行错误处理的代码块

throw:创建自定义错误,正确的技术术语:创建或抛出异常

异常可以是JavaScript中的字符串、数字、逻辑值、对象

JavaScript表单验证

JavaScript表单验证

JavaScript可以在数据提交给服务器之前对HTML进行表单验证,被JavaScript验证的这些典型数据:用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否在数据域中输入了文本,用户是否输入了合法的日期

JavaScript必填(必?。┫钅?/p>

E-mail验证

JavaScript HTML Dom

Dom简介

JavaScript能够改变页面中所有的HTML元素

JavaScript能够改变页面中所有的HTML属性

JavaScript能够改变页面中所有的CSS样式

JavaScript能够对页面中所有事件作出响应

查找HTML元素

通过标签编号id查找元素

var a = document.getElementById();

通过标签名称name查找元素

var a = document.getElementById();

通过标签类名class查找元素

var a = document.getElementById();

HTML Dom

改变HTML输出流

JavaScript能够动态创建HTML的内容document.write()

改变HTML内容

document.getElementById(id).innerHTML =内容

改变HTML属性

ocument.getElementById(id).属性=值

改变HTML样式

document.getElementById(id).style.样式属性=值

JavaScript HTML Dom事件

对事件做出响应

我们可以在事件发生时执行JavaScript,比如当用户元素上点击时,如需在用户点击某个元素时代码,请向一个HTML事件属性添加JavaScript代码

HTML事件案例

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动元素上时

当输入字段被改变时

当提交到表单时

当用户触发按键时

HTML事件属性

如需向HTML元素分配事件,您可以用事件属性

使用HTML DOM来分配事件

HTML DOM允许您通过JavaScript来分配事件

onload和onunload事件:在用户进入或离开时触发

Onload:检测访问者的浏览器版本和浏览器类型,并基于这些信息来加载网页的正确版本

onload和onunload事件:可用于处理cookie

onchange事件:验证输入字段

Onmouseover事件:鼠标停留事件

Onmouseout事件:鼠标离开事件

Onmousedown事件:鼠标按下事件

Onmouseup事件:鼠标弹起事件

Onmouseclick事件:鼠标点击事件

JavaScript HTML Dom元素节点

创建新的HTML元素:

创建元素:var p = document.createElement(“p”);

创建节点:var a = document.createTextNode(“增加文本”);

追加节点:p.appendChild(a);

查找元素:var d = document.getElementById(id);

追加元素:d.appendChild(p);

删除已有的HTML元素

创建父元素:var parent = document.getElementById(id);

创建子元素:var child =docuemnt.getElementById(id);

父元素移除子元素:parent.removeChild(child);

JavaScript对象

JavaScript中所有事物都是对象,:字符串、数值、数组、函数等等。JavaScript允许自定义对象。

JavaScript对象

JavaScript提供多个内建对象,比如String、Date、Array等等,对象只是带有属性和方法的特殊数据类型

访问对象的属性

对象名称.对象内部的方法属性();

访问对象的方法

对象名称.对象内部的方法名称();

创建JavaScript对象

通过JavaScript,您能够自定义创建自己的对象

创建对象有两种不同的方法

1.定义并创建对象实例

2.使用函数来定义对象,然后创建新的对象实例

使用对象构造器创建对象

案例:function Func(){}

创建JavaScript对象实例

var f = new Func();

JavaScript类

JavaScript是面向对象的语言,但JavaScript使用类

在JavaScript中,不会创建类,也不会通过类创建对象,就像在其它编程语言中一样,JavaScript基于prototype,而不是基于类的

for in循环:

for( var i in is){}

JavaScript数字

JavaScript数字可以使用小数点也可以不使用小数点来书写

所有数字均为64位

JavaScript不是类型语言,与许多其它编程语言不同,JavaScript不定义不同类型的数字,比如:整数、短、长、浮点数等等。JavaScript中的所有数字都存储为1-的64位,浮点数

精度

整数(不使用小数点或指数计数法)最多15位

八进制和十六进制

如果前缀为0,则JavaScript会把数值常量解释为八进制数,如果前缀为“0”或“x”则解释为十六进制数

数字属性方法

Max Value

Min Value

Negative Infinitive

Positive Infinitive

NaN

Prototype

Constructor

数字方法

ToExponential

toFixed

toPrecision

toString

ValueOf

JavaScript字符串对象

String对象用于处理已有的字符块

(1)length:计算字符串长度

(2)添加字符样式

(big,small,blink,bold,italics,fixed,strike,fontcolor,fontsize,toLowerCase,toUpperCase,tosub,tosup,link)

(3)indexOf:获取字符串的选定字符

(4)match方法:获取字符串的特定字符

(5)replace方法:获取并覆盖选定字符

JavaScript Date日期对象

(1)document.write(Date());返回当日的日期和时间

(2)getTime:获取并返回毫秒单位

(3)setFullYear:获取并返回年月日单位

(4)toUTCString:获取年月日小时分钟秒单位

(5)getDay:获取日

(6)getHour,getMinute,getSecond:显示一个钟表

JavaScript数组对象

(1)创建对象:var a = new Array();

(2)For...In的声明:for(var i in a){}

(3)合并两个数组concat:

var a = Array();

var b = Array();

var c = a.Concat(b);

(4)用数组的元素组成字符串Join

var a = Array();

a.Join();

(5)文本数组排序sort

var a = Array();

a.Sort();

(6)数字数组排序Sort

var a = Array();

a.Sort();

JavaScript Boolean(逻辑)对象

Boolean类型转换,如果进行转换的变量的值是0或null或undefined或空字符串,则返回false,其它返回true

JavaScript Math(算数)对象

Round方法 返回四舍五入后的值

Random方法 返回0~1之间的随机数

Max方法 返回两个值之间的最大值

Min方法 返回两个值之间的最小值

E方法:常数

Pi方法:圆周率

Sqrt2方法:2的平方根

SqrT1_2方法:1/2的平方根

Ln2方法:2的自然对数

Ln10方法:10的自然对数

Log_2e方法:以2为底的e的对数

Log_10e方法:以10为底的e的对数

JavaScript正则表达式

JavaScript RegExp对象

什么是RegExp对象?

RegExp是正则表达式的缩写,当您检索某个文本的时候,可以使用一种模式来描述要检索的内容,RegExp就是这种模式,简单的模式可以是一个单独的字符,更复杂的模式包括更多的字符,并可用于解析、格式检查、替换等等

您可以规定字符串的检索位置,以及要检索的字符类型等等

RegExp对象的方法

Test():检索字符串中的指定值,返回true或false

Exec();

检索字符串中的指定值,返回值=找到与其匹配的值,如无匹配则返回null

您可以向RegExp添加第二个参数,以设定检索,例如,如果你需要的找到的某个字符的所有存在,则可使用“g”参数(“global”)

compile();改变RegExp检索,既可以改变,也可以添加或删除

JavaScript浏览器对象模型

浏览器对象模型BOM使JavaScript有能力与浏览器对话

浏览器对象模型BOM

浏览器对象模型Browser Object Model尚无正式标准

由于现代浏览器几乎实现了JavaScript交互性方面的相同方法和属性。

因此常被认为是BOM的方法和属性

Window对象

所有浏览器都支持Window它表示浏览器窗口

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

全局变量是window变量的属性

甚至HTML中的DOM也是window变量的属性之一

Window对象的尺寸

有三种方法能够确定浏览器窗口的尺寸,浏览器的视口,不包括工具栏和滚动条

对于Internet Exploter、Chorme、FireBox、Opera、以及Safari

Window.innerHeight浏览器内部高度

Window.innerWidth浏览器内部宽度

Internet Exploter 8、7、6、5:

document.documentElement.ClientHeight

document.documentElement.ClientWidth

document.body.ClientHeight

document.bodyClientWidth

Window其它方法

Window.open();打开窗口windowresizeto();调整窗口尺寸

window.close();关闭窗口windowmoveto();移动窗口

JavaScript Window Screen

Window.screen对象包含用户屏幕的信息

Window.screen对象在编写可以不实用window这个前缀

screen.availWidth();可用的屏幕宽度

screen.availHeight();可用的屏幕高度

JavaScript Window Location

Window Location获取当前页面的地址,并浏览器重定向到该页面

Window Loation

Window.location对象在编写时可以不实用wndow这个前缀

案例:

location.hostname返回web主机的域名

location.pathname返回当前页面的路径和文件名

localtion.port返回web主机的端口

location.ptotocol返回所使用的web协议

Window Location Href

location.href属性返回当前页面的URL

Window Location Pathname返回当前URL的路径名

Window Location Assign方法加载新的文档

JavaScript Window History

Windows History

Window.history对象在编写时可不使用window这个前缀

为了?;び没б?,对JavaScript访问该对象的方法做出了限制

History.back()与在浏览器点击后退按钮相同

History.forward()与在浏览器中点击按钮向前相同

Window History Back

History.back()方法加载历史列表中的前一个URL

这与在浏览器中点击后退按钮是相同的

Window History Forward

History.forward()方法加载历史列表中的下一个URL

这与在浏览器中点击前进按钮是相同的

JavaScript Window Navigatior

Window Navigator对象包含有关访问者浏览器的信息

Window Navgator对象在编写时可以不使用window这个前缀

JavaScript消息框

警告框:经常用于确保用户可以得到某些信息,当警告框出现后,用户需要点击按钮才能继续进行操作

—alert();

带有拆行的警告框:

—alert(“\n”);

确认框:确认可用于使用户验证或者接收某些信息,当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作,如果用户点击确认,那么返回值为true,如果用户点击取消,则返回false

—confirm();

提示框:提示框经常用于提示用户在进入页面前输入某个值,当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵,如果用户点击确认,那么返回值为输入的值,如果用户点击取消,则返回null

—prompt方法

JavaScript计时

JavaScript中的计时事件:

setTimeout未来的某时执行代码:

setTimeout方法会返回某个值,在上面的语句中,值被储存在一个变量中,如果你希望取消这个setTimeout,你可以使用这个变量名来指定它。

setTimeout的第一个参数是含有JavaScript语句的字符串。

无穷循环:在一个函数中调用setTimeout同时在函数外部声明一个变量,在函数内部进行一次自增,在setTimeout后重复调用一次当前函数以保持循环

clearTimeout取消setTimeout:清除掉时间,把时间归为0

JavaScript Cookie

利用用户在提示框中输入数据创建一个cookie,当用户再次访问页面时,根据cookie中的信息发出欢迎信息

什么是Cookie?

Cookie是存储于访问者计算机中的变量,每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie,你可以使用JavaScript来创建和取回cookie的值

有关cookie的例子?

名字cookie

密码cookie

日期cookie

创建和存储cookie:

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,763评论 0 8
  • JavaScript是一种能让你的网页更加生动活泼的语言,你可以利用JavaScript轻易的做出亲切的欢迎讯息、...
    kmmyzi阅读 465评论 0 0
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,263评论 0 5
  • 今天一天,很开心,唯一让我崩溃的就是晚上宝宝的作业,让我又一次雷霆大作的大发了一次脾气。发一次脾气,情绪濒临失控,...
    逆时空成长阅读 472评论 0 0
  • 最美交警美醉玉田 马永红2017.04.18 骄阳下他们挺立,任脖子、胳膊、脸颊晒脱...
    孤独觉者阅读 334评论 0 0