Javascript: Concepts of Web Programming

//JavaScript
Concepts of Web Programming

Introduction
JavaScript Client-Side Scripting
Language
J AVA S C R I P T
BRENDAN EICH
FOUNDER OF JAVASCRIPT
Hired by Netscape Communications Corporations in 1995
O F
H I S T O RY
• JavaScript was Invented in 1995

• ES1 released in 1997
5
< />
JavaScript Frameworks
After Release of
ECMAScript 5 in
2009
AJAX, Prototype, jQuery, dojo toolkit, moo
tools etc. were developed that made
programming a lot easier.
coder:// 2019.All Rights Reserved

6
< />
JavaScript COMPANIES
Framework’s Used
by Big Companies
Following companies uses JavaScript in their

products.

7
< />
Linking your JavaScript File
1. <!DOCTYPE html>
2. <html lang="en">
• You do so by adding a <script> tag at 3. <head>
the bottom of your HTML, before 4. <title>Document</title>
closing the </body> tag. 5. <script> </script>

6. </head>
• This <script> tag should contain 7. <body>

8. <p>Hello World...</p>
a src attribute that points to your 9. <script src=“app.js”></script>
JavaScript file, like this: 10. </body>
11. </html>

JavaScript
Foundations
9
< />
The Console
http://www.website.com
The console is a place that lets you write commands to find out
what’s happening with your JavaScript code. It’s a useful tool
you’ll keep using to check and eliminate errors (a process
known as debugging).
Ctrl + Shift + J

COMMENTS
• You can write additional notes to help you think

through problems in JavaScript.
• To write these additional notes, you use comments.
• Comments appear in two forms:

1. //
2. /* */
What is
1 + 1?
What are JavaScript basic types?
The seven data types
JavaScript has seven basic data types in total. These data types are also called primitives. They are:
1.String
2.Number
3.Boolean
4.Null
5.Undefined
6.Symbol
7.BigInt
1. String
A String represents text data in JavaScript. You create strings by enclosing them in quotation marks:
“We are learning JavaScript!”
Adding Strings together:
Strings can be added together with the + operator. When you add strings together, you join the
two strings into one. This process is also called String concatenation.
console.log('Super' + 'man')
2. Number
• A Number represents numeric data. In JavaScript, you can create numbers by writing the number
directly in its numeric form:
console.log(123456789)
Adding numbers together

• Numbers in JavaScript behave like numbers in Math.
console.log(1 + 1)
Subtracting, multiplying and dividing numbers

• You can also subtract, multiply or even divide the numbers with -, * and / respectively.
console.log(10 - 5) console.log(20 * 5) console.log(100 / 50) console.log(15 % 2)

3. Boolean
Booleans are very much like light switches. They can only be “switched on” (true) or “switched off”
(false).
console.log(true) // true
console.log(false) // false
Variables
What are variables?
• Variables are containers for storing data (storing data values)
Declaring Variables
var variableName = 'value‘;
• Using var
• Using let
• Using const
There are four parts you’ll want to take note of:
const variableName = 'value‘;
1. The variableName
2. The value
3. The = sign
4. The const keyword
1. The variableName
variableName is the name of the variable you’re declaring. You can name it anything, as long as it
follows these rules:
1) It must be one word

2) It must consist only of letters, numbers or underscores (0-9, a-z, A-Z, _).
3) It cannot begin with a number.
4) It cannot be any of the reserved keywords.
Note: If you need to use two or more words to name your variable, you should join the words together, but
capitalize the first letter of each subsequent word.
2. The value
The value is what you want the variable to be. It can be primitives (like strings and numbers
etc) or objects (like arrays and functions).
<
21 />
mini puzzle game

Subtitle here
public class MyClass {

Result Code
public static void main(String[] args) {
1
for (int i = 0; i < 5; i++) { 2

3
System.out.println(i); 4
5
} }
}

Table of Content
JavaScript Basics text paragraph text

Loops
A Conference Planner
JavaScript in HTML If-Else Statements
Important subtitle text
Comments Arrays
Variables Strings
Operators Important subtitle text

Regular Expressions
Functions Numbers and Math Important subtitle text

<
23 />
Image placeholder
Intro to web
development
There's no one "best" programming language, and once
you've learned one, it's fairly easy to pick up another, so don't
get hung too up on choosing your first language.
Learn HTML 5
MORE
DETAILS
Coder://

<
24 />
Code to the web design

There's no one "best" programming language, and once you've learned one, it's fairly easy to
pick up another, so don't get hung too up on choosing your first language.
MORE
DETAILS

Paragraph text.
Web- There's no one "best" programming language, and once you've

learned one, it's fairly easy to pick up another, so don't get hung too
programming up on choosing your first language. That said, some languages are
more beginner-friendly than others. The language you choose to
There's no one "best" programming start with might depend, again, on your purpose. (For example, if
language, and once you've learned one. you want to write an iOS app, you'll need to learn Swift.)
MORE
DETAILS
coder makes it easy
and fun for you to
code.
MORE
DETAILS

basic to learn
development

Option
Important subtitle text development

28
28
< />
coder makes it easy and fun < />

for you to code.
There's no one "best" programming language, and once you've learned one.
1. #include <stdio.h>
2. int main(void)
Learn by
3. {
4. printf("hello, world\n");
5. }
Doing://
<
29 />
Coding is a fundamental skill that children

need to learn.
There's no one "best" programming language, and once you've learned one,
it's fairly easy to pick up another, so don't get hung too up on choosing your
first language.
01. Learn C Language
02. Learn C# Language

<
30 />
coder://
Ready to get started ?

There's no one "best" programming language, and once you've learned one, it's fairly easy to pick
up another, so don't get hung too up on choosing your first language.
Learn more

Plan strategy to be master code
There's no one "best" programming language, and once you've
learned one, it's fairly easy to pick up another, so don't get hung too
up on choosing your first language. MORE
DETAILS
03
02 text paragraph text
01 text paragraph text Learn C# Language
text paragraph text Learn C++ Language
Learn C Language
Meet our team
Subtitle here
Position Position Position Position

Simo Aldric Tor Hildræd Felix Artemisia Pia Elian
MORE
DETAILS
<
33 />
http://www.website.com
How JavaScript works with HTML,

CSS and Web Browser?

<
34 />
JS
How JavaScript Works in

<br>
Browser?

Meet our team
Web Mentor Image Placeholder Image Placeholder Image Placeholder
“A wonderful serenity
has taken possession of Szonja Odilo Maïa Eliisa Dubhghlas Tera
my entire soul, Job position Job position Job position
Mobile Mentor Image Placeholder Image Placeholder Image Placeholder
“A wonderful serenity
has taken possession of Irene Marianne Andrey Lore Lucy Bharat
my entire soul, Job position Job position Job position
Eino Williric
There's no one "best" programming language, and once you've learned
one, it's fairly easy to pick up another, so don't get hung too up on
choosing your first language.
C# Language 85%
Golang Language 60%
Python Language 72%
Hello! world
<
37 />
Frequently Asked
Questions (FAQ)
General How do I get started?
There's no one "best" programming There's no one "best" programming

language, and once you've learned one. language, and once you've learned one.
What time should I arrive? Do I have to reserve my spot?


“First, solve the problem.
Then, write the code”
John Johnson://
Gallery slide
01
text paragraph text
Build your website
Play:// Coder://
Image Placeholder Image Placeholder Image Placeholder
Build web
HTML
5
Pages and site.
CSS3
There's no one "best" programming language, and once you've learned

one, it's fairly easy to pick up another, so don't get hung too up on
Image Placeholder Image Placeholder
Python
There's no one "best" programming

language, and once you've learned one.
one "best" programming language

There's no one "best" programming language, and once you've learned one, it's fairly easy to pick up another, so don't
Image Placeholder Image Placeholder
Development
There's no one "best"

programming language, and
once you've learned one.
Build your Image Placeholder
app Development
There's no one "best"

programming language, and
once you've learned one.
<
43 />

<
44 />
Learn External CSS

Subtitle here
styles.css External CSS Example
1. body { An external style sheet is used to define the style 1. <!DOCTYPE html>
2. background-color: for many HTML pages. 2. <html>
powderblue; With an external style sheet, you can change the 3. <head>
3. } look of an entire web site, by changing one file! 4. <link rel="stylesheet“
4. h1 { To use an external style sheet, add a link to it in href="styles.css">
5. color: blue; the <head> section of the HTML page: 5. </head>
6. } 6. <body>
7. p { 7. <h1>This is a heading</h1>
An external style sheet can be written in any text
8. color: red; 8. <p>This is a paragraph.</p>
editor. The file must not contain any HTML code,
9. } 9. </body>
and must be saved with a .css extension.
10. </html>
Here is how the "styles.css" looks:

<
45 />
Fully support language

coder makes it easy
and fun for you to
code.
JAVA PHP Python
C++ C# C MORE
DETAILS
More programming language

Example
JavaScript Date 1.
2.
<p id="demo"></p>
<script>
Reference 3.
4.
var d = new Date();
document.getElementById("demo").innerHTML = d;
5. </script>
The Date object is used to work with dates and times.
Date objects are created with new Date(). There are four Result
ways of instantiating a date:
Wed Apr 24 2019 14:15:03 GMT+0700
(Western Indonesia Time)
Date Object
1. var d = new Date();
2. var d = new Date(milliseconds);
3. var d = new Date(dateString);
4. var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
<
47 />
August
Our agenda in
this August
Sun Mon Tue Wed Thu Fri Sat
28 29 30 31 1 2 3
19 Learn C Language 4 5 6 7 8 9 10
11 12 13 14 15 16 17
21 Learn C# Language
18 19 20 21 22 23 24
22 Learn C++ Language 25 26 27 28 29 30 31
1 2 3 4 5 6 7

coder makes it easy and fun for you to code
1
Choose what to learn

MORE
DETAILS

<
49 />
Learning by doing


2

Learning by doing


3

<
51 />
TalkCode
Don't Learn to Code,

Learn to Talk Code Jerry Abraham

Slide Break
<
53 />
Example
1.
2.
3.
<table>
<tr>
<th>Company</th> <th>Contact</th>
HTML Table Example
<th>Country</th>
4. </tr> Result
5. <tr>
6. <td>Alfreds Futterkiste</td> <td>Maria
Company Contact Country
Anders</td><td>Germany</td>
7. </tr>
Alfreds Futterkiste Maria Anders Germany
8. <tr>
9. <td>Centro Moctezuma</td> <td>Francisco
Centro Moctezuma Francisco Chang Mexico
Chang</td> <td>Mexico</td>
10. </tr>
11. <tr>
Ernst Handel Roland Mendel Austria
12. <td>Ernst Handel</td> <td>Roland Mendel</td>
<td>Austria</td>
MORE
13. </tr> DETAILS
14. </table>

Go
Office Data C#
Chart
Programming
Language
C++ Python
<
55 />
Development Development

MORE MORE
DETAILS DETAILS
1 2 3 4 5 6

56
56
<< //>
>
140 Office Data

120
100
Chart
80
60
40

20

Jan Feb Mar Apr May Jun Jul Aug Sep Oct

coder makes it easy and fun for you to code
65% 45% 85%
Option one Option two Option three

Next Next Next
Analytics SWOT
Infographic Design With Modern Style
Strength
SWOT slide
Strength


Weakness
slide
SWOT
Weakness
Development

MORE 
Opportunity
SWOT slide
Opportunity

Comments are not displayed Important subtitle text
in the browser-->
Threat
slide
SWOT
Threat
Development

MORE 
Process strategy to be master code
01 02 03
Learn by doing Try Something new Development
There's no one "best" programming There's no one "best" programming There's no one "best" programming
language, and once you've learned one. language, and once you've learned one. language, and once you've learned one.
<
64 />
Coding is a fundamental
skill that children need to
learn.
1
There's no one "best" programming language, and once you've learned one,
it's fairly easy to pick up another, so don't get hung too up on choosing your
2
first language.
3
01. Choose the Language 02. Start Small
4
03. Online Training 04. Play Coding

Premium
Pricing Plan Basic Pro
There's no one "best" programming language,

$ 47,99 $ 85,99 $ 65,99
and once you've learned one, it's fairly easy to
Insert Text in This Text Insert Text in This Text Insert Text in This Text
pick up another, so don't get hung too up on
Insert Text in This Text Insert Text in This Text
Insert Text in This Text
MORE PURCHAS PURCHAS

DETAILS E E
PURCHASE
Social Media
Coder://
10k
100k Followers
2M Subscribe
Mind map infographic slide
C++ C#
06
Programming
Language
Python Java
05
Php

Binary tree
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14
1000 <-> 2000
0
1000 <-> 1500 1500 <-> 2000
1 2
1000 <-> 1250 1250 <-> 1500 1500 <-> 1750 1750 <-> 2000
3 4 5 6
1000 <-> 1125 1125 <-> 1250 1250 <-> 1375 1375 <-> 1500 1500 <-> 1625 1625 <-> 1750 1750 <-> 1875 1875 <-> 2000
7 8 9 10 11 12 13 14
Learn Matrix
1 3 4 1 3 4
Matrix 1 2 4 3 Matrix 2 2 5 3
3 4 5 3 7 2
1+1 3+3 4+4 There's no one "best" programming

language, and once you've learned one, it's
Matrix x 2+2 4+5 3+3
fairly easy to pick up another, so don't get
3+3 4+7 5+2 hung too up on choosing your first language.
Id card event
mockup
MORE
DETAILS
<
71 />
01
text paragraph text
Smartphone A Coding Planner
mockup Go
C#
Important subtitle text Image

Python
C++
75%
United Kingdom Subtitle Here
There's no one "best" programming 50%
language, and once you've learned one, it's

fairly easy to pick up another.
Subtitle Here
MORE
DETAILS
65%
Option one
Subtitle Here
Australia
Map
Important subtitle text 85%

Option three
Next
<
74 />
World Map
slide Option one
There's no one "best" programming language, and

once you've learned one, it's fairly easy to pick up
another.
MORE
DETAILS
Comments are not displayed
in the browser-->

Address

Our Phone number
Office
Websites

@coder_officials
Thank you
For your attention

Javascript: Concepts of Web Programming

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript: Concepts of Web Programming

Uploaded by

Copyright:

Available Formats

//JavaScript

Concepts of Web Programming

• JavaScript was Invented in 1995

coder:// 2019.All Rights Reserved

Following companies uses JavaScript in their

coder:// 2019.All Rights Reserved

Linking your JavaScript File

closing the </body> tag. 5. <script> </script>

• This <script> tag should contain 7. <body>

coder:// 2019.All Rights Reserved

coder:// 2019.All Rights Reserved

• You can write additional notes to help you think

• To write these additional notes, you use comments.

• Comments appear in two forms:

“We are learning JavaScript!”

Adding Strings together:

Adding numbers together

Subtracting, multiplying and dividing numbers

console.log(10 - 5) console.log(20 * 5) console.log(100 / 50) console.log(15 % 2)

const variableName = 'value‘;

1) It must be one word

mini puzzle game

public class MyClass {

for (int i = 0; i < 5; i++) { 2

coder:// 2019.All Rights Reserved

JavaScript Basics text paragraph text

Operators Important subtitle text

Functions Numbers and Math Important subtitle text

coder:// 2019.All Rights Reserved

Code to the web design

coder:// 2019.All Rights Reserved

Web- There's no one "best" programming language, and once you've

coder:// 2019.All Rights Reserved

Important subtitle text

Important subtitle text

Important subtitle text development

coder makes it easy and fun < />

Coding is a fundamental skill that children

01. Learn C Language

02. Learn C# Language

coder:// 2019.All Rights Reserved

Ready to get started ?

coder:// 2019.All Rights Reserved

Position Position Position Position

How JavaScript works with HTML,

coder:// 2019.All Rights Reserved

How JavaScript Works in

coder:// 2019.All Rights Reserved

Web Mentor Image Placeholder Image Placeholder Image Placeholder

Mobile Mentor Image Placeholder Image Placeholder Image Placeholder

Golang Language 60%

Python Language 72%

There's no one "best" programming There's no one "best" programming

What time should I arrive? Do I have to reserve my spot?

There's no one "best" programming There's no one "best" programming

coder:// 2019.All Rights Reserved

Build your website

There's no one "best" programming language, and once you've learned

Image Placeholder Image Placeholder

There's no one "best" programming

one "best" programming language

There's no one "best"