GitHub star 13.1k, basic knowledge of JavaScript (1)! Front end entry must see!

Front end floating brother 2020-11-10 16:01:06
github star 13.1k basic knowledge


JavaScript background

Web The front end has three layers :

  • HTML: From the semantic point of view , Description page structure
  • CSS: From an aesthetic point of view , describe style ( Beautify the page )
  • JavaScript: From an interactive point of view , describe Behavior ( Realize business logic and page control )

The development history

JavaScript Born in 1995 year . brandon • Eyki (Brendan Eich,1961 year ~),1995 At Netscape in , Development apart from JavaScript Language .

JavaScript By netscape company (Netscape) The invention , It was originally named LiveScript;1995 year 12 Month and SUN Company cooperation , Because of the need of marketing , Renamed as JavaScript.

later Sun company By Oracle Acquisition ,JavaScript Copyright Oracle all .

remarks : Due to the Java This language is very popular , So in order to be a big player , Just change the name to JavaScript. Like “ Peking University ” and “ Peking blue bird ” The relationship between .“ Peking blue bird ” It's just the side of “ Peking University ” Big .

At the same time, there were other web languages , such as VBScript、JScript wait , But later they were all JavaScript Beat , So now in the browser , Running only one scripting language is JavaScript.

1996 year , Microsoft to seize the market , Launched JScript stay IE3.0 Use in .

1996 year 11 Monthly Netscape will JS Submit to ECMA( International Organization for Standardization ) Become an international standard , Against Microsoft .

JavaScript It's the most used... In the world Scripting language .

JavaScript The development of : Be on the upgrade

2003 Years ago ,JavaScript It is believed that “ The cattle hide is fresh ”, Used to make ads on the page , Popup 、 Floating advertising . What's annoying , What is it JavaScript Developed . So many browsers have launched the function of blocking advertisement .

2004 year ,JavaScript Fate began to change . That year , Google is taking the lead in using Ajax technology ,Ajax Technology is JavaScript An application of . also , At that time, people began to improve the user experience .Ajax There are some scenarios . such as , When we search for words in Baidu search box , The smart prompt below the input box , Can pass Ajax Realization . such as , When we sign up for Netease email , Can discover whether the user name is occupied in time , You don't have to switch to another page .

2007 Jobs released the first iPhone, The year begins , Users have more access to the Internet , It's using mobile devices to surf the Internet . JavaScript In the mobile page , It's also indispensable . And this year , The Internet began to standardize , according to W3C Three levels of rule separation ,JavaScript More and more attention .

2010 year , People know more about HTML5 technology ,HTML5 There's something called Canvas( canvas ), The engineer can be in Canvas On the game making , What we use is JavaScript.

2011 year ,Node.js Be born , send JavaScript Can develop server program .

Now ,WebApp It's already very popular , Just use Web technology to develop mobile applications . The mobile phone system has iOS、 Android . For example, the company wants to develop a “ ctrip ”App, We need to recruit three teams , such as iOS The engineer 10 people , Android Engineers 10 people , Front end engineer 10 people . common 30 people , Development costs are high ; And if you want to change it , To change 3 A version . Now? , Suppose companies use web technology , use html+css+javascript Technology can be developed App. It's also easy to iterate ( As soon as the web page changes , All the terminals have changed ).

Although at present WebApp(Web application ) The experience in function and performance is not as good as Native App( Native applications ), however “ In a native App A part of it is embedded in it H5 page ” It's already a trend .

JavaScript Introduce

Easy to learn

  • JavaScript It's friendly to beginners 、 Simple and easy to use . You can use any text editing tool to write , You just need a browser to execute the program .
  • JavaScript It has interface effect ( by comparison ,C The language only has white background and black characters ).
  • JavaScript yes Weak variable type Language , Variables only need to use var/let/const To declare . and Java Declaration of variables in , Define... According to the type of variable .

such as Java The following variables need to be defined in :

int a;
float a;
double a;
String a;
boolean a;

and JavaScript in , There is only one way to define :

// ES5 How to write it
var a;
// ES6 How to write it
const a;
let a;

JavaScript It's the front-end language

JavaScript It's the front-end language , It's not backstage language .

JavaScript Run on the user's terminal web page , Not on the server , So we call it “ Front-end language ”. It's the interactive effect of serving the page 、 beautify , Can't operate database .

Background language It's running on the server , such as PHP、ASP、JSP wait , These languages can operate databases , All of them can do “ Additions and deletions ” operation .

remarks :Node.js Yes, it is JavaScript Developed , Now it can also be based on Node.js Technology for server-side programming .

JavaScript The composition of

JavaScript The foundation is divided into three parts :

  • ECMAScript:JavaScript Of Grammar standards . Including variable 、 expression 、 Operator 、 function 、if sentence 、for Statement etc. .
  • DOM:Document Object Model( Document object model ), operation Elements on the page Of API. Let the box move 、 Color change 、 Change size 、 The rotation chart and so on .
  • BOM:Browser Object Model( Browser object model ), operation Some functions of browser Of API. adopt BOM You can operate the browser window , For example, pop box 、 Control browser jump 、 Get browser resolution and so on .

Popular understanding is that :ECMAScript yes JS The grammar of ;DOM and BOM The browser running environment is JS Provided API.

JavaScript Characteristics

characteristic 1: Explanatory language

JavaScript It's interpreted language , It doesn't need to be translated into machine code in advance ; It's translation and execution ( Translation line , Execute a row ).

What is? 「 Explanatory language 」? See the next paragraph .

Due to the lack of implementation of the compilation step , So it's especially convenient to develop interpretive languages , But it's also a disadvantage that interpretive languages run slowly . But in explanatory language JIT technology , So that the running speed can be improved .

characteristic 2: Single thread

characteristic 3:ECMAScript standard

ECMAScript It's a kind of ECMA The international ( Formerly known as the European Association of computer manufacturers , The English name is European Computer Manufacturers Association) Develop and publish scripting language specifications .

JavaScript Developed by the company , The problem is that it is not convenient for other companies to expand and use . So this one in Europe ECMA Organization , Lead the development of JavaScript Standards for , named ECMAScript.

Simply speaking ,ECMAScript It's not a language , It's a standard .ECMAScript Specifies the JS Programming syntax and basic core knowledge , It's a set that all browser manufacturers follow JS Grammar industry standard .

ECMAScript stay 2015 year 6 month , Released ECMAScript 6 edition (ES6), The ability of language is stronger ( It also includes a lot of new features ). however , Browser vendors won't catch up so fast , It takes time to .

Classification of programming languages

translator

Computers can't directly understand any language other than machine language , So we have to translate the language written by the programmer into machine language , Computers can execute programs . A tool for translating programming languages into machine languages , It's called a translator .

thus it can be seen , So-called “ translate ”, It refers to the instructions that can be translated into computer .

There are two ways to translate : One is compile , The other is explain . The difference between the two ways is The time to translate Different .

  • compiler : Before code execution , Translate all the codes at one time in advance , Generate intermediate code file , And then the whole implementation .
  • Interpreter : Translate at the same time , While executing ( Translate in time when the code executes , And execute immediately ). When the compiler runs in interpreted mode , Also known as interpreter .

The corresponding language , be called “ Compiler language ”、“ Explanatory language ”.

Compiler language

  • Definition : Translate all the code in advance , And then the whole implementation .
  • advantage : Run faster .
  • Insufficient : Poor portability , No cross platform .
  • Examples of compiled languages :c、c++

for instance ,c Language code file is .c suffix , After translation, the document is .obj suffix , What the system does is obj file ; Another example , java Language code file is .java suffix , The translated document is .class suffix .( Be careful ,Java Language is not strict Compiler language , I'll talk about this later )

Explanatory language

  • Definition : Translate and execute ( Translation line , Execute a row ), No need to translate in advance .
  • advantage : Good portability , Cross platform .
  • shortcoming : Slower to run .
  • Examples of interpretive language :JavaScript、php、Python.

Java Language

Java Language is not a compiled language , It's not an interpretative language . translation process :

(1) compile :.java Code file first through javac Command compiled into .class file .

(2) perform :.class Re adoption of documents jvm virtual machine , Explain to perform . With jvm The existence of , Give Way java Cross platform .

Start writing the first line JavaScript Code

JavaScript Where is the code written ? This problem , It can also be interpreted as : introduce js Code , What are the ways .

The way 1: Inline

The code for

<input type="button" value=" Point me, please. " onclick="alert(' Qiangu No.1 ')" />

The complete executable code is as follows :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="button" value=" Point me, please. " onclick="alert(' The way of the one 1')" />
</body>
</html>

analysis

  • Single or small JS The code is written in HTML In the event attribute of the tag ( With on The properties of the beginning ), Like the one on it  onclick Click on the event .
  • This way of writing , It is not recommended to use , as a result of : Poor readability , In particular, a large number of JS Code , It's easy to make mistakes ; When quotes are nested in multiple layers , It's also easy to make mistakes .
  • About... In the code 「 quotes 」, stay HTML In the label , We recommend using double quotation marks , JS We recommend using single quotation marks .

The way 2、 embedded

We can do it in html Page  <body>  Put... In the label <script type=”text/javascript”></script> The label is right , And in <script> Internal writing JavaScript Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// Write here js Code
alert(' The way of the one 2');
console.log('qianguyihao The way 2');
</script>
</body>
</html>

analysis

  • text For plain text , because JavaScript It's also a plain text language .
  • You can do more than one line JS The code writes  <script>  In the label .
  • embedded JS It's a common way of learning .

The way 3: Introducing external JS file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Introducing external js file -->
<script src="tool.js"></script>
</body>
</html>

The above code , Still put it in body In the label , Can be used with embedded js Code juxtaposition .

in addition , Quote external JS Of documents script No more code can be written in the middle of the label .

summary

We are in actual development , Basically, it's all in the form of 3, Because in this way , To ensure that html Document and js The documents are separate , It's good for the structure and reuse of code . Few people put a lot of js The code is jammed into html In the document .

JS Some simple grammar rules

Learning program , There are rules to follow , The program will have the same parts , These parts are a kind of regulation , Can't change , We become : grammar .

(1)JavaScript Yes, line break 、 Indent 、 Space is not sensitive . Each statement ends with a semicolon .

Code 1 :

<script type="text/javascript">
alert(" Today, blue sky and white clouds ");
alert(" I'm glad ");
</script>

Equivalent to code two :

<script type="text/javascript">
alert(" Today, blue sky and white clouds ");alert(" I'm glad ");
</script>

remarks : Add a semicolon at the end of each statement , Although semicolons are not necessary , If you don't write a semicolon , The browser will automatically add , But it will consume some system resources .

(2) All the symbols , It's all in English . such as Brackets 、 quotes 、 A semicolon .

If you use Sogou Pinyin , Not recommended shift Switch between Chinese and English ( You can set it in Sogou software ), Otherwise, it's easy to enter a semicolon in Chinese ; Suggest using ctrl+space Switch between Chinese and English input method .

(3) Case sensitive .

notes

Let's not take HTML、CSS、JavaScript The annotation formats of the three are confused .

HTML Notes

<!-- I am a comment -->

CSS Notes

<style type="text/css">
/*
I am a comment
*/
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>

Be careful :CSS Only /* */ This note , No, // This note . And the notes should be written in <style> It's only effective in the label .

JavaScript Notes

Single-line comments :

// I am a comment

Multiline comment :

/*
Multiline comment 1
Multiline comment 2
*/

Add :VS Code in , The shortcut for a single line comment is 「Ctrl + /」, The default shortcut for multiline comments is 「Alt + Shift + A」.

Of course , If you find the default shortcut for multiline comments inconvenient , We can also change the default shortcut key . The operation is as follows :

VS Code --> Preferences --> Keyboard shortcuts --> lookup “ notes ” These two words --> Change the original shortcut key to 「Ctrl + Shift + /」.

Javascript I / O statement

Pop up warning box :alert sentence

The first sentence we're going to learn , Namely alert sentence .

The code example is as follows :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
alert(' Qiangu No.1 ');
</script>
</body>
</html>

alert( Translated into English “ alert ”) Use of : eject “ Warning box ”.

alert("") The effect of the warning box is as follows :

This warning box , stay IE The browser looks like this :

In the above code , If you write two alert() In words , The effect of the web page is : Pop up the first warning box , Click OK , Continue to pop up a second warning box .

Console output :console.log("")

console.log("") Indicates output... In the console .console Express “ Console ”,log Express “ Output ”.

stay Chrome Browser , Press F12 You can open the console , choice 「console」 bar , You can see the printed content .

console.log("") The effect is as follows :

The console is the Engineer 、 Where programmers debug programs . Programmers often use this statement to output something , To test whether the program is correct .

Ordinary people don't care about the console , But some websites have hidden secrets . One of the interesting things is , Baidu home console , Quietly put a piece of Recruitment Information :

After all, front-end people often use the console .

summary :alert() Mainly used to display messages to users ,console.log() It's used for programmers to debug themselves .

Pop up the input box :prompt() sentence

prompt() It is specially used to pop up a dialog box that allows users to input . Use less , Sometimes I use .

JS The code is as follows :

var a = prompt(" Please input something ");
console.log(a);

In the top code , User input content , Will be passed to variable a Inside , And print it out on the console .

The effect is as follows :

prompt() In the sentence , No matter what the user enters , All strings .

alert() and prompt() The difference between :

  • alert() You can use it directly .
  • prompt() It will return the user's input . We can use a variable , To receive user input .

Last

A digression , I have been working in the first-line Internet enterprises for more than ten years , I have guided many of my peers . Help a lot of people to learn and grow .

I realize that there is a lot of experience and knowledge to share with you , We can also answer the question through our ability and experience in IT A lot of confusion in learning , So in the case of busy work or adhere to a variety of collation and sharing .

I can share the latest front-end interview questions for free , It includes HTML、CSS、JavaScript、 Server and network 、Vue、 Browsers and so on , Help everyone learn and improve .

Friends in need Click here to get the title for free + analysis PDF.

 Limited space , Show only part of the content
 Limited space , Show only part of the content
 Limited space , Show only part of the content

Click here to get the title for free + analysis PDF.

版权声明
本文为[Front end floating brother]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple