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.
<!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>
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();
function CLineSegment2D(qP1, qP2) { this.mqP1 = qP1; this.mqP2 = qP2; }
function CPoint2D(dX, dY) { this.mdX = dX; this.mdY = dY; }
© 20072024 XoaX.net LLC. All rights reserved.