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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
小程序自定义日历效果
Dec 29 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
脚本收藏iframe
2006/07/21 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
pytorch 共享参数的示例
2019/08/17 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
django使用graphql的实例
2020/09/02 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
实习会计求职自荐信范文
2014/03/10 职场文书
保密工作整改报告
2014/11/06 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS