JavaScript简介

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;
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值