JavaScript basics [1]_PHP tutorial

Basics of JavaScript [1]

2015/11/13 16:10:04

Javascript has been controversial since its inception, but this is still It does not affect its becoming the mainstream language for WEB programming today. The original JavaScript was designed to provide dynamic functions such as data interaction, screen rendering, and session authentication on the browser side. Now the popularity of node.js has extended JavaScript to the server side.

As a weakly typed scripting language, JavaScript’s syntax is not complicated. As programmers in this era, whether you are doing WEB development or not, it will be beneficial to be familiar with JavaScript. So today let’s get to know JavaScript neatly!

1. What is javascript?

Javascript is a dynamic scripting language, specially used for web application development. Its main function is to add dynamic behavioral effects to the page, specifically:

• Embed dynamic text into HTML pages;
• Respond to browser events (javascript is an event response language that can respond to user mouse clicks, movements, etc.);
• Read and write HTML elements (such as form submission, etc.);
• Verify data before submitting it to the server;
• Detect the visitor's browser information;
• Control cookies, including creation and modification;
• Server-side programming based on Node.js technology;

It can be said that javascript is A literal scripting language that the client uses to program the dynamic behavior of HTML pages, making web browsers more than just displaying user pages. But precisely because JavaScript is deployed on the client, its security has always been the focus of attention.

2. JavaScript debugging

The execution of JavaScript scripts is mainly realized through the parsing engines independently developed by major browser manufacturers. The existing mainstream javascript parsing engines mainly include: Chrome's V8 engine, IE9's JS engine and Firefox's TraceMonkey;

For javascript development, we are often accustomed to having an IDE similar to VS that can be used directly, but Since javascript itself is a "lightweight" language, we only need a simple text editor javascript parsing engine for development and debugging.

Of course you can use Notepad under Windows or Vim editor on Linux, but I suggest that you use a dedicated code editor because it has many conveniences such as syntax highlighting and automatic completion. The text editor I use here is nodepad , and the accompanying debugger is the simple Firefox. Of course, you can also use IE, Chrome or even Safri, because nodepad supports multiple browser debugging.

Under the "Run" menu in Notepad, you can choose which browser to run the debugging javascript script, or you can use the above shortcut keys .

3. JavaScript test program

Next, we provide a very simple javascript script, and the knowledge points involved will be explained one by one.

First is our javascript script: program.js. Let’s look at a piece of code first:

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>document.writeln('');<br /> </li><li>document.writeln("Hello, world!");<br /></li><li>var a = 100000000000000000000e400;<br /></li><li>if (a < Infinity)<br /></li><li>{<br /></li><li>document.writeln(a);<br /></li><li>document.writeln('a less than Infinity, 3Q~~');<br /></li><li>}<br /></li><li>else<br /></li><li>{<br /></li><li>document.writeln(a);<br /></li><li>document.write('Sorry, a more than Infinity!\n');<br /></li><li>} </li></ol>

Line 1: document.writeln() and document.write() are both used to output information to the terminal (browser). The difference is that the "ln" version has its own newline character;
Line 3: Define a variable, There is no need to declare its type, just use the keyword "var";
Line 4: Basic control structures can still be used in JavaScript, such as if-else, while and for, etc.; JavaScript numbers use 64 bits Floating point representation, so the value represented by 1.0 and 1 is the same; in addition, NaN represents an operation result that cannot produce a normal result, and all values ​​greater than 1.798e308 are uniformly represented by Infinity, and e308 represents 10 to the 308th power; so when input When the value is greater than the defined value, it is uniformly displayed as Infinity;

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>var a = 10, b = 9;<br /> </li><li><br /></li><li>document.writeln(a);<br /></li><li><br /></li><li>function add(x,y)<br /></li><li>{<br /></li><li>return x + y;<br /></li><li>}<br /></li><li><br /></li><li>function subtract(x,y)<br /></li><li>{<br /></li><li>return x - y;<br /></li><li>}<br /></li><li><br /></li><li>document.writeln(add(a,b)); </li></ol>

A simple function is defined starting from line 5, one is addition (add) , the other is subtraction (subject), and then calls the function when the terminal outputs;

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>document.writeln("Global Object...");<br /> </li><li>var MyObj = {};<br /></li><li><br /></li><li>MyObj.member = {'first-name': "Alice", last_name : "Winston"};<br /></li><li><br /></li><li>MyObj.record = {<br /></li><li>airline: 'T2B',<br /></li><li>number: 777,<br /></li><li>departure: {<br /></li><li>Date:"Sunday",<br /></li><li>Time:"2015-11-01",<br /></li><li>City:"Taiwan"<br /></li><li>},<br /></li><li>arrival: {<br /></li><li>Date:'Monday',<br /></li><li>Time:"2015-11-02",<br /></li><li>City:"Beijing"<br /></li><li>}<br /></li><li><br /></li><li>};<br /></li><li><br /></li><li>document.writeln("Retrive a non-exit attribute value ..exa..MyObj.people..");<br /></li><li>document.writeln(MyObj.people);<br /></li><li><br /></li><li>document.writeln("typeof MyObj.member is ...");<br /></li><li>document.writeln(typeof MyObj.member);<br /></li><li><br /></li><li>document.writeln("MyObj.record.number is ...");<br /></li><li>document.writeln(typeof MyObj.record.number);<br /></li><li><br /></li><li>document.writeln('MyObj.record.airline is ...');<br /></li><li>document.writeln(typeof MyObj.record.airline); </li></ol>

Since there is no local domain in the javascript function, The global domain is often used. Everyone with programming experience knows that global variables are very easy to mess up, so it is recommended to create a global object at the beginning like this article, and then all operations are part of it. In other words, the global object we define is actually a "global object". container".
The simple data types in JavaScript include numbers, strings, Boolean values, null values, and undefined. All other values ​​are objects, such as arrays, functions, and regular expressions. Simply put, objects in JavaScript are mutable keyed collections. Objects are composed of different attributes. The name of the attribute can be any string including the empty string, and the attribute value can be any value except undefined.

Line 2 initializes an empty global object MyObj;
Line 4 adds an attribute member to the object MyObj, and member is an object containing two key-value pairs. Each key-value pair uses ',' separated, the last attribute does not need to be added with a symbol;
The attribute name in lines 7-8 is a string. It is recommended to use the JavaScript identifier specification (numbers, letters and underscores, the first character can only be a letter) , because when writing this way, "" can be omitted to represent a string. For example, "first-name" cannot omit "", but can be written as first_name; not only that, you can conveniently use the reference symbol "." when retrieving the properties of the object. For example, MyObj.member.last_name, non-canonical identifiers can only use MyObj.member.["first-name"], which is very troublesome;

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>//对象属性值的更新<br /> </li><li>document.writeln('Attribute value update...');<br /></li><li>document.writeln(' Once Date is ' + typeof MyObj.record.departure.date);<br /></li><li><br /></li><li>MyObj.record.departure.Date = 'Saturday';<br /></li><li><br /></li><li>document.writeln(MyObj.record.departure.Date);<br /></li><li><br /></li><li>//对象枚举<br /></li><li>document.writeln('Object enume...')<br /></li><li>var name;<br /></li><li>for (name in MyObj.record)<br /></li><li>{<br /></li><li>document.writeln(name + ':' + MyObj.record[name]); </li></ol>

No. 3 Line uses typeof to obtain the type of the object. The typeof operator has only five values: "string", "boolen", "undefined", "function" and "object";
Line 5 directly updates the existing attributes. If it already exists, update it; if not, create the attribute key-value pair;
Line 9 shows enumerating all attributes of an object. With the for-in structure, we can enumerate all attributes (including Attributes in functions and prototypes), and the enumeration obtained is not necessarily in order, so it is generally recommended to use the form of for() to specify the traversal method;

Next is our program.html

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><html><br />  </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><body><br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><pre class="brush:php;toolbar:false"><br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"> <br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;">