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!
Constant variabele tegenover een let variabele
const, short for constant, is a JavaScript keyword that creates a new variable with a value that cannot change.

myName is the variable's name.

Notice that the word has no spaces, and we capitalized the N. Capitalizing in this way is a standard convention in JavaScript called camelCasing, because the capital letters look like the humps on a camel's back.

= is the assignment operator.

It assigns the value ('Arya') to the variable (myName).
'Arya' is the value assigned (=) to the variable myName.
After the variable is declared, we can print 'Arya' to the console with: console.log(myName).
const myName = 'Arya';
console.log(myName);
// Output: Arya
Zie: codecademy Javascript introduction les 2 in het hoofdstuk Variabelen
Zie voor een let variabele:
Let variables however, can be reassigned.

let meal = 'Enchiladas';
console.log(meal);
meal = 'Tacos';
console.log(meal);
// output: Enchiladas
// output: Tacos
In the example above, the let keyword is used to create the meal variable with the string 'Enchiladas' saved to it. On line three, the meal variable is changed to store the string 'Tacos'.

You may be wondering, when to use const vs let. In general, only use const if the value saved to a variable does not change in your program.
Mathematical Assignment Operators
let x = 4;
x = x + 1;
In the example above, we created the variable x with the number 4 assigned to it. On the following line, x = x + 1 increases the value of x from 4 to 5.

Notice, on line two in the example above, to increment x by one we had to write the x variable on the left and right side of the assignment operator (=). Using a variable twice in one expression is redundant and confusing.

To address this, JavaScript has a collection of built-in mathematical assignment operators that make it easy to calculate a new value and assign it to the same variable without writing the variable twice. See examples of these operators in the next frame.


let x = 4;
x += 2; // x equals 6

let y = 4;
y -= 2; // y equals 2

let z = 4;
z *= 2; // z equals 8

let r = 4;
r++; // r equals 5

let t = 4;
t--; // t equals 3
In the example above, operators are used to calculate a new value and assign it to the same variable. Let's consider the first three and last two operators separately:
*/
let molecule = 16;
let particle = 18;
let assay = 3;

// Add and assign to molecule below
molecule += 16;

// Multiply and assign to particle below
particle *= 6.02;

// Increment assay by 1
assay++;
NB! Dit moet iedereen weten. Zowel diegene die codecademy doet, alswel diegene die Sololearn doet.
String Interpolation 1

The JavaScript term for inserting the data saved to a variable into a string is string interpolation.

The + operator, known until now as the addition operator, is used to interpolate (insert) a string variable into a string, as follows:

let myPet = 'armadillo';
console.log('I own a pet ' + myPet + '.');
// Output: 'I own a pet armadillo.'
In the example above, we saved the value 'armadillo' to the myPet variable. On the second line, the + operator is used to combine three strings: I own a pet, the value saved to myPet, and .. We log the result of this interpolation to the console as:

I own a pet armadillo.
let myName = 'Ron';
let myCity = 'Amsterdam';

console.log(`My name is ${myName}. My favorite city is ${myCity}.`);
String Interpolation 2
In the newest version of JavaScript (ES6) we can insert variables into strings with ease, by doing two things:

Instead of using quotes around the string, use backticks (this key is usually located on the top of your keyboard, left of the 1 key).
Wrap your variable with ${myVariable}, followed by a sentence. No +s necessary.
ES6 string interpolation is easier than the method you used last exercise. With ES6 interpolation we can insert variables directly into our text.

It looks like this:

let myPet = 'armadillo'
console.log(`I own a pet ${myPet}.`)
// Output: 'I own a pet armadillo.'
In the example above, the backticks (`) wrap the entire string. The variable (myPet) is inserted using ${}. The resulting string is:

I own a pet armadillo.
Review Variables
Nice work! This lesson covered a lot of foundational skills that you will often use in your future programming endeavors.

Let's review what we learned:

Variables hold reusable data in a program.
JavaScript will throw an error if you try to reassign const variables.
You can reassign variables that you create with the let keyword.
Unset variables store the primitive data type undefined.
Mathematical assignment operators make it easy to calculate a new value and assign it to the same variable.
The + operator is used to interpolate (combine) multiple strings.
In JavaScript ES6, backticks (`) and ${} are used to interpolate values into a string.
Full transcript