Coding Online
Coding Online
Embedded Files
There are lots of different ways to code online. Coding online provides a quick and easy way to prototype and test ideas. When coding online, we lose the experience of setting up a computer, an essential step to understanding the coding landscape. For our purposes, coding online provides a quick way to get started and means that I don't need to know your platform. For the most part, it doesn't matter if you are on a PC, Mac or tablet. Below are two great online options. There are lots there, including some tutorials to help yourself learn.
Replit
Replit
Replit is an excellent resource that and allows you to do so much. We will use it for Python and web (HTML,CSS, JS) development, which will enable us to avoid dealing with setting up our computer. It will do so much more, and you are encouraged to play around.
How to use it:
Got to the site
Create an account
Create a new repel named Horizons_Code and select Python
A repel is a collection of code like a folder. You can
Programiz
Programiz
Programiz is another option that you can explore. You cannot save your work with this, but there are extensive tutorials that you can follow to learn to code from group up on your computer.
Google Colab
Google Colab
Colab, short for Colaboratory is an excellent resource for coding online in a structured way with many features embedded and ready to go. Colab is becoming a prevalent resource and provides an easy way to pull and manipulate data.
On Your Machine
On Your Machine
A great deal of learning to code happens online. Online is a great way to learn to code and actually develop as it manages to simplify things and streamlines some processes. However, it is essential to learn how to code on your machine. This develops a whole other set of skills and forces your to learn specific skills that can't be developed online.
Figure 1: Notice the version in the first line
Figure 2: Each line is executed after you type
Figure 3: Code in file
Figure 4: Run Program
Step 1 (Download Python): Download and install Python
Step 2 (Open IDLE): Check it is installed and version by running IDLE shell. You can get access to this by searching for IDLE
Step 3 (Check Version): Machines might come preloaded with Python, but it is worth checking to see the version. When I installed this it was version 3.9.5. See figure 1
Step 4 (Run Line of Code): You can run code directly in the shell by typing the line below and press enter. See figure 2.
print("Hello World")
x = 4
print(x)
print("The value of x is",x)
Step 5 (Create a new File): In the shell, you write one line (or a few) at a time and execute it. This is not a good place to write a long program. To do this you need to create a new file and save it.
Select File --> New File
A new window will appear
Select File --> Save As
Save the file as firstProgram.py
Step 6 (Create Code and Save): By saving the file with the .py extension the computer knows that it is a python file. You can now put code in here and tell the computer to run it. Copy the below code into your file
You are now all set up to program on your computer using Python. Part of programming is understanding the organizational structure of your computer and keeping things organized. As you move forward on your programming adventure take the time to be organized and understand where everything is kept.
JavaScript
JavaScript
Javascript is a little different, and it helps to have a little background first. Javascript was designed as a language to run in browsers. It was first developed in Netscape 2, an old browser, and became the ECMA-262 standard in 1997. The ECMA standard means is that it is an agreed standard so browsers can work together. Javascript is moving out of browsers and is now working much like more classical programming languages. It's evolving. We are focusing on using it in your browser, as it is an excellent starting point, not to develop stand-alone programs. Building stand-alone applications are greats fantastic but comes with lots of additional learning. What we do will prepare you for that.
Using the Browser:
Using the Browser:
Note: I will be explaining this using Chrome, but the principles are the same for all browsers
Step 1: Open Chrome
Step 2: Select three dots in the top left. In the drop-down that appears select More Tools --> Developer Tools. A screen will appear in your browser with a selection of tabs. Select Console. Note, you can also get the developer tools up in chrome by pressing command-option-i.
Step 3: In the console, you can type in various JS commends. Try the below commands and see what happens. Each of the commands comes with lots of learning. In the video, I talk about each command in more detail.
This command prints out the text to the console. This is the equivalent to print in Python
console.log("Hello World")
This command generates a pop-up window and places the text inside of it.
alert("Hello World")
This creates a variable x and sets the value to 9 + 1. This results in x getting the value 10. This variable is saved until the window close the browser.
x = 9 + 1
This creates an alert box and since x is defined it puts the value in. Notice that x is not contained in quotes, this means it is holding a value for us to access.
alert(x)
This command allows JS to access the HTML of a webpage. Notice when you type it in, the page gets highlighted. Through this, you can start to access page elements and do extraordinary things. The command returns the HTML of the page into the console. Check it out!
document
Running Code Segments:
Running Code Segments:
Note: For this, I will be using Sublime Text to create the HTML, CSS and JS
When a webpage loads, we can think of three components. These are HTML (HyperText Markup Language), CSS (Cascading Style Sheets) and JS (JavaScript). Each component has a specific responsibility. In reality, it is not as clear-cut as this, but let's start here to frame our thinking.
An HTML file - Responsible for Content
A CSS file - Responsible for Style
A Javascript file - Responsible for Function
To run JS we need a simple HTML file to load in a browser. This HTML file will notice it is connected to a JS file and run it.
Step 1: Open Sublime Text
Step 2: On your desktop create a folder called Demo_Code
Step 3: Drag the folder on top of the sublime text window. This will create a folder structure
Step 4: In Sublime Text, right-click on the folder and create a new File. Save the file as index.html
Step 5: In Sublime Text, right-click on the folder and create a new File. Save the file as index.js
Step 6: In index.html, copy the below code and save.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A WEBPAGE</title>
</head>
<body>
<p>A WEBPAGE</p>
</body>
</html>
Step 7: Double click on the file to open it in a browser. You should see a webpage that has A WEBPAGE in the tab and in the content of the page.
Step 8: Locate the </body> tag and make some space directly above where we will write some JS. It is best practice always to put your script at the bottom of your HTML. One reason is load time. The index.html file is read from the top down. The JS will both access elements on the page and load data from external sources. To access an element, it must be on the page, and data from external sources takes time. The best practice is always to put your JS here unless there is a reason not to. Include the below content in your index.html above the </body> tag.
<script>
console.log("Hello World")
alert("Hello World")
x = 9 + 1
alert(x)
console.log(document) //We now have to display document to screen
</script>
Step 9: Open index.html and access the console. The JS is being executed because it is in between script tags which tell the webpage to interpret it as JS.
Step 10: We can take the same code and put it in a separate file that is only JS. Copy the code inside the script tags, not the script tags into index.js and then delete the entire script in index.js.
Step 11: Reload index.html and notice that nothing happens. This is because we need to link the index.js to the index.html.
Step 12: Add the below line of code above the </body> tag in index.html. This tells the browser to go to index.js and run it top-down and then return back to the HTML file and continue on from where it left off.
<script src = "index.js"></script>
Page updated
Report abuse