JAVASCRIPT
Applications are
everywhere: from
INTRODUCTION games to social media.
TO APPLICATION
DEVELOPMENT &
WEB
PROGRAMMING Learning about them
builds a foundation for
future careers in
technology.
WHAT IS
APPLICATION
DEVELOPMENT?
CREATING AND APPS ALLOW US TO
MAINTAINING SOFTWARE PERFORM TASKS, STAY
FOR DEVICES. CONNECTED, AND HAVE
FUN.
APPLICATION DEVELOPMENT
• Front end
• part that users interact with directly
• user interface (UI) and user experience (UX) design
• visually appealing, and easy to use
• Front-end developers use languages such as HTML (Hypertext Markup
Language), and CSS (Cascading Style Sheets).
• JavaScript is embedded in HTML/CSS to build the logic at the front end of an
application.
WHAT IS FRONT-END?
User-facing part of an
application (UI/UX).
Languages: HTML, CSS,
JavaScript.
Focus: Making apps
visually appealing and
easy to use.
WHAT IS BACK-END?
BEHIND-THE-SCENES ESSENTIAL FOR APP
PROCESSING AND DATA FUNCTIONALITY.
STORAGE.
APPLICATION DEVELOPMENT
• Back end
• behind-the-scenes portion that users don't directly interact with.
• responsible for processing, storing data, and handling the app's functionality.
• Both front-end and back-end development are essential for creating
user-friendly applications.
SCRIPTING
• It is a type of programming that involves writing a series of commands (a script)
to automate tasks, control software applications, or create dynamic
content within a specific runtime environment.
• Key Characteristics
• Automation: repetitive or time-consuming manual tasks
• Interpretation: allows for faster development and testing cycles.
• simpler syntax and fewer lines of code compared to traditional programming languages, making them
easier to learn and write.
• Common Uses in
• Web Development
• System Administration
• Software Testing
• Data Analysis
SERVER-SIDE SCRIPTING
• Your computer (the client) sends a request to a special
computer (the server) on the internet.
• The server reads your request, processes it, and sends back a
response.
• Server-side scripting allows to restrict access to databases and
prevent potential hacks.
• Databases are not accessible outside the server.
• It's used for things like logging into websites, searching for
information, and storing data online.
CLIENT-SIDE SCRIPTING
• your computer (the client) gets a webpage from the internet.
• The webpage has some special instructions written in JavaScript.
• Your computer reads those instructions and makes the webpage interactive,
like games or buttons that respond to your clicks.
• Using client-side scripting can improve the user experience on web pages.
• Instant feedback on data input, such as validation, animation, and visualization, is
possible.
• Note :Validation – the process of checking user input data for correctness and
compliance with rules. E.g.: Checking whether entered password has the
required number of characters.
INQUIRY QUESTIONS
• Conceptual: Why is scripting useful in web development?
• Debatable: Can a website work without scripting?
SCRIPTING IN APPLICATIONS
Client-Side: Interactive elements
(e.g., buttons, games). your computer (the
client) gets a webpage from the internet.
The webpage has some special instructions
written in a language called JavaScript.
Your computer reads those instructions and
makes the webpage interactive, like games
or buttons that respond to your clicks.
Server-Side: Processes requests,
stores data (e.g., logging into a website). In
server-side scripting, your computer (the client)
sends a request to a special computer (the
server) on the internet.
HTML: Structure
and content.
HTML, CSS,
AND CSS: Styling and
formatting.
JAVASCRIPT
JavaScript:
Interactivity and
dynamic behavior.
INQUIRY QUESTIONS
• Conceptual: How do front-end and back-end work
together?
• Debatable: Is a good-looking app more important than a
functional one?
Most popular front-
end language.
IMPORTANCE
OF Adds interactivity
and makes apps
JAVASCRIPT engaging.
Examples: Google
Maps, 2048, Flappy
Bird.
INQUIRY QUESTIONS
• Conceptual: How do structure, style, and behavior connect?
• Debatable: Can JavaScript replace HTML or CSS?
WHY JAVASCRIPT?
• most popular front-end programming language.
• make websites and apps more interactive and interesting.
• JavaScript works together with other web technologies like HTML and CSS.
• It enables developers to add dynamic elements, handle user interactions, and create
engaging user experiences.
• The part of Google Maps we see and interact with - the front end - was crafted with
JavaScript. It also uses extra tools, known as libraries and frameworks.
• mobile apps like Facebook, Instagram, UberEATS that work well on Android and iOS.
• 2048 is a sliding puzzle game
• Flappy Bird, the addictive side scrolling sensation,
LANGUAGE TRANSLATION
• compilation is to translate human-readable source code
(written in high level programming languages) into machine
code(low level language).
• It translates the whole source code in one go.
• E.g.: C++
• Interpretation is the process of reading and executing your
source code line-by-line in real time and translate into low
level language.
• E.g.: Python
JUST-IN-TIME (JIT) COMPILATION
• combines features of both compilation and interpretation.
• JIT compilation attempts to use the benefits of both.
• smart way for computers to run programs faster.
• Instead of interpreting code line by line (which can be slow)
or compiling everything in advance (which takes time), the
computer translates parts of the code into machine
language just when they are needed.
COMPILATION: INTERPRETATION:
COMPILATION & TRANSLATES ALL AT
ONCE (E.G., C++).
TRANSLATES LINE-BY-
LINE (E.G., PYTHON).
INTERPRETATION
JIT COMPILATION:
COMBINES BOTH (E.G.,
JAVASCRIPT, JAVA).
[Link]
HOW DOES JIT WORK IN
JAVASCRIPT?
• Imagine reading a book in two different ways:
• 1. Interpretation (Slow but Flexible):
• o You translate each sentence one by one while reading.
• o Easy to start but takes longer if you re-read the same page.
• 2. Full Compilation (Fast but Delayed):
• o You translate the entire book before reading.
• o Takes time upfront, but reading is fast later.
• 3. JIT Compilation:
• o You start by reading sentence by sentence (interpretation).
• o If a paragraph is read many times, you quickly translate just that part to read faster next time.
JIT COMPILATION
• JavaScript engines (like V8 in Chrome) use JIT to speed up websites by compiling frequently used code while
keeping flexibility.
• While the interpreted program is being run, the JIT compiler determines the most frequently used code and
compiles it to machine code.
• Depending on the compiler, this can be done on a method or smaller section of code.
• In computing, JIT compilation is compilation during execution of a program rather than before execution.
• Typical scenario
• The source code is completely converted into machine code.
• JIT scenario
• The source code will be converted into assembly language like structure (intermediate language) for C#, Bytecode for java.
• The intermediate code is converted into machine language only when the application needs that is
required codes are only converted to machine code. E.g.: JavaScript, Java
INQUIRY QUESTIONS
• Conceptual: Why is JIT useful?
• Debatable: Is speed more important than flexibility?
• Tags: Keywords enclosed in <>.
HTML TAGS & • Structure: Head and body sections.
STRUCTURE • Attributes: Add functionality (e.g.,
bgcolor=red).
INQUIRY QUESTIONS
• Conceptual: Why do attributes matter?
• Debatable: Can HTML exist without attributes?
JavaScript can be in
the <head> or
<body> sections.
PLACING
JAVASCRIPT Use <script> tags
for inclusion.
IN HTML
Example:
alert('Hello
World!');
Displays a message
box with 'OK.'
ALERT
METHOD
Example:
alert('Hello\nWorld!');
JAVASCRIPT IN HTML DOCUMENT
• alert () METHOD/FUNCTION
• The alert () method displays an alert box with a message and an OK button.
• The alert box forces the user to read the message.
• After running the HTML code from the above example, you will notice an
alert box appear in your browser.
• Inside the alert box, you will see the message "Hello World!" being displayed.
• Note:You can use the "\n" and + operator in an alert box to display two
messages on different lines.
• Example - alert(“Hello”+”\n”+”World”)
INQUIRY QUESTIONS
• Conceptual: Why does script placement matter?
• Debatable: Are alerts good for user experience?
PRACTICE TASKS
• 1. Display 'My First JavaScript Program' using an alert box.
• 2. Display your name and grade on separate lines using \n.
Term Real-World Equivalent Where it happens
Scripting A Cooking Recipe Everywhere
Client-Side Adding ketchup to your fries Your Browser
Server-Side The Chef cooking the burger The "Cloud" / The Kitchen
JavaScript The muscles that make you move Mostly the Client
JIT A Live Translator Inside the Browser
• Front-end vs. back-end.
KEY • Importance of JavaScript.
TAKEAWAYS • HTML, CSS, and JavaScript in web
development.