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引擎通常会停止,并生成一个错误消息

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

JavaScript测试和捕捉

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

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

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

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

JavaScript表单验证

JavaScript表单验证

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

JavaScript必填(必选)项目

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阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

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