Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Javascript 1

Introductie javascript
by

Ron Wessels

on 8 January 2018

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Javascript 1

/
/hier komt de code
//...
Voorbeeld Javascript structuur
Conceptueel kader
Wat moet je al weten?
Voorkennis:
bouwen eenvoudige website op een host
HTML(5) en CSS(3) basics
Omgang met teksteditors zoals Notepad++
Werken met sftp via Notepad++ en/of Filezilla

Interpreteren in plaats van compileren
c of andere taal wordt gecompileerd en dan gaat het als machinetaal naar het os.
Javascript is hoofdletter gevoelig.
alert("Hello world!");
Statements en structuur
Opdrachten
Introductie
Javascript
Je hoeft echter nog geen programmeur te zijn.
We beginnen bij het begin.
HTML
CSS
JavaScript
Raamwerk en Content
Vormgeving
lettertype
kleuren
achtergrond
grootte div
Programmeertaal
gedrag
interactie
tijd van de slydeshow
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>box-model</title>
<style>
html {
background: #ccc;
}
.outer {
width: 460px;
height: 100%;
margin: 0 auto;
background: #9CF;
padding: 1px;
border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;
}
.box{
background: #B7D19C;
width: 340px;
height: 100%;
padding: 25px;
border: 10px solid black;
margin: 25px;
border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;
}
p {
background: #EEA458;
padding: 5%;
border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box">
<p>Het boxmodel beschrijft de fysieke eigenschappen van elk element op de pagina. De CSS-specificatie schrijft precies voor hoe de afzonderlijke waarden moeten worden berekend, als ze niet allemaal in een stylesheet worden gespecificeerd, of als de opgegeven waarden niet kunnen worden weergegeven. De standaardwaarde voor width en height is auto.

</p>
</div>
</div>
</body>
</html>
JavaScript is een scripting taal.
geen toegang tot lokale bestanden
geen directe toegang tot een database
geen toegang tot hardware (USB, etc.)
Deze taal heeft zijn beperkingen.
Je kan er geen desktop applicaties mee maken.
Operating system
<html>
<head>
<title>Simpele pagina</title>
</head>
<body>
<h1>Simpele HTML Pagina</h1>
<p>
Dit is een hele simpele pagina!!!
</p>

<p>Het is zo ongeveer als basic als het maar zijn kan. Het heeft:<p>

<ul>
<li>Een h1 tag</li>
<li>Twee paragrafen</li>
<li>En een unordered list</li>
</ul>
</body>
</html>
<html>
<head>
<title>Simpele pagina</title>
</head>
<body>
<h1>Simpele HTML Pagina</h1>
<p>
Dit is een hele simpele pagina!!!
</p>

<p>Het is zo ongeveer als basic als het maar zijn kan. Het heeft:<p>

<ul>
<li>Een h1 tag</li>
<li>Twee paragrafen</li>
<li>En een unordered list</li>
</ul>

<script>
alert("Hello, world!");
</script>
</body>
</html>
Interpreteren
Alert("Hello world!");
verander kleur van titel
bereken leeftijd
verplaats plaatje
verberg menu
toon "belangrijke boodschap"
Javascript
is
HOOFDLETTER
GEVOELIG
<p>Dit is een paragraaf!!</P>
Pseudo code
Opdrachten bestaan uit één regel!
alert("Hallo wereld!!");
alert("Nog een boodschap!");
alert("Nog een boodschap!");
alert("Hallo wereld!");
Witruimte heeft geen invloed!
alert ( "Hallo wereld!" ) ;
alert
("Hallo wereld!"
);
alert("Hello Wereld!");
Commentaar
// dit is commentaar

alert("Hallo!!");
Zie je niet en wordt niet geïnterpreteerd!
/* Dit is ook commentaar,
maar over meerdere regels. */
Plaats van de code is belangrijk!!
<html>
<head>
<title>Dit is de titel.</title>
</head>
<body>
<h1>Een simpele pagina</h1>
<p>Een hele simpele pagina</p>
<p>Het is de meest eenvoudige pagina. Het heeft:</p>
<ul>
<li>Een h1 tag</li>
<li>Twee paragrafen</li>
<li>een ongeordende lijst.</li>
</ul>

<script>
alert("en één script!!!");
</script>

</body>
</html>
<html>
<head>
<title>Dit is de titel.</title>
<script>
alert("en één script!!!");
</script>
</head>
<body>
<h1>Een simpele pagina</h1>
<p>Een hele simpele pagina</p>
<p>Het is de meest eenvoudige pagina. Het heeft:</p>
<ul>
<li>Een h1 tag</li>
<li>Twee paragrafen</li>
<li>een ongeordende lijst.</li>
</ul>

</body>
</html>
extern en/ of intern javascriptcode
<html>
<head>
<title>Dit is de titel.</title>
</head>
<body>
<h1>Een simpele pagina</h1>
<p>Een hele simpele pagina</p>
<p>Het is de meest eenvoudige pagina. Het heeft:</p>
<ul>
<li>Een h1 tag</li>
<li>Twee paragrafen</li>
<li>een ongeordende lijst.</li>
</ul>

<script>
alert("en één script!!!");
</script>

</body>
</html>
Simpele html
myscript.js
alert("en één script!!!");
Nested code
Het if-statement
Conditional code
of
voorwaardelijk code
Variabelen
iemand@null.com

10-maart-1955

x: 30
y: 60

a* b

Ron

Wessels

1705GE
Variabelen kunnen van alles zijn.
8952820584098235885402385
Variabelen zijn een soort containers.
Een stukje geheugen...
iemand@null.com
344741964964
Ron
Wessels
1705GE
voorNaam
achterNaam
hoogsteScore
emailAdres
naam van de variabel
stukjes geheugen
op harde schijf of in de ram
x: 20
y: 300
imgPositie
Het maken van een variabele
var
jaar;
var
klantEmail;
var
vandaagDatum;
var
foo;
var
x;
Naam van de variabele moet
één
woord zijn
,
zonder spaties.
Met:
letters
getallen
-
$
Maar je kan niet starten met een getal.
var
99Problemen
var
probleem99
Nog meer eigenschappen!
var
jaar;
undefined
Stel bijvoorbeeld de variabele is leeg. Dat kan.
jaar = 2011;
Tweede statement:
2011
Je kan ook programmeren:
var
jaar = 2011;
2011
Het = teken betekent hier niet `gelijk aan`, maar set....
Namen van variabelen zijn hoofdletter gevoelig...
Meerdere statements tegelijkertijd...
Variabele data typen
oefening met Firefox
start firefox,
ga naar extra
dan naar webontwikkelaar
start kladblok
declareer hieronderstaande code:
Voorbeelden if-statements
var x = 200;
var X = 210;
Stel je wilt bovenstaande variabele veranderen en je gebruikt een hoofdletter. Dan krijg je geen foutmelding. Je creëert dan een nieuwe variabele.
zonder waarde
var
jaar;
var
maand;
var
dag;
var
jaar, maand, dag;
var
jaar = 2013;
var
maand = 10;
var
dag = 31;
var
jaar = 2011, maand = 10, dag = 31;
var
mijnVariabele;
integer?
floating point nummer?
text string?
Boolean waarde?
Array?
Date?
In de meeste programmeertalen moet je in een variabele aangeven wat voor type data je invoert of declareert. Dat kan je daarna ook niet meer veranderen. Of je moet er een statement voor plaatsen.
Bij Javascript hoeft dat niet...
var
mijnVariabele;
mijnVariabele = 200;
mijnVariabele = "Hallo!";
mijnVariabele = 'Hallo!';
mijnVariabele =
true
;
mijnVariabele =
false
;
Het mogen trouwens "...." of '....' zijn. Maar gebruik ze niet door elkaar.
Code die alleen wordt uitgevoerd onder bepaalde condities.
if ( ) {

}
( parentheses )



{ braces }
voorwaarden of conditions
De uit te voeren code
oftewel
het `code blok`. Afgebakend door accolades.
Ongeacht de waarde moet het true of false zijn! Dat is wat belangrijk is
.
if
(

20 < 50 ) {
//deze code
//...
}
if
(

20 > 50 ) {
//deze code niet
//...
}
if
(
c
==
99 ) {
//deze code
//...
}
gelijkwaardig aan
if
(

c === 99 ) {
//deze code
//...
}
Als c een string is dan is dit statement false.
if
(

20 != 50 ) {
//deze code
//...
}
Niet gelijk aan...
var getal = 500;

if ( getal < 1000 ) {

alert("Het getal is kleiner dan 1000!");

}
if
( ) {



}
else
{


if
( ) {


}
}
//hier komt de code
//...
// anders onderstaande if
//nested if
Operators en expressions
Verplaatsen van data van de ene plaats naar de andere
toevoegen, deleten
rekenkundige operatoren
enzovoort
+ - * /
resultaat = a + b;

resultaat = a + 10;
resultaat = 5 + 5 * 10;
// Code voorbeeld
var a = 5;
var b = "5";

if (a == b) {
alert("Ja, deze zijn gelijk!");
} else {
alert("Zij zijn NIET gelijk!");
}
Logisch AND/OR
if( a === b
&&
c === d ) { ...
Logische
AND
( dubbele ampersand)
if ( a === b
||
c === d) { ...
Logische
OR
met de dubbele pipeline>
Array
Speciale variabele:
meer dan één waarde
positie waarde element geef je aan met een index
Array worden ook gegevensvelden of tabellen genoemd.
0 1 2 3 4 5 n+1
// Code voorbeeld
var a = 5;
var b = "5";

if (a === b) {
alert("Ja, deze zijn gelijk!");
} else {
alert("Zij zijn NIET gelijk!");
}
<!DOCTYPE html>

<html>

<head>

<title>Dagen van de week!</title>

</head>

<body>

<script type="text/javascript">

var weekdag = new Array();

weekdag[0] = "zondag";

weekdag[1] = "maandag";

weekdag[2] = "dinsdag";

weekdag[3] = "woensdag";

weekdag[4] = "donderdag";

weekdag[5] = "vrijdag";

weekdag[6] = "zaterdag";

document.write(weekdag[0] + "<br />");

document.write(weekdag[1] + "<br />");

document.write(weekdag[2] + "<br />");

document.write(weekdag[3] + "<br />");

document.write(weekdag[4] + "<br />");

document.write(weekdag[5] + "<br />");

document.write(weekdag[6] + "<br />");

</script>

</body>

</html>
Sla het hiernaast staande bestand als
index.html en open het bestand in een browser.
if (
voorwaarde
) {

Doe iets als de voorwaarde waar is
;
}
else {
Doe iets als de voorwaarde niet waar is
;
}
http://cs50.tv/2016/fall/
Voor thuis te bestuderen:
http://cs50.tv/2012/fall/seminars/javascript_frameworks/javascript_frameworks-720p.mp4
Verdieping:
<script type="text/javascript">
//<! [CDATA[
.......

// ]]
>

</script>

Wat betekent:
`To obfuscate javascript code?`

Javascript gids
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide?redirectlocale=en-US&redirectslug=JavaScript%2FGuide
.NET bestaat uit een groot aantal klassen die de ontwikkelaar kan gebruiken bij het maken van programma's, alsmede een virtueel executiesysteem (VES) en enkele compilers die broncode omzetten naar een tussenlaag, de Microsoft Intermediate Language (MSIL). De MSIL-code wordt door de Common Language Runtime (CLR) door middel van just-in-timecompilatie omgezet naar machine-code en uitgevoerd.
De .NET-technologie is duidelijk geïnspireerd door Java.
Algoritmen
Boolean waarden
Javascript werkt in ALLE BROWSERS op elk OS.
Deel 1
Van
naar
C++ App
Java App
web browser
web page
JavaScript
.NET App
Tot slot!!
html elementen vormgegeven
met gebruikersacties omgaan
in verschillende formats datum en tijd weergeven
rekenen
data uit formulieren geldig of niet geldig verklaren
cookies maken
zien met welke browser je de site bezoekt
met dynamische html omgaan (bijvoorbeeld websites met animatie).
Javascript kan:

Broncode
http://www.pelato.nl/snippets/Javascripts/todolijst/
Maar hier wel!
Full transcript