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 相关文章推荐
23个Javascript弹出窗口特效整理
Feb 25 Javascript
js constructor的实际作用分析
Nov 15 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
js实现弹幕飞机效果
Aug 27 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jquery常用操作小结
2014/07/21 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python远程连接MySQL数据库
2019/04/19 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
运动会解说词50字
2014/01/18 职场文书
汽车车尾标语大全
2015/08/11 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL