Sie sind auf Seite 1von 50

Perancangan & Pemrograman Web

Your Webserver Environment Request

Run
Web
# manage.py Internet
Page

Merged of html
template and Value Extracted arguments

Request
from process from Request

Page
Web
index.html views.py
style.css
script.js It’s your python
jquery code

Value from process view.py Access to URL (on Browser):


http://[appname].herokuapp.com/

2
PERANCANGAN DAN PEMROGRAMAN WEB SEMESTER GANJIL 2017/2018
HTML to define the content of web pages
CSS to specify the layout and style of web
pages
JavaScript to program the behavior of web
pages
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an
image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the
light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off
the light</button>
</body>
</html>
o usability: can modify a page without having
to post back to the server (faster UI)
o efficiency: can make small, quick changes to
page without waiting for server
o event-driven: can respond to user actions
like clicks and key presses
o JavaScript is the programming language of HTML
and the Web
o Used to make web pages interactive
◦ insert dynamic text into HTML (ex: user name)
◦ react to events (ex: page load user click)
◦ get information about a user's computer (ex: browser
type)
◦ perform calculations on user's computer (ex: form
validation)
o Technically, it has no relation with Java
programming language
Check more tutorial here: https://www.w3schools.com/js
Internal JavaScript
o JavaScript can be placed in the <body> and the
<head> sections of an HTML page.
o Use <script> tag

<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>
External JavaScript
o Code your javascript in external files, save with .js
extension
o Use src attribute to link your javascript files.
Example <script src="myScript.js"></script>
o You can place an external script reference in
<head> or <body> as you like
o The script will behave as if it was located exactly
where the <script> tag is located.
<script src="filename" type="text/javascript"></script>

Example lab-5:
<script type="application/javascript"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js
/bootstrap.min.js"></script>

Best practice: External Javascript


Variables and Data Types
var name = expression;
var age = 32;
var weight = 127.4;
var clientName = “Alice”;

• Variables are declared with var keyword


• JavaScript has dynamic type
• Data type are: number, string, array, object,
boolean, etc.

More: https://www.w3schools.com/js/js_datatypes.asp
©1992-2013 by Pearson Education, Inc. All Rights
Reserved.
How to Display Outputs
• 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().
More: https://www.w3schools.com/js/js_output.asp

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
function name() {
statement ;
statement ;
...
statement ;
}

function myFunction() {
window.alert("Hello!");
window.alert("How are you?");
}
Source:
https://courses.cs.washington.edu/courses/cse190m/11sp/lectures/slides/lecture12-javascript
.shtml#slide11
<element attributes onclick="function();">...

<button onclick="myFunction();">Click
me!</button>

● onclick is just one of many event HTML attributes we'll use

More event HTML attributes:

https://www.w3schools.com/tags/ref_eventattributes.asp
JS Statement, Comments
• JavaScript statements are separated by
semicolons.
• JavaScript is Case Sensitive
• The first character of identifiers (name of
variables, keywords, functions, and labels))
must be a letter, an underscore (_), or a dollar
sign ($).
• To make comment, use //this is comment
or /* this is comment */
©1992-2013 by Pearson Education, Inc.
All Rights Reserved.
JS Array
• How to make array

• How to acces array

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
JS Array
• You can have different objects in one
array
• Array properties : length
• Array methods: sort()
• Adding array

©1992-2013 by Pearson Education, Inc. All Rights


Reserved.
JS Object
• How to create object

©1992-2013 by Pearson Education, Inc. All Rights


Reserved.
JS Object
• How to access object
properties

• How to access object methods

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
Arithmetic Operators
• Similar to others programming languages

©1992-2013 by Pearson Education, Inc. All Rights


Reserved.
Arithmetic Operators

©1992-2013 by Pearson Education, Inc. All Rights


Reserved.
JS Function
• Function syntax

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
JS Conditions and Loop
• If else

• Switch case

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
JS Conditions and Loop
• For loop

• For in loop

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
JS Conditions and Loop
• While loop

• Do while loop

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
JS Events
• Event to trigger function

• Some of events

©1992-2013 by Pearson Education, Inc. All Rights


Reserved.
Document Object Model (DOM)
• With the HTML DOM, JavaScript can access and
change all the elements of an HTML document.

• http://www.w3schools.com/jsref/default.asp

©1992-2013 by Pearson Education, Inc. All Rights


Reserved.
HTML DOM

• Finding element

• Changing element

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
HTML DOM
• Create element

• Changing style

©1992-2013 by Pearson Education, Inc.


All Rights Reserved.
o

o
<div>
<h1 style = "text-align: center">Hello World</h1>
<p style = "text-align: center"> Welcome to Java Script World</p>
</div>
<div id = "kotaklang">
<table>
<tr>
<th>Java Script</th>
<th>HTML</th>
<th>Django</th>
</tr>

<tr>
<td><img id ="jscript"
src = "https://www.yudana.id/wp-content/uploads/2018/04/javascript-788x394.jpg" height=30% width=5
<td><img id ="html"
src = "https://cdn-images-1.medium.com/max/1096/1*28-1lYrYTQoLhi87mllgBw.png" height=40% width=60%
<td><img id ="jscript"
src = "https://cdn-images-1.medium.com/max/1600/1*u_Jr6FozmyMCi3pe9ZsoFg.png" height=30% width=50%
</tr>
</table>
</div>
Put your external Java Script file to Static Folder
<script src="{% static 'js/heelo.js' %}"></script>
Don’t forget to collectstatic and load staticfiles

<img id ="jscript" onclick = ganti1() src = ……>

Create function ganti1 on your JavaScript Files


function ganti1(){
var js1 = document.getElementById('jscript');
js1.src =
'https://cdn1.macworld.co.uk/cmsdata/features/3640222/learn_javascript_on_mac_thu
mb800.jpg';
}

function ganti2(){
var html1 = document.getElementById('html');
html1.style.width = '200px';
}

function ganti3(){
var django1 = document.getElementById ('django');
django1.setAttribute('style','transform:rotate(180deg)');
}
JavaScript is a powerful language, but it has many flaws:

● the DOM can be clunky to use


● the same code doesn't always work the same way in
every browser
■ code that works great in Chrome, Firefox, Safari,
... will fail in IE and vice versa
● many developers work around these problems with
hacks (checking if browser is IE, etc.)
The jQuery JavaScript library adds many useful features
to JavaScript:
■ many useful extensions to the DOM
■ adds utility functions for built-in types String, Array,
Object, Function
■ improves event-driven programming
■ many cross-browser compatibility fixes
■ makes Ajax programming easier (seen later)
The jQuery library contains the
following features:
● HTML/DOM manipulation
● CSS manipulation
● HTML event methods
● Effects and animations
● AJAX
● Utilities
- Download the jQuery library from
jQuery.com
or
- Include jQuery from a CDN, like
Google
o The DOM way (using Pure JavaScript)
window.onload = function() {
// do stuff with the DOM
}

vs

o The direct jQuery translation


$(document).ready(function() {
// do stuff with the DOM
});
Basic syntax is: $(selector).action()

o Finding by id: $(‘#idname’)


o Finding by class: $(‘.classname’)
o Finding by css selector:
$(‘div.imgholder’)

More:
https://www.w3schools.com/jquery/jquery_selectors.asp
https://www.w3schools.com/jquery/jquery_events.asp
The jQuery syntax is tailor-made for
selecting HTML elements and performing
some action on the element(s).

Basic syntax is: $(selector).action()


● A $ sign to define/access jQuery
● A (selector) to "query (or find)" HTML
elements
● A jQuery action() to be performed on the
element(s)
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p
o
o

o
1.
2.

3.