jsChapter1.pdf

Javascript Chapter 1 : the basics of the programming language Working Environment, Syntax, Data, Control Statements & algorithmic Object Oriented JavaScript OOJS Table of Contents Basic approach Working environment : Node.js & Visual Studio Code Lexical grammar...

Javascript Chapter 1 : the basics of the programming language Working Environment, Syntax, Data, Control Statements & algorithmic Object Oriented JavaScript OOJS Table of Contents Basic approach Working environment : Node.js & Visual Studio Code Lexical grammar: Javascript syntax & console.log() Declarations & types: Variables, Constants, Arrays Expressions and Operators: assignment, arythmetic, equality & relational Statements : control flow and iterations Functions : User Defined Functions Knowledge deepening & Object Oriented JavaScript Variable scope and hoisting OOJS, Built-in Objects: Number, Strings, Date, Properties & Methods Data Format & Manipulation : JSON Advance Control Statements Arrow functions Template literals Web Programming 1 Javascript 1 - Eric Christoffel - Unistra 1  Basic approach Working environment : Node.js & Visual Studio Code Different working environments are available : Code editor : Sublime Text, Notepad ++, Atom, Bracket, … , with many extensions (packages, plug-in) to help you code https://www.sublimetext.com/ , https://packagecontrol.io/ Refer to the manufacturer's https://notepad-plus-plus.org/ , https://github.com/notepad-plus-plus/nppPluginList/blob/master/doc/plugin_list_x64.md site for installation, as well https://atom.io/ , https://atom.io/packages as extensions http://brackets.io/ , https://registry.brackets.io/ As an example, surch for Emmet, a powerfull tool for high-speed coding HTML and CSS, using abbreviations and snippet expansions. Node.js & Visual Studio Code as an IDE (Integrated Development Environment) Install Node.js (Long Term Support), along with NPM (Node.js Install VSCode https://code.visualstudio.com/ Package Manager), and probably Chocolatey, Python, …. https://nodejs.org/en/download/ Node.js is a Javascript engine which Video help for installation: allows to run JS scripts with Visual fr https://youtu.be/ig9EOn17vFM Studio Code, as an alternative to the en https://youtu.be/JINE4D0Syqw Chrome browser. Node.js also allows VSC First Steps Video: to built Network Applications (Node.js https://code.visualstudio.com/docs/getstarted/introvideos Optional web server as an alternative to Apache web server). Web Programming 1 Javascript 1 - Eric Christoffel - Unistra 2  The purpose here is not to present Visual Studio Code in detail, many tutorials are available online. Look more specifically: User and Workspace Settings From the main menu : File – Preferences – Settings, or the Manage gear button : Example : change the font size of the text editor More help : https://code.visualstudio.com/docs/getstarted/settings Extensions Numerous extensions exist, see https://marketplace.visualstudio.com/vscode , More help : or browse and install https://code.visualstudio.com/docs/editor/extension-gallery fr https://youtu.be/CTz1vpJG68E en https://youtu.be/Fed01v3yYNE Install, among others, the Code Runner extension See also: Live Server, Prettier, Wrap Console Log, Live Share, … Web Programming 1 Javascript 1 - Eric Christoffel - Unistra 3  Basic approach Lexical grammar: Javascript syntax & console.log() element is used to embed executable code, usually in the head section, or in the body section, or to reference an external.js file Lexical grammar: Javascript is case-sensitive. Instructions, called statements, are terminated with a semicolon Comments begin with // , or are delimited by External JS file JS script can be run in a browser, results are displayed in the web browser console, using console.log() Embeded JS code log() is a method of the console object to Open the browser console access to the browser's debugging console Web Programming 1 Javascript 1 - Eric Christoffel - Unistra 4 With VSCode, Node.js installed and the Code Runner extension installed : Use the Run Code button, the results are displayed in the Output Window From the Terminal window, type : node fileName.js Web Programming 1 Javascript 1 - Eric Christoffel - Unistra 5 Basic approach Declarations & types: Variables, Constants, Arrays Variables, not typed, are used to store value : integer or float number, string, boolean, … Variable declaration and value assignment (assignment operator =) : Variable names (identifiers) rules: Starts with : letter, _ , $ var Subsequent characters : A-Z, a-z, 0-9, _ Case sensitive Avoid accents (à,ü,..) even if permitted let const The declarations of the variables using the keywords var or let, are distinguished by the scope of the variables (see later) A constant value can’t be changed! global or local depends on the execution context Web Programming 1 Javascript 1 - Eric Christoffel - Unistra 6 Arrays, are used to store a list of values : integer or float number, string, boolean, … Each array element is indexed with an integer value key (there is no associative array like in PHP!) Declaring an array and assigning values to array elements (assignment operator =) : Array constructor Instance of the Array object using the new keyword: Assigning values to array elements using an index position: Key indexes of an array : 0, 1, 2, … (integers only!) Accessing an array element using an index position: Literal constructor: Web Programming 1 Javascript 1 - Eric Christoffel - Unistra 7  Basic approach Expressions and Operators: assignment, arythmetic, equality & relational Assignment operators : = Arithmetic operators : +, -, *, /, % (modulus – remainder of the division) Arithmetic and assignment operators : += (add and assign), -=, *=, … Incrementing and decrementing operators : ++$i (pre-increment) , $i++ (post-increment), --$i, $i-- String or concatenation operator : + , += (concate and assign) Comparison operators : ==, !=, >, >=,