JavaScript Fundamentals PDF

JavaScript pagrindai Justina Balsė 01. JavaScript Kas tas JavaScript? Pirmoji programa; Išvedimo sakinys; Komentarai; Kintamieji; Aritmetiniai operatoriai; Duomenų įvedimas/išvedimas; Objektas Math; 2 HTML+CSS+JavaScript...

JavaScript pagrindai Justina Balsė 01. JavaScript Kas tas JavaScript? Pirmoji programa; Išvedimo sakinys; Komentarai; Kintamieji; Aritmetiniai operatoriai; Duomenų įvedimas/išvedimas; Objektas Math; 2 HTML+CSS+JavaScript Justina Balsė 3 JavaScript ir Java Justina Balsė 4 JavaScript ir Java JavaScript nėra ir neturi nieko bendro su Java kalba. JavaScript tai tik pavadinimas, kuris buvo suteiktas, norint išpopuliarinti skriptų kalbą. Justina Balsė 5 ES6, ES8, ES 2017, ECMAScript… ? ECMAScript is a standard. ECMA is an organization that standardizes information. ES is simply short for ECMAScript. – ES1: June 1997 , ES2: June 1998, ES3: Dec. 1999 , ES4: Abandoned, ES5: December 2009, ES6/ES2015: June 2015, … Justina Balsė 6 JavaScript DOM Add new HTML to the page, change the existing content, modify styles. React to user actions, run on mouse clicks, pointer movements, key presses. Get and set cookies, ask questions to the visitor, show messages. Remember the data on the client-side (“local storage”). Justina Balsė 7 Pavyzdžiai The Scroll of Lorem ipsum To-Do Terrarium Shopping Cart Dropdown Page scroll effect Justina Balsė 8 Online https://jsbin.com/?js,console https://playcode.io/new/ Inspect → Console Justina Balsė 9 Hello, world! JavaScript programs can be inserted into any part of an Before the script... HTML document with the help of the tag. alert( 'Hello, world!' );...After the script. Justina Balsė 10 Hello, world! PHP example. My first PHP page Justina Balsė 11 Statements We can have as many alert( "Hello, world!" ); statements in our code as we want. alert("Hello"); alert("World"); Statements can be separated console.log("Hello, world!"); with a semicolon. Justina Balsė 12 Comments // This comment occupies a line of its own alert('Hello'); alert('World'); // comment alert('World'); Justina Balsė 13 Variables A variable is a “named storage” for data. A variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence. Justina Balsė 14 Variables let user = 'John', age = 25, We can declare multiple message = 'Hello'; variables in one line. The multiline variant is a bit let user = 'John'; let age = 25; longer, but easier to read. let message = 'Hello'; Justina Balsė 15 Variables var - this syntax can be used to declare both local and global variables. let - this syntax can be used to declare a block-scope local variable. const - is used to assign a constant value to the variable. 16 Declaration and initialization let name; let name = "Tom" ; let age; let age = "39"; let cars = ["Saab", "Volvo", "BMW"]; 17 Variable naming There are two limitations on variable names in JavaScript: The name must contain only letters, digits, or the symbols $ and _. The first character must not be a digit. When the name contains multiple words, camelCase is commonly used. That is: words go one after another, each word except first starting with a capital letter: myVeryLongName. Variables named apple and AppLE are two different variables. 18 Basic operators 19 Basic operators let a = 10; a += 5; // a = a + 5; ----------------------- let a = 10; a -= 5; // a = a - 5; ----------------------- let a = 10; a *= 5; // a = a * 5; ----------------------- let a = 10; a /= 5; // a = a / 5; Justina Balsė 20 Remainder % // 1, a remainder of 5 divided by 2 The remainder operator %, alert( 5 % 2 ); despite its appearance, is not // 2, a remainder of 8 divided by 3 alert( 8 % 3 ); related to percents. The result of a % b is the remainder of the integer division of a by b. 21 JavaScript Unary Operators | 1 a++ A unary operation is an operation +a with only one operand. This operand comes either before or delete user.avatar after the operator. typeof a new Object() 22 JavaScript Unary Operators | 2 23 JavaScript Binary Operators | 1 a = 5 Binary operation is an a + b operation with two a += 5 operands. a === 5 a && b 24 Prefix vs. Postfix notation Prefix notation Postfix notation ++a a++ delete user.password myFunction() typeof "abc" 25 The Math object Math.abs(x) Math.sqrt(x) – Returns the absolute – Returns the square root value of x. of x. Math.pow(x, y) Math.random() – Returns x raised to the – Returns a pseudorandom power of y. number 0 ≤ r < 1 – Math.floor((Math.random() * 10) + 1); 26 Output let a = 5; // 1 example console.log("a = " + 5); // 2 example alert("a = " + 5); 27 Praktika Uždavinių sprendimas konsolėje. 01 - Tiesiniai algoritmai (praktikaEN) 01 - Tiesiniai algoritmai (praktikaLT) Online įrankis: https://jsbin.com/?js,console Kitas įrankis: https://replit.com/languages/nodejs Duomenų įvedimui: https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt Pasitikriname kodą: https://jshint.com/ 28 Data Types | 1 Primitive data types – string, number, boolean, null and undefined Objects – Object refers to a data structure containing data and instructions for working with the data. Justina Balsė 29 Data types | String A string in JavaScript must be let str = "Hello"; surrounded by quotes. let str2 = 'Single quotes are ok too'; In JavaScript, there are 3 types of let phrase = `can embed another ${str}`; quotes: Double quotes: "Hello". Single quotes: 'Hello'. Backticks: `Hello`. Justina Balsė 30 Data types | Number The number type represents both let n = 123; integer and floating point let m = 12.345; numbers. // Infinity Special numeric values: alert( 1 / 0 ); Infinity, -Infinity // NaN NaN alert( "not a number" / 2 + 5 ); Justina Balsė 31 Data Types | Boolean (logical type) // yes, name field is checked The boolean type has only two let nameFieldChecked = true; values: true and false. // no, age field is not checked let ageFieldChecked = false; This type is commonly used to store yes/no values: true means let isGreater = 11 > 7; “yes, correct”, and false means // true (the comparison result is "yes") “no, incorrect”. alert( isGreater ); Justina Balsė 32 Data Types | null let age = null; The special null value does not belong to any of the types described above. It’s just a special value which represents “nothing”, “empty” or “value unknown”. Justina Balsė 33 Data Types | undefined let age; The meaning of undefined is “value is not assigned”. // shows "undefined" If a variable is declared, but not assigned, then its value is undefined. alert(age); Justina Balsė 34 Data Types | All Duomenų tipai (LN Post) Justina Balsė 35 The typeof operator typeof undefined // "undefined" The typeof operator returns the typeof 0 // "number" type of the argument. typeof true // "boolean" typeof "foo" // "string" It supports two forms of syntax: typeof Math // "object" (1) typeof null // "object" (2) As an operator: typeof x. typeof alert // "function" (3) As a function: typeof(x). Justina Balsė 36 What is the output of the script? let name = "Ilya"; alert( `hello ${1}` ); // ? alert( `hello ${"name"}` ); // ? alert( `hello ${name}` ); // ? Justina Balsė 37 Justina Balsė 38 Visual Studio Code Visual Studio Code: ○ Live Server ○ Prettier - Code formatter ○ Bracket Pair Colorizer ○ https://code.visualstudio.com/s hortcuts/keyboard-shortcuts-wi ndows.pdf 39 Vakaro skaitiniai 1. Hot To Use JavaScript Unary Operators? 2. MDN Web Docs: Operator precedence 3. Airbnb JavaScript Style Guide() Justina Balsė 40 Kartojame JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour Justina Balsė 41