×

JS

JS定义

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,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?

JavaScript web 开发人员必须学习的 3 门语言中的一门:

  • HTML 定义了网页的内容

  • CSS 描述了网页的布局

  • JavaScript 网页的行为

本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。

基本特点编辑

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言(代码不进行预编译)。

主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

可以实现web页面的人机交互。

日常用途编辑

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素。

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

检测访客的浏览器信息。

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

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

特性编辑

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。

而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。

编程编辑

JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){},其中,catch()中会传入错误信息。

console.log("a");//这是正确的
console.log("b");//这是正确的
console.logg("c");//这是错误的,并且到这里会停下来
console.log("d");//这是正确的
console.log("e");//这是正确的
 
/*解决办法*/
try{console.log("a");}catch(e){}//这是正确的
try{console.log("b");}catch(e){}//这是正确的
try{console.logg("c");}catch(e){}//这是错误的,但是到这里不会停下来,而是跳过
try{console.log("d");}catch(e){}//这是正确的
try{console.log("e");}catch(e){}//这是正确的

Javascript被归类为直译语言,因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行,其他引擎则是逐行解译(SpiderMonkey会将解译过的指令暂存,以提高性能,称为实时编译),但由于V8的核心部分多数用Javascript撰写(而SpiderMonkey是用C++),因此在不同的测试上,两者性能互有优劣。与其相对应的是编译语言,例如C语言,以编译语言编写的程序在运行之前,必须经过编译,将代码编译为机器码,再加以运行。

注释://被称作行注释,/* */中的内容会被注释。

JavaScript:写入 HTML 输出

实例

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

提示:您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

JavaScript:对事件作出反应

实例

<button type="button" onclick="alert('Welcome!')">点击这里</button>

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript:改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

JavaScript:改变 HTML 图像

本例会动态地改变 HTML <image> 的来源 (src):

The Light bulb

点击灯泡就可以打开或关闭这盏灯

JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。

JavaScript:改变 HTML 样式

改变 HTML 元素的样式,属于改变 HTML 属性的变种。

实例

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

JavaScript:验证输入

JavaScript 常用于验证用户的输入。

实例

if isNaN(x) {alert("Not Numeric")};

关于"JS"的文章

  • js实现模块的拖拽

    Js&JQuery Posted by 天空 2018.05.25 views: 14816 评论:0

    模块的拖拽,随意拖动A模块进行定位,一起来DEMO。<!DOCTYPEhtml><html><head><metacharset="...

    Tags: JQueryJS

  • 学习JS中promise对象之异步coding

    jQuery Posted by Web前端之家 2018.05.25 views: 9662 评论:0

    这些天真是热的发晕,每天都是35度,希望能早点来点凉意吧。今天想重温下异步的编程其中的Promise。Promise,中文可以理解为愿望,代表单个操作完成的最终结果。一个Promise拥有三种状态:分别是unfulfilled(未满足的)、fulfilled...

    Tags: JQueryJS

  • 学习一个不错的点击水纹波动按钮效果

    Js&JQuery Posted by andy001 2018.05.18 views: 19492 评论:0

    学习一个不错的点击水纹波动按钮效果:jQuery点击水纹波动动画原理:   1.在需要实现水波纹效果的标签中添加<XXXclass="ripple-wrapper"></XXX>&n...

    Tags: JQueryJS

  • 操作表单全选、全不选、反选效果

    Js&JQuery Posted by andy001 2018.05.17 views: 18501 评论:0

    操作表单全选、全不选、反选效果。demo代码如下:<!DOCTYPE html><html lang="en"><head>    ...

    Tags: JQueryJS

  • 分享Web前端开发的一些jQuery代码

    Js&JQuery Posted by ceshi 2018.05.16 views: 8367 评论:0

    在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来。 1、检测InternetExplorer版本当涉及到CSS设计时,对开发...

    Tags: JQueryJS

  • jquery+CSS3模拟Path2.0动画菜单效果代码

    Js&JQuery Posted by jiang 2018.05.10 views: 10055 评论:0

    本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码。分享给大家供大家参考。具体如下:CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小...

    Tags: JQueryJS

  • jQuery遍历DOM的父、子,同级元素

    Js&JQuery Posted by abc123 2018.05.10 views: 7867 评论:0

    如下图,显示了HTML中的结构树,通过JQuery遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对DOM进行遍历。...

    Tags: JQueryJS

  • 无序列表排序之方法

    Js&JQuery Posted by ceshi 2018.05.10 views: 10244 评论:0

    利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、ap...

    Tags: JQueryJS

  • 基于jQuery封装的屏幕居中提示信息代码

    Js&JQuery Posted by andy001 2018.05.09 views: 8677 评论:0

    本文实例讲述了jQuery封装的屏幕居中提示信息代码。分享给大家供大家参考,具体如下:functionshowLoad(tipInfo,type,autohide){varpic=&...

    Tags: JQueryJS

  • 分享几个jQuery的小代码片段

    Js&JQuery Posted by andy001 2018.05.07 views: 11998 评论:0

    分享几个jQuery的小代码片段:1)禁用右键单击功能如果你想为用户保护网站信息,那么开发者可以使用这段代码——禁用右键单击功能$(document).ready(function() { //catch the r...

    Tags: JQueryJS

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2