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 getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
Vue实现简单分页器
Dec 29 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 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游戏编程25个脚本代码
2011/02/08 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python操作json的方法实例分析
2018/12/06 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
某公司.Net方向面试题
2014/04/24 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015年校长新年寄语
2014/12/08 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
创业计划书之酒吧
2019/12/02 职场文书