An Introduction to JavaScript
What is JavaScript?
- Initianlly, created to "make web pages alive", as a browser-only language
- Today, it can execute in the browser, on the server, on the JavaScript engine
- In-browser has "JavaScript virtual machine", it has different "codenames"
- V8 : Chrome, Opera and Edge
- SpiderMonkey : Firefox
- Chakra(IE), JavaScriptCore, Nitro, etc.
How do engines work?
- The engine (if a browser) parses the script
- It compiles the script to machine code
- And then the machine code runs
cf. The engine applies optimizations at each step of the process
What can in-browser JavaScript do?
- Webpage manipulation
- Add new HTML to the page, change the existing content, modify styles
- Interaction with the user and webserver
- React to user action (run on mouse clicks, pointer, etc.)
- Send requests over the network to remote servers
- Remember the data on the client-side("local storage"), etc.
What CAN'T in-browser JavaScript do?
- No direct access to OS functions
- Not read/write arbitrary files on the hard disk, copy or execute programs
- Each tabs/windows generally do not know about each other
- JavaScript can not usually receive data from other sites/domains
What makes JavaScript unique?
- Full integration with HTML/CSS
- Supported by all major browsers and enabled by default
Languages "over" JavaScript
- Theare are many languages that get "transpiled(converted)" to JavaScript before they run in the browser
- CoffeeScript, TypeScript, Kotlin, etc.
Manuals and specifications
Specification
Manuals
Compatibility tables
Code editors
IDE
- Integrated Development Environment, a full-scale "development environment"
- loads the project
- allows navigation between files
- provides autocompletion based on the whole project
- integrates with a version managements system (like git), a testing environment, and other "project-level" stuff
- Visual Studio Code, WebStorm, etc.
Lightweight editors
- The difference between an "IDE" and a "lightweight"
- IDE : works on a project-level, loads more data on start, analyzed the project structure
- LightWeight editor : fast and simple
- a lot of plugins including directory-level syntax analyzers, or more
- Atom, Sublime Text, Notepadd++, Vim, etc.
Developer console
- Developer tools : to see errors and run commands, examine variables, and get a lot of other useful information about scripts
- it have been embedded in browsers
Google Chrome
- Press [F12], or [Cmd+Opt+J] on Mac
- The red-colored error message
- A blue > symbol : a command line, where can type JavaScript commands
Firefox,Edge,and others
- Most other browsers are quite similar, press [F12]
Safari
- Open Preferences > Advanced > 'Show Develop menu in menu bar'
- Press [Cmd+Opt+C]
"An Introduction", by Ilya Kantor, 2007-2022, https://javascript.info/getting-started