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 相关文章推荐
JS 对象介绍
Jan 20 Javascript
js原型链原理看图说明
Jul 07 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
原生js实现自定义消息提示框
Nov 19 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
各种战术和打法的原创者
2020/03/04 星际争霸
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript prototype 原型链
2009/03/12 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
python的文件操作方法汇总
2017/11/10 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python二维码生成识别实例详解
2019/07/16 Python
python如何实现数据的线性拟合
2019/07/19 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
三年级数学教学反思
2014/01/31 职场文书
法律顾问服务方案
2014/05/15 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
python 学习GCN图卷积神经网络
2022/05/11 Python