KEMBAR78
Javascript - Getting started | DevCom ISITCom | PDF
Getting Started
<Hmidi Hamdi>
Agenda
- Basic Notations
- Why Javascript
- Git basics
- Modern JavaScript World
Basic Notations
What is Internet ?
The Internet is essentially a global
network of computing resources.
You can think of the Internet as a
physical collection of routers and
circuits as a set of shared
resources.
Internet Based-Services
● Email − A fast, easy, and inexpensive way to communicate with other Internet
users around the world.
● Telnet − Allows a user to log into a remote computer as though it were a local
system.
● FTP − Allows a user to transfer virtually every kind of file that can be stored on a
computer from one Internet-connected computer to another.
● UseNet news − A distributed bulletin board that offers a combination news and
discussion service on thousands of topics.
● World Wide Web (WWW) − A hypertext interface to Internet information
resources.
WWW (World Wide Web)
A technical definition of the World Wide
Web is − All the resources and users on
the Internet that are using the Hypertext
Transfer Protocol (HTTP).
HTTP
HTTP stands for Hypertext Transfer Protocol. This is the protocol
being used to transfer hypertext documents that makes the World
Wide Web possible.
A standard web address such as Yahoo.com is called a URL and here
the prefix http indicates its protocol.
URL
URL stands for Uniform Resource Locator, and is
used to specify addresses on the World Wide Web.
A URL is the fundamental network identification for
any resource connected to the web (e.g., hypertext
pages, images, and sound files).
What is Website ?
It is a collection of various pages written in HTML
markup language. Similarly, there are millions of
websites available on the web.
What is Web Server ?
Every Website sits on a computer known as a Web server. This
server is always connected to the internet. Every Web server that is
connected to the Internet is given a unique address made up of a
series of four numbers between 0 and 256 separated by periods. For
example, 68.178.157.132 or 68.122.35.127.
What is Web Browser ?
Web Browsers are software installed on
your PC. To access the Web you need a
web browsers, such as Netscape
Navigator, Microsoft Internet Explorer or
Mozilla Firefox.
What is SMTP Server ?
SMTP stands for Simple Mail Transfer Protocol
Server. This server takes care of delivering emails
from one server to another server. When you send
an email to an email address, it is delivered to its
recipient by a SMTP Server.
What is ISP ?
ISP stands for Internet Service Provider.
They are the companies who provide you
service in terms of internet connection to
connect to the internet.
What is HTML ?
HTML stands for Hyper Text Markup Language. This is the language
in which we write web pages for any Website. Even the page you are
reading right now is written in HTML.
This is a subset of Standard Generalized Mark-Up Language (SGML)
for electronic publishing, the specific standard used for the World
Wide Web.
What is DNS ?
DNS stands for Domain Name System. When someone types in your
domain name, www.example.com, your browser will ask the Domain
Name System to find the IP that hosts your site. When you register
your domain name, your IP address should be put in a DNS along
with your domain name. Without doing it your domain name will not
be functioning properly.
What is W3C ?
W3C stands for World Wide Web Consortium which is an
international consortium of companies involved with the Internet and
the Web.
The W3C was founded in 1994 by Tim Berners-Lee, the original
architect of the World Wide Web. The organization's purpose is to
develop open standards so that the Web evolves in a single direction
rather than being splintered among competing factions. The W3C is
the chief standards body for HTTP and HTML.
Web Devloper and Web Designer
A Web Designer
• Designs the look and feel of a website (creative side of
website)
• Decides the layout, fonts, color, images and overall
branding
• Creates the visual mock-up of the website
• Rarely does the development of a website!
• A Right-brained (Creative) Person
A Web Developer
• Brings the website mock-up to life on the Internet
(development side of website)
• Develops the website and hosts on a web server
• Has Web Development Skills: HTML, CSS, JavaScript,
PHP, Perl, Python, Java, Ruby
• A Left-brained (Logical) Person
FrontEnd and BackEnd
Front End Web Development
• Defined components on the page with HTML
• Make them look pleasing with CSS
• Enable interactivity with JavaScript
• Enhance productivity with use of frameworks
Back End Web Development
• Create the page components and content dynamically on
the web server
• Send the HTML + CSS + JavaScript to web browser
(used by a human user)
• Generate pages by programming in Java, JavaScript,
PHP, Perl, Python, Ruby
• Aim to achieve fast response times to end users
Why Javascript
Why JavaScript
- It's pretty easy to learn. Trust me!
- Libraries! Javascript has libraries for everything.
- Speed: Javascript is Really fast.
- Javascript can also be used to provide offline functionality.
- Ajax: Every web developer knows and loves Ajax. No point to be made
on this.
Git & Github
Version Controle System !
An Application that allows you to record
changes to your codebase in a structured and
controlled fashion.
why do i need that ?
- Undo errors/ roll back to earlier versions of
code
- Share Codebases
- Deploy Changes
Popular tools
- SVN
- Git
who it works !
Some git commands !
- $ git init : create a git repository from existing code
source.
- $ git clone [url] : get a copy from a project.
- $ git add [files/.] : add files to staging area.
- $ git commit -[a/m] “text commit” : commit changes to git
local repo
- $ git push origin master : push to a branch
- $ git pull : pull a repo
- $ git branch branchName : create a branch
- $ git checkout branchName : switch to a branch
- $ git merge branchName : merge branchName repo to
current branch
What is github !
- a git repo hosting service, while git is a
command line tool.
- it provides access to collaboration features
- By Default, all projects are public and free, if
you want a privet repo, then you pay
- it’s becaming the Facebook’s for devlopers.
Modern Javascript World
JavaScript
- Script Language
- Interpreted by Browser
- Orientée Objet
- DOM manipulation
- Dynamic UI
- Used in Servers (NodeJS)
What JavaScript can do with DOM?
- Change an HTML Element
- Change an attribute of an HTML Element
- Change the CSS style of an HTML Element
- Remove an existing HTML element or its attributes
- Add new a HTML Element or a new attribute to an Element
- React to an event associated with an HTML Element
- Create a new event listener and associate with an HTML Element
JavaScript DataTypes
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
JavaScript functions
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
JavaScript Objects
JavaScript Objects
var car = {
type:"Fiat",
model:"500",
color:"white"
};
JavaScript Objects
function Car(type,model,color){
this.type = type;
this.model = model;
this.color = color;
};
var corsa = new Car(‘Opel’,’Corsa’,’Blue’);
console.log(corsa.type);
JavaScript DOM
The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.
Let’s Build our TodoApp
For more Informations ...
http://www.w3schools.com/js/
Thank You !!

Javascript - Getting started | DevCom ISITCom

  • 1.
  • 2.
    Agenda - Basic Notations -Why Javascript - Git basics - Modern JavaScript World
  • 3.
  • 4.
    What is Internet? The Internet is essentially a global network of computing resources. You can think of the Internet as a physical collection of routers and circuits as a set of shared resources.
  • 5.
    Internet Based-Services ● Email− A fast, easy, and inexpensive way to communicate with other Internet users around the world. ● Telnet − Allows a user to log into a remote computer as though it were a local system. ● FTP − Allows a user to transfer virtually every kind of file that can be stored on a computer from one Internet-connected computer to another. ● UseNet news − A distributed bulletin board that offers a combination news and discussion service on thousands of topics. ● World Wide Web (WWW) − A hypertext interface to Internet information resources.
  • 6.
    WWW (World WideWeb) A technical definition of the World Wide Web is − All the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).
  • 7.
    HTTP HTTP stands forHypertext Transfer Protocol. This is the protocol being used to transfer hypertext documents that makes the World Wide Web possible. A standard web address such as Yahoo.com is called a URL and here the prefix http indicates its protocol.
  • 8.
    URL URL stands forUniform Resource Locator, and is used to specify addresses on the World Wide Web. A URL is the fundamental network identification for any resource connected to the web (e.g., hypertext pages, images, and sound files).
  • 9.
    What is Website? It is a collection of various pages written in HTML markup language. Similarly, there are millions of websites available on the web.
  • 10.
    What is WebServer ? Every Website sits on a computer known as a Web server. This server is always connected to the internet. Every Web server that is connected to the Internet is given a unique address made up of a series of four numbers between 0 and 256 separated by periods. For example, 68.178.157.132 or 68.122.35.127.
  • 11.
    What is WebBrowser ? Web Browsers are software installed on your PC. To access the Web you need a web browsers, such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.
  • 12.
    What is SMTPServer ? SMTP stands for Simple Mail Transfer Protocol Server. This server takes care of delivering emails from one server to another server. When you send an email to an email address, it is delivered to its recipient by a SMTP Server.
  • 13.
    What is ISP? ISP stands for Internet Service Provider. They are the companies who provide you service in terms of internet connection to connect to the internet.
  • 14.
    What is HTML? HTML stands for Hyper Text Markup Language. This is the language in which we write web pages for any Website. Even the page you are reading right now is written in HTML. This is a subset of Standard Generalized Mark-Up Language (SGML) for electronic publishing, the specific standard used for the World Wide Web.
  • 15.
    What is DNS? DNS stands for Domain Name System. When someone types in your domain name, www.example.com, your browser will ask the Domain Name System to find the IP that hosts your site. When you register your domain name, your IP address should be put in a DNS along with your domain name. Without doing it your domain name will not be functioning properly.
  • 16.
    What is W3C? W3C stands for World Wide Web Consortium which is an international consortium of companies involved with the Internet and the Web. The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web. The organization's purpose is to develop open standards so that the Web evolves in a single direction rather than being splintered among competing factions. The W3C is the chief standards body for HTTP and HTML.
  • 17.
    Web Devloper andWeb Designer A Web Designer • Designs the look and feel of a website (creative side of website) • Decides the layout, fonts, color, images and overall branding • Creates the visual mock-up of the website • Rarely does the development of a website! • A Right-brained (Creative) Person A Web Developer • Brings the website mock-up to life on the Internet (development side of website) • Develops the website and hosts on a web server • Has Web Development Skills: HTML, CSS, JavaScript, PHP, Perl, Python, Java, Ruby • A Left-brained (Logical) Person
  • 18.
    FrontEnd and BackEnd FrontEnd Web Development • Defined components on the page with HTML • Make them look pleasing with CSS • Enable interactivity with JavaScript • Enhance productivity with use of frameworks Back End Web Development • Create the page components and content dynamically on the web server • Send the HTML + CSS + JavaScript to web browser (used by a human user) • Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby • Aim to achieve fast response times to end users
  • 19.
  • 22.
    Why JavaScript - It'spretty easy to learn. Trust me! - Libraries! Javascript has libraries for everything. - Speed: Javascript is Really fast. - Javascript can also be used to provide offline functionality. - Ajax: Every web developer knows and loves Ajax. No point to be made on this.
  • 23.
  • 24.
    Version Controle System! An Application that allows you to record changes to your codebase in a structured and controlled fashion.
  • 25.
    why do ineed that ? - Undo errors/ roll back to earlier versions of code - Share Codebases - Deploy Changes
  • 26.
  • 27.
  • 28.
    Some git commands! - $ git init : create a git repository from existing code source. - $ git clone [url] : get a copy from a project. - $ git add [files/.] : add files to staging area. - $ git commit -[a/m] “text commit” : commit changes to git local repo - $ git push origin master : push to a branch - $ git pull : pull a repo - $ git branch branchName : create a branch - $ git checkout branchName : switch to a branch - $ git merge branchName : merge branchName repo to current branch
  • 29.
    What is github! - a git repo hosting service, while git is a command line tool. - it provides access to collaboration features - By Default, all projects are public and free, if you want a privet repo, then you pay - it’s becaming the Facebook’s for devlopers.
  • 30.
  • 31.
    JavaScript - Script Language -Interpreted by Browser - Orientée Objet - DOM manipulation - Dynamic UI - Used in Servers (NodeJS)
  • 32.
    What JavaScript cando with DOM? - Change an HTML Element - Change an attribute of an HTML Element - Change the CSS style of an HTML Element - Remove an existing HTML element or its attributes - Add new a HTML Element or a new attribute to an Element - React to an event associated with an HTML Element - Create a new event listener and associate with an HTML Element
  • 33.
    JavaScript DataTypes var length= 16; // Number var lastName = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; // Array var x = {firstName:"John", lastName:"Doe"}; // Object
  • 34.
    JavaScript functions function toCelsius(fahrenheit){ return (5/9) * (fahrenheit-32); }
  • 35.
  • 36.
    JavaScript Objects var car= { type:"Fiat", model:"500", color:"white" };
  • 37.
    JavaScript Objects function Car(type,model,color){ this.type= type; this.model = model; this.color = color; }; var corsa = new Car(‘Opel’,’Corsa’,’Blue’); console.log(corsa.type);
  • 38.
    JavaScript DOM The HTMLDOM is a standard for how to get, change, add, or delete HTML elements.
  • 39.
  • 40.
    For more Informations... http://www.w3schools.com/js/
  • 41.