JavaScript概述

作者: Grape_葡萄 | 来源:发表于2017-08-22 17:55 被阅读352次

    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:

    相关文章

      网友评论

        本文标题:JavaScript概述

        本文链接:https://www.haomeiwen.com/subject/vcgldxtx.html