search

Home >Web Front-end >JS Tutorial >Introduction to JavaScript learning_Basic knowledge

Introduction to JavaScript learning_Basic knowledge

PHP中文网
PHP中文网Original
2016-05-16 19:00:421026browse

Every time when we first start learning a language, the author likes to use the "hello world" example to insult our IQ. I think everyone is not stupid, so I wrote a few words

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>Document.writeln()方法title>
<script language="javascript">
function createsummary()
{
     win2=open("","window2")
     //win2.document.open("text/plain")
     win2.document.writeln("title" document.title)
     win2.document.close()
}
script>
head>
<body>
<a name="#top">a>
    <form>
       <input type="button" name="help" value="help"onClick="createsummary()">
form>
<body>
html>

Say something Knowledge points:

1: JavaScript is a case-sensitive language.

2: It is recommended to use ';' for each line;

3: The first letter of the name must be a letter, underscore or '$';

4: In Variables are declared using var in JavaScript, and they are permanent;

5: There is no block-level scope. For example:

Var scope="globle";
function f(){
alert(scope); //Display "underfined＂ instead of "globle"
 Var scope="local" ;
alert(scope);
}
F();

has the same meaning as the following code example

Var scope ="globle";
function f(){
Var scope;
alert (scope); //Shows "underfined" instead of "globle"
 Var scope ="local";
alert(scope);
}
F();

Suggestion: It is a good programming habit to gather all variable declarations at the beginning of the function.

6: The ECMAScript standard stipulates that functions cannot be overloaded, such as

function doadd(i){
alert(i);
}

function doadd(i){
alert(i);
}
doadd(10);

The latter function is actually executed, and the second one covers the first function;

7: Use of arguments object.

function doAdd()
If(arguments.length==1){
  alert(arguments[0] 10);
}

If(arguments.length==2){
alert(arguments[0 ] arguments[0);
}

doAdd(10);
doAdd(10,20);

Running effect: Slightly...

8: How to use JavaScript arrays

1.join()

array.join puts all the elements in the array Convert to String and then join it. You can specify optional String separated elements. The default is ","

var a = [1,2,3];

var s = a.join(); ==> s="1,2 ,3"

s = a.join(","); ==> s="1, 2, 3"! The results are slightly different

array.join() is the opposite of String.split() (split the String into several pieces to build an Array)

2.reverse ()

array.reverse() reverses the order of array elements and returns the reversed array, and performs operations on the original array

var a = new Array(1,2,3); 🎜>] =1, a[1] = 2, a[3] = 3a.reverse(); ==> a[1

] = 3, a[2] = 2, a[3] = 1var s =

a. join(); ==>s = "3,2 ,1"3.sort()array.sort() in the original Sort the elements on the array and return the sorted array. The default is alphabetical ordering. Otherwise, the comparison function should be passed as the sort() parameter

var a = new Array("A", "C", "B");

a.sort();

var s = a.join("/");  ==>s = "A/ B/ C";

var a = [1, 3, 4];

a.sort(

    function(a,b)

    {

          return a - b;

    }

) ;    ==>按<0,0,>0返回　1, 3, 4

toLowerCase(), toUpperCase()转换字母大小写

4.concat()

create, and return array 包含调用concat()的原array中的elements, 其后是concat()参数，若为array将被展开

但不能递归展开

var a = [1,2,3];

a.concat(4,5);   ==>[1,2,3,4,5]

a.concat([4,5], [6,7]); ==>[1,2,3,4,5,6,7]

a.concat(4, [5, [6, 7]]);  ==>[1,2,3,4,5,[6,7] ]

5.slice()

array.slice() return指定array的一个slice, 两参数指定要返回片断的起止,返回array含一参但不含二参

若只有一参无二参,返回由一参起其后所有的elements,若有一参为负是相对array最后的element而言的

-1指定array最后一个elements, -3指定array的最后一个element起,倒数第3个elment

var a = [1,2,3,4,5];

a.slice(0,3); >[1,2,3] a.slice(
3
); 🎜>,5]a.slice(1,-1
); 3
, 4]a.slice(-3, -2); ==>[3
]
6.splice()array.splice() is universal for insert or delete or both insert delete elements method, modified on the original array, the elements after being inserted or deleted will be moved as necessary. The first two parameters refer to delete. The first parameter specifies the location of the element in the array to be deleted, and the second parameter specifies the deletion. There can be N parameters after these two parameters, specifying the elements to be inserted starting from the location specified by parameter 1

var a = [1,2,3,4,5,6,7,8]

var a.splice(4);    ==>return[5,6,7,8]  a=[1,2,3,4]

a.splice(1,2);      ==>return[2,3]  a=[1,4]

a.splice(1,1);     ==>return[4] a=[1]

var a = [1,2,3,4,5]

a.splice(2,0,'a','b');     ==>返回[] a =[1,2,'a','b',3,4,5]

a.splice(2,2,[1, 2},3); ==>Return ['a','b' ] a =[1,2, 3,[1,2],3,3,4,5]

7.push() pop()

Use array like stack(), modify the original array, FILO(first in last out) push() will Multiple elements are appended to the end of the array, returning the new array length pop(). Instead, delete the last element of the array, subtract the array() length, and return the deleted value

var stack = [];

stack.pust(1,8);    ==>[1,8]  return 2

stack.pop();         ==>[1]  return 8

stack.push(3);    ==>[1,3]  return 2

stack.pop();     ==>[1]  return 3

stack.push();    ==>[1,[4,5] ] return 2

stack.pop();     ==>[1] return [4,5]

stack.pop();    ==>[]  return [1]

8.unshift() shift()

与push() pop()相似　只是在array的头部进行insert delete 而非在尾部unshift()return新array length, insert N个elements的时候是一次性被insert的shift()return新array第一个element

var a = [];

a.unshift(1);    ==>a:[1]  return 1

a.unshift(22);   ==>a:[22,1] return 2

a.shift();      ==>a:[1]  return22

a.unshift(3, [4,5]);   ==>a:[3,[4,5]],1] return 3

a.shift()    ==>a:[[4,5], 1]  return 3

a.shift()  ==> a:[1]  return[4,5]

a.shift() ==>a:[] return 1

9.toString() toSurce()

[1,2,3].toString();    ==>"1,2,3"

['a', "b", "c"].toString();  ==>"a,b,c"

[1,[2.'c ']].toString(); ==>"1,2,c"

toLocaleString() is a localized version of toString, which will call the toLocaleString() method of each element to convert array elements to String. The generated String is then concatenated with local-specific (and implementation-defined) delimiters

9:

Global object is the most special object in ECMAScript , because in fact it doesn't exist at all. If you try to write the following code, you will get the error:

The error message shows that Global is not an object, but didn’t I just say that Global is an object? That’s right . The main concept to understand here is that in ECMAScript, there are no independent functions, all functions must be methods of some object. For functions introduced earlier in this book, such as isNaN(), isFinite(), parseInt(), and parseFloat(), etc., see They all look like independent functions. In fact, they are all methods of the Global object. And the Global object has more than these methods. The

encodeURI() and encodeURIComponent() methods are used to encode the URI (Uniform Resource Identifier) ​​passed to the browser. A valid URI cannot contain certain characters, such as spaces. These two methods are used to encode the URI so that all non-valid characters are replaced with a specialized UTF-8 encoding so that the browser can still accept and understand them. The

encodeURI() method is used to process the complete URI (for example, http://www.php.cn/ value.htm), while the encodeURIComponent() is used to process a fragment of URI (such as illegal value.htm in the previous URI). The main difference between these two methods is that the encodeURI() method does not encode special characters in the URI, such as colons, forward slashes, question marks, and pound signs, while encodeURIComponent() does Encodes any non-standard characters it finds. For example:

This code outputs two values:

OK As you can see, there is no change in the first URI except for spaces, which are replaced with . All non-alphanumeric characters in the second URI are replaced with their corresponding encodings, essentially rendering this URI useless. This is why encodeURI() can handle complete URIs, while encodeURIComponent() can only handle strings appended to the end of existing URIs.

Naturally, there are two methods for decoding encoded URIs, namely decodeURI() and decodeURIComponent(). As you might expect, these two methods do exactly the opposite of their counterparts. The decodeURI() method only decodes characters replaced with the encodeURI() method. For example, %20 will be replaced with a space, while %23 will not be replaced because it represents the pound sign ( #), encodeURI() does not replace this symbol. Likewise, decodeURIComponent() will decode all encodeURIComponent()encoded characters, meaning it will decode all special values. For example:

This code outputs two values:

In this example, the variable uri stores the string encoded with encodeURIComponent(). The resulting values ​​illustrate what happens when both decoding methods are applied. The first value is output by decodeURI(), replacing with spaces. The second value is output by decodeURIComponent(), replacing all special ones.

The last method is probably the most powerful method in the entire ECMAScript language, the eval() method. This method is like the entire ECMAScript interpreter, accepting one parameter, which is the ECMAScript (or JavaScript) string to be executed. For example:

The function of this line of code is equivalent to the following code:

When the interpreter finds the eval() call, it will interpret the argument as a real ECMAScript statement and insert it where the function is. This means that variables referenced inside the eval() call can be defined outside the parameters:

Here, the variable msg is eval() is defined outside the calling environment, and the warning still displays the text "hello world", because the second line of code will be replaced with a line of real code. Similarly, you can define functions or variables inside the eval() call, and then reference them in code outside the function:

Here, function sayHi() is defined inside the eval() call. Because the call will be replaced with a real function, sayHi() can still be called on the next line.

GlobalThe object not only has methods, it also has properties. Remember those special values ​​undefined, NaN and Infinity? They are all properties of the Global object. In addition, the constructors of all local objects are also properties of the Global object.

10;

open(URL,WindowName,parameterList): The open method creates a new browser window and loads a specified URL address in the new window.
close(): The close method closes a browser window.
alert(text): Pops up an information box.
confirm(text): Pops up a confirmation box.
prompt(text,Defaulttext) : Pops up a prompt box.
setTimeout(expression, time): Timing setting, automatically execute the code described by expression after a certain time, use time to set the time, the unit is milliseconds.
clearTimeout(timer): Cancel the previous Timing settings.
back(): Instructs the browser to load the previous URL address in the history.
forward(): Instructs the browser to load the next URL address in the history.
stop( ): Instruct the browser to stop loading the web page.
location: Provide the URL information of the current window

(expression, time): Timing setting, automatically execute the expression description after a certain period of time The code uses time to set the time, the unit is milliseconds.>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js simulates computer selection of multiple folders_selection code_javascript skillsNext article：js simulates computer selection of multiple folders_selection code_javascript skills

Related articles

See more