JavaScript is the best language in the world
Maybe the best language in the world can vary a lot, but for me, JavaScript is the best language in my mind, From a responsive programming toy language, JavaScript can do anything and has gone beyond language to become an ecosystem of powerful functions. JavaScript can do far more than its designers ever imagined. Let me give you a brief history of JavaScript
The past and present of JavaScript
“In 1994, Netscape released version 0.9 of its Navigator browser. It was the first full-fledged web browser in history, and it was a hit. However, this version of the browser can only be used for browsing and does not have the ability to interact with visitors. … Netscape desperately needed a web scripting language so that browsers could interact with the web.” What is a Web scripting language? Netscape had two options: one was to take existing languages like Perl, Python, Tcl, Scheme, and so on, and allow them to be embedded directly into web pages; The other is inventing a whole new language. Both options have their pros and cons. The first option is easier to promote by taking advantage of existing code and programmer resources. The second option, which favors a fully applicable language, is easier to implement. Netscape’s management struggled to make up its mind about which option to pursue. That’s when another big thing happened: Sun introduced the Oak language to the market in 1995, renamed Java. With Sun’s hype that it could “Write Once, Run Anywhere,” it seemed likely to dominate the future. Netscape was moved and decided to form an alliance with Sun. Not only does it allow Java programs to run directly in the browser as applets; I even considered embedding Java directly into web pages as a scripting language, only to abandon it later because it would have made HTML pages too complex. Anyway, the situation was that the entire management of Netscape was Java believers, and Sun was completely involved in the web scripting language decisions. As a result, Javascript was later brought to market by netscape and Sun, and it was no accident that the language was named “Java+ Script”. Enter Brendan Eich, a 34-year-old systems programmer. Netscape hired him in April 1995. Brendan Eich’s primary interest and interest is functional programming, and netscape recruited him to investigate the possibility of using the Scheme language as a web scripting language. Brendan Eich himself felt the same way, assuming that he would be working primarily with Scheme when he arrived at his new company. Just a month later, in May 1995, Netscape decided that the web scripting language of the future would have to “look similar enough to Java” but be simpler than Java to make it easy for non-professional web authors to learn. This decision effectively excludes non-object-oriented programming languages such as Perl, Python, Tcl, and Scheme. Brendan Eich was designated as the designer of this “simplified Version of the Java language.” However, he has no interest in Java at all. He designed Javascript in just 10 days to meet the company’s demands. Because the design time was too short, some of the details of the language were not carefully considered, resulting in a long time later, Javascript written programs chaotic. If Brendan Eich had foreseen a future in which this language would be the number one language on the Internet, with millions of learners worldwide, would he have taken a little more time? In general, his design ideas are as follows: (1) use the basic syntax of C language for reference; (2) Use the Java language for data types and memory management; (3) Using Scheme language to upgrade functions to the status of “First class citizens”; (4) Use Self language for reference and inheritance mechanism based on prototype. So the Javascript language is really a hybrid of two language styles — (simplified) functional programming + (simplified) object-oriented programming. This was decided by Brendan Eich (functional programming) and Netscape (object-oriented programming). Years later, Brendan Eich still despises Java. “The impact of Java [on Javascript] was basically separating data into primitive types and object types, like strings and string objects, and introducing the Y2K problem,” he says. That’s unfortunate.” Whether it is desirable to wrap primitive data types as objects is a matter of the moment. The Y2K problem is directly related to Java. It is assumed that date.getYear () should return the last two digits of the year. JavaScript is a lightweight scripting language. Scripting language means that it does not have the ability to develop operating systems, but is used only to write “scripts” that control other large applications. JavaScript is an embedded language. It doesn’t provide much of a core syntax by itself, and can only be used to do mathematical and logical operations. JavaScript itself does not provide any API related to I/O (input/output), but is provided by the host environment, so JavaScript is only suitable for embedding in larger application environments to invoke the underlying API provided by the host environment. Currently, there are several host environments that have embedded JavaScript, the most common being the browser, and the server environment, the Node project. Syntactically, the JavaScript language is an “object model” language. Through this model, the various host environments describe their own functionality and operational interfaces, and thus control these functionality through JavaScript. However, JavaScript is not a pure “object-oriented language” and supports other programming paradigms (such as functional programming). This leads to JavaScript having multiple solutions to almost any problem. As you read this book, you’ll be amazed at how flexible JavaScript syntax is. JavaScript’s core syntax is fairly compact, consisting of just two parts: basic syntax constructs (such as operators, control structures, statements) and the standard library (which is a set of objects with various functions such as Array, Date, Math, etc.). In addition, various hosting environments provide additional apis (that is, interfaces that can only be used in that environment) for JavaScript invocation. In the case of browsers, the additional apis they provide can be divided into three broad categories.
Why is JavaScript both the best and most popular language in the world
Stack Overflow Leaderboards
In June 2015, JavaScript passed Java as the hottest hashtag on Stack Overflow
New Web development technologies like React, Node.js, and AngularJS are gaining momentum.
JS was the hottest technology for four consecutive years from 2013 to 2016
Full stack engineers’ favorite technology, JS first
What can Javascript do? Before we think about what JavaScript can do, let’s look at the following question:
What can a kitchen knife do but cut vegetables? Wear it for protection at night; During the day, he wore a suit that could carry B. Back can open nuts; And you can pick up beer; Home decoration can be cut wood; The side can also nail (hard shot); On the ground can cushion table feet; Anyway, use your imagination, this knife can do a million things, but 99% of people use it to cut vegetables, because that’s what it’s best for. ~~~~~~ just kidding. Back to business ~~~~~
1. The Web front end believes this this is no doubt, in the position of the Web front end is currently no language can shake its hegemony.
Node.js is a Javascript runtime environment developed by Ryan Dahl and released in May 2009. It is essentially a wrapper around Chrome V8 engine. Node.js optimizes specific use cases and provides alternative apis to make V8 work better in non-browser environments. It moves Javascript to the server side, which allows Web applications to be done in just one language.
Electron is an open source library developed by Github for building cross-platform desktop applications using HTML, CSS, and JavaScript. Electron does this by merging Chromium and Node.js into the same runtime environment and packaging it as an application for Mac, Windows, and Linux
4. React Native (RN for short) is a cross-platform mobile application development framework opened by Facebook in April 2015. It is a derivative of Facebook’s early open source JS framework React on the Native mobile application platform. Currently supports iOS and Android platforms. RN uses the Javascript language, HTML-like JSX, and CSS to develop mobile applications, so technicians familiar with Web front-end development can enter mobile application development with minimal learning. A set of code that runs on the Web, Android, and IOS.
Cocos2d, one of the most popular 2D game engines in the world, and one of the most popular 3D game engines support JS development. Cocos2d focuses on small and medium SIZED 2D games while Unity 3D focuses on large 3D games. Cocos2d-js is a cross-platform game engine, using native JavaScript language, can be published to the Web platform, iOS, Android, Windows Phone8, Mac, Windows and other platforms. Based on the MIT open Source license, the engine is completely open source, free, easy to learn and use, with active community support. Cocos2d-js makes 2D game programming easier and more efficient. Compared with other similar game frameworks, it defines the basic components of 2D game programming more clearly, uses API design that is easy to learn and use, and uses the world’s leading scripting binding solution with native performance to realize the cross-native platform release of games, which is more efficient to develop and the most simple to use.
Cylon.js is a Javascript framework developed for robotics and the Internet of Things. It supports 19 different hardware and software platforms. Our goal is to make it as easy to develop software devices as it is to develop web pages.
You can also compile the language that you’re good at into JavaScript and see that JavaScript is all over the place and can do everything, and you’re worried that you can’t do it now, don’t worry, There are a lot of tools out there that will help you compile your language to Javascript compile Java to Javascript compile C/C++ code to Javascript compile Ruby code to Javascript compile.NET code to Javascript JavaScript
Now that we’ve covered JavaScript, let’s talk about the common JavaScript around us
Example 1: Web lucky Draw (Wheel of Fortune)
Basic principle: 1, through setting CSS style position attribute, Z-index attribute, etc. to achieve the background, rotary table and pointer graph stacked placement; Transform = “rotate(0deg)”
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="description" content="" /> <meta Name ="author" content=" "/> <title> <style> #bg {width: 650px; height: 600px; margin: 0 auto; background: url(turntable-bg.jpg) no-repeat; position: relative; } img[src^='pointer'] { position: absolute; z-index: 10; top: 155px; left: 247px; } img[src^='turntable'] { position: absolute; z-index: 5; top: 60px; left: 116px; transition: all 4s; } </style> </head> <body> <! PNG "Alt ="pointer" /><img SRC ="turntable. PNG" Alt ="turntable" /></div> <! - this is js part -- -- > < script > var oPointer = document. The getElementsByTagName (' img) [0] var oTurntable = Document. GetElementsByTagName (' img) [1] var cat = 51.4 / / a total of seven fan-shaped area, Opointer.onclick = function() {if (offOn) {if (offOn) { oTurntable.style.transform = 'rotate(0deg)' offOn = ! Function ratating() {var timer = null var RDM = 0 // clearInterval(timer) timer = setInterval(function() { if (Math.floor(rdm / 360) < 3) { rdm = Math.floor(Math.random() * 3600) } else { oTurntable.style.transform = 'rotate(' + rdm + 'deg)' clearInterval(timer) setTimeout(function() { offOn = ! If (num <= cat * 1) {alert(' 1 ') console.log(' RDM =' + RDM + ', num=' + num + ', } else if (num <= cat * 2) {alert(num <= cat * 2) console.log(' RDM =' + RDM + ', alert(num=' + num + ') console.log(' RDM =' + RDM + ', If (num <= cat * 3) {alert(num <= cat * 3) console.log(' RDM =' + RDM + ', num=' + num + ') console.log(' RDM =' + RDM + ', num=' + num + ', If (num <= cat * 4) {alert(num <= cat * 4) console.log(' RDM =' + RDM + ', num=' + num + ') console.log(' RDM =' + RDM + ', num=' + num + ', } else if (num <= cat * 5) {alert(num <= cat * 5) console.log(' RDM =' + RDM + ', num=' + num + ') console.log(' RDM =' + RDM + ', num=' + num + ', } else if (num <= cat * 6) {alert(' RDM =' + RDM + ', num=' + num + ') console.log(' RDM + ', num=' + num + ', } else if (num <= cat * 7) {alert(num <= cat * 7) console.log(' RDM =' + RDM + ', num=' + num + ', '+' is not winning '}}}}, 4000), 30)} < / script > < / body > < / HTML >Copy the codeExample 2: The little game big fish eat small fish
Idea: random ball bounce + collision detection principle, by calculating the area of the box and the area of the random box and then compare the size of the method to eliminate the ball increase the mouse box
<! < p style> < p style> < p style = "max-width: 100%; clear: both; min-height: 1em; } body,h1{ margin:0; } canvas{ display:block; margin-left: auto; margin-right: auto; border:1px solid #DDD; background: -webkit-linear-gradient(top, #222,#111); } </style> </head> <body> <h1>HTML5 special effects random bouncing ball </h1> <div> Please use a browser that supports HTML5 to open this page. <button id="stop-keleyi-com"> Pause </button> <button id="run-keleyi-com"> continue </button> <button id="stop-keleyi-com" Id = "addBall - keleyi - com" > add ball < / button > < button onclick = "javascript: window. The location. Reload ();" > refresh </button> <br /> Every time refresh page ball size, color, movement route, are new, you can click the above buttons to see the effect. </div> <canvas id="canvas-keleyi-com" > </canvas> <script type="text/javascript" SRC = "http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js" > < / script > < script type = "text/javascript" > var nimo = { aniamted: null, content: null, data: { radiusRange: [5, 20], speedRange: [-5, 5], scrollHeight: null, scrollWdith: Null}, balls: [], ele: {canvas: null}, fn: {creatRandom: function (startInt, endInt) {// Generate random number var iResult; iResult = startInt + (Math.floor(Math.random() * (endInt - startInt + 1))); return iResult }, init: function () { nimo.data.scrollWdith = document.body.scrollWidth; nimo.data.scrollHeight = document.body.scrollHeight; nimo.ele.canvas = document.getElementById('canvas-ke'+'leyi-com'); nimo.content = nimo.ele.canvas.getContext('2d'); nimo.ele.canvas.width = nimo.data.scrollWdith - 50; nimo.ele.canvas.height = nimo.data.scrollHeight - 100; }, addBall: function () { var aRandomColor = []; aRandomColor.push(nimo.fn.creatRandom(0, 255)); aRandomColor.push(nimo.fn.creatRandom(0, 255)); aRandomColor.push(nimo.fn.creatRandom(0, 255)); var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]); var oTempBall = { coordsX: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius), coordsY: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius), radius: iRandomRadius, bgColor: 'rgba (' + aRandomColor [0] +', '+ aRandomColor [1] +', '+ aRandomColor [2] +', 0.5) '}; oTempBall.speedX = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]); if (oTempBall.speedX === 0) { oTempBall.speedX = 1 } if (oTempBall.speedY === 0) { oTempBall.speedY = 1 } oTempBall.speedY = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]); nimo.balls.push(oTempBall) }, drawBall: function (bStatic) { var i, iSize; nimo.content.clearRect(0, 0, nimo.ele.canvas.width, nimo.ele.canvas.height) for (var i = 0, iSize = nimo.balls.length; i < iSize; i++) { var oTarger = nimo.balls[i]; nimo.content.beginPath(); nimo.content.arc(oTarger.coordsX, oTarger.coordsY, oTarger.radius, 0, 10); nimo.content.fillStyle = oTarger.bgColor; nimo.content.fill(); if (! bStatic) { if (oTarger.coordsX + oTarger.radius >= nimo.ele.canvas.width) { oTarger.speedX = -(Math.abs(oTarger.speedX)) } if (oTarger.coordsX - oTarger.radius <= 0) { oTarger.speedX = Math.abs(oTarger.speedX) } if (oTarger.coordsY - oTarger.radius <= 0) { oTarger.speedY = Math.abs(oTarger.speedY) } if (oTarger.coordsY + oTarger.radius >= nimo.ele.canvas.height) { oTarger.speedY = -(Math.abs(oTarger.speedY)) } oTarger.coordsX = oTarger.coordsX + oTarger.speedX; oTarger.coordsY = oTarger.coordsY + oTarger.speedY; } } }, run: function () { nimo.fn.drawBall(); nimo.aniamted = setTimeout(function () { nimo.fn.drawBall(); nimo.aniamted = setTimeout(arguments.callee, 10) }, 10) }, stop: function () { clearTimeout(nimo.aniamted) } } } window.onload = function () { nimo.fn.init(); var i; for (var i = 0; i < 10; i++) { nimo.fn.addBall(); } nimo.fn.run(); document.getElementById('stop-kel'+'eyi-com').onclick = function () { nimo.fn.stop() } document.getElementById('run-keley'+'i-com').onclick = function () { nimo.fn.stop() nimo.fn.run() } document.getElementById('addBall-k'+'eleyi-com').onclick = function () { var i; for (var i = 0; i < 10; i++) { nimo.fn.addBall(); } nimo.fn.drawBall(true); } } </script> </body> </html>Copy the codeCollision detection
<! Doctype HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </title> <style> div{width:100px; height:100px; } #box{background:red; position:absolute; } #box1{background:green; position:absolute; top:300px; left:300px; } </style> <script> It's built on an immovable foundation. So we can figure out the left and top values in the four directions according to the stationary box. And then determine whether it is a collision, and the collision process changes its level at any time, (originally var 8 variables, Function collText(obj,left,top,obj1){var l1=obj.offsetLeft- obj.offsetwidth; var t1=obj.offsetTop-obj.offsetHeight; var r1=obj.offsetLeft+obj.offsetWidth; var b1=obj.offsetTop+obj.offsetHeight; if(left<l1||top<t1||left>r1||top>b1){ obj.style.zIndex=3; obj1.style.zIndex=1; return true; }else{ obj.style.zIndex=1; obj1.style.zIndex=3; return false; }}; window.onload=function(){ var oBox=document.getElementById('box'); var oBox1=document.getElementById('box1'); oBox.onmousedown=function(ev){ var oEvent= ev || event; var disX=oEvent.clientX-oBox.offsetLeft; var disY=oEvent.clientY-oBox.offsetTop; document.onmousemove=function(ev){ var oEvent= ev || event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; oBox.style.left=l+'px' ; oBox.style.top=t+'px' ; if(collText(oBox1,l,t,oBox)){ oBox1.style.background='green'; }else{ oBox1.style.background='yellow'; }}; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; oBox.reseaseCapture&&oBox.reseaseCapture(); }; oBox.setCapture&&oBox.setCapture(); return false; } oBox1.onmousedown=function(ev){ var oEvent= ev || event; var disX1=oEvent.clientX-oBox1.offsetLeft; var disY1=oEvent.clientY-oBox1.offsetTop; document.onmousemove=function(ev){ var oEvent= ev || event; var le=oEvent.clientX-disX1; var to=oEvent.clientY-disY1; oBox1.style.left=le+'px' ; oBox1.style.top=to+'px' ; if(collText(oBox,le,to,oBox1)){ oBox.style.background='red'; }else{ oBox.style.background='#000'; }}; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; oBox1.reseaseCapture&&oBox1.reseaseCapture(); } oBox1.setCapture&&oBox1.setCapture(); return false; } } </script> </head> <body> <div id="box"></div> <div id="box1"></div> </body> </html>Copy the codeLike other scripting languages, JavaScript is an interpreted language and provides a very convenient development process. The basic syntax structure of JavaScript is very similar to THAT of C, C++ and Java. But unlike these languages, which need to be compiled before they can be used, they are interpreted line by line as the program runs. JavaScript is combined with HTML markup to facilitate user operations.
2. An object-based scripting language. It can also be considered an object-oriented language, meaning that JavaScript can work with objects it has already created. Thus, much of the functionality can come from the interaction of methods and scripts of objects in a scripting environment.
3. A simple weakly typed scripting language whose simplicity is mainly reflected in: First, JavaScript is a simple and compact design based on Java basic statements and control flow, so it is a very good transition for users to learn Java or other C programming languages, and for programmers with C programming background, JavaScript is very easy to get started. Second, its variable types are weakly typed and do not use strict data types.
4. As a relatively secure scripting language, JavaScript is not allowed to access the local hard disk, save data to the server, modify or delete network documents, and can only realize information browsing or dynamic interaction through the browser. Thus effectively prevent the loss of data or illegal access to the system.
5. JavaScript, a cross-platform scripting language, depends on the browser itself and has nothing to do with the operating environment. As long as the computer can run the browser and support the browser of JavaScript, it can be executed correctly, thus realizing the dream of “write once, travel around the world”.
Stanford’s Introduction to Computer Science class uses JavaScript instead of Java, but it’s based on a large base. In early April, Stanford university began testing a new version of its introductory computer science course, CS 106A. The new version, called CS 106J, is taught in JavaScript rather than Java. Stanford university’s website explains: “[CS 106J] uses the same teaching materials as CS 106A, but is taught in JavaScript, the most common language for interactive web pages, rather than Java. No prior programming experience is required.
Easy to learn, powerful JavaScript is synonymous, so JavaScript is the best language in the world!