-
Notifications
You must be signed in to change notification settings - Fork 0
/
01-hello-world.htm
113 lines (75 loc) · 3.42 KB
/
01-hello-world.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
// BEGINNING OF THE CODE WRITE AREA
/*
ALGORITHM:
When a Button object is clicked,
the algorithm that prints "Hello World" inside a TextBox object.
WORKING LOGIC:
- A TextBox and a Button object are rendered and aligned to the desired positions.
- When the Button object named btnWrite is clicked, the writeMessage() function is running.
- writeMessage() function prints "Hello World" to TextBox object named txtMessage.
PROJECT DESCRIPTION:
A step-by-step video of the project. (Language: Turkish)
https://youtu.be/zPOKz3w1YmY
*/
// Define the variables to use.
// Define the variable to hold the TextBox object.
var txtMessage
// Define the variable that will hold the Button object.
var btnWrite
// NOTE: The first 3 letters at the beginning of the variables (abbreviation)
// the objects they carry inside the algorithm
// has been added so that we can follow it more easily.
// First running function; when everything is loaded, it will run automatically.
var start = function() {
// Create the view of the program.
// TEXTBOX: Create the TextBox object.
txtMessage = createTextBox()
// Set the distance of the object to the left. (in pixels)
txtMessage.left = 50
// Set the distance of the object up. (in pixels)
txtMessage.top = 50
// BUTTON: Create the Button object.
btnWrite = createButton()
// Determine the text on the object.
btnWrite.text = "Write"
// Determine the distance of the object from the solo.
btnWrite.left = 50
// Set the distance of the object up.
btnWrite.top = 110
// Every time the object is clicked, the WriteMessage() function will run.
btnWrite.onClick(writeMessage)
// NOTE: When we use parentheses at the end of the WriteMessage() function,
// we want the function to run.
// When sending a function as a parameter,
// we don't write the parentheses.
}
// Function that displays the message in the TextBox when the Button is clicked.
var writeMessage = function() {
// Pass the message inside the TextBox.
txtMessage.text = "Hello World"
}
/*
DEVELOPMENT PROPOSAL:
- Clearing the TextBox named txtMessage,
another Button object can be added.
Button name, btnClear and its calling function name,
message can be clear().
*/
// END OF CODE WRITE AREA
</script>
<!-- NOTE: Outside the coding area are standard HTML tags. -->
</head>
<body>
<!-- HTML content -->
</body>
</html>