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>
<script type= "Text/javascript" >......</script> format is fixed, JavaScript code must be written within the <script></script> tag, And you must set the Type property value to "Text/javascript".
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