I have now learned Javascript basics, which 1

Basics: Javascript for websites

Movement, Effects and Communication

Javascript brings interaction to static HTML pages and reduces the time-consuming transfer between user, browser and server. Scripts change the content of a website after it has been loaded into the browser. We use Javascript

  • for calculations, animations, for communication with the user in forms,
  • in shops and in the editors of the content management systems.

No programming language is so underestimated as Javascript. With programming languages ​​like C it is clear that programming with C has to be learned first. Many programmers, on the other hand, still consider Javascript to be child's play. Javascript implements some of the best concepts in programming languages. The fact that Javascript was so disreputable in the past was due to the errors and inconsistencies of the browser and not to the concept and syntax of the language.

With Javascript, beginners can do tasks surprisingly easily, even without much experience and even with little background in programming, because Javascript is expressive. Still, you can use the factor Experience do not ignore: programming needs experience and a good ending routine so that scripting does not lead to nervous crises and frustration.

The best prerequisite for a painless entry into programming with Javascript is correct, valid HTML.

Include Javascript

Javascript is placed directly in the HTML markup with the script tag - preferably before the closing body tag

Include Javascript at the end of the document

<!DOCTYPE html> <html> <head> <title>Einführung in Javascript</title> </head> <body> <script> alert('Hallo Welt!'); </script> </body> </html>

or integrated as an external file (also here preferably before the closing body tag):

Include Javascript file at the end of the document

<!DOCTYPE html> <html> <head> <title>Javascript-Datei einbinden</title> </head> <body> <script src="script.js"></script> </body> </html>

The instructions are in the script file without an enclosing script tag.

alert ('Hello World');

Script language vs programming language

Script languages ​​such as Javascript are evaluated line by line - this makes programming with Javascript so easy. C or Java must be translated (compiled) into a low-level language prior to execution.

<script> alert("Hallo Welt!"); document.querySelector("h1").setAttribute("style", "color:green"); </script>

Give first Hello World then change the color of the h1 tag to green.

The output of notes with alert is an initial feedback to get you started. Today all modern browsers offer a Javascript console under the developer or developer tools, in which we can understand the sequence of a script with the command console.log ("...") or try out an instruction with assistance.

The browser does a lot of the work for the programmer. Javascript (as a client-side script language) and PHP (as a script language on the server) use the browser as a user interface. We leave the complex programming tasks such as saving, printing and memory management to Chrome, Firefox & Co.

Javascript Slideshow / Carousel

How do i start? That is the question for those who have not already come from another programming language. With computer and software manufacturers, beginners usually start with the support of existing applications: bug fixes and small additions.

A brand new beginner usually has an idea in mind that he would like to program with Javascript and looks for a suitable script to adapt it to his own ideas.

This little script contains both Javascript and CSS techniques:

Detailed tutorial for a differently structured Javascript slideshow - also »Vanilla Javascript« (without jQuery).

HTML

<div id="slides"> <figure class="slide showing"> <img src="slide-01.jpg"> <figcaption>Javascript Slideshow ohne jQuery</figcaption> </figure> <figure class="slide"> <img src="slide-02.jpg"> <figcaption>HTML ohne zusätzliches Markup</figcaption> </figure> <figure class="slide"> <img src="slide-03.jpg"> <figcaption>Nur ein paar Zeilen Javasctipt</figcaption> </figure> </div>

CSS

#slides {position: relative; } .slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity 1s; } .showing {opacity: 1; z-index: 2; }

Script for the simple slideshow

// querySelectorAll collects all elements with the class .slide const slides = document.querySelectorAll ('# slides .slide'); let currentSlide = 0; // setInterval () controls a Javascript animation const slideInterval = setInterval (nextSlide, 2000); function nextSlide () {slides [currentSlide] .className = 'slide'; currentSlide = (currentSlide + 1)% slides.length; slides [currentSlide] .className = 'slide showing'; }

The script is only a starting aid (so that it remains clear) and leaves a lot of room for extensions and improvements. The user cannot control and stop the slideshow, the position within the slideshow is not displayed (the small round dots are common).

Programming Javascript - requirements

Did I say Javascript is easy to learn? That's true, but the hurdles to get started are elsewhere:

  1. Without in-depth knowledge of HTML, nothing works. The Document Object Model refuses if the HTML is incorrect. Incorrectly nested HTML is wired incorrectly in Javascript in no time at all.
  2. If you want to program Javascript, you have to master CSS like your mother tongue.
  3. Knowing what makes the user tick ... essential.
  4. Sooner or later, basic knowledge of server-side programming (e.g. for forms) belongs in every programming room.

For example, I cannot write an operating system with Javascript and cannot even address the printer. Javascript has no access to the data on the server without a server-side application (e.g. a PHP program) and also cannot access local files (only via an input field for the file upload). Javascript sits in a browser, in Photoshop or the eBook and only has read access to the file system of the computer with HTML5 (and even then only to a limited extent).

From the editors of the content management systems to browser-based apps in the cloud, Javascript is being assigned more and more tasks that were previously reserved for the »real« programming languages.

So far, Javascript has had narrow limits: With node.js the limitation to browser applications ends and Javascript can also be used for server applications. We could program desktop applications with HTML, CSS and Javascript that run on a beer mat (i.e. in any environment). This won't eliminate the need for programming languages ​​like C ++ and Objective C or server-side scripting languages ​​like PHP, but a developer can divide their knowledge and experience into fewer pieces of the puzzle. Those are nice prospects ...

Javascript, Java and ECMAScript

Java and JavaScript have as little to do with each other as "moving out" and "elevator". The identity of the names is just unfortunate. "ECMAScript" would be more correct, but we have got used to Javascript.

  • The ECMA defines the core of Javascript. The W3C steps in for applications in HTML pages:
  • The Document Object Model (DOM) provides recommendations for access to documents, style sheets, the browser window and event handling.

Which programming languages ​​are unpopular? on stackoverflow.

Node.js

Did I claim above that Javascript cannot read and save files? Javascript can read and save XML and JSON files. And then there is also NodeJS.

Node.js is a tool for programming network applications, also as Javascript runtime environment (Runtime environment). This means that Javascript runs on the computer without a browser, under Windows, Mac OS and Unix.

NodeJS enables Javascript applications - the program editor Adobe Brackets is an example, because Brackets is mainly programmed in HTML, CSS and Javascript.

External sources