[The Modern JavaScript] The JavaScript language - An introduction

둡둡·2022년 12월 19일
0

Modern-JavaScript

목록 보기
1/10
post-thumbnail

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?

  1. The engine (if a browser) parses the script
  2. It compiles the script to machine code
  3. 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

profile
괴발개발라이프

0개의 댓글