Hi! Based on my question you will understand that my knowledge of JavaScript is pretty much basic. I have two questions that I need answered:
1.
//create a reference to h1
var headings = document.getElementsByTagName("h1");
var heading = headings[0];
//check if heading has a class called: red
var theClass = "red";
//create a regular expression
var pattern = new RegExp("(^|)" + theClass + "(|$)");
//make sure our element does not have a class: red
if (!pattern.test(heading.className))
{
//it does not have the same class
//if no class is assigned at all, add our class
if (heading.className == "")
{
heading.className = theClass;
}
else
{
heading.className = heading.className + " " + theClass;
}
}
Then I have .css file, let’s say with this contents:
.red {
color:red;
}
My question is: when I look into html code of the page, an HTML element to which a class (.red) was added does not have such an attribute there, inside of the element. My logic (and I know it is wrong) tells me, I should see something like:
<h1 class="red">My heading level 1</h1>
But what I see is (same element but without a class attribute):
<h1>My heading level 1</h1>
Could someone please explain me why there is no class attribute in HTML element even though a class was added via JavaScript? Unfortunately, the book I am reading to learn JavaScript does not give enough theory on how browser handles JavaScript.
2. Another very basic question is:
For a purpose of reusing this code, there is a logical advantage of creating a couple of functions and using them when necessary. In a brief: how do I create a list of basic functions that I will be using, and link to that file containing this list of functions? Again, this is something the book does not explain?!
Detailed example:
I have a file called: core.js. Here is its contents with all of the functions that I will need to use:
// JavaScript Document
Core.getElementsByClassName = function(theClass)
{
//create a node list of all elements
var elementArray = [];
//fix a bug for IE5.x that does not recognize * value for getElementsByTagName
if (typeof document.all != "undefined")
{
elementArray = document.all;
}
else
{
elementArray = document.getElementsByTagName("*");
}
//create an array to collect all nodes that match our search criteria
var matchedElements = [];
//create a regular expression
var pattern = new RegExp("(^|)" + theClass + "(|$)");
//go through each node in our node list
for (var i = 0; i < elementArray.length; i++)
{
if (pattern.test(elementArray[i].className))
{
matchedElements[matchedElements.length] = elementArray[i];
}
}
return matchedElements;
};
Core.hasClass = function(target, theClass)
{
var pattern = new RegExp("(^|)" + theClass + "(|$)");
if (pattern.test(target.className))
{
return true;
}
return false;
};
Core.addClass = function(target, theClass)
{
if (!Core.hasClass(target, theClass))
{
if (target.className == "")
{
target.className = theClass;
}
else
{
target.className += " " + theClass;
}
}
};
Then I have .html file, located in the same folder as core.js file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<link href="style.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div id="container">
<h1>Some text</h1>
<p>
Some text
</p>
<p>
Some text
</p>
</div>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="example.js"></script>
</body>
</html>
example.js is located in the same location as two other files that I mentioned.
I write all of the JavaScript code in example.js
Here is its contents:
var headings = document.getElementsByTagName("h1");
var heading = headings[0];
var theClass = "red";
Core.addClass(heading, theClass);
My heading does not become of class red. I am doing something wrong with linking to a library of this functions located in core.js file. What am I doing wrong? What is the right way to do it?
Just need to figure it out and any help to a stupid novice would be appreciated.
Alex.
