├── .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 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/jsLinters/eslint.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /BOM-DOM-event.md: -------------------------------------------------------------------------------- 1 | # BOM - Browser Object Model 2 | The Browser Object Model is a collection of features that handle e.g. browser window and communication between them. BOM is not a standard, so there are small differences between different browsers. 3 | 4 | ## [window](https://developer.mozilla.org/en-US/docs/Web/API/Window) 5 | Window interface means the browser window and is supported in all browsers. All global JavaScript objects, functions, and variables are automatically members of the window interface. E.g: 6 | ```javascript 7 | window.document.querySelector('.button') 8 | ``` 9 | is the same as: 10 | ```javascript 11 | document.querySelector('.button') 12 | ``` 13 | That is, most commands can be typed without the word `window`. 14 | 15 | ### [alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) 16 | The `alert()` function opens a pop-up window with text and an OK button. This can be used to give the user a notification, for example, if an operation succeeds or fails. The program will be paused until the user presses the OK button. 17 | ```javascript 18 | alert('Some text'); 19 | ``` 20 | ##### Task: Try the alert function in the browser console. 21 | 22 | ### [confirm](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) 23 | The `confirm()` function opens a pop-up window with text and two buttons: OK and Cancel. This allows the user to be asked to accept or reject an action. 24 | ```javascript 25 | const answer = confirm('Some question'); 26 | 27 | // printing the response to the console 28 | console.log(answer); 29 | ``` 30 | * The response of the function is a boolean value which is store in the `answer` variable: OK = true and Cancel = false. 31 | ##### Task: Try the confirm function in the browser console. 32 | 33 | ### [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) 34 | The `prompt ()` function opens a pop-up window with a title and a text field for the user to type. 35 | ```javascript 36 | const answer = prompt('Title', 'Initial content for the text field'); 37 | 38 | // printing the response to the console 39 | console.log(answer); 40 | ``` 41 | * `answer` is a string in which the user's answer is stored. If the text field is empty, the value becomes _null_. The second paramater is optional. It automatically appears in the text field. 42 | 43 | ##### Task: Try the prompt function in the browser console. 44 | 45 | ## [navigator-interface](https://developer.mozilla.org/en-US/docs/Web/API/navigator) 46 | The `navigator` interface can be used to retrieve information about the browser. For example, [navigator.gelocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) returns the gps coordinates of the device: 47 | ```html 48 | 49 |
50 | 51 | 52 | 53 | 90 | ``` 91 | 92 | ## [location-interface](https://developer.mozilla.org/en-US/docs/Web/API/location) 93 | The `location` interface tells you the address information of the document. It is usually used to redirect the browser: 94 | ```javascript 95 | location.href = 'http://metropolia.fi'; 96 | ``` 97 | 98 | # DOM - Document Object Model 99 | The Document Object Model is a tree-like description of an HTML document. 100 | ![DOM](https://www.w3schools.com/js/pic_htmltree.gif) 101 | *w3schools.com* 102 | 103 | The HTML DOM is a standard that defines how HTML elements are selected, edited, added, and deleted. All elements are treated as objects and each element, attribute and element content (e.g. text) is called a 'node'. 104 | ```html 105 | 106 | 107 | Example 108 | 109 | 110 |

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 | ![DOM](https://www.w3schools.com/js/pic_htmltree.gif) 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. `
  • `) in the list `