01.JavaScript Introduction

Last Update:2015-10-11 Source: Internet

Author: User

Tags script tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Before you learn JavaScript, make sure you have the HTML, CSS basics.

What can JavaScript do?

1. Dynamically change the content of the page (typical angular)

2. Change the appearance of the Web page dynamically by modifying the CSS style

3. Verifying form data

4. Responding to Events

JavaScript editing tools (Editor):

Notepad (not much to say, you know ~ can be easily modified), Visual Studio, Dreamweaver, Sublimetext, notepad++, Webstorm ...

There are 4 types of JavaScript references in HTML:

(1) Page Header introduction (inside Head tag);
(2) The introduction (inside the body tag) of the page;
(3) Introduction of element events (tag attributes introduced);
(4) The introduction of external JS file;

These four kinds of methods are very common, must master master again grasp, and understand its meaning. Especially the problem of loading sequencing.

First, the introduction of JS page header

The introduction of JS in the header refers to writing JavaScript within the

1  <HTML>2  <Head>3      <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">4      <title></title>5      <Scripttype= "Text/javascript">6          //Write a JavaScript program here7 document.write ('JavaScript Getting Started tutorial');8      </Script>9  </Head>Ten  <Body> One  </Body> A  </HTML>

Similar to <style type= "Text/css" ></style>.

document.write (' ... '); in the page output a certain content, very often oh!

Second, the introduction of JS in the page

The introduction of JS in the page refers to writing JavaScript within the <body></body> tag.

1  <HTML>2  <Head>3      <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">4      <title></title>5  </Head>6  <Body>7      <Scripttype= "Text/javascript">8          //Write a JavaScript program here9 document.write ('JavaScript');Ten      </Script> One  </Body> A  </HTML>

Third, the introduction of JS in the element event

The introduction of JS in an element event means that a JavaScript program or a JavaScript function is written directly in one of the attributes of an element, which refers to the element's "event attribute".

1  <HTML>2  <Head>3       <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">4      <title></title>5  </Head>6  <Body>7      <inputtype= "button"onclick= "alert (' JavaScript entry ');"value= "button"/>8  </Body>9  </HTML>

The Element event property calls the JavaScript function:

1  <HTML>2  <Head>3  <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">4  <title></title>5  </Head>6  <Body>7      <Scripttype= "Text/javascript">8          functionmyFunction () {9 Alert ('Getting started with JavaScript');Ten          } One      </Script> A      <inputtype= "button"onclick= "myFunction ()"value= "point me to pop the window" /> - </Body> - </HTML>

Iv. introduction of external JS files

The introduction of external JS files, the white is to put the JavaScript program in a suffix named. js file, and then use the script tag to refer to. In addition, the script tag that references the external JS file can be placed inside the head tag or in the body tag.

1 <  type= "Text/javascript"  src= "Js/index.js"></ Script >

Simple Training Questions:

1 <HTML>2 <Head>3 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" >4 <title></title>5 <Scripttype= "Text/javascript">6 functionentermessages () {7 Alert ('Welcome');8 }9 Ten window.onload=entermessages (); One </Script> A </Head> - <Body></Body> - </HTML>

An explanation of javascript:

Although JavaScript is a relatively easy-to-get-started language, some non-programmers can easily program with JavaScript. But JavaScript is a very rich language that has the same complexity or complexity as other programming languages. In fact, writing some complex JavaScript programs requires a solid understanding of JavaScript.

Before seeing a number of phenomena, found that a lot of people (0 Basic or Basic), will skip the basic stage of learning (string objects, array objects, etc.), directly learn the JavaScript event model, and immediately proceed to the operation of various event effects. In fact, this method is OK, but it is not recommended. For a person who really wants to be a front-end engineer, the basic knowledge of the non-clearance is absolutely not OK.

Learn JavaScript, do not think you will do one or two slices switch, tabs tab Such effects (of course you have to do first ...) ), you think you're proficient in JavaScript. JavaScript is used not only to make one or two special effects, but also to use it for the development of a variety of applications.

A very simple example, such as online code testing tools, online color palettes, JSON online parsing, and so on, many of these tools are developed using JavaScript. However, these tools do not work with JavaScript event effects only, plus simple programming basics.

01.JavaScript Introduction

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More