Javascript – Canvas

Javascript – Canvas

Canvas is a transparent HTML element that is used for drawing and animation. To draw or animate on the canvas we first need to create the HTML element. Then in Javascript, we need to get the canvas reference, create a context object and then we can draw on it. with save() function you save/push the context setting to the stack and with the restore() function you get/pop the last setting from the stack. Animating If you want to animate object on the canvas there is an animation loop: Clear the…

Javascript – Canvas Read More

Javascript – Create, move and remove HTML elements

Javascript – Create, move and remove HTML elements

Create an HTML element To create an HTML element, first you must use createElement(). Then set any values and the style. The last step is to add the created element in the DOM using append(), appendChild(), insertBefore() or innerHTML property. Move an HTML element If you want to move an HTML element you should use append() and appendChild(). This can only happen if you get the element somewhere else in the document. Remove an HTML element You can remove an HTML element using the removeChild(element) method or the innerHTML property…

Javascript – Create, move and remove HTML elements Read More

Install Eclipse and GO

Install Eclipse and GO

Open the terminal, update the system repository index and install wget and openJDK sudo apt update sudo apt install -y wget sudo apt install -y openjdk-8-jdk Then verify the Java version with: java -version Download the Eclipse IDE using a browser here, or using the terminal: wget https://mirrors.dotsrc.org/eclipse//technology/epp/downloads/release/2019-09/R/eclipse-javascript-2019-09-R-linux-gtk-x86_64.tar.gz Now extract the package you have downloaded: sudo tar -xzvf eclipse-javascript-2019-09-R-linux-gtk-x86_64.tar.gz -C /usr/ Create a soft link for the eclipse executable to /usr/bin sudo ln -s /usr/eclipse/eclipse /usr/bin/eclipse Now you can start it by typing eclipse. Install GoClipse plugin Start Eclipse IDE…

Install Eclipse and GO Read More

Javascript – DOM API access and change the style and content of an HTML element

Javascript – DOM API access and change the style and content of an HTML element

DOM (Document Object Model) can be used to modify HTML elements and CSS styles on the fly. The DOM API is accessible through the document property. Access HTML elements querySelector(selector) – returns the first element querySelectAll(selector) – returns a collection of HTML elements getElementById(id) – same as querySelector() getElementByTagName(tag) getElementsByClassName() Change the style If you want to modify the style on an element, you have to use the style attribute. Then change the CSS property by removing – and make capital the next letter. Exampes: text-align => textAlign / style.textAlign…

Javascript – DOM API access and change the style and content of an HTML element Read More

Javascript – Arrays

Javascript – Arrays

An array is a container with an index that you can store in many values. You can declare an array: var persons = []; The above is an empty array. You can also declare an array with its values var persons = [“Kronos”, “Zeus”, “Ira”]; You can access an array element using indexes, starting from 0 console.log(persons[1]); //will print Zeus You can change the value of an array using indexes: persons[2] = “Afroditi”; Arrays are objects. That means they have methods and properties which you can access using the “.”…

Javascript – Arrays Read More