{"id":211,"date":"2019-12-27T03:09:00","date_gmt":"2019-12-27T03:09:00","guid":{"rendered":""},"modified":"2024-09-13T15:04:52","modified_gmt":"2024-09-13T15:04:52","slug":"javascript-tutorial-series-set-up","status":"publish","type":"post","link":"https:\/\/zofxare.com\/zofxare\/blog\/2019\/12\/27\/javascript-tutorial-series-set-up\/","title":{"rendered":"JavaScript Tutorial Series – Set Up"},"content":{"rendered":"

JavaScript runs in a web browser, so all that is needed to get started is having a web browser, such as Google Chrome, Firefox or Internet Explorer, etc. installed on your computer. That’s it. Super simple.<\/p>\n

Implementation:<\/strong><\/p>\n

The goal of this JavaScript Tutorial series is to teach JavaScript to someone with programming knowledge. This tutorial will help you create a basic website using HTML and CSS that has JavaScript added to it to for dynamic functionality. The JavaScript will call a REST api and use the returned data to display the user’s current weather on the webpage. Don’t worry if you don’t know HTML or CSS. Those pieces will be minimal. The focus will be on JavaScript.<\/p>\n

The first step in the tutorial is to create a directory on your computer where the tutorial files will live. Once that directory is made, add a file called index.html. Add a directory called css. Inside it create an empty file called style.css. Create another directory called js. Inside it create an empty file called javascript_tutorial.js.
\nThe contents of the index.html file should contain the following:<\/p>\n

<html><\/pre>\n
\n    <head>
\n        <link rel=”stylesheet” href=”css\/style.css”\/>
\n    <\/head><\/p>\n
    <body>
\n        <header>
\n            <nav>
\n            <\/nav>
\n            <article id=”toolbar”>
\n                <article id=”currentWeather” class=”text-center”>
\n                    <section id=”location”>
\n                    <\/section>
\n                    <section id=”weatherTemperature”>
\n                        <span id=”temperatureValue”><\/span>
\n                        <span id=”degreeSymbol”>\u00b0<\/span>
\n                        <span id=”temperatureUnits”><\/span>
\n                    <\/section>
\n                    <section id=”weatherDescription”>
\n                    <\/section>
\n                    <img id=”weatherIcon”>             
\n                    <\/img>
\n                <\/article>         
\n            <\/article><\/p>\n
        <\/header>
\n        <main>
\n        <\/main>
\n        <footer>
\n        <\/footer><\/p>\n
        <script src=”js\/javascript_tutorial.js”><\/script>
\n    <\/body>
\n<\/html><\/p>\n
The contents of the style.css file should contain the following:<\/p>\n
<\/pre>\n
\nheader nav {
\n  height: 10vh;
\n  border-bottom: 1px solid darkgray;
\n}<\/p>\n
header #toolbar {
\n  height: 5vh;
\n  border-bottom: 1px solid darkgray;
\n}<\/p>\n
main {
\n  height: 72vh;
\n  border-bottom: 1px solid darkgray;
\n}<\/p>\n
footer {
\n  height: 10vh;
\n  border-bottom: 1px solid darkgray;
\n}<\/p>\n
<\/header>\n
JavaScript Tutorial Series Table of Contents:<\/p>\n
    \n
  • IDE<\/a><\/li>\n
  • Comments<\/a><\/li>\n
  • Style Guide<\/a><\/li>\n
  • Variables<\/a><\/li>\n
  • Arrays<\/a><\/li>\n
  • Objects<\/a><\/li>\n
  • Loops<\/a><\/li>\n
  • Functions<\/a><\/li>\n
  • Exceptions<\/a><\/li>\n
  • Classes<\/a><\/li>\n
  • Modules<\/a><\/li>\n
  • Promises<\/a><\/li>\n
  • HTTP Requests<\/a><\/li>\n
  • this<\/a><\/li>\n
  • DOM Events<\/a><\/li>\n<\/ul>\n
    (paid links)
    \n    More JavaScript<\/a><\/p>\n