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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
js使用formData实现批量上传
Mar 27 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 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
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
php curl常用的5个经典例子
2017/01/20 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
JS实现随机点名器
2020/04/12 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
详细探究Python中的字典容器
2015/04/14 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
对numpy中轴与维度的理解
2018/04/18 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
web页面录屏实现
2019/02/12 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
新闻专业毕业生求职信
2014/08/08 职场文书
我的1919观后感
2015/06/03 职场文书
金榜题名主持词
2015/07/02 职场文书
清明节随笔
2015/08/15 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS