Skip to content

Commit

Permalink
more javascript methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@f2acode
f2acode committed Oct 8, 2017
1 parent 8843495 commit b9de5c9
Show file tree
Hide file tree
Showing 3 changed files with 289 additions and 35 deletions.
87 changes: 76 additions & 11 deletions ...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,93 @@
<title>Javascript Training</title>
<script src="./scripts.js"></script>
<style>
p, a {
border: 2px solid white;
background: lightgray;
display: block;
padding: 5px}
p,
a {
border: 2px solid white;
background: lightgray;
display: block;
padding: 5px
}
</style>
</head>

<body>

<article>
<h1>Examples</h1>
<a id="accessKey" href="https://www.google.com">Access key - Press ALT + W</a><br>
<p id="eventListener">Event listener - Click here</p>
<p id="appendChild">Append child</p>
<a id="accessKey" href="https://www.google.com">
AccessKey - Press ALT + O
</a><br>
<p id="eventListener">AddEventListener() - Click here</p>
<p id="appendChild">AppendChild</p>
<p id="attributes">Attributes</p>
<a id="blur" href="">Blur - It's focused and unfocused when the page loads</a>
<a id="blur" href="">
Focus()/Blur() - It's focused and unfocused when the page loads and blur after some time
</a>
<p id="childElementCount">
Child element count
Child element count
<a>Child 1</a><br/>
<a>Child 2</a>
<a>Child 2</a>
</p>
<p id="childNodes">
<a>Child node 1</a><br/>
<a>Child node 2</a> <br/> Text
<!-- Comment -->
</p>
<p id="children">
Children
<a>Child 1</a><br/>
<a>Child 2</a> <br/> Text
<!-- Comment -->
</p>
<p id="classList" class="azul"> ClassList<br> </p>
<p id="className" class="verde">ClassName<br> </p>
<p id="click">Click() - this is click on the event handler<br></p>
<p id="clientHeight">ClientHeight<br></p>
<p id="clientWidth">ClientWidth<br></p>
<p id="clientLeft">ClientLeft<br></p>
<p id="clientTop">ClientTop<br></p>
<p id="cloneNode">CloneNode() <br></p>
<p id="compareDocumentPosition">Compare document position, elements: <br></p>
<p id="contains">
Contains()
<a id="containsContained">Contained</a>
<br>
</p>
<p id="contentEditable">ContentEditable - this element was set editable<br></p>

<p id="dir">Dir - the reading order was set<br></p>
<p id="firstChild">First child<a>Child 5</a><br/>
<a>Child 2</a><br/>
</p>
<p id="firstElementChild">FirstElementChild()
<a>Child 5</a><br/>
<a>Child 2</a><br/>
</p>
<p id="getAttribute" class="classGetAttribute">GetAttribute()<br></p>
<p id="getAttributeNode" class="classGetAttributeNode">
GetAttributeNode()<br>
</p>
<p id="getElementsByClassName">
GetElementsByClassName()
<br/>
<a class="childGetElementsByClassName">Child 1</a><br/>
<a class="childGetElementsByClassName">Child 2</a><br/>
<br>
</p>
<p id="getElementsByTagName">
getElementsByTagName()
<br/>
<a>Child 1</a><br/>
<a>Child 2</a><br/>
<br>
</p>
<p id="hasAttribute">HasAttribute()<br></p>
<p id="hasAttributes">HasAttributes()<br></p>
<p id="hasChildNodes">HasChildNodes()<br></p>
<p id="id">id<br></p>
<p id="inneHTML">innetHTML<br></p>
<p id=""><br></p>
</article>

</body>
Expand Down
225 changes: 207 additions & 18 deletions ...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,220 @@ window.onload = function () {
});

//element.appendChild()
var paragraph = document.createElement("P");
var textParagraph = document.createTextNode("Append child added inside");
paragraph.appendChild(textParagraph);
document.getElementById("appendChild").appendChild(paragraph);
var appendChild = document.createElement("P");
var textAppendChild = document.createTextNode("Append child added inside");
appendChild.appendChild(textAppendChild);
document.getElementById("appendChild").appendChild(appendChild);

//element.attributes
paragraph = document.createElement("P");
var attributes = document.getElementById("attributes").attributes;
textParagraph = document.createTextNode("Atributes: " + attributes
+ " Size: " + attributes.length);
paragraph.appendChild(textParagraph);
document.getElementById("attributes").appendChild(paragraph);

//element.blur()
var attributes = document.createElement("P");
var attributesValues = document.getElementById("attributes").attributes;
var textAttributes = document.createTextNode("Atributes: " + attributesValues
+ " Size: " + attributesValues.length);
attributes.appendChild(textAttributes);
document.getElementById("attributes").appendChild(attributes);

//element.blur() e focus()
document.getElementById("blur").focus();
setTimeout(function () {
document.getElementById("blur").blur();
}, 2000);

//element.childElementCount
paragraph = document.createElement("P");
var childElements = document.getElementById("childElementCount").childElementCount;
textParagraph = document.createTextNode("Child elements: " + childElements);
paragraph.appendChild(textParagraph);
document.getElementById("childElementCount").appendChild(paragraph);
var childElementCount = document.createElement("P");
var childsChildElementCount = document.getElementById("childElementCount").childElementCount;
var textChildElementCount = document.createTextNode("Child elements: " + childsChildElementCount);
childElementCount.appendChild(textChildElementCount);
document.getElementById("childElementCount").appendChild(childElementCount);

//element.childNodes
var childNodes = document.getElementById("childNodes");
var childsChildNodes = childNodes.childNodes;
var txtchildsChildNodes;
childsChildNodes.forEach(function (child) {
if (txtchildsChildNodes == undefined)
txtchildsChildNodes = child.nodeName + " ";
else
txtchildsChildNodes += child.nodeName + " ";
}, this);
var childNodesReturn = document.createTextNode("Child nodes: " + txtchildsChildNodes);
childNodes.appendChild(childNodesReturn);

//element.children
var childrenNodes = document.getElementById("children");
var childsChildrenNodes = childrenNodes.children;
var txtchildsChildrenNodes;
for (var i = 0; i < childsChildrenNodes.length; i++) {
if (txtchildsChildrenNodes == undefined)
txtchildsChildrenNodes = childsChildrenNodes[i].nodeName + " ";
else
txtchildsChildrenNodes += childsChildrenNodes[i].nodeName + " ";
}
var childrenNodesReturn = document.createTextNode("Child nodes: " + txtchildsChildrenNodes);
childrenNodes.appendChild(childrenNodesReturn);

//element.classList
var classList = document.getElementById("classList");
var classListArray = classList.classList;
var txtClassListArray;
for (var i = 0; i < classListArray.length; i++) {
if (txtClassListArray == undefined)
txtClassListArray = classListArray[i] + " ";
else
txtClassListArray += classListArray[i] + " ";
}
var classListChild = document.createTextNode("Class list: " + txtClassListArray);
classList.appendChild(classListChild);

//element.className
var className = document.getElementById("className");
var classNameClassName = className.className;
var classNameChild = document.createTextNode("Class name: " + classNameClassName);
className.appendChild(classNameChild);

//element.click()
var click = document.getElementById("click");
click.addEventListener("click", function () {
var clickSimulated = document.createTextNode("Click simulated");
click.appendChild(clickSimulated);
});
click.click();

//element.clientHeight
var clientHeight = document.getElementById("clientHeight");
var height = clientHeight.clientHeight;
var clientHeightChild = document.createTextNode("Client Height: " + height);
clientHeight.appendChild(clientHeightChild);

//element.clientWitdh
var clientWidth = document.getElementById("clientWidth");
var width = clientWidth.clientWidth;
var clientWidthChild = document.createTextNode("Client Width: " + width);
clientWidth.appendChild(clientWidthChild);

//element.clientLeft
var clientLeft = document.getElementById("clientLeft");
var left = clientLeft.clientLeft;
var clientLeftChild = document.createTextNode("Client Left border size: " + left);
clientLeft.appendChild(clientLeftChild);

//element.clientTop
var clientTop = document.getElementById("clientTop");
var top = clientTop.clientTop;
var clientTopChild = document.createTextNode("Client Top border size: " + top);
clientTop.appendChild(clientTopChild);

//element.cloneNode
var cloneNode = document.getElementById("cloneNode");
var cloneNodeChild = cloneNode.cloneNode(true);
cloneNode.appendChild(cloneNodeChild);

//element.compareDocumentPosition()
var elementCompareDocumentPosition = document.getElementById("compareDocumentPosition");
var elementCompareDocumentPosition1 = document.getElementById("clientHeight");
var elementCompareDocumentPosition2 = document.getElementById("clientTop");

var compareDocumentPositionValue =
elementCompareDocumentPosition1.compareDocumentPosition(
elementCompareDocumentPosition2);

var elementCompareDocumentPositionChild = document.createTextNode(
"Distance: " + compareDocumentPositionValue);

elementCompareDocumentPosition.appendChild(elementCompareDocumentPositionChild);

//element.contains
var contains = document.getElementById("contains");
var contained = document.getElementById("containsContained");
var isContains = contains.contains(contained);
var containsChild = document.createTextNode(
"This element contains a containsContained? " + isContains);
contains.appendChild(containsChild);

//element.contentEditable
var contentEditable = document.getElementById("contentEditable");
contentEditable.contentEditable = true;

//element.dir
var dir = document.getElementById("dir");
dir.dir = "rtl";

//element.firstChild
var firstChild = document.getElementById("firstChild");
var childFirstChild = document.createTextNode("First child: " + firstChild.firstChild.textContent);
firstChild.appendChild(childFirstChild);

//element.firstElementChild
var firstElementChild = document.getElementById("firstElementChild");
var childFirstElementChild = document.createTextNode("First child element: " +
firstElementChild.firstElementChild.innerHTML);
firstElementChild.appendChild(childFirstElementChild);

//element.getAttribute()
var getAttribute = document.getElementById("getAttribute");
var attributeGetAttribute = getAttribute.getAttribute("class");
var childGetAttribute = document.createTextNode(
"Retrieved chosen attribute: " + attributeGetAttribute);
getAttribute.appendChild(childGetAttribute);

//element.getAttributeNode()
var getAttributeNode = document.getElementById("getAttributeNode");
var attributegetAttributeNode = getAttributeNode.getAttributeNode("class");
var childgetAttributeNode = document.createTextNode(
"Retrieved chosen attribute node: " + attributegetAttributeNode);
getAttributeNode.appendChild(childgetAttributeNode);

//element.getElementsByClassName()
var getElementsByClassName = document.getElementById("getElementsByClassName");
var elementsGetElementsByClassName = getElementsByClassName.
getElementsByClassName("childGetElementsByClassName");
var childGetElementsByClassName = document.createTextNode(
"Retrieved chosen nodes according to the class: " +
elementsGetElementsByClassName);
getElementsByClassName.appendChild(childGetElementsByClassName);

//element.getElementsByTagName()
var getElementsByTagName = document.getElementById("getElementsByTagName");
var elementsGetElementsByTagName = getElementsByTagName.
getElementsByTagName("a");
var childGetElementsByTagName = document.createTextNode(
"Retrieved chosen nodes according to the tag: " +
elementsGetElementsByClassName);
getElementsByTagName.appendChild(childGetElementsByTagName);

//element.getFeature()

//element.hasAttribute()
var hasAttribute = document.getElementById("hasAttribute");
var isHasAttribute = hasAttribute.hasAttribute("class");
var childHasAttribute = document.createTextNode(
"Has class attribute? " + isHasAttribute);
hasAttribute.appendChild(childHasAttribute);

//element.hasAttributes()
var hasAttributes = document.getElementById("hasAttributes");
var ishasAttributes = hasAttributes.hasAttributes();
var childhasAttributes = document.createTextNode(
"Has class attribute? " + ishasAttributes);
hasAttributes.appendChild(childhasAttributes);

//element.hasChildNodes()
var hasChildNodes = document.getElementById("hasChildNodes");
var ishasChildNodes = hasChildNodes.hasChildNodes();
var childhasAttributes = document.createTextNode(
"Has child nodes? " + ishasChildNodes);
hasChildNodes.appendChild(childhasAttributes);

//element.id()
var id = document.getElementById("id");
var isid = id.id;
var childId = document.createTextNode(
"The id of this element: " + isid);
id.appendChild(childId);

//
//element.inneHTML
var inneHTML = document.getElementById("inneHTML");
inneHTML.innerHTML = "This content was set - it's new! :)"

//element.insertBefore()
};
Loading

0 comments on commit b9de5c9

Please sign in to comment.