Session 3

Basics Refresher JavaScript

19. Oct. 2022, 17:00-18:30

Artful Coding 1: web-based games development

dieAngewandte

Getting up to speed

Remember to look into the MDN Getting Started with the Web Guide and the introductory section on JavaScript basics, if all of this is a bit too fast or too much to comprehend for now.

What is JavaScript?

• a full programming language
• to add interactivity to a page
• originally developed for the browser
• today even used on servers (e.g. Node.js)
• nearly no web apps without JavaScript

Introductory reference guide @ MDN web docs: JavaScript — Dynamic client-side scripting

JavaScript FTW!

Can be included directly in your HTML page:

Better yet, include it as a file:

Selecting elements and changing its text

            const myHeading = document.querySelector('h1');
            myHeading.textContent = 'Hello world!';

            let playerName = 'Jane Doe (for now)';
            const elPlayerName = document.getElementById('player-name');
            elPlayerName.textContent = playerName;
          

Data types

            let myString = 'Francine';
            let myLongerString = 'Francine is a lovely name!';
            let myNumber = 5000;
            let myBoolen = true;
            let myOtherBoolen = false;
            let myArray = [42, 'is the answer', true, myLongerString, myBoolean];
            let myObject = {
              name: 'Elvira',
              type: 'Bat',
              strength: 1000,
              mana: 777,
              alive: true
            };
            myObject.type = 'Werebat';
          

Introductory reference guide @ MDN web docs: Storing the information you need — Variables

Operators

            const answer = 23 + 19;
            let playerName = 'Francine';
            let greeting = 'Welcome ' + playerName;
            let arbitraryNumber = (9 - 3) * 8 + 9 / 3 * (23 + 2) / 2;

            let isPlayerFrancine = playerName === 'Francine';
            let truth = answer === 42;
            let isFalse = 23 === 42;
            let isTrue  = 23 !== 42;
            let alsoFalse = 42 === '42';
          

Introductory reference guide @ MDN web docs: Basic math in JavaScript — numbers and operators

Conditionals

            let iceCream = 'chocolate';
            let players = 5;

            if ( iceCream === 'chocolate' ) {
              alert('Yay, I love chocolate ice cream!');
            } else {
              alert('Awwww, but chocolate is my favorite...');
            }

            if ( players >= 4 ) {
              console.log('starting up the game engine');
            }
          

Introductory reference guide @ MDN web docs: Making decisions in your code — conditionals

experimentation break

try out what you've learned so far

Functions

            // a function we already used:
            alert ('Hiyaaaa!');

            // another function we already used, which returns something useful:
            let element = document.getElementById('player-name');

            // a new function we create right now:
            function multiply(num1,num2) {
              let result = num1 * num2;
              return result;
            }

            // using our new function
            multiply(4, 7);
            multiply(20, 20);
            multiply(0.5, 3);
          

Introductory reference guide @ MDN web docs: Functions — reusable blocks of code

Events

            // an example event for a start
            document.querySelector('html').onclick = function() {
              alert('Ouch! Stop poking me!');
            }

            // let's disassemble the above a bit:
            // 1. create a function that produces an alert when executed
            function pokeAlert () {
              alert('Ouch! Stop poking me!');
            }
            // 2. create a reference to the whole page (the  tag)
            let element = document.querySelector('html');
            // 3. assign the pokeAlert function to the onclick event handler of the page
            element.onclick = pokeAlert

            /*
            !! DISCLAIMER !!
            there are soooooo many events: https://developer.mozilla.org/en-US/docs/Web/Events
            and soooo many event handlers: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
            don't despair! we'll introduce some of the most important over time
            */
          

Introductory reference guide @ MDN web docs: Introduction to events

in-class exercise

Add the following functionality to the page developed in session 2:

• When the user clicks on the image, it changes (e.g. switch between two images; could also use more or random images)
• When the user clicks on the button, the user is asked for a user name and the heading is changed accordingly to greet the user

(see next slide for some tips)

exercise tips & tricks

            // select an element by id (remember to put the ID in the HTML tag)
            const mainImage = document.getElementById('main-image');

            // change the src of an image
            mainImage.src = 'assets/other-image.png';

            // make an element do something (e.g. the button)
            function doSomething () {
              alert('Heyyyyyy!');
            }
            document.getElementById('start-button').onclick = doSomething;

            // prompt the user for some input
            let name = prompt("How would you like to be called today?");
          

And always remember:

            console.log('Use the console, young Codawan!')