{ "componentChunkName": "component---src-templates-docs-js", "path": "/veckoanvisningar/kursvecka-09/utmaningar", "result": {"data":{"site":{"siteMetadata":{"title":"Linnéuniversitetet","language":"sv","courseCode":"1dv025"}},"mdx":{"fields":{"id":"6d538716-f432-54f5-adaf-7b79b210d7c4","title":"Utmaningar","slug":"/veckoanvisningar/kursvecka-09/utmaningar"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Utmaningar\",\n \"metaTitle\": \"1DV025 | Utmaningar kursvecka 9\",\n \"metaDescription\": \"metaDescription\",\n \"order\": 4\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h3\", null, \"F09-01: Which object is the \\\"global object\\\" in the browser?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"document\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"window\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"object\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"module\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"p\", null, \" window\")), mdx(\"h3\", null, \"F09-02: DOM is an abbreviation for....\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Dynamic Object Moderation\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Document Over Modulation\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Document Object Model\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Dynamic Over Mode\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"p\", null, \" Document Object Model\")), mdx(\"h3\", null, \"F09-03: How many \\\"Elements\\\" does the snippet contain?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"2\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"4\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"6\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"7\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"

\\n Foo\\n

\\n\\n\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"p\", null, \" Two elements. The P and A elements.\")), mdx(\"h3\", null, \"F09-04: How many \\\"Nodes\\\" does the snippet contain?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"2\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"4\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"6\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"7\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"

\\n Foo\\n

\\n\\n\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"p\", null, \" 6 noder. P-noden, A-noden, textnoden \\\"Foo\\\" samt tre tomma textnoder inneh\\xE5llande whitespaces.\")), mdx(\"h3\", null, \"F09-05: How many \\\"attributes\\\" does the snippet contain?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"2\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"4\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"6\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"7\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"

\\n Foo\\n

\\n\\n\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"p\", null, \" 2 attribut. \\\"class\\\" och \\\"href\\\"\")), mdx(\"h3\", null, \"F09-06: Which options do you have to select the li element containing the text node \\\"Second one\\\"?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"document.querySelector('#SecondOne')\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"document.querySelectorAll('li')\", \"[\", \"1\", \"]\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"document.getElementById('numberlist').firstChild.nextSibling;\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"document.getElementById('numberlist').children\", \"[\", \"1\", \"]\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
\\n \\n
\\n\\n\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"p\", null, \"document.querySelectorAll('li')\", \"[\", \"1\", \"]\", \" och document.getElementById('numberlist').children\", \"[\", \"1\", \"]\")), mdx(\"h3\", null, \"F09-07: How do you create a new ELEMENT_NODE using JavaScript? (Multiple choice)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"document.createElement()\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"document.createTextNode()\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"anotherNode.cloneNode()\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"node:create \\\"ELEMENT_NODE\\\"\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"ul\", null, mdx(\"li\", null, \" document.createElement()\"), mdx(\"li\", null, \" anotherNode.cloneNode()\"))), mdx(\"h3\", null, \"F09-08: Given HTML and CSS. Which class/classes is set on the div?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"red, blue, tiger\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"blue, number, tiger\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"blue, tiger\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"red, number\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"number, red, blue, number, tiger\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \" const div = document.querySelector('.number')\\n div.setAttribute('class', 'blue')\\n div.classList.toggle('number')\\n div.classList.add('tiger')\\n\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), \"blue number tiger\"), mdx(\"h3\", null, \"F09-09: Why do we use templates (\", \"<\", \"template\", \">\", \")?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Better performance than creating nodes using JavaScript.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"They help us separate HTML from JavaScript.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"It is a better version of Flash.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Templates are cached in the browser. JavaScript code is not.\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), \"The help us separate html from js\"), mdx(\"h3\", null, \"F09-10: Why do we not want styling to be done in our JavaScript files? (multiple choice)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"CSS generated from JavaScript will not be rendered\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Modern browsers won\\xB4t accept CSS manipulation in JavaScript code as it opens up for security issues\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Separation Of Concern is a design goal that simplifies the maintenance of an application\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Designers would probably like to have CSS separated from JavaScript\")), mdx(\"details\", null, mdx(\"summary\", null, \"Answer\"), mdx(\"ul\", null, mdx(\"li\", null, \"Separation Of Concern is a design goal that simplifies the maintenance of an application\"), mdx(\"li\", null, \"Designers would probably like to have CSS separated from JavaScript\"))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#f09-01-which-object-is-the-global-object-in-the-browser","title":"F09-01: Which object is the \"global object\" in the browser?"},{"url":"#f09-02-dom-is-an-abbreviation-for","title":"F09-02: DOM is an abbreviation for...."},{"url":"#f09-03-how-many-elements-does-the-snippet-contain","title":"F09-03: How many \"Elements\" does the snippet contain?"},{"url":"#f09-04-how-many-nodes-does-the-snippet-contain","title":"F09-04: How many \"Nodes\" does the snippet contain?"},{"url":"#f09-05-how-many-attributes-does-the-snippet-contain","title":"F09-05: How many \"attributes\" does the snippet contain?"},{"url":"#f09-06-which-options-do-you-have-to-select-the-li-element-containing-the-text-node-second-one","title":"F09-06: Which options do you have to select the li element containing the text node \"Second one\"?"},{"url":"#f09-07-how-do-you-create-a-new-element_node-using-javascript-multiple-choice","title":"F09-07: How do you create a new ELEMENT_NODE using JavaScript? (Multiple choice)"},{"url":"#f09-08-given-html-and-css-which-classclasses-is-set-on-the-div","title":"F09-08: Given HTML and CSS. Which class/classes is set on the div?"},{"url":"#f09-09-why-do-we-use-templates-template","title":"F09-09: Why do we use templates (