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弹出关闭遮罩层实例
Aug 06 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
JS实现瀑布流布局
Oct 21 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
iView框架问题整理小结
Oct 16 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
vue+element实现表单校验功能
May 20 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中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python图像处理之反色实现方法
2015/05/30 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python正则简单实例分析
2017/03/21 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
浅析python中while循环和for循环
2019/11/19 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
电大自我鉴定
2013/10/27 职场文书
采购主管岗位职责
2014/02/01 职场文书
品德评语大全
2014/05/05 职场文书
交通安全横幅标语
2014/10/07 职场文书
php字符串倒叙
2021/04/01 PHP