本文共 7334 字,大约阅读时间需要 24 分钟。
JavaScript; 为什么要有JavaScript? 因为用户每一次操作都是要和服务器进行交互的,而当不小心进行了不如意的操作的时候 无法进行回退,使得用户要重新进行操作使得用户的体验性差。 是什么? JavaScript是脚本语言,是网景公司开发的一个语言,是运行在浏览器的一个脚本语言, 只是借助Java的名字,而非Sun公司开发的。 这个语言最初的设计时为了解决用户注册的问题的。 作用; 通过JavaScript来···操作···HTML标签可以提高用户的体验性。 如;···因为在用户注册时,如果输入有误则需要全部重新输入,不利于用户的体验性 所以也可以通过JavaScript来对用户的输入做一个范围性的限制, 帮助用户避免输入有误。 ◆注;可以通过正则表达式来设置 语法;/^正则&/i --- i 是不区分大小写 分类; 1.ECMA_JavaScript是一个JavaScript基础语法 2.BOM_JavaScript是一个面向浏览器的一个JavaScript脚本编程 3.DOM_JavaScript是一个面向页面(用户体验)的一个JavaScript脚本编程 ★★★注;在JavaScript中的事件顶层对象是window 普通对象的顶层对象是Object ★重★重★注; 1.方法名不能是与关键字一样,如果没有反应则试下改下名字。 2. 注意大小写问题 ----------------------------------------------JS—— 正则表达式 --------------------------------------------------------------- JavaScript正则表达式; javaScript的正则表达式和Java的正则表达式符号是通用 【基本所有的语言的正则表达式都是通用的】 JavaScirpt正则表达式语法; /^正则$/ ^是一个开始标识符 $是一个结束标识符 并且要使用/ xx / ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ECMA——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 在HTML中定义JavaScript方式; 1.外部引入;在外部定义一个 .jsp 或 .js 后缀的文件, 在JS文件中写JavaScript的代码,如同CSS的外部引入 2.内部定义;在HTML文档中的<head></head>标签中使用 <script></script> 标签,在标签内部写JavaScript代码 ----------------------------------------------------特点--------------------------------------------------------------- JavaScript特点; 1.弱类型的语言,对数据类型不敏感,【因为只有一个var关键字来定义数据】 2.解释型的语言,是直接在浏览器中运行的, ------- 而··不··需要像Java那样还需要进行编译,【所以是按照顺序运行的。】 3.跨平台,跨语言的一个脚本语言,【在PHP,C#,Java等都可以用】 4.运行在浏览器的语言,在HTML文本中定义或引用。 5.基于事件驱动的语言 6.是一个基于对象的语言 7.文件后缀是.js/.jsp -----------------------------------------------------数据类型------------------------------------------------------------- JavaScript数据类型; var a = 5; 只有一个〓【 var 】〓关键字来定义数据(变量)的类型, 通过数据(变量)的内容来判断是一个什么类型。 ······所以是一个弱类型的语言。 JavaScript数据类型; boolean ----- true | false String ----- 字符串 | 字符 Number ----- 数字 undifined ----- 空 | null Object ----- 自定义对象 | JavaScript提供的对象 ◆注;在JavaScript中Number类型,如果要进行一个小数点的运算, 则需要进行转换,否则会默认是一个四舍五入的运算 因为在JavaScript没有浮点类型 〓注;A、【 0 】则是false 【 非0 】 则是 true 负数也是 B、【 null/空 】 则是 false 【 非空 】 则是 true C、【 undifined 】则是false 【 非undifined 】 则是true -------------------------------------------------类型转换---------------------------------------------------------------- 因为在JavaScript没有浮点类型 类型转换; 1.parseFloat() 将Number类型的一个数值转换成一个小数点的值 2.parseInt() 可以将一个字符串转换成一个整数类型, ★注;只转换可以进行转换的··开始···数字字符串 --------------------------------------------------运算符----------------------------------------------------------- JavaScript运算符; 算术运算符;+ - * / & ^ | 逻辑运算符;|| && ! 【在JavaScript中没有单 | & 】 比较运算符;> < >= <= != 三目运算符;(表达式)? x:y; -------------------------------------------------判断语句--------------------------------------------------------------- 1.if if---else if---else if... if---else if...---else 2.switch---case 在switch中的case可以使String,判断语句,number ▲ 注;如果在case中的返回是什么类型则在switch()中则写什么类型。 如;case是判断语句那么在switch()中则写布尔类型的值 ---------------------------------------------------循环------------------------------------------------------------ 1.while{} 2.do{ }while 3.for(){} 4.for--in 5.with(对象) ▲for--in就是在Java中的forEach, 在JavaScript中主要用于遍历对象和数组的, 1.遍历数组; JavaScript中遍历数组是遍历出每一个元素的下标 2.遍历对象; JavaScript中是遍历每一个对象的属性类型, 所以遍历对象时使用;对象[ x ]才可以获取到值 ▲with(对象) 是一个预定义的,当需要调用N个这个对象方法时可以使用这个 ----------------------------------------------函数和对象的定义-------------------------------------------------------------- 在JavaScript中的···函数和对象···的定义是使用function()关键字的。 函数定义的方式; 1.function x(){} ----- 无参的 2.function x(a,b){} ----- 有参的 对象定义的方式; 1.function x(){} ---- 无参 2.function x(a,b){} ---- 有参的 3.var v = function (){} --- 可有参可无参 4.var v = new Object() --- 通过基类来定义,直接 v.属性 = 值 即可 5.var v = { : } --- 属性之间使用 , 隔开 属性赋值是 : 也是一个json格式 〓 注;对象和函数的定义方式类似,而是方法还是对象取决于如何调用 1.函数名() 这个是函数 2.new 函数名() 这个是对象 3.可以通过对象.[属性类型]; 获取到对象的属性值 ◆◆◆注;在JavaScript中的形参是不用写var 否则会报错 在JavaScript中有this关键字 JavaScript_Function_Introduce; 在JavaScript中是···没有···函数重载的···也没有···可变形参的。 所以在JavaScript中定义重名的函数,后面的函数会覆盖前面的函数。 虽然JavaScript中没有可变形参, ·····但是提供了····arguments对象数组···来获取到传进来的形参个数 而且在JavaScript中的函数传入的实参个数和形参个数 不一样也不会报错 JavaScript常用的对象; 1.String .... 2.Number .... 3.Boolean .... 4.Date setInterval() setTimeOut() 5.Math round().... 6.数组; 定义方式; var v = new Array(10); var v = [xx,xx,xx]; 特点;JavaScript的数组是可以存放任意的类型,而且长度是任意的, 即便指定了长度,可是如果是长度超过指定的长度,也不会报错, 而且会自动进行一个扩展。 prototype; 原形,是所有对象都会有的一个属性。 作用;是用于对对象的功能进行的一个扩展 如数组等 Array.prototype.扩展方法名 = function (){ } ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓BOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ BOM_JavaScript; 是什么? Browser Object Model 是一个浏览器对象模型。 作用; BOM是面向浏览器操作的。 如;用户点击某页面的某一处,就回退到上一个页面等........ BOM是根据对象进行操作的。 --------------------------------------------------BOM的元素------------------------------------------------------------- BOM中的元素; 1.弹出框(事件) ---alert() 弹出框(提示) ---confirm() 确认弹出框 ---prompt() 输入弹出框 2.定时 id setInterval(x,time) === 过多长时间执行一次,执行N次,返回一个id值 clearInterveal(id) === 清除时间定时 id setTimeOut(x,time) === 过多次时间执行,只执行一次,返回一个id值 clearTimeOut(id) === 清除时间定时 3.history ---历史记录对象; 可以作为前进和后退,和记录 --- back() 上一条历史记录 --- forward() 进入上一条历史记录 === go(num) 通过指定数值来说明进入的历史记录,负数为退,正数为进, ——————如果超过打开的页数则没有反应 4.navagator ---导航对象; 一般用于兼容性问题, 因为有一些浏览器的版本不支持某些HTML标签 ---appVersion 5.location ---本地对象; 本地页面刷新,跳转等。。。。。。 ---href= 指定地址 ---reload() 刷新本页面 6.Screen ---屏幕对象 ---availHeight 获取到屏幕的高度,不包含任务栏 ---avaiWidth 获取到屏幕的宽度,不包含任务栏 ---height 获取到屏幕的高度,包含任务栏 ---width 获取到屏幕的宽度,包含任务栏 7.Domcument; ---是一个规范。 ●●● BOM是根据以上的的元素和用户的操作,作用于浏览器的。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓DOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ DOM_JavaScript; 是什么? 1.Document Object Model 文档对象模型。 2.通过操作HTML结构的过程就叫做DOM编程。 3.DOM是层次化结构的。 作用; 1.是作用于浏览器的页面上的,根据用户的操作,作用于浏览器页面。 2.DOM是根据事件进行操作的。 ▲ DOM是操作HTML结构的一种思想、规范。 ▲ DOM是一个层出化结构的规范,因此将HTML文档结构定义成一棵树, 而每一个元素(标签)都是这个DOM的节点 ------------------------------------------------DOM节点分类------------------------------------------------------------------ DOM节点分类; Node 基类节点 |--- Element 元素节点 (标签) |--- Comment 注释节点 (标签) |--- Text 文本节点(内容) |--- Attr 属性节点 (标签) ★★★注;空格换行也是一个元素 ------------------------------------------------DOM节点获取方法------------------------------------------------------------------ DOM获取节点的方法; 1.document.getElementById("id") --- 获取到这个id的节点(标签) 2.document.getElementsByClassName("className") --- 获取到所有这个class属性的节点(标签)【数组】 3.document.getElementsByName("name") --- 获取到所有这个name属性的节点 【数组】 4.document.getElementsByTagName("TagName") --- 获取到这个标签名的所有节点【数组】 5.document.all() ---获取到这个文档的所有节点【数组】 6.document.forms() ---获取到这个文档的所有form表单的所有节点【数组】 7.document.images() ---获取到这个文档的所有图片【数组】 ------------------------------------------------DOM节点关系------------------------------------------------------------------ DOM节点的关系; 1.父关系; Node parentNode() --- 获取到父节点 2.兄弟关系; Node nextSubling() --- 下一个兄弟节点 Node previousSubling() --- 上一个兄弟节点 3.子关系; Node childNodes() --- 获取到所有的子节点 【数组】 Node firstChild() --- 第一个子节点 Node lastChild() --- 最后一个子节点 ------------------------------------------------DOM增删改------------------------------------------------------------------ Node .createElement("nodeName") ----- 创建节点 Node .appendChild() 添加子节点, ----- 是添加到最后一个的。 Node .setAttribute("Attr.name","price") ----- 设置属性 Node .removeChild(“node”) ----- 删除节点 ------------------------------------------------DOM其他方法------------------------------------------------------------------ 1.Node nodeName() ----- 节点名称 2.Node nodeType() ----- 节点类型 【数字】 3.Node nodeValue() ----- 节点的值 Node .value 获取到节点的文本内容 Node .innerHTML 设置节点的文本内容给事件添加函数名,可以使用this代表当前
转载地址:http://nhmxi.baihongyu.com/