Tech School

User Tools

Site Tools

Trace: • javascript • padding • javascript
web_design:letter:javascript

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
web_design:letter:javascript [2021/10/06 10:10]
mag [Javascript] 		web_design:letter:javascript [2023/08/16 09:33] (current)
Line 1: Line 1:
-====== Web Development ====== +====== Web Development Lesson 2 - Letter ====== 
-===== Lesson 2 - Letter ===== +===== Javascript ===== 
-==== Javascript ==== +==== Objective ====
-=== Objective ===+
 On this page, we'll add a very simple script to automatically use today's date and to prompt the user for the name of the recipient. Don't worry if you don't understand it completely. We'll spend more time on Javascript later. On this page, we'll add a very simple script to automatically use today's date and to prompt the user for the name of the recipient. Don't worry if you don't understand it completely. We'll spend more time on Javascript later.
  
-=== Content ===+==== Setup ====
 We'll continue using the work you've done in jsfiddle throughout this lesson. In case you need it, the code is below. We'll continue using the work you've done in jsfiddle throughout this lesson. In case you need it, the code is below.
 <code><h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 2em; text-shadow:2px 2px #ff0000;">Job Application</h1> <code><h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 2em; text-shadow:2px 2px #ff0000;">Job Application</h1>
Line 17: Line 16:
 <p>Atentamente,</p> <p>Atentamente,</p>
 <p>Jane</p></code> <p>Jane</p></code>
 +
 +==== Update Date ====
  
   * Paste the code below into the Javascript section (bottom left) of your jsfiddle page.   * Paste the code below into the Javascript section (bottom left) of your jsfiddle page.
Line 30: Line 31:
   * <html>document.getElementsByTagName("P")[0].innerHTML = hoy.getDate() + "/" + (hoy.getMonth()+1) + "/" + hoy.getFullYear();</html> tells the browser to display the date (in a readable format) in the first paragraph element.   * <html>document.getElementsByTagName("P")[0].innerHTML = hoy.getDate() + "/" + (hoy.getMonth()+1) + "/" + hoy.getFullYear();</html> tells the browser to display the date (in a readable format) in the first paragraph element.
   * Note that the 'first' element is labelled '0'. This is common in programming. We'll look at this more later.   * Note that the 'first' element is labelled '0'. This is common in programming. We'll look at this more later.
 +
 +==== Prompt for Addressee ====
 +
  
   * Now we'll add another short piece of code within the curly brackets, but after the data functions.   * Now we'll add another short piece of code within the curly brackets, but after the data functions.
Line 44: Line 48:
   document.getElementsByTagName("P")[1].innerHTML =  nombre;   document.getElementsByTagName("P")[1].innerHTML =  nombre;
 }</code> }</code>
 +
 +  * Run it and enter the name of the person next to you.
 +  * See the name on the third line change.
  
 [[web_design:letter:exercise|Next: Ejercicio]] [[web_design:letter:exercise|Next: Ejercicio]]
web_design/letter/javascript.1633540241.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki