JavaScript简介
文章目录
JavaScript是什么
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行,而只需要支持它的浏览器即可。它的主要目的是,验证发往服务器端的数据、增加 Web互动、加强用户体验度等。
Javascript特点
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
- JavaScript 简单易懂
Javascript引入
内嵌式
<script type="text/javascript">js代码</script>
外链式
<script src="xx.js"></script>
JavaScript数据类型
- 布尔值(Boolean),有2个值分别是:true 和 false.
- null , 一个表明 null 值的特殊关键字。
- JavaScript 是大小写敏感的,因此 null 与 Null、NULL或变体完全不同。
- undefined ,和 null 一样是一个特殊的关键字,undefined 表示变量未定义时的属性。
- 数字(Number),整数或浮点数,例如: 4 或者 2.00。
- 字符串(String),字符串是一串表示文本值的字符序列,例如:“abcde” 。
- *代表(Symbol) ( 在 ECMAScript 6 中新添加的类型).。一种实例是唯一且不可改变的数据类型。
变量声明
- var str=“变量名”;
- var num=1.5;
- age=23;
- var str=new String;
- var cars=new Array(“A”,“B”,"");
函数写法
标准写法
// 函数的定义
function fun() {
alert('常规写法');
}
// 函数的调用
fun()
匿名函数法
var fun = function(){
alert('匿名函数定义');
}
// 函数的调用
fun()
对象方法
var test = {
fun1: function(){ },
}
// 调用
test.fun2();
构造函数法
var fun = function(){ }; // 定义函数对象
fun.prototype.test = function(){
alert('');
}
// 调用
var myfun = new fun(); // 创建对象
myfun.test(); // 调用对象属性
对象
var person = function(name) {
this.name = name;
this.eat=function()
{
alert(name+"吃饭");
}
}
var p=new person("lucy");
p.eat();
var person=new Object();//创建对象
person.name= "lucy";//设置name属性值为lucy
person.eat=function()
{
alert(person.name+"吃饭");
}
person.eat(;//调用对象方法
事件处理
事件 | 描述 |
---|---|
onblur | 元素或窗口本身失去焦点时触发 |
onclick | 单击鼠标时触发。 |
ondbclick | 双击鼠标时触发 |
onerror | 出现错误时触发 |
onfocus | 任何元素或窗口本身获得焦点时触发 |
onload | 页面载入后在window对象上触发;所有框架都载入后,在框架集上触发; |
onmousedown | 单击任何一个鼠标按键时触发 |
onmouseover | 鼠标移到某个元素时触发 |
onmouseout | 鼠标从某个元素移开时触发 |
onmouseup | 释放任意一个鼠标按键时触发 |
onsubmit | 单击提交按钮时,在<form>上触发 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 |
JavaScript HTML DOM
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性(一般属性)
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应(事件属性)
通常是通过 JavaScript来操作 HTML 元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
方法 | 描述 |
---|---|
getElementById0 | 返回对拥有指定id的第一个对象的引用。 |
getElementsByName0 | 返回带有指定名称的对象集合。 |
getElementsByTagName0 | 返回带有指定标签名的对象集合。 |
getBoundingClientReect()方法
getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。
getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。该函数返回一个Object对象,该对象有6个属性:
top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,
但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。
例如:
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left);
alert(box.getBoundingClientRect().width);
document.documentElement.clientTop;
document.documentElement.clientLeft;
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top:top;
bottom:bottom;
left:left;
right:right;
width:width;
height:height;
}
}