Javascript基础知识(一)核心基础语法与事件模型


Posted in Javascript onSeptember 29, 2014

一.Javascript核心基础语法

1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript。

2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行。

3.Javascript的用途?

 1.可以控制网页中所有元素,增加.删除.修改元素的属性。

 2.可以在html中放入动态文本。

 3.响应用户在使用网页时产生的事件。

 4.校验用户输入的数据。

 5.检测用户的浏览器。

 6.用于创建cookie。

4.Javascript在html网页中创建的三种方式

1.外部样式:

创建一个文件名为:xx.js的文件通过<script src="xx.js"><script>来链接

2.内嵌样式:

在html中head或body里使用<script type="text/javascript"></script>或直接使用<script></script>载入

3.内联样式:

直接在标签中添加事件:<input onclick="alert('helloworld!')">载入

5.Javascript的数据类型:

它的数据类型有两大类:1.原始性数据类型2.引用性数据类型(对象)

原始性数据类型:1.typeof 2.number 3.string 4.boolean 5.null 6.undefined

引用性数据类型:(预定义的对象有三种)1.原生对象(Object,number,string,boolean,function,Array,Date等)2.内置对象:不需要显示初始化(math,Global)3.宿主对象(主要有BOM和DOM)

6.BOM和DOM

BOM:浏览器对象模型Browser Object Model

DOM:文档对象模型Document Object Model

二.Javascript的事件模型

1.Javascript事件模型:1.冒泡类型: <input type="button">当用户点击按钮时:input-body-html-document-window(从下往上冒泡)IE浏览器只是用冒泡

    2.捕获类型: <input type="button">当用户点击按钮时:window-document-html-body-input (从上往下)

经过ECMA标准化后,其他浏览器都支持两种类型,捕获先发生。

2.传统事件书写的三种方式:

1.<input type="button" onclick="alert('helloworld!')">

2.<input type="button onclick=name1()">======<script>function name1(){alert('helloword!');}</script> //有名函数

3.<input type="button" id="input1">  //匿名函数

<script>

 Var button1=document.getElementById("input1");

 button1.onclick=funtion(){

 alert('helloword!')

 }

</script>

3.现代事件书写方式:

<input type="button" id="input1">  //IE中添加事件

<script>

 var fnclick(){

 alert("我被点击了")

 }

 var Oinput=document.getElementById("input1");

 Oinput.attachEvent("onclick",fnclick);

 --------------------------------------

 Oinput.detachEvent("onclick",fnclick);//IE中删除事件

</script>

<input type="button" id="input1">  //DOM中添加事件

<script>

 var fnclick(){

 alert("我被点击了")

 }

 var Oinput=document.getElementById("input1");

 Oinput.addEventListener("onclick",fnclick,true);

 --------------------------------------

 Oinput.removeEventListener("onclick",fnclick);//DOM中删除事件

</script>

<input type="button" id="input1"> //兼容IE和DOM添加事件

<script>

 var fnclick1=function(){alert("我被点击了")}

 var fnclick2=function(){alert("我被点击了")}

 var Oinput=document.getElementById("input1");

 if(document.attachEvent){

 Oinput.attachEvent("onclick",fnclick1)

 Oinput.attachEvent("onclick",fnclick2)

 }

 else(document.addEventListener){

 Oinput.addEventListener("click",fnclick1,true)

 Oinput.addEventListener("click",fnclick2,true)

 }

</script>
Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
js格式化时间小结
Nov 03 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
Javascript表单验证要注意的事项
Sep 29 #Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 #Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 #Javascript
js获取元素相对窗口位置的实现代码
Sep 28 #Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 #Javascript
浏览器缩放检测的js代码
Sep 28 #Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 #Javascript
You might like
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
python集合类型用法分析
2015/04/08 Python
python操作redis的方法
2015/07/07 Python
简单上手Python中装饰器的使用
2015/07/12 Python
python学习之编写查询ip程序
2016/02/27 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python异常处理知识点总结
2019/02/18 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
浅谈django 重载str 方法
2020/05/19 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Python中Selenium模块的使用详解
2020/10/09 Python
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
农村婚庆主持词
2015/06/29 职场文书
教师教育教学随笔
2015/08/15 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
python热力图实现的完整实例
2022/06/25 Python