Core JavaScript

Using Multiple Files

To make a JavaScript program that is more complex than a very simple program, it is convenient to use more than one code file. To use more than one code file, we can add multiple script tags with the various file names into the main HTML file that includes all of the scripts, as shown below.

Graphing.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript</title>
</head>
<body>
  <script type="text/javascript" src="CPoint2D.js"></script>
  <script type="text/javascript" src="CLineSegment2D.js"></script>
  <script type="text/javascript" src="CGraph2D.js"></script>
</body>
</html>

CGraph2D.js

function CGraph2D(iWidth, iHeight) {
	this.miWidth	= iWidth;
	this.miHeight	= iHeight;
	this.mqaPoints	= Array();

	// Create the main SVG element
	var qBody = document.getElementsByTagName("body")[0];
	this.mqMainSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
	this.mqMainSvg.style.backgroundColor = "#eeddcc";
	this.mqMainSvg.style.width=(this.miWidth+"px");
	this.mqMainSvg.style.height=(this.miHeight+"px");
	this.mqMainSvg.style.borderWidth = "3px";
	this.mqMainSvg.style.borderColor = "#662222";
	this.mqMainSvg.style.borderStyle = "solid";
	qBody.appendChild(this.mqMainSvg);

	// Add a line segment to the graph
	this.mfnAddLine = function(qLineSegment) {
		this.mqaPoints.push(qLineSegment);
	}

  	this.mfnDisplay = function() {
		for (qLineSegment of this.mqaPoints) {
			var qLineSvg = document.createElementNS("http://www.w3.org/2000/svg", "line");
			qLineSvg.setAttribute('x1', qLineSegment.mqP1.mdX);
			qLineSvg.setAttribute('y1', qLineSegment.mqP1.mdY);
			qLineSvg.setAttribute('x2', qLineSegment.mqP2.mdX);
			qLineSvg.setAttribute('y2', qLineSegment.mqP2.mdY);
			qLineSvg.setAttribute('stroke-width', '1');
			qLineSvg.setAttribute('stroke', 'rgb(200, 128, 128)');
			this.mqMainSvg.appendChild(qLineSvg);
		}
	}
}

// Create a new graph object
var qGraph = new CGraph2D(600, 600);
// Add three line segments
qGraph.mfnAddLine(new CLineSegment2D(
	new CPoint2D(467, 85),
	new CPoint2D(93, 574)));
qGraph.mfnAddLine(new CLineSegment2D(
	new CPoint2D(393, 73),
	new CPoint2D(466, 484)));
qGraph.mfnAddLine(new CLineSegment2D(
	new CPoint2D(73, 35),
	new CPoint2D(578, 452)));
// Draw the graph
qGraph.mfnDisplay();

CLineSegment2D.js

function CLineSegment2D(qP1, qP2) {
	this.mqP1 = qP1;
	this.mqP2 = qP2;
}

CPoint2D.js

function CPoint2D(dX, dY) {
	this.mdX = dX;
	this.mdY = dY;
}
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.