Hello, world!
The "script" tag
- <script> tag can insert anywhere into an HTML document
Modern markup
- The <type>, <language> attribute, comments inside <script> tags
- there are not required, and rarely used nowadays
External scripts
<script src=".../script.js"></script>
- A script in an external file can be inserted with the src attribute to HTML
- To attach several scripts, use multiple tags
<script src="file.js">
alert("It's ignored");
</script>
- If src is set, the script content is ignored
Code structure
Statements
- Syntax constructs and commands that perform actions
- Be separated with a semicolon
Semicolons
- Be omitted in most cases when a line break exists
- called an automatic semicolon insertion
- An example of an error
alert("It works");
[1, 2].forEach(alert);
alert("It won't work")
[1, 2].forEach(alert);
- To add comments which describe what the code does and why
- Don't affect its execution
- One-line comments : // ...
- Multiline comments : /* ... */
- Nested comments are not supported
The Modern mode, "use strict"
"use strict"
"use strict";
...
- "use strict" : To keep the old code working, need to explicitly enable them with a special directive
- Be located at the top of a script
- it can be put at the beginning of a function, and then enables strict mode in that function only
Browser console
- A developer console (browser console) doesn't 'use strict' by default
- Press [Shift+Enter], and put 'use strict' on top
(function() {
'use strict';
})()
- It it dosen't work (like in an old browser), put it inside this kind of wrapper
Should we "use strict"?
- Modern JavaScript supports "classes" and "modules", that enable 'use strict' automatically
Variables
A variable
let message = 'Hello!';
alert(message);
- A named storage for data
- cf. var : declares a variable, but "old-school" way
A real-life analogy
- Imagined as a box labeled "message" with the value "Hello!"
- When the value is changed, the old data is removed from the box
let hello = 'Hello World';
let message = hello;
- Declare two variables and copy data from one into the other
- cf. A variable should be declared only once
Variable naming
- Contain only letters, digits, or the symbols $ and _
- camelCase : multiple words
- The first character must not be a digit
- Hyphens '-' aren't allowed in the name
- Case matters : be distinguished
- Non-Latin letters are allowed, but not recommended
- Cannot be used a list of reserved words (let, return, class, etc.)
Constants
const today = '2022.12.22';
today = '2023.01.01';
- To declare a constatnt (unchanging) variable
- Sure that a variable will never change
Uppercase constants
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
let color = COLOR_ORANGE;
alert(color);
- To use constants as aliases for difficult-to-remember values
- much easier to remember, mistype
- much more meaningful
- Capital-named constants are only used as aliases for "hard-coded" values
Name things right
- A variable name should have a clean, obvious meaning, describing the data that it stores
- Good-to-follow rules
- Use human-readable names, like userName
- Stay away from abbreviations or short names like a, b, c
- Make names maximally descriptive and concise
- Use on terms consistently within your team and in your own mind
Data types
- A value in JavaScript is always of a certain type, such as a string or a number
- 동적 타입 (Dynamically typed) : 자료의 타입은 있지만 변수에 저장되는 값의 타입을 언제든지 바꿀 수 있는 언어
Number
let number = 123;
number = 12.345;
- Represents both integer and floating point numbers
- Infinity : the mathematical Infinity
- NaN : a computational error, an incorrect or an undefined mathematical operation
- cf. Mathematical operations are safe in JavaScript
- the script will never stop with a fatal error, only get NaN as the result
BigInt
const bigInt = 1234567890123456789012345678901234567890n;
- Appending 'n' to the end of an integer
- Stored all odd integers greater than 9007199254740991
- Added recently to the language to represent integers of arbitrary length, such as for cryptography or miscrosecond-precision timestamps
String
- A string must be surrounded by quotes
- Double quotes("")
- Single quotes('')
- there's practically no difference between them in JavaScript
let name = "John";
alert(`Hello, ${name}`);
alert(`the result is ${1 + 2}`);
- Backticks(``) : Extended functionality, allow us to embed variables and expressions into a string by wrapping them in ${...}
Boolean (logical type)
let nameFieldChecked = true;
let ageFieldChecked = false;
let isGreater = 4 > 1;
alert( isGreater )
- Has only two values : True / False
- Also, come as a result of comparisons
The "null" value
let example = null;
- A special value which represents "nothing", "empty" or "value unknown" in JavaScript
- Not a "reference to a non-existing object" or a "null pointer" like in some other languages
The "undefined" value
let age;
alert(age);
let age = 100;
age = undefined
alert(age);
- A value is not assigned
- It's possible to explicitly assign 'undefined' to a variable, but don't recommend it
Objects and Symbols
- The object type
- used to store collections of data and more complex entities
- The symbol type
- used to create unique identifiers for objects
The typeof operator
typeof undefined
typeof 0
typeof true
typeof "example"
typeof Math
typeof null
typeof alert
- Returns the type of the operand
- 'Math' is a built-in object that provides mathematical operations
- 'null' is not an object, it is a special value with a separate type of its own
Interaction: alert, prompt, confirm
alert
alert("Hello");
- Shows a modal window with a message and waits for the user to press "OK"
prompt
let result = prompt (title, [default]);
- title : the text to show the user
- default : the initial value for the input field (an optional)
- Shows a modal window with a text message, an input field for the user, and the buttons OK/Cancle
- Get that text in the 'result'
- Get 'null' by pressing Cancle or hitting the [ESC]
confirm
let result = confirm(question);
- Shows a modal window with a question and two buttons, OK/Cancle
- The result is 'true' if OK is pressed, and 'false' otherwise
Type Conversions
String Conversion
let value = true
typeof value
value = String(value);
typeof value
- The function to convert a value to a string
Numeric Conversion
alert("6"/"2");
- Numeric conversion happens in mathematical functions and expressions automatically
let str = "123";
let num = Number(str);
typeof str
typeof num
- The function to convert a value to a number
Numeric conversion rules
- undefined : NaN
- null : 0
- true/false : 1/0
- string : the result is '0', if the remaining string is empty after whitespaces from the start and end are removed
Boolean Conversion
Value | Becomes |
---|
0, null, undefined, NaN, "" | false |
other values | true |
- cf. the string with zero "0" is 'true', a non-empty string is always 'true' in JavaScript
"JavaScript Fundamentals", by Ilya Kantor, 2007-2022, https://javascript.info/first-steps