Introduction to JavaScript Niels Olof Bouvin 1 Overview A brief - PowerPoint PPT Presentation

Introduction to JavaScript Niels Olof Bouvin 1

Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library 2

The origins of JavaScript JavaScript began its life in 1995, when Brendan Eich, working at Netscape, on a deadline created the fj rst version of the language in 10 days it was originally known as ‘Mocha’ or ‘LiveScript’, but was eventually named ‘JavaScript’ as the Java programming language was very popular at the time In August 1996, Microsoft debuted JScript, and trying to not lose the initiative, Netscape turned JavaScript over the ECMA standard organisation thus, the o ffi cial name of the language became ECMAScript ECMAScript 1 was standardised in June 1997 the current standard is ES2016, or ES6 for short 3

JavaScript: backwards compatibility is king Based on the immense weight of JavaScript code already deployed across the Web, the powers behind JavaScript has sought to maintain compatibility This means that all design decisions of the past, good, bad and worse , are still with us However, if we do not have to maintain a legacy system, we can choose to look and move forward Therefore, we will, in this course, only and exclusively use ES6 and onwards standards, because we are not bound by the bad old days 4

Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library 5

JavaScript for Java developers There are many super fj cial similarities between Java and JavaScript, as they, syntax-wise, share a common ancestor in C They are however at heart quite di ff erent, and while you certainly will bene fj t from your Java knowledge, you should also be aware that this is a new language with a di ff erent environments and di ff erent rules and conventions 6

Java vs JavaScript Object-oriented, Object-oriented, class based prototype based Statically and strongly Relaxed and typed dynamically typed Compiled Interpreted Lambdas were only just Functions were always introduced in Java 8 fj rst-class objects Requires a JVM to run, Usually either browser rarely seen in browsers or Node.js based these days 
 7

Object-oriented, but di ff erent Java is class-based: Objects are instances of Classes There are no classes in JavaScript, only primitive types and objects. An object may point to another object as its prototype Syntax has been introduced in ES6 to make JavaScript appear more traditionally class-based as you'll see shortly 8

Typing In Java, you de fj ne what type a variable has, and the compiler will hold you to it In JavaScript, the type is inferred, and you  node can change your mind without JavaScript > let a = 2 undefined complaining, and if you have done > a 2 something wrong, it will fail when it runs > a = '2' '2' > a This is a potential mine fj eld, so it is '2' important to be disciplined and to use tools to check your code TypeScript, a superset of JavaScript created by Microsoft, improves on JavaScript by, among other things, adding additional type information 9

Compiled or interpreted Java is compiled into Bytecode, packing into JAR fj les, and then distributed JavaScript is distributed as text, and interpreted upon delivery There used to be a big performance gap, but that has closed with modern JavaScript engines It means however that the checks made by the Java compiler will fj rst be made when the JavaScript code is interpreted or when it is run thus, testing quickly becomes really important with JavaScript projects 10

Objects, functions or both In Java, everything has to be de fj ned within a class, whether it makes sense or not In JavaScript, you can just do things, usually through functions, and you can hand functions around like the completely ordinary values they are If you want to use objects and inherit stu ff from other stu ff , you can do that, too 11

Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library 12

The JavaScript ecosystem JavaScript is one of, if not the, most popular programming languages in the world But, compared to, e.g., Java, JavaScript does not have a strong standard library of functionality ready to use Thus, an absolute mountain of supporting libraries has been created by thousands and thousands of developers this is good , because there’s probably a library to solve your problem this is bad, because you may have to wade through dozens if not hundreds of poorly maintained libraries to fj nd The One (or have to choose between multiple valid, fully functioning solutions). It also leads to the “framework of the week” phenomenon We’ll try to keep things as simple as possible in this course, only including libraries if absolutely necessary 13

JavaScript ES6 The current standard for ECMAScript It is by now widespread and much nicer than previous versions BUT! Some of the material you’ll encounter (even in this course) will still be using some of the olden ways I'll try to highlight when I di ff er from what you have read and I'll usually point to the Eloquent JavaScript book or the MDN site 14

Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library 15

Getting access to JavaScript JavaScript is available directly in your Web browser, typically accessed through a ‘Developer’ menu you may need to explicitly enable this menu Alternatively, it can installed and used locally through Node.js, which is where we will start see the Tools page on the course site for installation it can be launched from the command line with ‘node’ 16

Starting out: The JavaScript REPL (Read, Eval, Print, Loop) If we start node without any arguments, or begin typing in the JavaScript console in a Web browser, we begin in the REPL: Statements are evaluated line by line as they are entered, no compilation necessary this is a great way to test out code, check proper syntax, or mess with a live Webpage REPLs are found in most interpreted language, and they are excellent tools, as they allow you to interact directly with your or others’ code 17

Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library 18

Basic syntax Beginning a JavaScript program with this line signals to the system that the following is written in the 'use strict' modern, ES6 style. You should const greeting = 'Hello World' console.log(greeting) always do this—it can catch quite const x = 2 if (x < 4) { a few errors console.log('x is a small number') } else { console.log('x must be pretty big') } You can enter the above directly into the Node.js REPL or the JavaScript Console in your browser try it—it's a good way to get a handle for the syntax and try things out One statement/expression per line: no need for ; 19

Types in JavaScript Primitive types Objects boolean everything else, including the object counterparts: number Boolean, Number & String string Symbol > typeof true 'boolean' null > typeof 42 Wait, what? 'number' undefined 
 > typeof 'hi!' this is one of those things considered 'string' > typeof null awful about old design decisions in 'object' > typeof undefined JavaScript 'undefined' > typeof Symbol() it is a primitive type 'symbol' 20

Types are inferred, not declared > let a = 2 undefined > typeof a 'number' > a = '2' '2' > typeof a 'string' > You can bind one type of value to a variable, and later bind another type you shouldn't, but you can. (Don't) This is one of those things, where tools become useful 21

What is a number? Sane programming languages di ff erentiate between integers and fm oating point numbers in many cases, integers are su ffi cient and far faster than fm oats JavaScript engines make a guess of it and usually gets it right for e ffi ciency's sake, there is now direct support for arrays of speci fj c types of numbers, this is very important in, e.g., audio or graphics applications, where performance is crucial 22

Collections > let myList = [1, 2, 3] > let myMap = new Map() undefined undefined > myList.length > myMap.set('a', 'foo') 3 Map { 'a' => 'foo' } > myList[0] > myMap.set('b', 2) 1 Map { 'a' => 'foo', 'b' => 2 } > myList.push(4) > myMap.set(3, 'a') 4 Map { 'a' => 'foo', 'b' => 2, 3 => 'a' } > myList > myMap.get('a') [ 1, 2, 3, 4 ] 'foo' > myList.pop() > myMap.has(3) 4 true > myList > let mySet = new Set() [ 1, 2, 3 ] undefined > typeof myList > mySet.add('a') 'object' Set { 'a' } > mySet.add('b').add('c') Set { 'a', 'b', 'c' } > mySet.add('a') Chainable! Set { 'a', 'b', 'c' } > mySet.has('b') true Arrays, Maps, Sets: should be familiar to Java experts! 23