├── .gitignore
├── .idea
├── .gitignore
├── JS-enkku.iml
├── jsLinters
│ └── eslint.xml
├── modules.xml
└── vcs.xml
├── BOM-DOM-event.md
├── README.md
├── api-esimerkit
├── .gitignore
├── README.md
├── esim1.html
├── esim2.html
├── esim3.html
├── esim4.html
└── js
│ ├── Polyline.encoded.js
│ ├── esim1.js
│ ├── esim2.js
│ ├── esim3.js
│ └── esim4.js
├── apit-ajax.md
├── assignments.md
├── extras.md
├── img
├── dataUrlExample.txt
├── dialogi_ikkuna.png
├── konsolituloste.png
├── muistiosoite.png
├── selainpalkki.png
├── sivunsisalloksi.png
├── taulukko.png
└── viesti_ikkuna.png
├── misc
├── DOM-tiedostot.zip
└── kuvat.xml
├── ohjelmointiymparisto.md
├── taulukot-funktiot.md
├── valinta-toistorakenteet.md
└── vuorovaikutteiset_ohjelmat.md
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # Created by https://www.toptal.com/developers/gitignore/api/macos,webstorm
3 | # Edit at https://www.toptal.com/developers/gitignore?templates=macos,webstorm
4 |
5 | ### macOS ###
6 | # General
7 | .DS_Store
8 | .AppleDouble
9 | .LSOverride
10 |
11 | # Icon must end with two \r
12 | Icon
13 |
14 |
15 | # Thumbnails
16 | ._*
17 |
18 | # Files that might appear in the root of a volume
19 | .DocumentRevisions-V100
20 | .fseventsd
21 | .Spotlight-V100
22 | .TemporaryItems
23 | .Trashes
24 | .VolumeIcon.icns
25 | .com.apple.timemachine.donotpresent
26 |
27 | # Directories potentially created on remote AFP share
28 | .AppleDB
29 | .AppleDesktop
30 | Network Trash Folder
31 | Temporary Items
32 | .apdisk
33 |
34 | ### macOS Patch ###
35 | # iCloud generated files
36 | *.icloud
37 |
38 | ### WebStorm ###
39 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
40 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
41 |
42 | # User-specific stuff
43 | .idea/**/workspace.xml
44 | .idea/**/tasks.xml
45 | .idea/**/usage.statistics.xml
46 | .idea/**/dictionaries
47 | .idea/**/shelf
48 |
49 | # AWS User-specific
50 | .idea/**/aws.xml
51 |
52 | # Generated files
53 | .idea/**/contentModel.xml
54 |
55 | # Sensitive or high-churn files
56 | .idea/**/dataSources/
57 | .idea/**/dataSources.ids
58 | .idea/**/dataSources.local.xml
59 | .idea/**/sqlDataSources.xml
60 | .idea/**/dynamic.xml
61 | .idea/**/uiDesigner.xml
62 | .idea/**/dbnavigator.xml
63 |
64 | # Gradle
65 | .idea/**/gradle.xml
66 | .idea/**/libraries
67 |
68 | # Gradle and Maven with auto-import
69 | # When using Gradle or Maven with auto-import, you should exclude module files,
70 | # since they will be recreated, and may cause churn. Uncomment if using
71 | # auto-import.
72 | # .idea/artifacts
73 | # .idea/compiler.xml
74 | # .idea/jarRepositories.xml
75 | # .idea/modules.xml
76 | # .idea/*.iml
77 | # .idea/modules
78 | # *.iml
79 | # *.ipr
80 |
81 | # CMake
82 | cmake-build-*/
83 |
84 | # Mongo Explorer plugin
85 | .idea/**/mongoSettings.xml
86 |
87 | # File-based project format
88 | *.iws
89 |
90 | # IntelliJ
91 | out/
92 |
93 | # mpeltonen/sbt-idea plugin
94 | .idea_modules/
95 |
96 | # JIRA plugin
97 | atlassian-ide-plugin.xml
98 |
99 | # Cursive Clojure plugin
100 | .idea/replstate.xml
101 |
102 | # SonarLint plugin
103 | .idea/sonarlint/
104 |
105 | # Crashlytics plugin (for Android Studio and IntelliJ)
106 | com_crashlytics_export_strings.xml
107 | crashlytics.properties
108 | crashlytics-build.properties
109 | fabric.properties
110 |
111 | # Editor-based Rest Client
112 | .idea/httpRequests
113 |
114 | # Android studio 3.1+ serialized cache file
115 | .idea/caches/build_file_checksums.ser
116 |
117 | ### WebStorm Patch ###
118 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
119 |
120 | # *.iml
121 | # modules.xml
122 | # .idea/misc.xml
123 | # *.ipr
124 |
125 | # Sonarlint plugin
126 | # https://plugins.jetbrains.com/plugin/7973-sonarlint
127 | .idea/**/sonarlint/
128 |
129 | # SonarQube Plugin
130 | # https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
131 | .idea/**/sonarIssues.xml
132 |
133 | # Markdown Navigator plugin
134 | # https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
135 | .idea/**/markdown-navigator.xml
136 | .idea/**/markdown-navigator-enh.xml
137 | .idea/**/markdown-navigator/
138 |
139 | # Cache file creation bug
140 | # See https://youtrack.jetbrains.com/issue/JBR-2257
141 | .idea/$CACHE_FILE$
142 |
143 | # CodeStream plugin
144 | # https://plugins.jetbrains.com/plugin/12206-codestream
145 | .idea/codestream.xml
146 |
147 | # Azure Toolkit for IntelliJ plugin
148 | # https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij
149 | .idea/**/azureSettings.xml
150 |
151 | # End of https://www.toptal.com/developers/gitignore/api/macos,webstorm
152 |
--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 |
--------------------------------------------------------------------------------
/.idea/JS-enkku.iml:
--------------------------------------------------------------------------------
1 |
2 |
Here is one paragraph
111 | 115 | 116 | 117 | ``` 118 | The p-element selected in the example above is stored as an element object (or element node) in a variable called 'paragraph'. The 'paragraph' object can then be manipulated using the properties and methods of the [Document] (https://developer.mozilla.org/en-US/docs/Web/API/Document) interface. 119 | 120 | ## Parent/child 121 |  122 | 123 | Because the DOM describes the document as a tree-like structure, the terms parent, child, and sibling are used in this context. For example, in the figure above, the h1 element is the child of the body element and the sibling of the a-element. Correspondingly, the body element is the parent of both the h1 and a elements. 124 | 125 | ## [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)-interface 126 | The `document` interface represents a web page, it contains all the other objects in the document. To select any HTML element from a document, you must start from the document interface. For example, `document.getElementByID('logo')` 127 | ### Key Functions and Features 128 | ```javascript 129 | document.querySelector ('#logo') // retrieves a single element from a document using the css selector. In this case with a certain id 130 | document.querySelectorAll ('.button') // retrieves elements from a document using the css class selector. 131 | document.getElementById ('logo') // retrieves an element with a specific id from the document 132 | 133 | // commands can also be aligned to the selected element: 134 | element.getElementsByTagName ("p") // retrieves all p-elements from the selected element 135 | element.appendChild (child) // add child node to element 136 | element.removeChild (child) // removes the child node from the element 137 | 138 | element.innerHTML // The HTML code contained in the element 139 | element.innerText // The text contained in the element 140 | ``` 141 | 142 | ## Examples 143 | 144 | 1. Select the element in the document with the id 'news' and save the element node as 'u'. Then select all p-elements from the element node 'u' and save the element list as 'p': 145 | ```javascript 146 | const u = document.getElementById('news'); 147 | const p = u.getElementsByTagName('p'); 148 | 149 | // the same can also be written without an intermediate variable 150 | const p = document.getElementById('news').getElementsByTagName('p'); 151 | 152 | // or with a single command using the CSS selector 153 | const p = document.querySelectorAll('#news p'); 154 | ``` 155 | 2. Select the 2nd item (i.e. `Monday
193 | 194 | 197 | ``` 198 | 6. Change the value of an attribute: 199 | ```html 200 |Some text
250 | 251 | 254 | ``` 255 | Edit the Class attribute: 256 | ```css 257 | /* extenal css-file */ 258 | .red { 259 | color: #f00; 260 | } 261 | 262 | .blue { 263 | color: #00f; 264 | } 265 | ``` 266 | 267 | ```html 268 |Some text
269 | 270 | 276 | ``` 277 | For more methods for handling class attributes, see [classList documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). 278 | 279 | # Event handling 280 | Because JavaScript is used to add interactivity to a website, there is a need for some way to respond to actions and events performed by the user or on the system.This method is called [event handling.](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events) 281 | 282 | For example, if a user clicks a button, we can respond by displaying an information box: 283 | ```html 284 | 285 | 291 | ``` 292 | In the code above, the first parameter 'click' of the addEventListener method is an event, and the second parameter is the function to be called when a 'click' occurs. 293 | The second parameter can also be a reference to a function: 294 | ```html 295 | 296 | 305 | ``` 306 | Note that the popup function in addEventListener is missing parentheses This is because the popup function is used as an event handler and is not called immediately, but only when a 'click' occurs. If it had parentheses, the function would be started immediately. 307 | 308 | The event handler is also called a [callback function](https://github.com/ilkkamtk/JavaScript-english/blob/main/extras.md#callback-functions-and-callback-hell). 309 | 310 | The event handler receives an [event object](https://developer.mozilla.org/en-US/docs/Web/API/Event) (evt) that contains information about the event, such as the type of event and its target. For example, `evt.currentTarget` returns the element that is the target of the event. 311 | In the example code above, this item is the `