Codes and Coding. Objectives: Related Careers

Transcription

1 Codes and Coding Objectives: 1. Students will become aware of several different programming code languages and be able to identify similarities and differences between them. 2. Students will learn how to copy and manipulate HTML code from existing Websites. 3. Students will learn to use the Find feature located in word processing applications. 4. Students will learn the definitions of computer programming, computer programming languages, code, syntax, compiling,` and instructions. 5. Explore career opportunities in computer programming and software engineering. Related Careers Computer programmer Web designer Software designer Important Definitions 1.Computer programming (coding) - Creating a computer program. The steps are: 1. Developing the necessary instructions to solve the particular problem. 2. Writing the necessary instructions in a specific programming language (coding the program). 3. Assembling or compiling the program to turn it into language understood by the computer. 4. Testing and fixing the program. 5. Preparing the necessary documentation. 2. Computer programming languages- a language (or set of rules) used to write instructions for the computer. Some of the current computer languages are C++, Java, and Visual Basic. 3. Code-combination of letters and symbols that can tell a computer to do something. 4. Syntax- the rules that programming languages should follow. It tells how words and symbols are put together to form a phrase or command. Each computer programming language has its own syntax. If a computer program does not follow the syntax rules of that language, the program will not work. 5. Compiling- To translate a computer programming language into instructions understood by the computer. 6. Instructions- Steps to complete a task.

2 Note: You must have an Internet pass to complete this activity. Be prepared to show it to the instructor before you begin the activity. Activity 1 Revealing the Code During this activity you will be able to see the HTML code that is behind most WebPages. You will then find certain information in the html code and change it to something else. You will then open the changed page through the Internet program and view the page with your changes. Materials Needed Computer with Internet access and the program TextEdit. This program comes free with the Mac in OS X Procedure: 1) Go to one of the below websites: Examples: Sports Illustrated USA Today Newspaper If you go to any other site than these listed above you will automatically lose your Internet pass. 2) Select View from the menu at the top of the page and View Source or Source. A window should open displaying the HTML code behind the webpage. 3) While this window is open select Edit/Select All (when you see anything written in the following manner, Edit/Copy, it means that you go to the Edit menu at the top of the page and then select Copy from within that menu). 4) While the code is selected, select Edit/Copy. 5) Open the program TextEdit from the Desktop and select TextEdit/Preferences from the menu at the top. A new pop-up window should open. Make sure the box before the words Plain Text is selected and then close that window. 6) Open a new page by selecting File/New. 7) Select Edit/Paste from the menu. The source code that you copied should now appear on the page in TextEdit. 8) Select Edit/Find/Find from the menu. The find box should appear with the cursor in the find dialog line. Type in the following code: <title> and click on the word next. The program should highlight the words you searched for. These words located between the <> and including the <> are called code tags. 9) Change the information that is located between the title code tags being careful not to change the code itself. <title> change these words</title>. In this statement you should only change the words that are underlined in the example and not the code tags which include the <> and the word title.

3 10) Save the file as a text file by selecting File/SaveAs and by giving it a name, but don t click on save yet. Make sure you are saving it on the Desktop by selecting Desktop from the location drop down menu. Before you click save you should change the file extension in the name from.txt to.htm so that the file name looks like the following example. Example: Change Filename.txt to Filename.htm You may now click on Save. After you click save the computer will ask you if you want to append the filename with a.txt extension. You should select don t append. 11) Open the saved file in Internet Explorer by dragging the file on to the Internet Explorer icon on the desktop. 12) The file should display as a web page with a new name in the title bar (the bar at the top of the page). 13) Go back to the TextEdit document and make other changes such as, rewording headlines, putting your name in an article, or inserting your picture in place of another. 14) You may print your page at this time, or if you wish to make further changes you should print after those changes are made. 15) You are not required to insert a picture, but if you so desire you will need to get some assistance from the instructor. The procedure for doing this can be found in the next section titled Inserting a Picture. Inserting a picture The process for inserting a picture isn t much different from changing the title as in Activity 1. Follow these next steps and you will be successful. 1. Identify the picture on the Webpage that you would like to change. Find out the name of the picture by holding down the CTRL button and clicking the mouse on the picture. You should select either Save Picture As or Download Picture to Disk from the menu that appears. You will not actually save or down load the picture, but when you do this, the name of the picture will appear in the dialog line of the new pop-up window. Highlight and copy the whole name by selecting Edit/Copy from the top menu bar. After you have copied the name of the picture, click on Cancel so you do not save or download the picture. 2. Go back to the TextEdit document with the code on it and Select Edit/Find/Find (Edit/Find/Find Panel for some computers) from the menu. The find box, or find panel, should appear with the cursor in the find dialog line. Paste in the picture name by selecting Edit/Paste from the menu bar and then click on next. The program should highlight picture name in the code. You must be careful to look closely at the code that comes immediately before the picture name to see if the code img src= is present. The picture name may appear in various locations, but in order to change the picture you must find the location that also includes img src=. If the code that has been located in the find request is the wrong one, select next on the find panel and the next time the name appears will be located. 3. Highlight the information the follows img src= being careful to highlight only the information that comes between the quotation marks. The highlighted selection should end with.jpg.

4 4. You will need to obtain a picture of yourself either by bringing one from home saved on a CD or by asking the teacher to access Powerschool and dragging and dropping the picture on the Desktop. 5. Grab the picture file from the desktop and drag it onto the Internet Explorer icon. The picture will open in the Internet browser. 6. The URL or file location will appear in the navigation bar. It should look something similar to this: file:///localhost/users/asdteacher/desktop/im jpg. 7. You should highlight name of the file starting with the / before Users: /Users/asdteacher/Desktop/IM JPG. Copy this name by selecting Edit/Copy from the menu bar. 8. Go back to the TextEdit document where the other picture location is highlighted and paste in the new picture name by selecting Edit/Paste. The new code should look like this: img src= /Users/asdteacher/Desktop/IM JPG 9. Save the file now by selecting File/Save. 10. Open the saved file in Internet Explorer by dragging the file on to the Internet Explorer icon on the desktop. 11. The file should display as a web page with all of the new changes including the new picture. 12. If the page doesn t display the changes go back to step one and make sure you followed all instructions carefully. 13. Print the page by selecting File/Print form the menu bar. Activity 2: Identify the differences and similarities in the programming languages below? Write your answer on your TLC answer sheet. In this activity you will look at some examples of programming code. These are examples of just three of the many codes that exist. Look carefully at the symbols and the words that are used in the examples and recognize the similarities and differences between them. Computer Programming Languages Below are three code segments (computer programs) written in three different Programming languages (C++, Java & VB) that end with the same result. The program follows the following four steps: 1) The program declares a variable (storage area) named Score 2) The program assigns the value of 87" to the variable Score. 3) The program compares the value in Score to the conditions of four If statements and prints either Grade = C, Grade = B, Grade = A or Grade = Fail depending on the value of Score. 4) The program ends.

5 Sample Computer Programs in Various Programming Languages C++ int Score; Score = 87; if (Score >= 70 && Score <= 79) cout << Grade = C ; else if (Score >= 80 && Score <= 89) cout << Grade = B ; else if (Score >= 90) cout << Grade = A ; else cout << Grade = Fail ; Output - Grade = B Java int Score; Score = 87; if(score >= 70 && Score <= 79) System.out.print( Grade = C ); else if(score >= 80 && Score <= 89) System.out.print( Grade = B ); else if(score >= 90) System.out.print( Grade = A ); else System.out.print( Grade = Fail ); Output - Grade = B Visual Basic (VB) Dim Score as integer Score = 87 IF Score >= 70 AND Score <= 79 THEN txtout.text = Grade = C ELSEIF Score > 80 AND Score <= 89 THEN txtout.text = Grade = B ELSEIF Score > 90 THEN txtout.text = Grade = A ELSE txtout.text = Grade = Fail END IF Output - Grade = B.

6 Revealing the Code Answer Sheet 1. This space should be filled in with your observations from Activity What are the steps to computer programming? 3. What does syntax mean? 4. What would happen if you erased some code from a website? 5. Is there only one programming language, or code, in the world? 6. What are the three programming languages listed in Activity 2? 7. means to translate a computer programming language into machine language.