A quick overview, to provide more context about what exactly we are doing
Supplement Material
How to get start with coding assignments?
Computer Graphics
Karlheinz Reinhardt
• HTML stands for Hyper Text Markup Language
• Is the standard markup language for Web Pages
• Describes the structure of a Web Page
• A browser can view HTML Files
HTML
HTML
• What
○ JavaScript (JS) is a scripting language
○ Developed in 1995 by Netscape
○ Enables to manipulate the website (DOM) and react to user input
=> websites can be dynamic
• Where
○ HTML is used together with JS and CSS
○ Code is executed inside the browser
JavaScript: What, why and where?
HTML
JS
CSS
This is automatically generated by our code skeleton setup
This is where you
inserted your code in the coding assignments
What is our code skeleton doing?
HTML
JS
CSS
Not used
Every browser has integrated development tools:
• Chrome/Firefox:
○ strg+shift+i (linux/win)
○ cmd+option+i (mac)
• To create logs in your code:
How to debug your code in a browser?
console.log("test");
console.log(variable);
• What you need
○ Code editor: to edit your code
• Recommended: VSCode or WebStorm
• Alternatives: Sublime Text, Vim, ...
○ Command line tool: every OS has one – we need it to start the Node.js
• Windows 10: PowerShell
• macOS/Linux: Terminal
How to setup your programming environment?
• A command line tool is also called Terminal
• Exist in almost every OS
• Some of the code editor integrates it for convenience
○ no need for a separate window
How to run?
• Open your terminal
○ How to open and use it will depend on your OS
○ Navigate into your project folder
• This is the folder that contains the package.json
○ Enter the 2 commands
■ npm i
■ npm start
How to run the code skeleton?
In this example the project is located at C:\Users\...\cg1-ss20\2-transform
Install dependencies Start server
• More about HTML
○ mozilla - https://developer.mozilla.org/en-US/docs/Web/HTML
○ selfhtml - https://wiki.selfhtml.org/wiki/Startseite
• More about JS
○ selfhtml js - https://wiki.selfhtml.org/wiki/JavaScript/Tutorials
○ w3schools - https://www.w3schools.com/js/
• Three.js
○ https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
