×

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"的文章

  • jQuery的ajax和getJson跨域获取json数据

    Js&JQuery Posted by shiji 2018.04.12 views: 8463 评论:0

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直...

    Tags: JQueryJS

  • jQuery调用Webservice传递json数组

    Js&JQuery Posted by yinqiong 2018.04.11 views: 7293 评论:0

    本文实例讲述了jQuery调用Webservice传递json数组的方法。分享给大家供大家参考,具体如下:Jquery由于提供的$.ajax强大方法,使得其调用webservice实现异步变得简单起来,可以在页面上传递Json字符串到Webservice中,W...

    Tags: JQueryJS

  • 使用CSS和jQuery模拟select并附提交后取得数据

    Js&JQuery Posted by andy001 2018.04.10 views: 7963 评论:0

    模拟select并带有提交后取得数据的代码。 HTMLCode<div id="dropdown"> <p>请选择城市</p> <ul>&...

    Tags: JQueryJS

  • 用jQuery动态加载css文件

    Js&JQuery Posted by 天空 2018.04.10 views: 18037 评论:0

    有时我们可能会需要使用jQuery来加载一个外部的css文件,如在切换页面布局时。思路是创建一个link元素,并将它添加到标记中即可,下边首先看看怎么使用jQuery来实现。下边是我喜欢的写法:$("<link>&quo...

    Tags: JQueryJS

  • 用jQuery判断键盘按键的操作

    Js&JQuery Posted by jiang 2018.04.09 views: 13976 评论:0

     做web开发的时候,有时候需要根据键盘进行一些操作,例如按下Enter的时候提交表单,禁止用户输入某些特殊字符,设置快捷键等等。这时候需要找出用户按下的是那些按键,写个小程序来测试按键。$(document).ready(function()...

    Tags: JQueryJS

  • jQuery的html(data)方法与&lt;script&gt;脚本块的解决方法

    Js&JQuery Posted by abc123 2018.04.09 views: 7823 评论:0

    “今天才注意到jQuery(...).html()方法返回的HTML会过滤掉所有的<script>块,但有时候,特别是在AJAX应用中,常常是需要保留HTML中的<script>块的,比如局部更新含脚本的...

    Tags: JQueryJS

  • jQuery中的each()

    Js&JQuery Posted by shiji 2018.04.08 views: 8748 评论:0

    each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM,JSON等等在javaScript...

    Tags: JQueryJS

  • 玩玩jQuery实现三级下拉菜单特效

    Js&JQuery Posted by andy001 2018.04.08 views: 10592 评论:0

    本文实例为大家分享了jquery三级下拉菜单的具体实现代码,供大家参考,具体内容如下在写这个的时候,首先要捋顺思路。点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,...

    Tags: JQueryJS

  • 学下jQuery选择器

    Js&JQuery Posted by 天空 2018.04.05 views: 330889 评论:3

    jQuery选择器使得获得页面元素变得更加容易、更加灵活,从而大大减轻了开发人员的压力。如同盖楼一样,没有砖瓦,就盖不起楼房,得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性。jquery选择器大方向可以分为这样:下面我们先来看看基本选择器总的C...

    Tags: JS选择器

  • 使用jQuery加载html页面到指定的div

    Js&JQuery Posted by andy001 2018.04.05 views: 12673 评论:0

    使用jQuery加载html页面到指定的div。一、jQuery加载一个html页面到指定的div里把a.html里面的某一部份的内容加载到...

    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