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 相关文章推荐
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
JavaScript表单验证实现代码
May 22 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
Element Input输入框的使用方法
Jul 26 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
第九节 绑定 [9]
2006/10/09 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
JS实现HTML表格排序功能
2016/08/05 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Python如何获取系统iops示例代码
2016/09/06 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python如何支持并发方法详解
2020/07/25 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
法人委托书范本
2014/04/04 职场文书
新生入学欢迎词
2015/01/26 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
初中运动会前导词
2015/07/20 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸