DEV Community

PRIYA K
PRIYA K

Posted on

What is Javascript?

#webdev #javascript #beginners #programming

- Developed by Brendan Eich at Netspace Communications in 1995

  • High Level Language
  • JavaScript is Versatile Javascript can do many types of work used as front-end,back-end,client-side ,server-side,Web-apps,Mobile apps,Games
  • single threaded language Executes one task at a time
  • Dynamically typed language Data type of variable is decided at run time
  • JavaScript is lightweight Interpreted Language Executes the code line by line Runs directly in browsers JavaScript is Just-In Time compiled ,meaning code is processed and executed by JavaScript Engine(Like v8 in Chrome)
  • JavaScript is case sensitive
  • JavaScript is a Scripting language
  • JavaScript is a programming Language
  • Html provides the structure of webpage ,css handles visual styling
  • JavaScript is "behavior" layer brings website to life by making them interactive and dynamic
  • Add website functionality,interact with web elements
  • Front-End development of webpages and web apps
  • Dynamically modify HTML and CSS to update a user interface via the Document Object Model API
  • JavaScript does not run in order from top to bottom because of "Hoisting"
  • create dynamically updating content,control multimedia ,animate images.
  • Asynchronous Handles tasks like fetching data from servers without freezing the user interfaces
  • Rich EcoSystem Libraries and Frameworks Built on JavaScript such as Angular,React,Vue.js

Print "Hello world" in Browser Console

<html>
<head></head>
<body>
    <h1>Check the console for the message!</h1>
    <script>
        // This is our first JavaScript program
        console.log("Hello, World!");
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

SERVER SIDE VS CLIENT SIDE
SERVER SIDE(Backend in JavaScript)

  • Run on the server
  • Manipulating files,generating Response
  • Results are downloaded and displayed on browser
  • JavaScript can be used as Server-Side language
  • Gets data(from database) and sends a new content
  • Example Express.js Node.js Environment create API calls handles database Login → server checks data → shows your profile

CLIENT SIDE

  • code is run on User's computer
  • Handles user events like Clicks and form inputs
  • Controls the Browser and its DOM(Document Object Model)
  • browser changes content (JavaScript)
  • Web page is viewed,the pages's client side is downloaded,run and displayed by the browser
  • Changes things without reloading the page. Browser itself changes the page.
  • Example Libraries are AngularJS, ReactJS, and VueJS runs in Browser Validate forms make API calls handles storage

Dynamic vs Static code
Dynamic
Client-side and Server-side JavaScript
Dynamic Website can change what it shows based on situation(like user input,date,time etc..,)

Static
Always show the same content
Same page for every user
No changes,no interation,No updates automatically
Example
Simple HTML page with Fixed text

DOM(Document Object Model)
Tree-like structure representing a page.

External JavaScript
write it in separate file(script.js)
Instead of writing JavaScript inside HTML

Working
1.Create a file
script.js
2.Link it in HTML

<script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

Error (Cross-origin request blocked )
opened file using file://
Browser Blocks Js modules for security

Solutions
Run a local server
Open Using:

http://localhost:8000
Enter fullscreen mode Exit fullscreen mode

No server (Easy fix)

<script defer src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

Inline JavaScript
Example:

<button onclick="createParagraph()">Click me!</button>
Enter fullscreen mode Exit fullscreen mode

External JS = Good (clean & reusable)
Inline JS = Bad (messy & repeated)

API
ready-made code give extra powers to JavaScript
API gives ready functions,We can use them

API USES
Save time
Add advanced features
Do complex Tasks easily

Two Types of API
1.Browser APIs(Built-in)
Already inside the browser
No need to install anything

Examples
Dom API

  • Change HTML and CSS using JavaScript
  • Add/Remove elements Example Button click -> new text appears

Geo Location API
Gets user Location
Example
Maps show “You are here”

Canvas and WebGL API
Create graphics and animations
Example
Games,3D effects

Audio and Video API
Play music/video
Use camera
Example
Web cam,Video call

2.Third Party API's(External)
Need to connect/use
Not inside browser
Get them from internet

Example
Google Map API's
Add maps to website

Social Media API's
Show posts on site

Top comments (0)