JS programming common sense is very useful_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS programming common sense is very useful_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:47 PM

jsProgramming essentials

1. Right and wrong in JS
JS is a computer programming language, a dynamic language also called a scripting language, and an analytical programming language. Why script? Because it cannot be executed by itself, that is, there is no main function or entrance to the main program, and it must be parsed and executed by its host environment, that is, the parsing environment. Why is analytic type? Because JS does not perform programming, linking, assembly and other systematic processes to generate a file and then execute it, it will be loaded and executed in the form of a string.
2. True and false in JS
Empty, null, undefined, false, 0, "", '', NaN are all false, others are true
3. What is the difference between functions, classes, objects, and constructors?
Answer: In js, there is no difference between functions, classes, objects, and constructors. We can say that functions are objects, objects are classes, and classes are constructors. But generally, we call objects instances of that class to reduce confusion.

Copy code The code is as follows:

 
function Person(){ 
} 
 var person = new Person(); 
//Person can be called a function, class, object, constructor (without parameters) 
//person is called a reference to an object

4. Understand the this keyword, and you understand one-fifth of JS.
This always points to the object that calls the method (function). (Must memorize)
First of all, you must know that this is What?
This is an object in js. It is an object, not a function. You can regard this object as a reference to an object. Who is the reference to? Reference to the object that called the method.
Where does this object exist? Exists in JS code, usually in functions. If you put this in a <script> tag, you can try window==this. What does it print? Why? Analysis of this keyword <div class="codetitle"><a style="CURSOR: pointer" data="23656" class="copybut" id="copybut23656" onclick="doCopy('code23656')">Copy code The code is as follows:<div class="codebody" id="code23656"> function ready(){ alert(this==window); } ready(); What to call at this time? true, why? <div class="codetitle"><a style="CURSOR: pointer" data="1630" class="copybut" id="copybut1630" onclick="doCopy('code1630')">Copy code The code is as follows:<div class="codebody" id="code1630"> function Person(){ this.name= 'Zhang San'; alert(this==window); } new Person(); What to print at this time? false,why? Make the code longer. Add a var perso= var person = new Person(); Everyone in the world knows that person refers to the object generated by new Person. new Person creates a JS instance object, and we can bind properties and methods. Look at the following code <div class="codetitle"><a style="CURSOR: pointer" data="41151" class="copybut" id="copybut41151" onclick="doCopy('code41151')">Copy code The code is as follows: <div class="codebody" id="code41151"> fn=function(){ } fn.ready=function(){ alert(this== fn); } What is printed when fn.ready() is called? true ,why? Very strange, this is now equal to a function.. Why? 5. Static methods and attributes in JS will help you . What is static. As the name implies: it means it doesn’t move. What is the method that doesn’t move in JS? There is no need to create an instance, you can directly call the method through the class name, nothing is touched. The method is called. No additional code is required. This is just a one-sided statement. The so-called static: It is the characteristics of the class itself. Since classes in JS are objects, why can’t they directly bind properties and methods. Of course. <div class="codetitle"><a style="CURSOR: pointer" data="22588" class="copybut" id="copybut22588" onclick="doCopy('code22588')">Copy code The code is as follows:<div class="codebody" id="code22588"> fn=function(){ } fn.name='Zhang San'; fn.getName=function(){ return fn.name; } That’s okay, but why do you need the new process? Isn’t it enough to bind them all like this? Thinking 6. The impact of prototype and constructor in the JS framework Prototype is a prototype, which is an object. ,. Constructor is a constructor and a function Up to now, you have to distinguish clearly when an object is an object and when an object is a function. It is also difficult for the JS parser to parse and run such a flexible code. Prototype can be said to be a static attribute of a class, which points to an instance of this object. In other words prototype is an object. What is the difference between the object pointed to by prototype and the object of our new? An equivalent bridge relationship is established, but it is not the same. When we bind properties on the function prototype, the properties and values are bound to the prototype object and are not really bound to that object. When you need to access this property on that object, the JS parser will first look for the property on the object itself, and then on the prototype object. <div class="codetitle"><a style="CURSOR: pointer" data="4834" class="copybut" id="copybut4834" onclick="doCopy('code4834')">Copy code The code is as follows:<div class="codebody" id="code4834"> function Person(){ } var person = new Person(); person.name="Zhang San"; Person.prototype.name="李思"; alert(person.name); delete person. name; alert(person.name); constructor points to the constructor of an object. (What is a constructor? Review it yourself.) From this, we can see that it is an object-level attribute. That is to say, to use the constructor attribute, you must need an object. So prototype is an object and does it have a constructor attribute? Of course, since constructor refers to the constructor, is there a prototype attribute? Of course, by analogy, the following two pieces of code are correct. constructor.prototype.constructor.prototype.constructor…… prototype.constructor.prototype.constructor.prototype…… Actually, I do too Don’t know how long it can last? If you are interested, you can try it. By the way, I will tell you to use recursive algorithm. In many JS codes, when we know an object, we ask for its constructor, or we know a constructor and ask for its object. It’s time to get started. 7. == and === will make the judgment to the end . == and === are not alike. Don’t think about it. You can tell at a glance whether they are equal. . Is there any difference? == Determine whether the variables are equal. === determines whether the values of variables are equal. And so on: ====What is it used for? ? Used to report errors. You know it. I just want to tell you here that only == and === Variables in JS are weakly typed, everyone knows it. <div class="codetitle"><a style="CURSOR: pointer" data="31537" class="copybut" id="copybut31537" onclick="doCopy('code31537')">Copy code The code is as follows:<div class="codebody" id="code31537"> var a=3; var b=” 3"; alert(a==b); The value of variables in JS is strongly typed. You know. var a =3; var b =”3”; alert(a===b); Both are variables of var type, but their values are different. One is an integer and the other is a string type. Compared with the var type, of course the var type is true, and of course the integer type is compared with the string type. is false. == is used to compare whether their values are the same. It will not be the type of the calculated value, as long as their variables are of var type. Of course it's nonsense. Is it possible that you can't declare a variable of the second variable type? . === is used for comparison to determine whether their values are of the same type. If not, there is no comparison. The values of variables in JS are strongly typed, including integers, strings, numbers, Boolean, etc. 8.typeof and instanceof complete the mission of judging failure typeof is used to judge basic data Type instanceof is used to determine whether the object type is a certain type number 9.5 types of inheritance make you even more powerful. i. Object impersonation ii.apply iii. call iv.prototype v.for loop method Usage: Always remember that inheritance in JS is just a copy of properties and methods. 10. DOM model structure changes you The idea of DOM is an idea, an idea of structuring data in a tree shape. To learn DOM, you only need to understand that any node has a parent node and 0 to more child nodes. Any node has a label representation on the page and a memory corresponding to a label object. The page is just a place to display data, in the memory This is where the DOM object data is saved. Any DOM object can only have one parent node object. The father-son relationship can change at any time. Must: Get object: check Object operation: add, modify, delete Content operation: innerHTML, innerText, etc. Event operation: mouse, key Style operation: id, tag, class Attribute operations: attribute 11. Callback function reduces code writing What is a callback function? In JS, the function name is used to identify a function. That is, we can pass a function name (function name handle) to a certain function, and then that function will automatically call our function to complete the relevant processing. The caller and the callee are separated, we don’t need to care about the caller and the callee. Callbacks can be used for notification mechanisms, events. 12. Functions and arguments The function name is the handle, pointer, and function name of the function. It is unique, which also means that there is no function overloading in JS. Only function overrides. The function name uniquely identifies the function. Always need to visit carefully. The function call in JS is to add the brackets () after the function name. The parameters of the function call are optional. No matter what the situation, the parameters will be saved in the arguments object in the function body. , you can use it directly, it is an object, and the parameters are stored in the form of an array. 13. Closures (anonymous functions) open up shortcuts for development Closures are parameters within a function that are called outside the function. They are generally also called anonymous functions, but they are different. . The value of closures is that they can be used as function objects or anonymous functions. For the type system, this means not only representing data but also code. Most languages that support closures use functions as first-level objects, which means that these functions can be stored in variables, passed as parameters to other functions, and most importantly, can be dynamically created and returned by functions. Anonymous functions Reduces variable name conflicts and provides permission scope for JS that does not have permission scope. When we need to provide an interface but don’t want the interface object to be a global variable, we need to use an anonymous function: (function(){ Local code can never be accessed from the outside unless you provide an entrance })();</script>

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

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。