您当前的位置: 首页 >  Java

顺其自然~

暂无认证

  • 1浏览

    0关注

    1317博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

javascript详解

顺其自然~ 发布时间:2020-03-18 15:31:14 ,浏览量:1

JavaScript(简称“JS”) 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。虽然它是作为开发Web页面的浏览器脚本语言而出名的(所以需要浏览器支持,相当于浏览器开放的API,不同浏览器的支持程度不同),但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式风格。

JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript 的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。

组成部分

javascript组成

ECMAScript,描述了该语言的语法和基本对象。

文档对象模型(DOM),描述处理网页内容的方法和接口。 

浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

日常用途
  1. 嵌入动态文本于HTML页面。

  2. 对浏览器事件做出响应。

  3. 读写HTML元素。

  4. 在数据被提交到服务器之前验证数据。

  5. 检测访客的浏览器信息。

  6. 控制cookies,包括创建和修改等。

  7. 基于Node.js技术进行服务器端编程。

JavaScript 用法

HTML 中的脚本必须位于 与 标签之间。

脚本可被放置在 HTML 页面的 和 部分中。

标签

如需在 HTML 页面中插入 JavaScript,请使用 标签。

和 会告诉 JavaScript 在何处开始和结束。

和 之间的代码行包含了 JavaScript:

 alert("我的第一个 JavaScript"); 
JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。
JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样,变量 myVariable 与 MyVariable 也是不同的。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。

JavaScript 语句

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) :

语句描述break用于跳出循环。catch语句块,在 try 语句块执行出错时执行 catch 语句块。continue跳过循环中的一个迭代。do ... while执行一个语句块,在条件语句为 true 时继续执行该语句块。for在条件语句为 true 时,可以将代码块执行指定的次数。for ... in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。function定义一个函数if ... else用于基于不同的条件来执行不同的动作。return退出函数switch用于基于不同的条件来执行不同的动作。throw抛出(生成)错误 。try实现错误处理,与 catch 一同使用。var声明一个变量。while当条件语句为 true 时,执行语句块。 对象定义

JavaScript 对象是拥有属性和方法的数据。对象也是一个变量,但对象可以包含多个值(多个变量)。你可以使用字符来定义和创建 JavaScript 对象:

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue",
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};

JavaScript 对象是属性变量的容器,你可以通过两种方式访问对象属性:

(1)person.lastName;

(2)person["lastName"];

对象方法

对象的方法定义了一个函数,并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。,你可以通过两种方式访问对象方法:

(1)person.fullName();

(2)person["fullName"]();//其中以数字作为方法名的

注:对于以数字命名的属性和方法,只能通过中括号去访问,如下图所示:

b = { 1: 5,
      12: function ()
      {
          return this[1];
      }
};
console.log(b[1]);//5
console.log(b[12]());//5
console.log(b["1"]);//5
console.log(b["12"]());//5
JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。HTML 事件可以是浏览器行为,也可以是用户行为。

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

主要浏览器的调试工具

通常,浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

JavaScript let 和 const ECMAScript 2015(ECMAScript 6)

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。

Internet Explorer 11 及更早版本的浏览器不支持 let 关键字。

JavaScript JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

JSON 语法规则
  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组
相关函数 函数描述JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。 Function() 构造函数

函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

上述方式等价于如下方式:

var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);
JavaScript HTML DOM

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

DOM HTML tree

查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素:getElementById()
  • 通过标签名找到 HTML 元素:getElementsByTagName()
  • 通过类名找到 HTML 元素:getElementsByClassName()
改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=新样式

JavaScript HTML DOM EventListener addEventListener() 方法

在用户点击按钮时触发监听事件:

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

传递参数

当传递参数值时,使用"匿名函数"调用带参数的函数:

element.addEventListener("click", function(){ myFunction(p1, p2); });

Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄

removeEventListener()

使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

JavaScript Window - 浏览器对象模型

浏览器对象模型 (Browser Object Model,BOM) 使 JavaScript 有能力与浏览器"对话"。

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

更多js参考https://www.runoob.com/jsref/dom-obj-text.html

关注
打赏
1662339380
查看更多评论
立即登录/注册

微信扫码登录

0.0440s