Javscript Fra
Uploaded by
betheltadele7Javscript Fra
Uploaded by
betheltadele7Java script
By Firaol K. franEh (Msc.)
Ambo University
https://t.me/firafiran
[email protected]
[email protected]
1
Internet programming lecture by firanEh [MSC] May 27, 2025
2
Internet programming lecture by firanEh [MSC] May 27, 2025
Front end Technologies 3
Internet programming lecture by firanEh [MSC] May 27, 2025
4
Internet programming lecture by firanEh [MSC] May 27, 2025
Road map 5
Internet programming lecture by firanEh [MSC] May 27, 2025
Javascript
• JavaScript is a programming language used to
create dynamic content for websites.
• It is a lightweight, cross-platform, and single-
threaded programming language.
• JavaScript is an interpreted language that executes
code line by line providing more flexibility.
What is it?
6
Internet programming lecture by firanEh [MSC] May 27, 2025
• HTML adds Structure to a web page, CSS styles it
and JavaScript brings it to life by allowing users to
interact with elements on the page, such as actions
on clicking buttons, filling out forms, and showing
animations.
Javascript 7
Internet programming lecture by firanEh [MSC] May 27, 2025
• JavaScript on the client side is directly executed in
the user's browser.
• JavaScript is also used on the Server side (on Web
Servers) to access databases, file handling and
security features to send responses, to browsers.
Javascript 8
Internet programming lecture by firanEh [MSC] May 27, 2025
Javascript 9
Internet programming lecture by firanEh [MSC] May 27, 2025
• To add JavaScript in HTML document, several
methods can be used.
• These methods include embedding JavaScript
directly within the HTML file or linking an external
JavaScript file.
How to add JS to Html? 10
Internet programming lecture by firanEh [MSC] May 27, 2025
• Java script is not the same as java.
• JavaScript is the most popular programming language in
the world.
It is a programming language.
v It is an interpreted language.
v It is Object-based programming.
v It is widely used and supported.
v It is accessible to the beginner.
11
Internet programming lecture by firanEh [MSC] May 27, 2025
Uses of JavaScript
• It uses to add Multimedia Elements. With JavaScript you
can show, hide, change, Resize images , and create
image rollovers.
• Creates pages dynamically.
• Interact with the user. It can do some processing of
forms and can validate user input when the user
submits the form.
12
Internet programming lecture by firanEh [MSC] May 27, 2025
1. <html>
2. <head></head>
3. <body>
4. <h2>
5. Adding JavaScript in HTML Document
6. </h2>
7. <button onclick="alert('Button Clicked!')">Click Here</button>
8. </body>
9. </html>
Example (inline js) 13
Internet programming lecture by firanEh [MSC] May 27, 2025
JavaScript Code Inside <head> Tag
• Placing JavaScript within the <head> section of an
HTML document ensures that the script is loaded
and executed as the page loads.
Javascript 14
Internet programming lecture by firanEh [MSC] May 27, 2025
1. <head>
2. <script>
3. function myFun() {
4. document.getElementById("demo") .innerHTML = "Content changed!";
5. }
6. </script>
7. </head>
8. <body>
9. <h2> Add JavaScript Cod inside Head Section</h2>
10. <h3 id="demo" style="color:green;"> My Javascript</h3>
11. <button type="button" onclick="myFun()">Click Here</button>
12. </body>
Example (internal js) 15
Internet programming lecture by firanEh [MSC] May 27, 2025
1. <body>
2. <h2> Add JavaScript Code inside Body Section </h2>
3. <h3 id="demo" style="color:green;"> Welcome to js </h3>
4. <button type="button" onclick="myFun()"> Click Here</button>
5. <script>
6. function myFun() {
7. document.getElementById("demo") .innerHTML = "Content
changed!";
8. }
9. </script>
10.</body>
Javascript inside body 16
Internet programming lecture by firanEh [MSC] May 27, 2025
• For larger projects or when reusing scripts across
multiple HTML files, you can place your JavaScript
code in an external .js file.
• This file is then linked to your HTML document using
the src attribute within a <script> tag.
External JavaScript (Using External File) 17
Internet programming lecture by firanEh [MSC] May 27, 2025
1. <head>
2. <script src="script.js"></script>
3. </head>
4. <body>
5. <h2>External JavaScript </h2>
6. <h3 id="demo" style="color:green;"> Welcome to js</h3>
7. <button type="button" onclick="myFun()">Click Here </button>
8. </body>
/* Filename: script.js*/
1. function myFun ()
2. {
3. document.getElementById('demo') .innerHTML = 'Content Changed'
4. }
External Javascript 18
Internet programming lecture by firanEh [MSC] May 27, 2025
JavaScript Can Change HTML Styles (CSS)
ü Changing the style of an HTML element, is a variant of changing an HTML attribute:
ü Eg: document.getElementById("head2").style.fontSize="100px";
Writing JavaScript
ü JavaScript code is typically embedded in the HTML to be interprted and run by the
client’s browser.
JavaScript Syntax
ü JavaScript syntax is the rules, how JavaScript programs are constructed.
JavaScript Programs
ü A computer program is a list of "instructions" to be "executed" by the computer.
ü In a programming language, these program instructions are called statements.
ü JavaScript is a programming language.
ü JavaScript statements are separated by semicolon:
Eg:
var x=5;
var y=6;
var z=x+y;
ü In HTML, JavaScript programs can be executed by the web browser.
19
Internet programming lecture by firanEh [MSC] May 27, 2025
Cont…
• JavaScript code is case sensitive.
• White space between words and tabs are ignored.
• Line breaks are ignored except within the statement.
• JavaScript statements end with a semicolon.
The Script tag
The <script> tag alerts a browser that JavaScript code follows. It is
typically embedded in the HTML.
<script language=“JavaScript”>
Statements
</script>
Example
<script language=“JavaScript”>
Alert(“well come to the web programming);
</script>
20
Internet programming lecture by firanEh [MSC] May 27, 2025
Implementing JavaScript
• There are three ways to add JavaScript to your pages.
1. Embedding code.
2. Inline code. conventions
3. External file
Programming Basics
Programmers use variables to store values.
A variable can hold several types of data.
In JavaScript you don’t have declare a variable’s data type before using it.
Any variable can hold any JavaScript data type.
String data
Numbers
Boolean values
Variable Names
There are rules and conventions in naming variables in any programming language. It is
good practice to use descriptive names for variables.
The following are the JavaScript rules:- 21
Internet programming lecture by firanEh [MSC] May 27, 2025
Cont…
ü The variable name must start with a letter or an underscore.eg:- firstName, _myName.
ü You can use numbers in a variable name, but not as the first character. Eg:- name01, tuition$
ü You can’t use space to separate characters. eg:- userName not user Name.
ü Capitalize the first letter of every word except in the first. Eg:- salesTax or userFirstName.
JavaScript Variable
• In a programming language, variables are used to store data values.
• JavaScript uses the var keyword to define variables.
• An equal sign is used to assign values to variables.
To declare variables , use the keyword var and the variable name.
Eg: var userNames
To assign values to variables, add an equal sign and the value.
Eg: var userName=“smith”;
var price=100;
22
Internet programming lecture by firanEh [MSC] May 27, 2025
JavaScript Operators
• JavaScript uses an assignment operator ( = ) to assign values to variables:
• Eg: var x=9;
• JavaScript uses arithmetic operators ( + - * / ) to compute values:
• Eg: var x=4;
var y=8;
var z1=x+y; var z2=x+y; var z3=x+y;
JavaScript Keywords
• JavaScript keywords are used to identify actions to be performed.
• The var keyword tells the browser to create a new variable:
JavaScript Comments
• Not all JavaScript statements are "executed".
• Code after double slashes // or between /* and */ is treated as a comment.
• Comments are ignored, and will not be executed:
• Eg: var x;// declaring a variable
JavaScript is Case Sensitive
• All JavaScript identifiers are case sensitive.
• The variables lastName and lastname, are two different variables.
23
Internet programming lecture by firanEh [MSC] May 27, 2025
Functions
JavaScript has built in functions for several predefined operations.
Here are some functions:-
Ø Alert(“message”);
Ø Confirm(“message”);
Ø Prompt(“message”);
Ø Document.write(“message”);
<script language="JavaScript">
function add(){
var userName;
var fname;
userName=prompt("enter your name");
alert("your name is "+ userName);
fname=prompt("enter your own name");
confirm("my name is "+fname);
}
</script>
24
Internet programming lecture by firanEh [MSC] May 27, 2025
JavaScript Functions and Events
• A JavaScript function is a block of JavaScript code, that can be executed
when "asked" for.
• For example, a function can be executed when an event occurs, like
when the user clicks a button.
JavaScript Output
• JavaScript does not have any built-in print or display functions.
JavaScript Display Possibilities
• JavaScript can "display" data in different ways:
• Writing into an alert box, using window.alert().
• Writing into the HTML output using document.write().
• Writing into an HTML element, using innerHTML.
• Writing into the browser console, using console.log().
25
Internet programming lecture by firanEh [MSC] May 27, 2025
JavaScript Statements
• JavaScript statements are composed of:
• Values, Operators, Expressions, Keywords, and Comments.
• In HTML, JavaScript statements are "instructions" to be "executed" by the web browser.
• This statement tells the browser to write "Hello Dolly." inside an HTML element with
id="demo":
• Eg:document.getElementById(“demo").innerHTML = Hello Dolly.";
JavaScript Values
• The JavaScript syntax defines two types of values: Fixed values and variable values.
• Fixed values are called literals. Variable values are called variables.
JavaScript Literals
• The most important rules for writing fixed values are:
• Numbers are written with or without decimals:
• Strings are text, written within double or single quotes:
• Expressions can also represent fixed values:
26
Internet programming lecture by firanEh [MSC] May 27, 2025
JavaScript Programs
• Most JavaScript programs contain many JavaScript statements.
• The statements are executed, one by one, in the same order as they are
written.
• Eg: var x=9; var y=8; var z=x+y;
• JavaScript programs (and JavaScript statements) are often called JavaScript
code.
JavaScript Data Types
• String, Number, Boolean, Array, Object.
27
Internet programming lecture by firanEh [MSC] May 27, 2025
• THANK U STUDENTS
BY FIRAOL K. (MSC.) 28
Internet programming lecture by firanEh [MSC] May 27, 2025
