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 相关文章推荐
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
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 visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
php生成图片验证码的方法
2016/04/15 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
Javascript下的keyCode键码值表
2007/04/10 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
用cssText批量修改样式
2009/08/29 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python自动发微信监控报警
2019/09/06 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
Europcar意大利:汽车租赁
2019/07/07 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
存储过程的优点有哪些
2012/09/27 面试题
如何进行Linux分区优化
2013/02/12 面试题
采购经理岗位职责
2014/02/16 职场文书
医德医风自我评价
2014/09/19 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
java泛型通配符详解
2021/07/25 Java/Android