Difference between revisions of "W5020 CS Ed Week 2020"

From Coder Merlin
m (Editorial review and minor corrections)
 
(92 intermediate revisions by 11 users not shown)
Line 1: Line 1:
=== Preface ===
If you would like to participate in the event, please sign up using the following link:
https://docs.google.com/forms/d/e/1FAIpQLSfFQMQGN6zUe9Gsr0JuKRKjwXEtn6TYopP3f01Iq6zAOtuZuw/viewform?usp=sf_link


Future updates will be provided through the Remind class @ahs-csed.
 
 
=== CS ED Week ===
[[File:Banner.png|frameless|800px|Image: 800px]]
 
'''<big>If you would like to participate in the event, please sign up by [https://docs.google.com/forms/d/e/1FAIpQLScyx0dsKmb53X6WCXeMNaISDzvVfIpH6u-pvJluvF_ZEke9Ew/viewform?usp=sf_link Clicking Here]
'''
 
Future updates will be provided through the Remind class '''@ahs-csed'''.


We thank you for your interest in participating!
We thank you for your interest in participating!


== Promotional Material ==
== Introduction ==


<big>An Hour of Code and Beyond</big>
<big>An Hour of Code and Beyond</big>


''==There's more to it than meets the eye==''  
''<span style="font-variant:small-caps">"There's more to it than meets the eye"</span>''  
 
{{MerlinNoteFromEditor|The date and times below are from 2020, but should they be changed to be current?}}


<blockquote>
'''Wednesday, December 9th, 2020 5PM-7PM'''
'''Wednesday, December 9th, 2020 5PM-7PM'''
</blockquote>
[https://allenisd.zoom.us/j/88246450907?pwd=MVJObDdKOGVWNExkOXRCR0tjVUVmZz09 Zoom Link]
[[File:CS ED WEEK LOGO.png|thumb|[https://www.csedweek.org Ed Week 2020]]]
[[File:CS ED WEEK LOGO.png|thumb|[https://www.csedweek.org Ed Week 2020]]]
   
   
'''What is CS ED Week about:'''  
'''What is CS ED Week about?''' <br>
“Computer Science Education Week (CSEdWeek) is an annual call to action to inspire K-12 students to learn computer science, advocate for equity in computer science education, and celebrate the contributions of students, teachers, and partners to the field. As part of the #CSforGood movement this year we’re proud to elevate”
“Computer Science Education Week (CSEdWeek) is an annual call to action to inspire K-12 students to learn computer science, advocate for equity in computer science education, and celebrate the contributions of students, teachers, and partners to the field. As part of the #CSforGood movement this year we’re proud to elevate.”


'''Topics we will go over:'''
'''Topics we will go over:'''
   * Computer science Intro
   * What is Computer Science?
   * Linux Basics
   * Linux Basics
   * Shell basics
   * Shell basics
Line 27: Line 37:




'''Merlin Shell Access Application:'''  
'''Merlin Shell Access Application:'''
  '''If you do not have access to the Merlin Shell, use this Link to sign up. You will need this access to the shell in order to participate in the events today!'''
 
If you do not have access to the Merlin Shell, use this Link to sign up. You will need this access to the shell to participate in the events today!
 
[[File:Merlin shell access.png|Merlin shell access application QR Code]]
[[File:Merlin shell access.png|Merlin shell access application QR Code]]
  https://www.codermerlin.com/wiki/index.php/Merlin_Shell_Access_Application


'''CS ED Survey'''
''[https://www.codermerlin.com/wiki/index.php/Merlin_Shell_Access_Application Merlin Shell Access Application Link]''
 
'''CS ED Survey:'''
If you already completed the application above, fill this survey so we can see what interests you!
If you already completed the application above, fill this survey so we can see what interests you!
  https://docs.google.com/forms/d/e/1FAIpQLScyx0dsKmb53X6WCXeMNaISDzvVfIpH6u-pvJluvF_ZEke9Ew/viewform?embedded=true
''[https://docs.google.com/forms/d/e/1FAIpQLScyx0dsKmb53X6WCXeMNaISDzvVfIpH6u-pvJluvF_ZEke9Ew/viewform?embedded=true Survey Link]''


== Computer Science ==
== Computer Science ==
[[File:CodeBackground.jpg|thumb]]
==== Why Computer Science? ====


==== Why Computer Science? ====


Computer science is one of the fastest growing pathways in terms of not only economic viability, but also accessibility and significance. With the onset of the digital age, many industries have turned towards technology as their ticket to the future, and now, more than ever, need computer scientists in their fields: restaurants and grocery chains rely on mobile applications for deliveries and purchases, while distributors like Amazon continue to thrive in online shopping. Yet without the programmers behind the scenes, none of this would be possible.  
Computer science is one of the fastest growing pathways in terms of economic viability and accessibility and significance. With the onset of the digital age, many industries have turned toward technology as their ticket to the future, and now, more than ever, need computer scientists in their fields. Just take a look at the world around us. Restaurants and grocery chains such as Walmart or Chili’s rely on mobile applications for deliveries and purchases, while distributors like Amazon continue to thrive in online shopping. Anything your eyes meet is bound to have coding behind its inception. Yet, this flexibility exists within the work environment as well. Unlike other trades or positions, computer science requires no specific job site to get work done. Whether it be from your couch or even your local library, progress can be made, as long as an electrical charge and Internet connection exist. However, while this ease of access can be applied to both contingency and setting, it is mostly absent from the field’s workforce.


Programming exists virtually everywhere, encompassing a large share of the job market, and can be done in any environment.
Starting a career in computer science is arguably the hardest part; someone needs to make an initial investment for equipment, and they need the courage to dive head-first into uncharted territory. The price floor itself is a considerable first step because it requires a functioning computer plus electrical and network connections. This places those of lower economic standings at a disadvantage because the tools required often don't match a preferable price point. Yet, while cost filters out and blocks access to those interested in the field, social diversity actively works to obstruct those of differing social status as well. The current environment of computer science suffers from a social rigidity: variety in its workers' social heritage is something not commonly seen, and, as a result, intimidates newcomers entering the industry. People typically search for those who are like them, such as in high school clubs or friend groups. Yet, because these values are almost nonexistent, plenty of outsiders are turned away. However, with newcomers like you, we hope that the field can be more accepting and open. Like with any common settler, we need rookies like you to set up camp in the field and carve your own space that can change what was once a frightening turnoff into a warm embrace. They say that metals can attract other metals, and we need you to be those magnets in the field, setting up a segway for the entrance of like-minded individuals.


==== Fundamental Concepts of Computer Science ====
==== Fundamental Concepts of Computer Science ====
Computer Science, at its core, is an expression of variable representation and operation through numerical evaluation. In more simple terms, everything can be done by building up on numbers. Computers use binary, a series of 1’s and 0’s, to understand values. A different pattern means a different number, such as 0010 representing 2 and 1011 being 11. Coding languages are the bridge between computers and humans, allowing us to “talk” to machines and tell them what to do. Coding languages have a few basic concepts used to store real world values:
Computer Science, at its core, is the bridge between computers and humans, allowing us to “talk” to machines and tell them what to do. Coding languages are used to translate normal words into computer language. For example, 2 is a ''number'' and is represented through a variable that can store numbers and has a label to clarify exactly what information it stores. Coding languages have a few basic data types used to store common real world values:


* Booleans represent whether something is true or false
* '''''Booleans''''' represent whether something is true or false
* Integers represent positive and negative whole numbers
* '''''Integers''''' represent positive and negative whole numbers
* Doubles represent positive and negative decimals
* '''''Doubles''''' represent positive and negative decimals
* Characters represent ‘letters’, except they also include numbers, symbols, and other written characters, so long as they are only 1 unit long. This means ‘a’ is a character while ‘an’ is two characters.
* '''''Characters''''' represent 'letters,' except they also include numbers, symbols, and other written characters, as long as they are only 1 unit long. <br> This means 'a' is a single character and 'an' is made up of two characters.
* Strings represent words, or several characters put together
* '''''Strings''''' represent words, or several characters put together.


These are the 5 basic variable types used in coding. However, if you wanted to store the information of something more complicated, like a car, you would use classes. A class is a way to group together lots of smaller variables under a single object. For example, every car must have engine specs, a color, some number of seats, and other information which can be stored using any of the 5 basic data types. A class allows you to put everything together under one name. Classes also have the ability to do things, called functions. Functions are the actions a class can do, such as a car class having the ability to change its color through a paintjob or increase its speed.
 
These are the five basic variable types used in coding. However, if you wanted to store the information of something more complicated than just a number or a word, like an animal, you would use a '''''class'''''. A class is a way to group together lots of smaller variables as parts of a larger object. For example, animals have legs, ages, colors, sizes, names, and other information that can be stored using any of the five basic data types. A class allows you to compile these values together under one name, in this case Animal, and also name its parts, like legs, color, weight, and species. Classes also have the ability to use '''''functions''''', which are the actions a class can perform, such as an Animal being able to eat, walk, sleep, or hunt.
 
==== Effects of Computer Science? ====
 
Computer science goes beyond coding—it is a unique outlet that encourages creative expression and allows students to be free from the constraints of a typical classroom. Computer science also serves as a platform for students to be ambitious in their pursuits and broaden their knowledge in an engaging manner, but the effect of the field goes far beyond its mentally stimulating nature.
 
Socially, programming and computer science have opened up an avenue to help empower underprivileged communities and break the cycle of poverty. The introduction of innovations—such as algorithms that better organize resource allocation, technology that helps connect communities to make existing resources more available, and artificial intelligence that can efficiently pinpoint areas that are most in need—has allowed for great strides in alleviating the effects of poverty in many communities.
 
These innovations along with the increased capacity to increase awareness of these issues across the nation has led to increased donations and greater funding for educational programs that prepare students for success going forward. Through these improved programs, students have been met with more promising opportunities to expand on their programming skills and put themselves in positions to successfully break the cycle of poverty.
 
On a larger scale, increased access to computer science is allowing for a mostly white & male dominated field to become more diverse and inclusive. With the expansion of curriculum to more regularly include computer science education, representation of ethnic, gender, and other minority groups has begun to trend upwards. In turn, this has led to greater representation in the workplace. These developments have had positive social effects because as high-paying and influential jobs diversify, opportunities become more available for all people regardless of their background and groups that are often overlooked can feel more empowered to pursue computer science as a career.
 
In the end, although computer science is a field that is progressing everyday, it is still wide open for different possibilities and changes. Although great progress has been made, there is still work to be done to ensure that computer science is a field that is inclusive to absolutely everyone, regardless of their background.


== Linux Basics ==
== Linux Basics ==
Line 59: Line 86:
==== Installing the secure shell extension ====
==== Installing the secure shell extension ====
To access Merlin, you'll need a secure shell client.
To access Merlin, you'll need a secure shell client.
A shell allows a user to interact on one computer, and the client allows you to create a shell on another computer.


If you're using a Windows-based device (usable on any device with Chrome): install Google Chrome, open up Chrome and search "Secure Shell Extension", install the extension.
If you're using a Windows-based device (usable on any device with Chrome): install Google Chrome, open up Chrome and search "Secure Shell Extension", install the extension.
[[File:Secure Shell App in Web Store.png|320x118|none|center]]


If you're using a Mac or Linux based device, it probably has a built-in client which can be accessed from the terminal.
[[File:Secure Shell App in Web Store.png|700px|center]]
[[File:Mac Terminal Screenshot.png|96x126px|frameless|center]]
 
If you're using a Mac or Linux based device, it probably has a built-in client that can be accessed from the terminal. You can also use telnet. (A MacOS Intel-compliled client is available [[Media:InetUtils-2.4.2-MacOS-Intel.zip|here]] or download the source from [https://ftpmirror.gnu.org/inetutils/inetutils-2.4.tar.gz here].)


You will need a connection string to access the server.
You will need a connection string to access the server.


==== Obtaining an account ====
==== Obtaining an account ====
Fill out [[Merlin_Shell_Access_Application|this]] form (if you haven't already) and wait for your credentials to be provided (via email).
Fill out '''[[Merlin_Shell_Access_Application|this]]''' form (if you haven't already) and wait for your credentials to be provided (via email).


Once your account is obtained, open up the "Connection Dialogue", and input the connection string. It will prompt you for your password, input it and continue.
Once your account is obtained, open up the '''"Connection Dialogue"''' and input the connection string. It prompts you for your password. Input it and continue.


It will prompt you to reset your password, which you can do by typing "passwd" into the terminal:
It prompts you to reset your password. You can do this by typing "passwd" into the terminal:


{{Hint| Remember that when you enter the password, what you type '''will not be echoed to the terminal''' (you will not see the characters as you type them). You'll just need to pretend that the your keypresses are being received.
{{Hint| Remember that when you enter the password, what you type '''will not be echoed to the terminal''' (you will not see the characters as you type them). You'll just have to believe that your keypresses are being received.
}}
}}


Line 90: Line 119:


=== Navigating the Shell ===
=== Navigating the Shell ===
In order to see what our working directory is inside the shell, we are going to use '''pwd''' which stands for "print the working directory". You can use the command by typing it in and hitting <RETURN>.
In the shell, everything can be done with the keyboard. The shell works on a command response system where you type a command, and the program provides a response. The shell works with directories that are similar to folders on a typical computer, and when you run a command, it runs on the current working directory.
 
====View the working directory====
To see what our working directory is inside the shell, we are going to use '''pwd''' which stands for "print the working directory." You can use the command by typing it in and pressing <RETURN>.
{{ConsoleLine|first-last@codermerlin:~$ |pwd}}
{{ConsoleLine|first-last@codermerlin:~$ |pwd}}
{{ConsoleLine|/home/first-last|}}
{{ConsoleLine|/home/first-last|}}
After using the command you should see something like the above console line. As long as you haven't moved in the directory you should start off in the home directory.
After using the command, you should see something like the above console line. As long as you haven't moved in the directory, you should start off in the home directory. <br>
 
====Listing directories and files====
Next, let's try the '''ls''' command which will '''list''' the directories and files in the working directory.
Next, let's try the '''ls''' command, which '''list,''' the directories and files in the working directory.
However no files or directories have been created yet, so there won't be anything to display.
However, no files or directories have been created yet, so there won't be anything to display.
{{ConsoleLine|first-last@codermerlin:~$ |ls}}
{{ConsoleLine|first-last@codermerlin:~$ |ls}} <br>
 
====Making a directory====
 
We can make a directory by using the command '''mkdir'''.
We can make a directory by using the command '''mkdir'''
{{ConsoleLine|first-last@codermerlin:~$ |mkdir firstDirectory}}
{{ConsoleLine|first-last@codermerlin:~$ |mkdir firstDirectory}}
Then to enter the directory simply use the command "'''cd''' <SPACE> directoryName".
Then to enter the directory, simply use the command "'''cd''' <SPACE> directoryName".
{{ConsoleLine|first-last@codermerlin:~$ |cd firstDirectory}}
{{ConsoleLine|first-last@codermerlin:~$ |cd firstDirectory}}
And if we use the '''pwd''' command now, we should see that we are in the created directory.
And if we use the '''pwd''' command now, we should see that we are in the created directory.
{{ConsoleLine|first-last@codermerlin:~$ |pwd}}
{{ConsoleLine|first-last@codermerlin:~$ |pwd}}
{{ConsoleLine|/home/first-last/firstDirectory|}}
{{ConsoleLine|/home/first-last/firstDirectory|}} <br>
 
====Changing directories====
 
Now let's navigate out of the current directory. Using the previous '''cd''' command, we can use '''"../"''' to go back one directory (which can be chained together, e.g. "../../../"), leave it blank to return to the home directory or use '''"~"''' to also get to the home directory.
Now let's navigate out of the current directory. Using the previous '''cd''' command we can use '''"../"''' to go back one directory (which can be chained together, e.g. "../../../"), leave it blank to return to the home directory or use '''"~"''' to also get to the home directory.
{{ConsoleLine|first-last@codermerlin:~$ |cd ../}}
{{ConsoleLine|first-last@codermerlin:~$ |cd ../}}
Now that we have returned to the home directory, let's try listing again:
Now that we have returned to the home directory, let's try listing again:
{{ConsoleLine|first-last@codermerlin:~$ |ls}}
{{ConsoleLine|first-last@codermerlin:~$ |ls}}
You should now see the directory previously added.
You should now see the directory previously added.
{{ConsoleLine|firstDirectory|}}
{{ConsoleLine|firstDirectory|}} <br>
 
====Creating a file====
We can create a file using the '''emacs''' command followed by the file name and extension. In this case, we are using the Swift coding language so the extension is ".swift". This will create and open the file, which will initially be blank, but if the file already exists this command can be used to open and edit it.
We can create a file using the '''emacs''' command followed by the file name and extension. In this case, we are using the Swift coding language so the extension is ".swift". This creates and opens the file, which will initially be blank, but if the file already exists, this command can be used to open and edit it.
{{ConsoleLine|first-last@codermerlin:~$ |emacs main.swift}}
{{ConsoleLine|first-last@codermerlin:~$ |emacs main.swift}}


 
Once we have a file open, we can begin using emacs shortcuts to navigate and edit the file. However, for now, let's suspend the file using '''CONTROL-z''' (press your control key, followed by the 'z' key). <br>
Once we have a file open we can begin using emacs short-cuts in order to navigate and edit the file. However for now let's suspend the file using '''CONTROL-z''' (press your control key, followed by the 'z' key).
====View running files====
 
Now we are back in the shell, but we still have a file that is open, but suspended.
Now we are back in the shell, however, we still have a file that is open, but suspended.
Using the command '''jobs''', we can see all of our open files.
Using the command '''jobs''' we can see all of our open files.
{{ConsoleLine|first-last@codermerlin:~$ |jobs}}
{{ConsoleLine|first-last@codermerlin:~$ |jobs}}
Upon using the command you should see something similar to this:
When using the command, you should see something similar to this:
{{ConsoleLine|first-last@codermerlin:~$ |[1]+  Stopped                /usr/local/bin/emacs main.swift}}
{{ConsoleLine|first-last@codermerlin:~$ |[1]+  Stopped                /usr/local/bin/emacs main.swift}} <br>
 
====Opening suspended files====
 
Let's reopen the file using the '''fg''' command.
Let's reopen the file using the '''fg''' command.
{{ConsoleLine|first-last@codermerlin:~$ |fg}}
{{ConsoleLine|first-last@codermerlin:~$ |fg}}
And finally, let's first save the file using '''CONTROL-x-s''' and then close the file using '''CONTROL-x-c'''.
And finally, let's first save the file using '''CONTROL-x-CONTROL-s''' and then close the file using '''CONTROL-x-CONTROL-c'''.
For further reference of the Emacs commands, continue to the next section.
For further reference about the Emacs commands, continue to the next section.
 


For more detailed information on this and relating topics: [[W1002 The Client, the Server, and the Shell]]
For more detailed information on this and relating topics: [[W1002 The Client, the Server, and the Shell]]


=== Emacs ===
=== Emacs ===
Emacs is the text editor we will be using to edit our files today. Many of the important key sequences for navigating, suspending/exiting, and saving files will be displayed in the following charts. Keep in mind this list is not comprehensive, but mostly accounts for basic emacs usage. A comprehensive list of Emacs Keys can be found [[Emacs_Keys|here]]. Additionally typing "emacs" into the shell brings up further documentation.
Emacs is the text editor we will be using to edit our files today. Many of the important key sequences for navigating, suspending/exiting, and saving files will be displayed in the following charts. Keep in mind this list is not comprehensive but mostly accounts for basic emacs usage. A comprehensive list of Emacs Keys is '''[[Emacs_Keys|here]]'''. Additionally, typing "emacs" into the shell brings up further documentation.


==== Navigation ====
==== Navigation ====
Line 161: Line 188:
|}
|}


The arrow keys can be used to traverse across characters. Keep in mind that emacs keys for moving across characters are options as well.
The '''arrow keys''' can be used to traverse across characters. Keep in mind that using emacs keys for moving across characters is an option as well.


==== Suspend/Exit and Save ====
==== Suspend/Exit and Save ====
Line 181: Line 208:
|}
|}


== Graphics Project ==
== Graphics ==
[[File:Pong.png|200px|thumb|right|Pong]]
For our project we'll be recreating a 2D, table-tennis themed Atari videogame "Pong" using the Igis and Scenes libraries provided as part of the open-source Merlin suite.
 
 
 
=== Getting Started ===
Before we begin, let's create a Projects directory to keep all of our projects organized:
{{ConsoleLine|first-last@codermerlin:~$ | mkdir Projects }}
{{ConsoleLine|first-last@codermerlin:~$ | cd Projects/ }}
 
 
To start, we'll need to import a prepared template of the game using GitHub. Type the following into the console:
{{ConsoleLine|first-last@codermerlin:~/Projects$ | git clone <nowiki>https://github.com/Riley229/IgisGraphics-Pong</nowiki> Pong/ }}
This copies files from a GitHub repository to your shell for you to edit. In this case they're copied into the directory {{pathname|Pong/}}.
 
Enter the newly created Pong directory:
{{ConsoleLine|first-last@codermerlin:~/Projects$ | cd Pong/ }}
Now, let's view all the files in our projects directory.
{{ConsoleLine|first-last@codermerlin:~/Projects/Pong$ | tree }}
You should see several files along with a Directory named {{pathname|Sources/}} containing another directory named {{pathname|ScenesShell/}}.
The files we want to edit are in the {{pathname|ScenesShell/}} directory, so let's navigate there:
{{ConsoleLine|first-last@codermerlin:~/Projects/Pong$ | cd Sources/ScenesShell }}
 
 
Before we edit anything, let's see what this code does.
 
{{RunProgram|Run the program.
{{ConsoleLine|first-last@codermerlin:~/Projects/Pong/Sources/ScenesShell$ |run}}
}}
 
 
Open a browser (or use a new tab on an already-open browser).  Then, go to the URL: 
<pre>
http://igis.codermerlin.com/users/user-name
</pre>
NOTE:  You MUST change '''user-name''' to your actual user name.  For example, http://igis.codermerlin.com/users/ty-cam
 
=== First Steps ===
{{StopProgram|Stop the running program.
Return to the ''console'' and press {{SpecialKey|CONTROL|C}}
}}
 
 
We'll start by making a working ball.  Navigate to the {{pathname|Interaction/}} directory and edit the file {{pathname|Ball.swift}}.
{{ConsoleLine|first-last@codermerlin:~/Projects/Pong/Sources/ScenesShell$ | cd Interaction/}}
{{ConsoleLine|first-last@codermerlin:~/Projects/Pong/Sources/ScenesShell/Interaction$ | emacs Ball.swift}}
 
You'll find some code as follows:
<syntaxhighlight lang="swift">
class Ball : RenderableEntity
</syntaxhighlight>
 
This defines a new {{SwiftKeyword|class}} named {{SwiftClass|Ball}}.  The colon and the following identifier,
{{SwiftClass|RenderableEntity}}, indicates that the {{SwiftKeyword|class}} {{SwiftClass|Ball}} inherits properties and methods from the class {{SwiftClass|RenderableEntity}}.  You'll note that the {{SwiftKeyword|class}} includes a '''constructor''', indicated by the keyword {{SwiftKeyword|init}}:
<syntaxhighlight lang="swift" line>
init() {
    // Initialize objects
    velocityX = 0
    velocityY = 0
 
    // Using a meaningful name can be helpful for debugging
    super.init(name:"Ball")
}
</syntaxhighlight>
 
The '''constructor''' is invoked automatically as the object (an '''instance''' of the class) is being initialized.  This is the place where you'll set up your object.  The current constructor in this file sets the object's name using the keywords {{SwiftKeyword|super}} and {{SwiftKeyword|init}}.  {{SwiftKeyword|super}} indicates that we're invoking a function (or accessing a property) on our '''parent''' class, the class from which we ''inherited''.  In this case, that would be the {{SwiftClass|RenderableEntity}}.
 
We're going to display a ball on our ''canvas'' (the virtual surface on which we'll be rendering images in the browser).  In order to do that, we'll first declare an {{SwiftClass|Ellipse}} object as follows:
<syntaxhighlight lang="swift" highlight="2" line>
class Ball : RenderableEntity {
    let ellipse : Ellipse
 
    var velocityX : Int
    var velocityY : Int
 
    // ...
}
</syntaxhighlight>
 
We'll ''initialize'' our ellipse object in the constructor:
<syntaxhighlight lang="swift" highlight="7-8" line>
init() {
    // Initialize objects
    ellipse = Ellipse(center:Point(x:100, y:100), radiusX:20, radiusY:20, fillMode:.fill)
    velocityX = 0
    velocityY = 0
 
    // Using a meaningful name can be helpful for debugging
    super.init(name:"Background")
}
</syntaxhighlight>
 
At this point, we have an {{SwiftClass|Ellipse}} object that "knows" how to render itself on the canvas, but it hasn't yet actually done any rendering.  The method we use to render objects onto the canvas is {{SwiftIdentifier|render}} which executes once per frame.
 
Add a new method (below ''init'') as follows:
<syntaxhighlight lang="swift">
override func render(canvas:Canvas) {
    canvas.render(ellipse)
}
</syntaxhighlight>
 
This code instructs the ''ellipse'' object to render itself on the canvas. 
 
Be sure to edit the file as indicated above, save the file, then suspend emacs.
 
{{RunProgram|Run the program and refresh the browser page.}}
 
=== Styling ===
{{StopProgram|Stop the running program.}}
 
 
Let's change the styling.  Resume emacs and add a new {{SwiftClass|FillStyle}} object and initialize it:
<syntaxhighlight lang="swift" highlight="2,10">
class Ball : RenderableEntity {
    let fillStyle : FillStyle
    let ellipse : Ellipse
 
    var velocityX : Int
    var velocityY : Int
 
    init() {
        // Initialize objects
        fillStyle = FillStyle(color:Color(.white))
        ellipse = Ellipse(center:Point(x:100, y:100), radiusX:20, radiusY:20, fillMode:.fill)
        velocityX = 0
        velocityY = 0
 
        // Using a meaningful name can be helpful for debugging
        super.init(name:"Background")
    }
}
</syntaxhighlight>
 
Then, render it directly onto the canvas.
<syntaxhighlight lang="swift" highlight="2-3">
func render(canvas:Canvas) {
    // render the fillstyle modifier before the ellipse object
    canvas.render(fillStyle, ellipse)
}
</syntaxhighlight>
 
 
Remember to save the file, then suspend emacs.
 
{{RunProgram|Run the program and refresh the browser page.}}
 
=== Positioning ===
 
At the start of our game, we want the ball to appear in the center of the canvas.  To do this, let's first add a boolean flag which will
determine if we've set the initial coordinates:
<syntaxhighlight lang="swift" highlight="7">
class Ball : RenderableEntity {
    let fillStyle : FillStyle
    let ellipse : Ellipse
 
    var velocityX : Int
    var velocityY : Int
    var coordinatesSet = false
 
    // ...
</syntaxhighlight>
 
Now to set the ellipses position, we will use the {{SwiftIdentifier|calculate}} method which is called every frame before the {{SwiftIdentifier|render}} method:
<syntaxhighlight lang="swift">
override func calculate(canvasSize:Size) {
    if !coordinatesSet {
        ellipse.center = canvasSize.center
        coordinatesSet = true
    }
}
</syntaxhighlight>
We are unable to set the coordinates of the ball before this since we don't know the size of the canvas prior to the invocation
of this method.
 
{{RunProgram|Run the program and refresh the browser page.}}
 
=== Animating ===
Let's teach our ball to move on it's own, given a velocity.  In your '''Ball.init()''' constructor, change both the
velocityX and velocityY values to somewhere in the range of 8-16.
 
We now need to add some "brains" to our ball so that it "knows" how to move based on it's velocity.  Edit your calculate method
as follows:
<syntaxhighlight lang="swift" highlight="5-7">
func calculate(canvasSize:Size) {
    if !coordinatesSet {
        ellipse.center = canvasSize.center
        coordinatesSet = true
    } else {
        ellipse.center += Point(x:velocityX, y:velocityY)
    }
}
</syntaxhighlight>
 
{{RunProgram|Run the program and refresh the browser page.}}
 
=== Hit Testing ===
The process of determining whether an on-screen, graphical object, such as a ball, intersects with another on-screen, graphical object is termed '''hit-testing'''. We'll use hit-testing to determine if our ball intersects with the edge of the canvas.  A straight-forward (yet sometimes inaccurate) method to perform hit-testing involves drawing an imaginary rectangle around objects of interest and then checking to see whether or not this '''minimum bounding rectangle''' overlaps the bounding rectangle of any other objects of interest.
 
First, let's implement a new method which returns an accurate bounding rect for our ball object:
<syntaxhighlight lang="swift">
override func boundingRect() -> Rect {
    return ellipse.boundingRect()
}
</syntaxhighlight>
 
Now, update the '''Ball.calculate(canvasSize:)''' method as follows:
<syntaxhighlight lang="swift" highlight="6-27">
func calculate(canvasSize:Size) {
    if !coordinatesSet {
        ellipse.center = canvasSize.center
        coordinatesSet = true
    } else {
        // First, move to the new position
        ellipse.center += Point(x:velocityX, y:velocityY)
 
        // Form a bounding rectangle around the canvas
        let canvasBoundingRect = Rect(size:canvasSize)
 
        // Form a bounding rect around the ball (ellipse)
        let ballBoundingRect = boundingRect()
 
        // Perform a hit test of the ball with the canvas bounding rect.
        let hitTest = canvasBoundingRect.containment(target:ballBoundingRect)
 
        // If we're too far to the top or bottom, we bounce the y velocity
        if hitTest.tooFarTop || hitTest.tooFarBottom {
            velocityY = -velocityY
        }
 
        // If we're too far to the left or right, we bounce the x velocity
        if hitTest.tooFarLeft || hitTest.tooFarRight {
            velocityX = -velocityX
        }
    }
}
</syntaxhighlight>
 
{{RunProgram|Run the program and refresh the browser page.}}
 
=== Game Rules ===
In the game of pong, the goal is to prevent the ball from coming into contact with your edge of the screen.  As such, we need
to alter our code to handle hits on the left and right side of the screen.
<syntaxhighlight lang="swift" highlight="2-4,11-18">
func calculate(canvasSize:Size) {
    guard let mainScene = scene as? MainScene else {
        fatalError("Ball expected owning scene to be type MainScene.")
    }
 
    if !coordinatesSet {
        // ...
    } else {
        // ...
 
        // If we're too far to the left or right, we need to reset the ball and tell the scene which player has scored
        if hitTest.contains(.overlapsLeft) {
            coordinatesSet = false
            mainScene.addPoint(to:.right)
        } else if hitTest.contains(.overlapsRight) {
            coordinatesSet = false
            mainScene.addPoint(to:.left)
        }
    }
}
</syntaxhighlight>
 
{{RunProgram|Run the program and refresh the browser page.}}
 
 
 
=== Adding Paddles ===
Now that we have a (almost) fully functioning ball, lets add the paddles.  enter emacs and navigate to the file {{pathname|InteractionLayer.swift}}.
You should notice the following RenderableEntities defined at the top of the class:
<syntaxhighlight lang="swift">
let ball = Ball()
let leftPaddle = Paddle(position:.left)
let rightPaddle = Paddle(position:.right)
</syntaxhighlight>
 
Although these entities are already created, they are not yet recieving frame updates.  To register an entity to recieve frame updates,
we use the insert(entity: at:) function.  Navigate to the initialization and add the following lines:
<syntaxhighlight lang="swift" highlight="7-8">
init() {
    // Using a meaningful name can be helpful for debugging
    super.init(name:"Interaction")
 
    // We insert our RenderableEntities in the constructor
    insert(entity:ball, at:.front)
    insert(entity:leftPaddle, at:.front)
    insert(entity:rightPaddle, at:.front)
}
</syntaxhighlight>
 
{{RunProgram|Run the program and refresh the browser page.}}
 
Note: when you run the program, use the "w" and "s" keys to maneuver the left paddle, and the "ArrowUp" and "ArrowDown" keys to maneuver
the right paddle.
 
You may notice that the paddles aren't interacting with the ball.  To correct this, change the {{SwiftIdentifier|enableHitTesting}} variable
at the top of the file to true.
 
 
=== Your Turn ===
To take this project one step further, try implementing some of the following features:
# In the {{pathname|Paddle.swift}} file, try changing the keybindings to move the paddles up and down.
# Add a short delay between rounds after the ball resets to the center of the canvas and before it resumes moving.
# Implement a ''power bounce'' such that immediately after a collision with the canvas edge the ball ''accelerates'' to twice its original velocity then slows back to that original velocity.
 
 
== Web Design ==
What is Web design?
  Web design is the design of web pages through the use of HTML, CSS, and Java Script. Today, we will be using HTML and CSS to create our one websites about social justice.
* HTML: Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
* CSS: Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
 
Today we will be using Repl.it to design out own website.
1. Click on the link below and create an account using the your student emails:
  https://repl.it/
2. Once logged in, click on "new repl"and "HTML, CSS, JS" and create the repl
  [[File:New repl instruction picture.png|150px|Image: 150 pixels]]] [[File:HTML file creation.png|500px|Image: 500 pixels]]
 
=== HTML ===
Now you should have the basic HTML Code that looks like this:
<syntaxhighlight lang="swift" >
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>
</syntaxhighlight>
 
Let's start creating our website. Add the highlighted lines to your code.
<syntaxhighlight lang="swift" highlight="11-12">
<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
   
    <h1> This is a header</h1>
    <h2>This is a smaller header</h2>
  </body>
</html>
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. What do you notice?}}
 
What you just added is called the header. The Header has an "h1" tag, and allows you create the title of your website. At the end, you must add the closing tag, "/h1." If you want a smaller header, replace "1" with any other larger number to create sub-headers.
 
 
Let's add a little more to our website, like some sentences. Add the highlighted lines to your code.
<syntaxhighlight lang="swift" highlight="12">
<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <h1>This is a header</h1>
    <h2>This is a smaller header</h2>
    <p>This is a paragraph tag</p>
    <p>You can use this tag as many times to create short sentences or long paragraphs based on the theme of your website</p>
  </body>
</html>
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. What do you notice?}}
 
What you just added is the paragraph tag. The "p" tag allows you to create sentences.
 
Finally, lets add some pictures to our code...
 
<syntaxhighlight lang="swift" highlight="14">
<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <h1>This is a header</h1>
    <h2>This is a smaller header</h2>
    <p>This is a paragraph tag</p>
    <p>You can use this tag as many times to create short sentences or long paragraphs based on the theme of your website</p>
    <img src ="https://journocode.com/wp-content/uploads/2016/06/htmlCssJS-1140x515.jpg">
  </body>
</html>
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. What do you notice?}}
 
You have created an image! This tag allows you to add your own images. Just make sure to copy the image link, and make sure that the link is not too long, or else your program may crash!
 
 
=== CSS ===
While our website looks great with simple text and images, let's make it more colorful and exciting by using CSS!
 
On the left side of your repl.it page, there should be all your files for working with HTML,CSS, and JavaScript, click style.css to work in CSS
[[File:HtmlAndCssFiles.png|thumb|center]]
 
1. First let's change the color of the background with CSS, add the highlighted lines to your code:
 
<syntaxhighlight lang="swift" highlight="1-3">
body {
  background-color: lightblue;
}
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. What do you notice?}}
 
{{Hint| Repl has different colors that you change choose from with a drop down list. You can either use one of the colors provided, or use a website like this one to choose a color (https://www.w3schools.com/cssref/css_colors.asp)
}}
 
2 Now lets change the color of our text, add the highlighted lines to your code:
 
<syntaxhighlight lang="swift" highlight="5-7">
body {
  background-color: lightblue;
}
 
h1 {
  color:mediumpurple;
}
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. What do you notice? Is there a different between using '''background-color''' and '''color'''?}}
 
3. Now lets center the h1 and make it bigger, add the highlighted lines to your code:
 
<syntaxhighlight lang="swift" highlight="8-9">
body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
}
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. What do you notice? Try changing the number before '''px''', what does this do?}}
 
3. Finally for our h1, lets make a background color and frame around, add the highlighted lines to your code:
 
<syntaxhighlight lang="swift" highlight="10-11">
body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. What do you notice? Try changing the number before '''px''', what does this do?}}
 
4. Next, lets add some color to our h2, add the highlighted lines to your code:
 
<syntaxhighlight lang="swift" highlight="11-13">
body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top.}}
 
5. Our image looks a little big , add the highlighted lines to your code:
 
<syntaxhighlight lang="swift" highlight="14-17">
body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
img {
  width: 650px;
  height: 300px;
}
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top.}}
 
6. Now lets edit the paragraphs, add the highlighted lines to your code:
 
<syntaxhighlight lang="swift" highlight="18-20">
body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
img {
  width: 650px;
  height: 300px;
}
p{
  color:white;
}
</syntaxhighlight>
 
{{RunProgram|Now, "Run" your code by pressing the green button at the top. Why do you think both of the paragraph lines changed colors?}}


===Classes===
  Now it is time to learn more about some graphics... [[W5020.10_Graphics|Click here!]]
===Your Turn===
==HTML/CSS==
   Now its your turn! using all of the tools you have just learned with Web Design, create your own website about social justice! Make sure you add pictures, and make your website visually pleasing with CSS!
   After you have finished learning about graphics, [[W5020.11_HTML|click here]] to learn how to create your own website!

Latest revision as of 16:41, 9 May 2023

Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder


CS ED Week[edit]

Image: 800px

If you would like to participate in the event, please sign up by Clicking Here

Future updates will be provided through the Remind class @ahs-csed.

We thank you for your interest in participating!

Introduction[edit]

An Hour of Code and Beyond

"There's more to it than meets the eye"

 This article can be improved by:  The date and times below are from 2020, but should they be changed to be current?

Wednesday, December 9th, 2020 5PM-7PM

Zoom Link

Ed Week 2020

What is CS ED Week about?
“Computer Science Education Week (CSEdWeek) is an annual call to action to inspire K-12 students to learn computer science, advocate for equity in computer science education, and celebrate the contributions of students, teachers, and partners to the field. As part of the #CSforGood movement this year we’re proud to elevate.”

Topics we will go over: 

 * What is Computer Science?
 * Linux Basics
 * Shell basics
 * Igis and graphics
 * CSS/HTML Basics


Merlin Shell Access Application:

If you do not have access to the Merlin Shell, use this Link to sign up. You will need this access to the shell to participate in the events today!

Merlin shell access application QR Code

Merlin Shell Access Application Link

CS ED Survey: If you already completed the application above, fill this survey so we can see what interests you! Survey Link

Computer Science[edit]

CodeBackground.jpg

Why Computer Science?[edit]

Computer science is one of the fastest growing pathways in terms of economic viability and accessibility and significance. With the onset of the digital age, many industries have turned toward technology as their ticket to the future, and now, more than ever, need computer scientists in their fields. Just take a look at the world around us. Restaurants and grocery chains such as Walmart or Chili’s rely on mobile applications for deliveries and purchases, while distributors like Amazon continue to thrive in online shopping. Anything your eyes meet is bound to have coding behind its inception. Yet, this flexibility exists within the work environment as well. Unlike other trades or positions, computer science requires no specific job site to get work done. Whether it be from your couch or even your local library, progress can be made, as long as an electrical charge and Internet connection exist. However, while this ease of access can be applied to both contingency and setting, it is mostly absent from the field’s workforce.

Starting a career in computer science is arguably the hardest part; someone needs to make an initial investment for equipment, and they need the courage to dive head-first into uncharted territory. The price floor itself is a considerable first step because it requires a functioning computer plus electrical and network connections. This places those of lower economic standings at a disadvantage because the tools required often don't match a preferable price point. Yet, while cost filters out and blocks access to those interested in the field, social diversity actively works to obstruct those of differing social status as well. The current environment of computer science suffers from a social rigidity: variety in its workers' social heritage is something not commonly seen, and, as a result, intimidates newcomers entering the industry. People typically search for those who are like them, such as in high school clubs or friend groups. Yet, because these values are almost nonexistent, plenty of outsiders are turned away. However, with newcomers like you, we hope that the field can be more accepting and open. Like with any common settler, we need rookies like you to set up camp in the field and carve your own space that can change what was once a frightening turnoff into a warm embrace. They say that metals can attract other metals, and we need you to be those magnets in the field, setting up a segway for the entrance of like-minded individuals.

Fundamental Concepts of Computer Science[edit]

Computer Science, at its core, is the bridge between computers and humans, allowing us to “talk” to machines and tell them what to do. Coding languages are used to translate normal words into computer language. For example, 2 is a number and is represented through a variable that can store numbers and has a label to clarify exactly what information it stores. Coding languages have a few basic data types used to store common real world values:

  • Booleans represent whether something is true or false
  • Integers represent positive and negative whole numbers
  • Doubles represent positive and negative decimals
  • Characters represent 'letters,' except they also include numbers, symbols, and other written characters, as long as they are only 1 unit long.
    This means 'a' is a single character and 'an' is made up of two characters.
  • Strings represent words, or several characters put together.


These are the five basic variable types used in coding. However, if you wanted to store the information of something more complicated than just a number or a word, like an animal, you would use a class. A class is a way to group together lots of smaller variables as parts of a larger object. For example, animals have legs, ages, colors, sizes, names, and other information that can be stored using any of the five basic data types. A class allows you to compile these values together under one name, in this case Animal, and also name its parts, like legs, color, weight, and species. Classes also have the ability to use functions, which are the actions a class can perform, such as an Animal being able to eat, walk, sleep, or hunt.

Effects of Computer Science?[edit]

Computer science goes beyond coding—it is a unique outlet that encourages creative expression and allows students to be free from the constraints of a typical classroom. Computer science also serves as a platform for students to be ambitious in their pursuits and broaden their knowledge in an engaging manner, but the effect of the field goes far beyond its mentally stimulating nature.

Socially, programming and computer science have opened up an avenue to help empower underprivileged communities and break the cycle of poverty. The introduction of innovations—such as algorithms that better organize resource allocation, technology that helps connect communities to make existing resources more available, and artificial intelligence that can efficiently pinpoint areas that are most in need—has allowed for great strides in alleviating the effects of poverty in many communities.

These innovations along with the increased capacity to increase awareness of these issues across the nation has led to increased donations and greater funding for educational programs that prepare students for success going forward. Through these improved programs, students have been met with more promising opportunities to expand on their programming skills and put themselves in positions to successfully break the cycle of poverty.

On a larger scale, increased access to computer science is allowing for a mostly white & male dominated field to become more diverse and inclusive. With the expansion of curriculum to more regularly include computer science education, representation of ethnic, gender, and other minority groups has begun to trend upwards. In turn, this has led to greater representation in the workplace. These developments have had positive social effects because as high-paying and influential jobs diversify, opportunities become more available for all people regardless of their background and groups that are often overlooked can feel more empowered to pursue computer science as a career.

In the end, although computer science is a field that is progressing everyday, it is still wide open for different possibilities and changes. Although great progress has been made, there is still work to be done to ensure that computer science is a field that is inclusive to absolutely everyone, regardless of their background.

Linux Basics[edit]

Getting Ready[edit]

Installing the secure shell extension[edit]

To access Merlin, you'll need a secure shell client.

A shell allows a user to interact on one computer, and the client allows you to create a shell on another computer.

If you're using a Windows-based device (usable on any device with Chrome): install Google Chrome, open up Chrome and search "Secure Shell Extension", install the extension.

Secure Shell App in Web Store.png

If you're using a Mac or Linux based device, it probably has a built-in client that can be accessed from the terminal. You can also use telnet. (A MacOS Intel-compliled client is available here or download the source from here.)

You will need a connection string to access the server.

Obtaining an account[edit]

Fill out this form (if you haven't already) and wait for your credentials to be provided (via email).

Once your account is obtained, open up the "Connection Dialogue" and input the connection string. It prompts you for your password. Input it and continue.

It prompts you to reset your password. You can do this by typing "passwd" into the terminal:

Hint.pngHelpful Hint
Remember that when you enter the password, what you type will not be echoed to the terminal (you will not see the characters as you type them). You'll just have to believe that your keypresses are being received.

(here for further information)

Change your default password to a strong password:

john-williams@codermerlin:~$ passwd

Changing password for john-williams.

(current) UNIX password:

Enter new UNIX password:

Retype new UNIX password:

passwd: password updated successfully

Navigating the Shell[edit]

In the shell, everything can be done with the keyboard. The shell works on a command response system where you type a command, and the program provides a response. The shell works with directories that are similar to folders on a typical computer, and when you run a command, it runs on the current working directory.

View the working directory[edit]

To see what our working directory is inside the shell, we are going to use pwd which stands for "print the working directory." You can use the command by typing it in and pressing <RETURN>.

first-last@codermerlin:~$  pwd

/home/first-last 

After using the command, you should see something like the above console line. As long as you haven't moved in the directory, you should start off in the home directory.

Listing directories and files[edit]

Next, let's try the ls command, which list, the directories and files in the working directory. However, no files or directories have been created yet, so there won't be anything to display.

first-last@codermerlin:~$  ls


Making a directory[edit]

We can make a directory by using the command mkdir.

first-last@codermerlin:~$  mkdir firstDirectory

Then to enter the directory, simply use the command "cd <SPACE> directoryName".

first-last@codermerlin:~$  cd firstDirectory

And if we use the pwd command now, we should see that we are in the created directory.

first-last@codermerlin:~$  pwd

/home/first-last/firstDirectory 


Changing directories[edit]

Now let's navigate out of the current directory. Using the previous cd command, we can use "../" to go back one directory (which can be chained together, e.g. "../../../"), leave it blank to return to the home directory or use "~" to also get to the home directory.

first-last@codermerlin:~$  cd ../

Now that we have returned to the home directory, let's try listing again:

first-last@codermerlin:~$  ls

You should now see the directory previously added.

firstDirectory 


Creating a file[edit]

We can create a file using the emacs command followed by the file name and extension. In this case, we are using the Swift coding language so the extension is ".swift". This creates and opens the file, which will initially be blank, but if the file already exists, this command can be used to open and edit it.

first-last@codermerlin:~$  emacs main.swift

Once we have a file open, we can begin using emacs shortcuts to navigate and edit the file. However, for now, let's suspend the file using CONTROL-z (press your control key, followed by the 'z' key).

View running files[edit]

Now we are back in the shell, but we still have a file that is open, but suspended. Using the command jobs, we can see all of our open files.

first-last@codermerlin:~$  jobs

When using the command, you should see something similar to this:

first-last@codermerlin:~$  [1]+ Stopped /usr/local/bin/emacs main.swift


Opening suspended files[edit]

Let's reopen the file using the fg command.

first-last@codermerlin:~$  fg

And finally, let's first save the file using CONTROL-x-CONTROL-s and then close the file using CONTROL-x-CONTROL-c. For further reference about the Emacs commands, continue to the next section.

For more detailed information on this and relating topics: W1002 The Client, the Server, and the Shell

Emacs[edit]

Emacs is the text editor we will be using to edit our files today. Many of the important key sequences for navigating, suspending/exiting, and saving files will be displayed in the following charts. Keep in mind this list is not comprehensive but mostly accounts for basic emacs usage. A comprehensive list of Emacs Keys is here. Additionally, typing "emacs" into the shell brings up further documentation.

Navigation[edit]

Key Sequence Purpose
CONTROL-v Scroll down (forwards) one page
ALT-v Scroll up (backwards) one page
CONTROL-l (second character is lowercase 'L') Clear screen and redisplay the text, moving the cursor to the vertical center
ALT-SHIFT-< Move the cursor to the beginning of the file
ALT-SHIFT-> Move the cursor to the end of the file

The arrow keys can be used to traverse across characters. Keep in mind that using emacs keys for moving across characters is an option as well.

Suspend/Exit and Save[edit]

Key Sequence Purpose
CONTROL-x CONTROL-c Exit emacs
CONTROL-z Suspend emacs temporarily
CONTROL-x CONTROL-s Save the current file
CONTROL-x s Save changed files (prompts for all confirmation)

Graphics[edit]

 Now it is time to learn more about some graphics... Click here!

HTML/CSS[edit]

 After you have finished learning about graphics, click here to learn how to create your own website!
Retrieved from "https://www.codermerlin.academy/wiki/index.php?title=W5020_CS_Ed_Week_2020&oldid=18512"