First *official* HTML program

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

59 Replies - 3617 Views - Last Post: 17 December 2012 - 10:11 AM

#1 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

First *official* HTML program

Posted 30 October 2012 - 04:40 PM

Hello all,

I had an interview yesterday, and I mention that I know *some* HTML. I have written a small sample program previously, and have played around with saving pages as txt documents, playing with them, and then running them as HTML files. They told me to send them some of my code. So, as response to this, I have decided to create the following program:
<!DOCTYPE HTML>
<html>
	<body>
		
		<h1>Welcome!</h1>
		<p>This is my basic hello user program.</p>
		<p>
			I don't have much experience with HTML, but I can adapt.
			I have, however, played around with HTML by saving pages in .txt format
 			(which shows HTML code), playing around with the code, and then saving it back as a webpage (to see its effect). It is also worth noting that this
			program uses ActiveX controls.
			<br> </br>
			<a href = "http://cs.iupui.edu/~aharris"> 
				This is the guy who taught me the bulk of my programming knowledge!
			</a>
			<br></br>
			By the way, this is something I taught myself
		</p>
		<script>
			var yourName = prompt("What is your name?");
			alert ("Hello "+yourName);
			var response = "";
			var responses = new Array("good", "great", "excellent", "passing", "bad", "horrible", "terrible", "failing", "ok");
			function loop_function(x)
			{
				//var x = 0;
				while ((response != responses[x]) && (x < 4))
				{
					x++;
				}	//end while 1
				while ((response != responses[x]) && (x < 8))				
				{
					x++;
				}	//end while 2
			}	//end function
			var y = 0;
			while (response != responses[y])
			{
				var response = prompt("How did I do?");
				response = response.toLowerCase();
				loop_function(y);
				alert("response == "+response);
				alert("y == "+y);
			}	//end while
		</script>
		<pre>
			<script>
				//loop_function();
				//No need to link this into a website: YOU HAVE TO GET A WEB ADDRESS! From there, you need to link this HTML into the personal website you obtained.
				document.writeln("Michael Warren did "+ response);	//writing your literal response to the page (if it does not contain "ing")
				//document.write('\n');
				//var x = 0;
				loop_function();
				//document.writeln("x == "+x);
			</script>
			<p>
				You might want to screencap this and send it to me via email.
				Again, my e-mail address is: miwarren@umail.iu.edu
			</p>
			<script>
				if (y<4)
				{
					alert("Thanks!");
				}	//end if 
				else if ((y > 3)&&(y < 8))
				{
					alert("Thanks for your input. I will work harder.");
				}	//end else
			</script>
		</pre>
	</body>
</html>


Sorry for posting the whole thing, but as I said, I am almost green-as-grass when it comes to HTML programming. However, I already know C, C++, Python, and Java. Unlike those, and because of the nature of this language (there might also be some Javascript in there...), there is no program for warning you of syntax errors. (Note to self, create one in the future...) The HTML file behaves unexpectedly in the
while (response != responses[y])
loop: It acts as if loop_function has no idea what response and responses[] are! Did I neglect one of the rules of HTML programming, or is something else amiss?

Oh, that
alert("response == "+response);
alert("y == "+y);


was to see initially what was going on. Clearly, there must have been a problem as to either how I defined the function, where it was declared, or how I called the function. Or I may be totally wrong.

Is This A Good Question/Topic? 0
  • +

Replies To: First *official* HTML program

#2 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 30 October 2012 - 06:36 PM

I decided that the function was of no purpose. I guess I overestimated myself when writing that code without thinking about it in-depth. (The while loop comparing the user's response to the values in the array only needed to be used ONCE. But, let's say that, in some awful case, we needed that loop more than once. What would be the proper way to implement the function and call it? I was trying to go C++ style, but it failed miserably.
Was This Post Helpful? 0
  • +
  • -

#3 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,055
  • Joined: 28-December 10

Re: First *official* HTML program

Posted 30 October 2012 - 06:48 PM

Putting in Javascript inside HTML tag is a big no. When and where should the prompt for the response be triggered?
Was This Post Helpful? 0
  • +
  • -

#4 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 30 October 2012 - 09:38 PM

These guys do it: http://w3schools.com...me=tryjs_events
As for when and where it should be triggered, I was thinking to do it in a loop because of the computer having to interpret the user's response and then doing something about it. That was my idea. The usual: try to do something cool, but keep it simple. My code works now, but maybe what you are saying is to never do this when you are doing this "for real"?
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,598
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 31 October 2012 - 12:04 AM

Moved to Javascript. HTML is not a Programming Language and your code contains way more JS than HTML.

PS. W3Schools is no authority in writing web code. itís just one single opinion in all the tutorials available.

as for the reason, external JS files can be cached by the browser and they make your HTML code way more clean (keyword: separation of languages/content & code)

PPS: your loop_function() function is useless, it does nothing.

PPPS. look into Array.indexOf().
Was This Post Helpful? 0
  • +
  • -

#6 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 31 October 2012 - 12:57 PM

So, heavy optimizations like:
<!DOCTYPE html>
<html>
<body>
<script>
var str = "This is a paragraph with line breaks, bold text, italicized text, and underlined text";
var a = new Array();
var temp;
//declaring a print function
function print_member(n)
{
    document.write(a[n]+"<br>");
}
//pushing elements in the array
for (var n = 0; n!=-1; n = str.indexOf(" ",str.indexOf(" ",n+1)+1))
{
     temp = n;
     if (temp != 0)
     {
         if (((a.length()-2)/3) == (Math.floor((a.length()-2)/3)))
             n = str.indexOf(" ",n+1);
         a.push(str.substr(temp,n-(temp+1)));
     } //end if
} //end for
<p>
for (var n = 0; n < a.length(); n++)
{
    if (n == 2) print_member(2);
    else
    {
        switch(n%3)
        {
            case 0:
                 <b>
                      print_member(n);
                 </b>
                 break;
            case 1:
                 <i>
                      print_member(n);
                 </i>
                 break;
            default:
                 <u>
                      print_member(n);
                 </u>
         } //end switch
    } //end else
} //end for
</p>
</script>
</body>
</html>


are a huge no, if all that optimization is not under a <script> (and made a function) which is outside an <html>?
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,598
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 31 October 2012 - 02:44 PM

hm, line #14 seems like you wanted to use String.split().

did you check the Error Console, the whole script should leave impressions there (illegal characters from improper HTML code insertion). I count (at least) 9 errors.

Quote

are a huge no, if all that optimization is not under a <script> (and made a function) which is outside an <html>?

<script> is not supposed to be outside <html>. external JS means that you have a JS file (plain-text file with only JS code) that you include via <script> tags (<script type="application/javascript" src="path/to/file.js"></script>) in the usual places.

note: document.write() is hardly ever needed in actual programming, itís too unflexible (e.g. not useable with events, requires inline script). there are enough and better ways to insert text or code into the HTML document.

// ex.
// you have somewhere a paragraph with the ID of "foo"

// insert simple text
document.getElementById("foo").textContent = "bar";

// insert HTML
document.getElementById("foo").innerHTML = "<strong>bar</strong>";



PS. <i>, <u> and <b> are outdated and should be replaced by CSS or <strong> / <em>
Was This Post Helpful? 0
  • +
  • -

#8 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 31 October 2012 - 04:41 PM

As mentioned earlier, I have my code working. Maybe I should pick up a web development book that explains the separation of layers better. I know HTML is no programming language, it's a markup languageand now that means you cannot directly support text script (like I have in my working code). I guess the HTML file acts as a main() function and the Javascript acts as a function to be called by main() (assuming you are a good programmer!) I present my working code (which is sure to be teeming with errors, although Google Chrome doesn't seem to throw any):
<!DOCTYPE HTML>
<html>
	<body>
		
		<h1>Welcome!</h1>
		<p>This is my basic hello user program.</p>
		<p>
			I don't have much experience with HTML, but I can adapt.
			I have, however, played around with HTML by saving pages in .txt format
 			(which shows HTML code), playing around with the code, and then saving it back as a webpage (to see its effect). It is also worth noting that this
			program uses ActiveX controls.
			<br> </br>
			<a href = "http://cs.iupui.edu/~aharris"> 
				This is the guy who taught me the bulk of my programming knowledge!
			</a>
			<br></br>
			By the way, this is something I taught myself
		</p>
		<script>
			var yourName = prompt("What is your name?");
			alert ("Hello "+yourName);
			var response = "";
			var responses = new Array("good", "great", "excellent", "passing", "bad", "horrible", "terrible", "failing", "ok");

			var y = 0;
			while (response != responses[y])
			{
				var response = prompt("How did I do?");
				response = response.toLowerCase();
				while ((response != responses[y]) && (y < 8))	//The purpose of doing this is to check the typed response against the array
				{
					y++;
				}	//end while
			}	//end while
		</script>
		<pre>
			<script>
				//No need to link this into a website: YOU HAVE TO GET A WEB ADDRESS! From there, you need to link this HTML into the personal website you obtained.
				if ((y != 3) && (y != 7))
				{	
					document.writeln("Michael Warren did "+ response);	//writing your literal response to the page (if it does not contain "ing")
				}	//end if
				else
				{
					document.write("Michael Warren ");
					for (var x = 0; x<4; x++)
					{
						document.write(response.charAt(x));
					}	//end for
				}	//end else
			</script>
			
You might want to screencap this and send it to me via email.
Again, my e-mail address is: miwarren@umail.iu.edu
			
			<script>
				if (y<4)
				{
					alert("Thanks!");
				}	//end if 
				else if ((y > 3)&&(y < 8))
				{
					alert("Thanks for your input. I will work harder.");
				}	//end else
			</script>

		</pre>
	</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#9 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 31 October 2012 - 07:21 PM

Wow, I wish I could delete posts. I guess the separation of HTML files and Javascript files also grants protection against "script kiddies" finding out the logic of your code?
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,598
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 01 November 2012 - 12:05 AM

Quote

I guess the separation of HTML files and Javascript files also grants protection against "script kiddies" finding out the logic of your code?

depends on the knowledge of those script kiddies. eventually, you can hide nothing you send to the user.
Was This Post Helpful? 0
  • +
  • -

#11 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 01 November 2012 - 02:17 PM

Oh, and I've made a note to proceed using progressive enhancement. Thanks guys for your patience and knowledge. By the way, does that style allow you to implement a plain old <button>? I would try <form> as I have multiple buttons I want to add to this (to change colors of text and background) or I could just go ape crazy and just make the buttons to change any of the elements, get text response for what the color should be changed to (given my audience, I will only allow integer response...), and have them click an "OK" button when they are done...
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,598
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 01 November 2012 - 02:19 PM

I donít see a reason why you shouldnít be able to do that with external JS (did I understand the question right?)
Was This Post Helpful? 0
  • +
  • -

#13 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 01 November 2012 - 02:24 PM

Just trying to go the progressive enhancement (get the basic thing working first, then add to it!) way. I heard w3schools.com is "evil" because they lead people into the habits that get their code hacked by run-of-the-mill script kiddies. So far, I can see that searching for good habits in web development is a search that has a difficulty that competes with searching for legitimate ninja (and ninjutsu; most of people claiming to be in the Bujinkan are not real martial artists)....
Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,598
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 01 November 2012 - 02:26 PM

I wouldnít have used the ninja metaphor, but thatís about it.
Was This Post Helpful? 0
  • +
  • -

#15 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 01 November 2012 - 02:27 PM

View PostIceHot, on 01 November 2012 - 02:24 PM, said:

Just trying to go the progressive enhancement (get the basic thing working first, then add to it!) way. I heard w3schools.com is "evil" because they lead people into the habits that get their code hacked by run-of-the-mill script kiddies. So far, I can see that searching for good habits in web development is a search that has a difficulty that competes with searching for legitimate ninja (and ninjutsu; most of people claiming to be in the Bujinkan are not real martial artists)....

I could make the action triggered by the button clicking controlled in the .js file, if that is what you mean. The .css file would also be controlled by the .js file (because the useris telling the machine what colors are to be displayed)...
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »