Scribd
Upload
39 views

Introduction To HTML, CSS, and Javascript

Code example can be seen here: https://github.com/agustinustheo/instagram-clone-html-css-js-exercise

Uploaded by

hugejunter27
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

Introduction To HTML, CSS, and Javascript

Code example can be seen here: https://github.com/agustinustheo/instagram-clone-html-css-js-exercise

Uploaded by

hugejunter27
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

INTRODUCTION TO

HTML, CSS, JS
Agustinus Theodorus
HELLO!
Agustinus Theodorus
IT Architect and Web Services Staff at Bina Nusantara
IT Division
HOW DOES CLIENT SIDE & SERVER SIDE WORK?

HTTP Request
Web Web Browser
Internet
Server
HTTP Response
INTRODUCTION TO
HTML
Agustinus Theodorus
WHAT IS HTML?

Hypertext Markup Language


is the standard markup language for documents designed to be displayed in a web browser.
COMMONLY USED HTML TAGS
<p>…</p>
<br />
<h1>…</h1>
<!--…-->
<ol>…</ol>
<ul>…</ul>
<img />
<a>…</a>
<table>…</table>
INTRODUCTION TO
CSS
Agustinus Theodorus
WHAT IS CSS?

Cascading Style Sheets


is a style sheet language used for describing the presentation of a document written in a markup language like
HTML.
LET’S CODE
CSS!
INTRODUCTION TO
JAVASCRIPT
Agustinus Theodorus
WHAT IS JAVASCRIPT?

Ja-va-Script
ˈjävəskript,ˈjavə-/

noun
an object-oriented computer programming language commonly used to create interactive effects within web
browsers.
HOW DOES JAVASCRIPT WORK?

A brief explanation of Client Side and Server Side.

▪ Client Side 🡪 script is run on client’s browser, and doesn’t need web server to run.

▪ Server Side 🡪 script is processed on a web server, and is served back at the user to generate a dynamic html
page for the client.
HOW DOES JAVASCRIPT WORK?

Web Browser
Web (Client Side JS is
Server processed here)
HOW DO WE APPLY JAVASCRIPT?
▪ There are 3 ways to apply Javascript in your web app:
▪ Internal JavaScript
Written in the .html file within the script tag
<script>
function sayHiConsoleLog()
{
var button = document.getElementById(‘helloBtn’);
button.onclick = function () {
console.log(‘Hello World’);
}

</script>

▪ External JavaScript
Written in a external .js file
<script src="script.js"></script>

▪ Inline JavaScript handlers


Written inline in html tags (script here usually calls functions)
<button onclick=“sayHiConsoleLog()">Click me!</button>
LET’S LEARN
SYNTAX!
BUT BEFORE
THAT..
Variables in Javascript
var , let , & const;

The variables used in javascript are dynamic.


Javascript Functions
function(){

console.log(‘I am a function’);

}
alert
alert(object)
To show an alert containing the value of the object.
console.log
console.log(object)
To log the value of the object in the console.
.getElementById
object.getElementById(‘name of element’)
Used to get a HTML element by their Id as an object
.onclick
object.onclick
Used to add a trigger event on a object.
.value
object.value
Used to get the value of input tags (<input>).
.length
object.length
Used to get the length of a object.
.checked
object.checked
Used to get the Boolean in a <input type=“radio”> or <input type=“checkbox”>.
.innerHTML
object.innerHTML
Used to get or modify the value of HTML tags, i.e: (<div>, < p>, <span>, etc..)
.substring
object.substring(start index, end index)
Used to get the part of string in object value.
.test
testString.test(string)
Used to check if the string contains testString.
EXERCISES
▪ File : form registrasi.html

You might also like