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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
vue v-model动态生成详解
Jun 30 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JS判断数组那点事
2017/10/10 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python中作用域的深入讲解
2018/12/10 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python字符串判断密码强弱
2020/03/18 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
数组越界问题
2015/10/21 面试题
大学新生欢迎词
2014/01/10 职场文书
亲子读书活动方案
2014/02/22 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技