JavaScript基础总结三部曲之一
JavaScript是一种基于对象的编程语言,基于对象指的是所有的对象已经由浏览器提供好了,用户直接使用就可以了。
另外,JS是嵌入在HTML语法之中的编程语言。
PS:虽然是基于对象的语言,但是在编写代码的过程中,尽量按照面向对面的要求书写代码。
输出语法:
document.write():向页面输出HTML代码。虽然JavaScript定义在HTML页面中,但是它却可以控制HTML代码的输出。document.write()函数输出的HTML代码不能控制元素的顺序,所以在开发之中不会使用此函数输出HTML代码。
在开发中往往使用console.log()来进行代码输出,来进行页面调试。
变量:
Js定义变量,是根据赋予的内容来决定变量类型。
例如,可以像下面那样声明并初始化数组:
PS:本操作没有严格之处,最大的好处是没有长度限制,动态数组。(当然也可以静态初始化,new数组时直接初始化)当然在开发中一般不会使用new关键字声明数组。实际在定义js变量的时候也可以不使用var进行定义,这样的是全局变量,当然一般并不使用。
函数:
function 函数名称(参数){//不需要返回值类型,如果需要返回,直接return,参数也可以不写var
}
PS:在学习java的时候,方法有几个形参,调用的时候实参个数必须相同,可是JavaScript没有这种限制,
如add(10)依旧调用函数add(x,y):
所以为了用户的操作,JavaScript提供了一个功能,函数名称.arguments:表示取得函数的参数的内容,返回的是一个数组。可以使用length判断长度。
PS:但是在实际工作中,还是强烈建议语法严格,函数里面定义几个参数,调用时就传几个参数, 尽量不出现以上情形。(规范)
事件处理:
在页面上任何的操作都可能称为事件源,而对于每一个事件都可以进行自定义的处理方式。 例如,页面加载,鼠标移动等等都可以称它为事件源。所有的事件在JavaScript里面都是以”onXXX”的形式命名。
举例如下两个事件(这两个事件只能够在”<body>”元素里面进行处理):
页面加载事件: onload
页面的卸载事件:onunload
发现浏览器打开页面时出现”页面加载”,关闭页面时显示”再见”
范例在表格中当鼠标移入新的一行时,改变当前行的颜色:
原理:JS是一个基于对象的编程语言,每一个HTML元素都是一个对象 ,也就是说每一个元素,例如”<tr>”、”<td>”都属于一个JS对象。
总结:javascript取得的所有html元素都是对象。(基于对面编程语言)Java属于面向对象的编程语言,面向对象过程之中,需要由用户自己定义类,产生对象,但是JavaScript是一种基于对象的编程语言,即:所有的对象都已经由浏览器自动为用户提供好了,用户直接使用即可,最典型的对象:每一个HTML元素都是一个对象 。(如:<html><head><body>)所有HTML定义的时候要想轻松的取得指定元素,必须加上有ID属性,作为唯一标记 。
JavaScript事件之动态绑定事件(开发中使用最多)
但是需要注意,所有的事件除了采用以上“onXXX”的方式之外也可以动态设置,这种形式在开发之中是使用最多的。那么可以使用 addEventListener(事件类型,处理函数名称,触发时机) 进行动态设置。
PS:触发时机都会设置为false,表示在事件的触发过程进行处理。
范例:观察动态设置
之前这么写:
动态绑定事件:
所有的动态设置的事件都可以在onload里面进行动态的配置。但是如果要配置,那么必须能够取得一个明确的元素对象。可以使用docuent.getElementById(元素Id)的操作方式取得元素对象。
这种动态设置操作事件的最大好处在于,HTML代码不会和JavaScript代码混合在一起。
PS:innerHTML方法:在此元素内增加指定内容,而且内容可以是HTML代码。
setTimeout方法练习:
实例:轮播图
JavaScript基础总结三部曲之一的更多相关文章
- 第五模块:WEB开发基础 第2章·JavaScript基础
01-JavaScript的历史发展过程 02-js的引入方式和输出 03-命名规范和变量的声明定义 04-五种基本数据类型 05-运算符 06-字符串处理 07-数据类型转换 08-流程控制语句if ...
- JavaScript基础
JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
随机推荐
- SPIE Example References
Journal Article[1] Davis, A. R., Bush, C., Harvey, J. C. and Foley, M. F., "Fresnel lenses in r ...
- hdu 饭卡
本题的思路是:首先如果m<5,直接输出:若m>5,则先拿出5元钱买最贵的东西,这样背包容量就变成了m-5,商品数量为n-1的0/1背包问题. 此题的状态转移方程为:dp[j]=max{dp ...
- ThinkPHP框架的部署
1.将ThinkPHP框架的框架文件放到想要放置的地方,与创建的应用文件夹同级 2.vhost文件中设置虚拟目录 3.在hosts文件中配置 4.在应用目录中创建入口文件index.php 5.在入口 ...
- 安装Bind过程中提示丢失MSVCR110.dll的解决办法
前几天在线安装Visual Studio 2012 Update 3,由于在线安装需要不断下载安装文件,时间很长,后来等不下去,就取消了,不幸的是VS启动不了了,弹出“devenv.exe – 系统错 ...
- 根据CSV找出USBGroup中计算机对应的用户
<USB.CSV> Hostname,Username CNHZPD-TEST1,User1 CNHZLN-01234567,User2 $group = "CN=Enabl ...
- centeros iptable模板文件
iptables规则是空的.而且他们的selinux是关闭了的,这等同于把系统裸奔(总比windows裸奔好). 使用方法: 1.用root用户登录后 vi /etc/sysconfig/ipta ...
- HDU 1075 What Are You Talking About(Trie的应用)
What Are You Talking About Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 102400/204800 K ...
- java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addServlet的解决方案
tomcat7启动后出现:java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addServlet这个问题. 并且访问 ...
- GDC2016【彩虹六号:围攻 】使丰富的“突破”成为可能的破坏系统
[彩虹六号:围攻 ]使得丰富的“突破”成为可能的破坏系统 深奥的战术游戏的背景下,最新的程序化破坏技术[REALBLAST]! 进行演讲的是Ubisoft Montreal的Julien ...
- 让你的PHP更安全之PHP.ini
让你的PHP更安全之PHP.ini 发布时间:2013-05-02 12:43:06 来源:PHP100论坛 评论:0 点击: 次 [字号:大 中 小] QQ空间新浪微博腾讯微博人人网豆瓣网百 ...