JavaScript  brief introduction

JavaScript Is the most popular scripting language on the Internet , This language can be used for HTML and web, More widely used in servers 、PC、 laptop 、 Devices like tablets and smartphones .

JavaScript It's script language

  • JavaScript It's a lightweight programming language .
  • JavaScript It's pluggable HTML Page programming code .
  • JavaScript Insert HTML After the page , Can be performed by all modern browsers .
  • JavaScript Easy to learn .

JavaScript: Direct write HTML Output stream


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

JavaScript: Reaction to events


  • <button type="button" onclick="alert(' welcome !')"> Am I !</button>
  • alert() Function in JavaScript It's not commonly used in , But it's very convenient for code testing .

JavaScript: change HTML Content

Use JavaScript To deal with it HTML Content is a very powerful feature .


  • x=document.getElementById("demo"); // Look for the element  x.innerHTML="Hello JavaScript"; // Change content
  • You will often see  document.getElementById("some id"). The method is HTML DOM As defined in .
  • DOM (Document Object Model)( Document object model ) It's for accessing HTML The formality of elements W3C standard .

JavaScript: change HTML Images

This example will change dynamically HTML <image> The source of the (src):

Turn on the light bulb

     function changeImage() {
        var element=document.getElementById('myimage')
        if (element.src.match("bulbon")){
        // Here's a picture of an unlit bulb
        } else {
        // Here's a picture of a lighted bulb
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100"height="180">

In the above example, the code  element.src.match("bulbon")  It's the function of : retrieval  <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">  Inside src Whether the value of the property contains  bulbon  This string , If there is a string  bulbon, picture  src  Updated to  bulboff.gif, If it doesn't match  bulbon  character string ,src  Then update to  bulbon.gif

JavaScript Can change any HTML Most of the attributes of an element , Not just pictures .

JavaScript: change HTML style

change HTML Style of element , It belongs to change HTML A variant of attribute .


x=document.getElementById("demo") // Element found"#ff0000"; // Change the style

JavaScript: Verify input

JavaScript Often used to verify user input .


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

The above examples are just ordinary verification , If you want to use it in a production environment , Strict judgment is needed , If the space entered , Or continuous spaces isNaN It's impossible to tell . You can add regularity to judge .


if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){ alert(" Not numbers "); }

Do you know ?

JavaScript And Java It's two completely different languages , Both in concept and Design .
Java( from Sun The invention ) It's a more complex programming language .

ECMA-262 yes JavaScript The official name of the standard .

JavaScript from Brendan Eich The invention . It's on 1995 Year appears in Netscape in ( The browser has stopped updating ), And in 1997 By the ECMA( A Standards Association ) Adopt .

ECMAScript edition

JavaScript Already by ECMA( European Association of computer manufacturers ) adopt ECMAScript Realize the standardization of language .

year name describe
1997 ECMAScript 1 The first version
1998 ECMAScript 2 Version change
1999 ECMAScript 3 Add regular expressions  
add to try/catch
  ECMAScript 4 Not released
2009 ECMAScript 5 add to "strict mode", Strict mode
add to JSON Support
2011 ECMAScript 5.1 Version change
2015 ECMAScript 6 Add classes and modules
2016 ECMAScript 7 Add exponential operator (**)
increase Array.prototype.includes

ECMAScript 6 Also known as ECMAScript 2015.

ECMAScript 7 Also known as ECMAScript 2016.

JavaScript The implementation of the

although JavaScript and ECMAScript It's usually used by people to express the same meaning , however JavaScript It means more than ECMA-262 As many as are stipulated in . therefore , A complete JavaScript The implementation of is as follows 3 It's made up of two different parts :

  1. ECMAScript, from ECMA-262 Definition , Describes the syntax and basic objects of the language .
  2. Document object model (DOM), Describe methods and interfaces for handling web content .
  3. Browser object model (BOM), Describe how to interact with the browser .

JavaScript These three components of , In the current five major browsers (IE、Firefox、Chrome、Safari and Opera) They have received varying degrees of support from the government . among , All browser pairs ECMAScript The first 3 In general, the support of this version is pretty good , And yes ECMAScript5 The level of support is getting higher and higher , But yes DOM There is a lot of difference in their support . Yes HTML5 Have been formally included in the standard BOM Come on , Although browsers implement some well-known common features , But other features will vary from browser to browser .

Three musketeers :HTML+CSS+JavaScript And JavaScript More articles about

  1. Three swordsmen CSS

    1.CSS summary CSS Chinese abbreviation cascading style sheet ( English full name :Cascading Style Sheets), Used to control the presentation of the page , Even better looking language . 2.CSS Basic syntax and page reference 2.1 css How to define ...

  2. Maixuxun snow white , The snow loses the plum ——CSS Animation and JavaScript Animation

    CSS Animation is not absolutely better than JavaScript Better animation performance , Open source animation library Velocity.js And so on, it shows strong performance . One . The main difference between the two Let's talk about the difference between the two . 1)CSS Animation : be based on CSS The movement of ...

  3. How Javascript works (Javascript working principle ) ( 13、 ... and ) CSS and JS The basic principle of animation and how to optimize its performance

    Personal summary : Reading this article requires 20 minute . This is a JavaScript Chapter 13 of how it works . summary As you know , Animation plays a key role in creating amazing web applications . As users pay more and more attention to user experience , Merchants are beginning to realize that ...

  4. Web charting Google Charts with JavaScript #2 .... And ASP.NET Combination of web pages (ClientScriptManager.RegisterStartupScript Method )

    This is a backup of the article , The source of the original text is ( My website ) Web charting Google Charts with JavaScript #2 .... And ASP.NET Combination of web pages (ClientScriptManager.Regi ...

  5. Web charting Google Charts with JavaScript #1.... Good and strong 、 It's so simple !

    This is a backup of the article , The source of the original text is ( My website ) Web charting Google Charts with JavaScript.... Good and strong . It's so simple !#1 ...

  6. Give Way IE6 Support position:fixed Methods ,CSS expression And JavaScript eval Explain

    When doing ceiling effect or fixed effect , Use position:fixed Nothing more than the most convenient , But all evil IE6 It's not fixed The value of this property is , And we want to make IE6 Can be like fixed It's fixed somewhere in the browser , Use onscrol ...

  7. Three swordsmen HTML

    Web The nature of service import socket def handle_request(client): request_data = client.recv(1024) print(request_dat ...

  8. javascript And JavaScript Tool library

    javascript And JavaScript Tool library jQuery Catalog : One . Comparison of lookup tags and event binding and action tags Two .DOM Objects and jquery Transformation 3、 ... and .$(document).ready( )  ...

  9. How Javascript works (Javascript working principle ) ( 11、 ... and ) Rendering engine and performance optimization tips

    Personal summary : Reading this article requires 20 minute , This article mainly explains the rendering mechanism of the engine in the browser . DOMtree       ----|   |---->  RenderTree CSSOMtree  ----| ...

Random recommendation

  1. Indispensable Windows Native (17) - C++: Classes and objects

    [ Source download ] Indispensable Windows Native (17) - C++: Classes and objects author :webabcd Introduction is indispensable Windows Native  And C++ Classes and objects Example 1. Class design CppE ...

  2. c The basic operations in

    One .  Arithmetic operations C There are languages 34 Operator , Including the common addition, subtraction, multiplication and division operations 1.  Addition operation + l  Apart from being able to do addition , It can also indicate a positive sign :+5.+90 2.  Subtraction - l  Apart from being able to do subtraction , It can also represent symbols :-10.- ...

  3. Linux install Nginx

    1. nginx Installation : Start learning how to install nginx, First install the necessary software : # yum install libtool # yum install -y gcc-c++ # yum install z ...

  4. iOS7(iPhone4)button Can't change button Of title

    Recently, a high-end iPhone4 test machine , System is iOS7.1, A problem was detected , Two button, The second enable by NO, Click on the first button, The second title change , However, in iPhone4 It doesn't work on the computer , ...

  5. SecureCRT Chinese code scrambling

    1. Modify remote linux Configuration of the machine [root@rhel ~]#vi /etc/sysconfig/i18n hold LANG To support UTF-8 Character set for   Such as : LANG=”zh_CN.UTF-8″  Or is it  L ...

  6. file Of name value

    stay picturelibrary Take one of them jpg file , Its Name The value is   "NoThumbnail.jpg", Pay attention to the back .jpg             foreach (SPFile ...

  7. Completely backpack ( Nanyang oj311)( Completely backpack )

    It's all backpacks The time limit :3000 ms  |  Memory limit :65535 KB difficulty :4 Description and narration Say the meaning of the topic directly , The definition of backpack is N Class items and a capacity of V The backpack . Each item has an unlimited number of items available . The first i The size of the species is c. value ...

  8. use py2exe take python File conversion to exe Executable program

    1. Installation is required first py2exe modular , Download address : And then use pip install Command to install py2exe modular , If you use it py ...

  9. struts2 Type conversion related issues

    One . Type conversion error , How to deal with it ? if Action Class does not implement ValidationAware Interface , When type conversion error occurs ,struts2 Will continue to call action Method , Set the property value to the default value , Don't complain . if Action class ...

  10. Tomcat The kernel Tomcat Class loader for

    With other mainstream Java Web The server is the same ,Tomcat There are also different custom class loaders , Achieve the control of a variety of resources . Generally speaking ,Java Web The server needs to solve the following four problems : ①    The same Web In the server , each Web ...