JavaScript 网页脚本语言 由浅入深

1)基础

学习目的:

1. 客户端表单验证

2. 页面动态效果

3. jQuery的基础

什么是JavaScript?

一种描述性语言,也是一种基于对象和事件驱动的,并具有安全性能的脚本语言

javaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言 解释执行 javaScript特点 向HTML页面中添加交互行为 脚本语言,语法和java类似 解释性语言,边执行边解释 javascript的基本结构 语法 <script type="text/javascript"> <-----javascript语句-------> </script> <script>....</script>可以包含在文档的任何地方,只要保证这些代码在被使用时已经读取并加载到内存中即可

javaScript核心语法

核心语法 变量 数据类型  数组  运算符号  控制语句  注释   输入输出 语法约定 

核心语法变量 var width  var-用于声明变量的关键字 width=5   width-变量名 同时声明和赋值变量 var catname="皮皮"; var x,y,z=10; 不声明直接赋值(不建议使用) width=5;

经验:变量可以不经声明而直接使用,但这种方法很容易出错.也很难查找排错不推荐使用

核心语法-数据类型 数据类型: undefined null(表示一个空值和undefined值相等) numbre boolean string 属性 字符串对象.length(长度)

数组(创建数组) 语法 var 数组名称=new Array(size) 属性 名称 描述 length  设置返回数组中的元素书名

方法 join()把数组所有的元素放入一个字符串,通过一个的分隔符进行分隔      sort()对数组进行排序      push()向数组末尾添加一个或者更多元素,并返回新的长度

核心语法 类型   运算符 算数运算符       +-*/++-- 赋值运算符  = += -= 比较运算符  > < >=< >= == != === !== 逻辑运算符  && || !

if条件语句 if(条件) { //代码 } else{ //代码 }

switch(表达式){ case 常量 1:  javaScript语句1;   break case 常量 2:  javaScript语句2;  break .... default : javaScript 语句3;

for(初始化;条件;增量) { javaScript代码 } white(条件) { javaScript代码 }

单行注释 //开始,已行末结束

多行注释以/*开始,以*/结束,符号/*....*/

alert("提示信息") prompt() prompt("提示信息","输入框的默认信息") prompt("请输入你喜欢的颜色","红色") prompt("请输入你喜欢的颜色","")

Chrome开发人员工具 * 停止断点 *单步调试不进入函数体内部 *单步调试,进入函数体内 * 跳出当前函数 *禁用所有断点,不做任何调试 alert()方法

函数的含义:类似于java中的方法,是完成的任务代码语句快 使用更简单:不用定义属于某个类,直接使用 函数分类:系统函数和自定义函数

parsint("字符串") 将字符串转换为整数数字 parseFloat("字符串") 将字符串转换为浮点数字 ISNAN() 用于检查其参数是否是非数字

自定义函数 定义函数  (无参函数) (有参函数) function 函数名 (参数1,参数2,参数3.....){ //javaScript语句 [return 返回值]---可有可无

调用函数 函数调用一般和表单元素事件一起使用,调用格式 事件名="函数名()" onload 一个页面或者一幅图像完成加载 onlick 鼠标单击某个对象 onmouseover 鼠标指导移到某元素上 onkeydown 某个键盘按键被按下 onchange 域的内容被改变 }

为什么要学习JavaScript 表单校验 特效

浏览器内核 Chrome  webkit Firefox  trident IE 猎豹 搜狗 UC

 2)操作BOM

BOM:浏览器对象模型(Browser Object Model) bom提供了独立于内容的,可以与浏览器窗口进行互动的对象结构

BOM可以实现的功能 弹出新的浏览器窗口 移动关闭浏览器窗口以及调整窗口的大小 页面的前进和后退

Windows对象的常用属性 属相名称   说明 histroy   有关客户访问过的URL的信息 location  有关当前的URL的信息

语法: Window.属性名="属性值"; 示例:Window.location="http://www.bdqn.cn" 常用的方法 方法名称   说明 prompt()  显示可以提供用户输入的对话框 alert()   显示带有一个提示信息和一个确定按钮的警示款 confirm()  显示一个带有提示信息,确定和取消按钮的对话框 close()   关闭浏览器窗口 open()   打开一个新的浏览器窗口,加载给定URL所指定的文档 setTimeout()  在指定的毫秒后调用函数或计算表达式 setinterval()  按照指定的周期(以毫秒计)来调用函数或者表达式

confirm():将弹出一个确认对话框 confirm("对话款中显示的纯文本")

open()方法 window.open("弹出窗口的URL","窗口名称","窗口特征")

history对象 常用方法 名称   说明 back()     加载history对象列表的前一个URL forward()   加载history对象列表中的下一个URL go()  加载history 对象列表的某一个具体的URL location对象 常用属性   说明 host   设置或返回主机名和当前URL的端口号 hostname  设置或返回当前的URL的主机名 href   设置或返回完整的URL 常用方法 reload()  重新加载当前文档 replace()  用新的文档替换当前文档

getElementByld() 返回对拥有指定id的第一个对象的引用

getEllementsByName 返回带有指定名称的对象的集合

getElementsByTagName() 返回带有指定标签名的对象的集合

write()   向文档写文本、HTML表达式或JavaScipt代码

Array:用于在单独的变量名存储一系列的值

String: 用于支持对字符串的处理

Math:用于执行常用的数学任务,它包含了若干个数字常量和函数

DATE:用于操作日期和时间 date对象

var 日期对象=new date(参数) 参数格式: MM DD YYYY HH :mm:ss 常用方法 方法   说明 getdate()  返回date对象的一个月中的每一天,其值介于1到31之间

getday()  返回date对象的星期中的每一天,其值介于0到6之间

getHours()  返回date对象的小时数,其介于0到23之间

getminutes()  返回date对象的分钟数其值介于0到59之间

getseconds()  返回date对象的秒数,其值介于0到59之间

getMonth()  返回date对象的月份,其值介于0到11之间

getFullyear()  返回date对象的年份.其值为4位数

gettime()  返回自某一时刻(1970年1月1日)以来的毫秒数

math 对象 常用方法 ceil()  对数进行上舍入   Math.ceil(25.5);返回26    Math.ceil(-25.5);返回-25

floor()  对数进行下舍入   Math.floor(25.5);返回25   Math.floor(-25.5);返回-26

round()  把数四舍五入为最接近的数  MAth.round(25.5);放回26   Math.round(-25.5) 返回-26

random() 返回0到1之间的随机数  Math.random();例如:0.6273608814137365

如何实现返回整数范围为2到99之间的数 var inum=Math.floor(Math.random()*98+2)

定时函数 setTimeout() setTimeout("调用的函数",等待的毫秒数) 实例: var myTime=setTimeout("disptime",1000)

setinterval() 周期性 语法 setinterval("调用函数",间隔的毫秒数)

var myTime=setinterval("disptime",1000)

清除函数 clearTimeout() 语法 clearTimeout(setTimeOut()返回的ID值)

var myTime=setTimeout("disptime()"1000) clearTimeout(myTime)

clearinterval() clearlinterval(setinterval()返回的ID)

var myTime=setinterval("disptime()",1000) clearinterval(myTime )

document ** 属性: referrer 返回的是上一个页面的URL

3)操作DOM

DOM:Document Object Model(文档对象模型)

节点属性   描述 parentNode  返回节点的父节点

childNodes  返回子节点的集合,childNodes[i];

firstChild  返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点

lastChild  返回节点的最后一个子节点

nextSibling  下一个节点

previousSibling  上一个节点

element属性 属性名称    描述 firstRlrmentChild  返回节点的第一个子节点,最普遍的做法是访问该元素的文本节点

lastElementChild  返回节点的最后一个子节点

nextElenentSilbling  下一个节点

previousElementSibling  上一个节点

节点信息 nodeName:节点名称 nodeValue:节点值 nodeType:节点类型

节点类型   NodeType值 元素element  1 属性attr   2 文本text   3 注释comments  8 文档document  9

操作节点的属性 getAttribute("属性名") setAttibute("属性名","属性值")

创建和插入节点 创建节点 名称      描述 createElement(tagName)   创建一个标签名为tagName的新元素节点 A.appendChild (B)   把B节点追加到A节点的末尾 insertBefore(A,B)   把A节点插入到B节点之间 cloneNode(deep)    复制到某个节点

删除和替换节点 名称       描述 removeChild(node)     删除指定节点 replaceChild(newNode,oldNode)属性attr  用其他的节点替换指定的节点

操作节点样式 改变样式的属性 style 属性 className属性 HTML元素.style.样式属性="值" 示例 doucument.getElenmentByld("titles").style.color="#ff0000"

className属性 语法 HTML元素.className="样式名称"

获取元素的样式 语法HTML元素.style.样式属性; 示例 alert(document.getElementByid("cartlist").style.display) 实际开发中使用 document.defaultVIEW.getComputerStyle(元素,null).属性 HTML元素.currentStyle.样式属性---兼容IE浏览器

JavaScript获取元素位置

语法 document.documentElement.scrollTop; document.documentElementt.scrollleft;   标准浏览器 或者 document.body.scrollTop document.body.scrollleft;  谷歌浏览器

4)面向对象

对象 是包含相关属性和方法的集合

什么是面向对象 面象对象仅仅是一个概念或者编程思想 通过一种叫做原型的方式来实现面向对象的编程

创建对象

自定义对象 内置对象

自定义对象是基于object对象的方式创建对象 语法 var 对象名称=new object();  通过 . 属性和方法  常见的内置对象 String (字符车) 对象 Date(日期) 对象 Array(数组) 对象 Boolean(逻辑) 对象 Math(算数) 对象 RegExp 对象  ------正则表达式对象

如何解决使用同一个接口不需要创建很多对象,减少产生大量重复的代码

** 构造函数

**原型对象

构造函数 是创建特定类型的对象   this变量  new操作符 构造函数始终都应该以一个大写的字母开头

调用构造函数的四个步骤 *创建一个新对象 *将构造函数的作用域给新对象(this就指向了这个新对象) *执行构造函数中的代码 *返回新对象

constructor属性标识它的对象属性

instanceof操作符检测对象类型

原型对象 每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象 prototype就是通过调用构造函数而创建的那个对象实例的原型对象

原型链 一个原型对象是一个原型对象的实例 相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链

搜索当前的实例

搜索第一个的prototype

对象继承 创建子类对象时,不能向父类型的构造函数中传递参数 借用构造函数 apply([thisOjb[,argArray]]) 应用某一个对象的一个方法,用另一个对象替换当前对象

call([thisObj[,arg[,arg2[,[argN]]]]]) 调用一个对象的一个方法,以另一个对象替换当前对象 借用构造函数的一个大的优势 可以在子类型构造函数中向父类型构造函数传递参数

组合继承:有时候也叫做伪经典继承 将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式 使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承 搜索第二个的prototype 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang 语言--map 用range遍历不能保证顺序输出

按照之前我对map的理解,map中的数据应该是有序二叉树的存储顺序,正常的遍历也应该是有序的遍历和输出,但实际试了一下,却发现并非如此,网上查了下,发现从Go1...

4218
来自专栏技术之路

golang 详解defer

defer用来声明一个延迟函数,把这个函数放入到一个栈上, 当外部的包含方法return之前,返回参数到调用方法之前调用,也可以说是运行到最外层方法体的"}"时...

3337
来自专栏繁花云

liunx下sed命令的用法

单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义,但是单引号”‘”是没有办法用反斜线”\”转义的,这时候只要把命令中的单...

740
来自专栏web前端教室

web前端零基础课-0908*福祥-学习笔记

学了部分js内容后,完成了网站首页部分动态效果(搜索栏、侧边导航条、轮播图),先用最基本的,冗余最多的一步步实现;后面对Js进行了初步的封装,重新构建了Js文件...

833
来自专栏PHP在线

Jquery find与filter函数区别

find()会在div元素内 寻找 class为classname的元素。 filter()则是筛选div的class为classname的元素。 基本是...

3497
来自专栏WindCoder

《简明 Python 教程》学习笔记- 基本概念

最近除了忙着论坛那边,就是忙着攻克Python,都好久没来更新了。今天暂且发出一小部分之前自学时做的笔记吧。假期忽然对脚本语言产生了兴趣,最终选择了这个先学着(...

681
来自专栏漫漫前端路

从 Vue typings 看 “this”

在 2.5.0 版本中,Vue 大大改进了类型声明系统以更好地使用默认的基于对象的 API。

972
来自专栏Pythonista

前端学习之JavaScript

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScri...

1473
来自专栏BestSDK

一样的代码、不一样的写法,JavaScript必知的简写技巧|附源代码

初级篇 1、三目运算符 下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。 const x = 20; let answer; if (x > 1...

55211
来自专栏静晴轩

JavaScript 之 this 详解

JavaScript作为一种脚本语言身份的存在,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScript支持函数式编程、闭包、基于原型的继承等高级功...

4145

扫码关注云+社区