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


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 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">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<input type="button" value=" Point me, please. " onclick="alert(' The way of the one 1')" />


  • 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">
<meta charset="UTF-8">
<script type="text/javascript">
// Write here js Code
alert(' The way of the one 2');
console.log('qianguyihao The way 2');


  • 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">
<meta charset="UTF-8">
<!-- Introducing external js file -->
<script src="tool.js"></script>

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 .


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 ");

Equivalent to code two :

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

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 .


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
font-weight: bold;
font-style: italic;
color: red;

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">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
alert(' Qiangu No.1 ');

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 ");

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 .


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. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云