Introduction to Javascript: A Brief Overview, Lecture notes of Programming Languages

Download Introduction to Javascript: A Brief Overview and more Lecture notes Programming Languages in PDF only on Docsity!

Introduction to

Javascript

A brief overview

Lecture Goals

● Understand (at a high level) how a computer interprets code.

● Have a vocabulary to talk about programming.

● An ability to write and understand some JavaScript code.

● Understand what to ask and where to look when you get stuck.

Computers (an overview)

Taken from: http://computer.howstuffworks.com/computer-memory1.htm

Computers (an overview)

● The fundamental language of computers is binary.

010100101 = 2 7 + 2 5 + 2 2 + 2 0 = 165

● A bit is one binary digit. ● A byte is 8 bits. ● A megabyte is (roughly) 1 million bytes. ● A gigabyte is (roughly) 1 billion bytes.

Computers (an overview)

● Programs are written in a human-readable format.

● We need a mechanism to translate human- readable code into machine-readable numbers.

● Compilers provide one way to translate high-level (human-readable) code into low- level (machine-readable) code.

Computers (an overview)

section global _start, .text write write : mov al , 1 ; write syscall syscall ret _start: mov rax , 0x0a68732f6e69622f push xor raxrax , rax mov mov rsirdi ,, 1 rsp mov call rdxwrite , 8 exit: ; just exit not a function xor rax , rax mov syscall rax , 60

function my_func(foo, bar) { var bud = foo; if (bar && typeof bar === "string") { bar = bar + "blah"; } return bud + bar; };

JavaScript Code Machine Code (for an Intel CPU) Compilation

Text Editors

● Can't use Microsoft Word to write code.

● Programmers use WYSIWYG editors, which allow them to see exactly what is inside a file.

● W hat Y ou S ee I s W hat Y ou G et (WYSIWYG)

e.g. Notepad (Windows), TextEdit (OSX), etc. NOTE: make sure files are being saved as plaintext! You can look in Preferences for this option.

JavaScript

● All languages have a grammar that defines valid syntax.

● Programs can be thought of as a collection of statements made up of expressions written using the language's syntax.

● Each statement is executed in sequential order.

JavaScript

● Consoles give us a way to execute individual statements of JavaScript.

● A good way to make sure you understand what your code is doing.

● In Chrome: View->Developer->JavaScript Console

● Other browsers: http://webmasters.stackexchange. com/questions/8525/how-to-open-the- javascript-console-in-different-browsers

JavaScript

● The next statement isn't executed until the current statement is finished (statment 3 didn't execute until we closed the alert window).

● This is called synchronous execution (as opposed to asynchronous , which is an important technique in web programming).

Data Types

Variables have specific data types.

// number var x = 1; var y = 2; var z = 0; // object var point = {x: x, y: y, z: z}; // array var point_array = [point, point];

Data Types (continued)

● Data types specify what operations are valid, and what those operations do.

var x = 1, y = 2; x + y; // 3 var name = "sam"; x + name; // "1sam" var foo = []; foo.length; // 0 var bar = {}; bar.length; // undefined

Arrays

● Arrays are lists of data. ● In JavaScript, these lists can have any kind of data.

var my_empty_array = [];

var my_array = [1, 2, 3, 4];

var my_mixed_array = ['foo', 1, []];

Arrays (continued)

● Arrays have special methods to help you manipulate them.

var my_array = [];

my_array.push(1); // [ 1 ]

my_array.push(2, 3); // [ 1, 2, 3]

// slice( index , delete_count );

my_array.splice(1, 1); // [ ????? ]