First *official* HTML program

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

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

#16 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,238
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 01 November 2012 - 02:28 PM

maybe you should take the first step before the second and start learning Javascript.
Was This Post Helpful? 0
  • +
  • -

#17 anonymouscodder  Icon User is offline

  • member icon

Reputation: 126
  • View blog
  • Posts: 710
  • Joined: 01-January 10

Re: First *official* HTML program

Posted 01 November 2012 - 02:57 PM

View PostfromTheSprawl, on 30 October 2012 - 10:48 PM, said:

Putting in Javascript inside HTML tag is a big no.

You mean inside the body tag? I never seem code outside html tags beside the doctype. I don't know the behavior of being outside the html tags but I believe that it's just wrong (someone correct me if not).

But if you mean inside the body tags, it's not only a yes, sometimes a big yes. You can search around the web many articles/topics/questions regarding putting the script at the bottom. Many people learned this after Yahoo published their famous guideline for speeding up pages.

But it's not just 'put at the bottom'. You have to realize that putting down makes the code loads later, if it's something essential or really necessary, you should put inside the head.

As an example, some websites, in their search box, they load the element with some text inside it, like 'type your search here'. Then when you click it the method bound to the onclick event of the element detects the click and clear up the text for me to type. Some websites this script is loaded later, so I got myself a couple of times clicking on the search box and having to manually deletes the 'type your search here' text.


View PostIceHot, on 31 October 2012 - 11:21 PM, said:

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


No. I don't know what exactly you mean by "script kiddies" but, since it's in the client, I doesn't matter from a security perspective if it is inline or loaded from a separate file.

There are two things that are affected by separating or not your js/css files: the organization of your files (obvious), and caching.

When you request page A with script X your web browser caches both. Then when you request page B with the same script X it uses the cached one.

I rarely inline my scripts and about never inline css. I only inline when it's a really minor thing.

This post has been edited by anonymouscodder: 01 November 2012 - 02:59 PM

Was This Post Helpful? 1
  • +
  • -

#18 IceHot  Icon User is offline

  • D.I.C Head

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

Re: First *official* HTML program

Posted 04 November 2012 - 11:33 PM

Oh, and my while loop is STILL having trouble! It is still acting like it has no clue what the hell is going on, especially if the user types a response the program doesn't recognize (very likely, as I didn't want to predefine every one-word response the user might be thinking of!)Here is my separate Javascript code:
var yourName = prompt("What is your name?");
alert ("Hello "+yourName);
var response = "";
var responses = new Array("good", "great", "excellent", "passing", "decent", "bad", "horrible", "terrible", "failing", "ok");

var y = 0;
while (response != responses[y])	//This loop is kinda buggy; it acts as if the loop doesn't even exist!
{
	response = prompt("How did I do?");
	response = response.toLowerCase();
	alert("response == "+response);
	while (y < 9) 	//The purpose of doing this is to check the typed response against the array
	{
		y++;
	}	//end inner while
	if ((y == 9) && (response != responses[9]))
	{
		alert("The only words that are permitted as input are "+ responses);
		y = 0;		//This is here because it is inside the while loop that executes if the user's response isn't in the array of acceptable responses
	}	//end if
}	//end outer while
//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("did "+ response);	//writing your literal response to the page (if it does not contain "ing")
}	//end if
else
{
	document.write(" ");
	for (var x = 0; x<4; x++)
	{
		document.write(response.charAt(x));
	}	//end for
	document.write("ed");
}	//end else
if (y<4)
{
	alert("Thanks!");
}	//end if 
else if ((y > 4)&&(y < 9))
{
	alert("Thanks for your input. I will work harder.");
}	//end else
document.writeln("My name is "+yourName+" and I used this webpage!");



Either the Javascript magic fairies don't like me, or the while loop is having trouble with the dynamic array.
Was This Post Helpful? 0
  • +
  • -

#19 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,238
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 04 November 2012 - 11:36 PM

but thatís not a problem of the programming, thatís a problem of the design. if you donít want to ask until a match, think of another way to ask.
Was This Post Helpful? 0
  • +
  • -

#20 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

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

Re: First *official* HTML program

Posted 05 November 2012 - 12:00 AM

View Postanonymouscodder, on 01 November 2012 - 09:57 PM, said:

View PostfromTheSprawl, on 30 October 2012 - 10:48 PM, said:

Putting in Javascript inside HTML tag is a big no.

You mean inside the body tag?


Whoops. Yep, you're right.
Was This Post Helpful? 0
  • +
  • -

#21 IceHot  Icon User is offline

  • D.I.C Head

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

Re: First *official* HTML program

Posted 05 November 2012 - 11:19 AM

View PostDormilich, on 04 November 2012 - 11:36 PM, said:

but thatís not a problem of the programming, thatís a problem of the design. if you donít want to ask until a match, think of another way to ask.

I was going to ask the user when their response doesn't match one of the responses in the array. When you have a while loop, the inner loop has the conditions of the outer loop, right? The most efficient way I can think of is the way I have tried to do it.
Was This Post Helpful? 0
  • +
  • -

#22 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,238
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 05 November 2012 - 11:38 AM

the inner while() loop is completely pointless, you could as well write y = 9;. and if you want to show the user a list of allowed answers, either show it after the first mismatch (in every case except when the user is right) or put it in the HTML from the start.
Was This Post Helpful? 0
  • +
  • -

#23 IceHot  Icon User is offline

  • D.I.C Head

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

Re: First *official* HTML program

Posted 05 November 2012 - 11:46 AM

Got it! My understanding of while loops was a bit flawed. I didn't trust the magic fairies of Javascript, so I made it C++ code, and then I immediately saw what was wrong. My corrected code:
var yourName = prompt("What is your name?");
alert ("Hello "+yourName);
var response = "";
var responses = Array("good", "great", "excellent", "passing", "decent", "bad", "horrible", "terrible", "failing", "ok");

var y = 0;
while (response != responses[y])	//This loop is kinda buggy; it acts as if the loop doesn't even exist!
{
	response = prompt("How did I do?");
	response = response.toLowerCase();
	while (response != responses[y])	//The purpose of doing this is to check user's response against the array...
	{
        {
            if (y == 9) break;
            else y++;
        }   //end while
	}	//end while
	if ((y == 9) && (response != responses[9]))
	{
		alert("The only words that are permitted as input are "+ responses);
		y = 0;		//This is here because it is inside the while loop that executes if the user's response isn't in the array of acceptable responses
	}	//end if
}	//end outer while
//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("did "+ response);	//writing your literal response to the page (if it does not contain "ing")
}	//end if
else
{
	document.write(" ");
	for (var x = 0; x<4; x++)
	{
		document.write(response.charAt(x));
	}	//end for
	document.write("ed");
}	//end else
if (y<4)
{
	alert("Thanks!");
}	//end if 
else if ((y > 4)&&(y < 9))
{
	alert("Thanks for your input. I will work harder.");
}	//end else
document.writeln("My name is "+yourName+" and I used this webpage!");


Was This Post Helpful? 0
  • +
  • -

#24 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,238
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 05 November 2012 - 12:38 PM

both while() loops are not needed. arrays have a method to find out, whether a value exists within the array. I mentioned that already in post #5!
Was This Post Helpful? 0
  • +
  • -

#25 IceHot  Icon User is offline

  • D.I.C Head

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

Re: First *official* HTML program

Posted 05 November 2012 - 01:53 PM

View PostDormilich, on 05 November 2012 - 12:38 PM, said:

both while() loops are not needed. arrays have a method to find out, whether a value exists within the array. I mentioned that already in post #5!

Holy crap! I didn't even see that. Sorry, my habits from writing so much C++ code are kicking in. By the way, thanks for your patience and thanks for this valuable learning experience!
Was This Post Helpful? 0
  • +
  • -

#26 IceHot  Icon User is offline

  • D.I.C Head

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

Re: First *official* HTML program

Posted 05 November 2012 - 07:22 PM

Now I am at the point where I have buttons on the page, and spots where the user can enter integer values. Then they click one of the buttons corresponding to the item whose color they want to change, and it gets changed to that value. Just wondering if the <script> calling the Javascript file corresponding to the action listeners for the buttons goes after all the buttons and text boxes. I will attach my files here. My html file uploaded successfully, but my Javascript file didn't. I post code here:
var ba, bb, bc, bd;
var a = Array(ba,bb,bc,bd);
var temp = document.getElementByTagName('button');
ba = temp.getElementsById("buttona");
bb = temp.getElementsById("buttonb");
bc = temp.getElementsById("buttonc");
bd = temp.getElementsById("buttond");
//We want our event listener to fetch the data in the boxes provided and pass it to the color attribute
//To do that, we should probably define a function to do that...
//NOTE: The fields will have names corresponding to the significance of the data they are holding.
function setcolor()
{
	var stra, strb, strc;	//Declaring string variables...
	var inta, intb, intc;	//...and their respective variables...
	//...to be put in arrays (to automate this process)
	var strarray = Array(stra, strb, strc);
	var intarray = Array(inta, intb, intc);
	//get the text from the fields (manually, so I don't make mistakes)...
	stra = document.getElementById("textred").value;
	strb = document.getElementById("textgreen").value;
	strc = document.getElementById("textblue").value;
	//parse it to integers (hexadecimal)
		//parseInt(string,16) or append "0x" to all strings and then parseInt(string)
	for (var x = 0; x < 3; x++) intarray[x] = parseInt(strarray[x],16);
	alert ("Your entries are as follows:\nfirst box: "+inta+"second box"+intb+"third box"+intc);	//This pop-up window is a test
	//check if one or two integers has been entered (and enforce type consistency)
	//Use modular arithmetic to form the value to set the color to
	//Maybe get information about the thing being set. If it is background, set ALL BACKGROUNDS to user-defined color
}	//end setcolor
if (ba.addEventListener)
{
	//This will work on everything but IE
	for (var x = 0; x < 4; x++) a[x].addEventListener('click', setcolor(), false);
}	//end if
//ba.addEventListener('click', 
else
{
	for (var x = 0; x < 4; x++) a[x].attachEvent('onclick', setcolor());
}	//end else

Attached File  sample HTML project(2).html (1.99K)
Number of downloads: 17
Was This Post Helpful? 0
  • +
  • -

#27 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,238
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 05 November 2012 - 11:15 PM

that script should cause a massive imprint in the Error Console.

additionally, setcolor() is not a function (itís undefined), setcolor is.
Was This Post Helpful? 0
  • +
  • -

#28 IceHot  Icon User is offline

  • D.I.C Head

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

Re: First *official* HTML program

Posted 06 November 2012 - 02:16 AM

That's backwards! It also goes against programming common-sense of how to define functions! Python, C, C++, and Java all use the parenthesis at the end of their function that is being defined (at the function declaration statement). But me and the magic fairies of this land have a misunderstanding: I should have been better with my array usage. (I tried to make an array of variables. Shame on me...)

This post has been edited by IceHot: 06 November 2012 - 02:23 AM

Was This Post Helpful? 0
  • +
  • -

#29 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,238
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 06 November 2012 - 02:20 AM

what is backwards? if you define a function as a "variable with a function type" you’ll get exactly that. or in code
alert(typeof setcolor); // "function"
alert(typeof setcolor()); // "undefined"

the parentheses only denote to execute a function and return the return value (which is undefined, if not explicitly set). should that variable not be a function, you’ll get an error.


note on the second code line, that can also return "function", depending on the return value. e.g.
function mult(x) { // this is a function declaration
    return function doSomething(y) { // this is a function statement
        return x * y;
    }
}
alert( typeof mult ); // function
alert( typeof mult(3) ); // function
alert( typeof mult(3)(5) ); // number


essentially, you could also execute a function by doing
function doSomething(x) {
    // ...
    return y;
}
var retval = doSomething.call(null, x); // no execution context here

This post has been edited by Dormilich: 06 November 2012 - 02:48 AM

Was This Post Helpful? 0
  • +
  • -

#30 IceHot  Icon User is offline

  • D.I.C Head

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

Re: First *official* HTML program

Posted 26 November 2012 - 04:51 AM

Unfortunately, the brand-new start-up company called the internship off. So now, it is time to resume learning (at normal pace). I took the suggestion to remove the "()" from the event listeners, but the page is acting as if the Javascript doesn't exist at all! (I REALLY wish I could edit past posts, as I wouldn't have to keep re-posting code as it was being changed, especially if I am modifying mistakes I exclusively report and/or catch.) Just out of curiosity, when I use this HTML code:
<!DOCTYPE HTML>
<html>
	<title>My Experimental Page</title>
	<body>
		<link rel = "stylesheet" href = "sample project CSS file h1.css">
		<link rel = "stylesheet" href = "sample project CSS file p.css">
		<link rel = "stylesheet" href = "sample project CSS file pre.css">
		<link rel = "stylesheet" href = "sample project CSS file body.css">
		<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). 
			<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>
		<pre>
			Michael Warren <script type = "text/javascript" src = "sample project JS file.js"></script>
			
You might want to screencap this and send it to me via email.
Again, my e-mail address is: miwarren@umail.iu.edu
		</pre>
		<p>Please click the corresponding button to edit the color of:</p>
		
		<button name = "buttona">the title</button>
		<button name = "buttonb">the background</button>
		<button name = "buttonc">the text in the first paragraph</button>
		<button name = "buttond">the results of your responses to the popups</button>
		<p>Now enter the following RGB data (must be in hexadecimal; 00 is completely off, ff is completely on):</p>
		<form>
			Red:
			<input type = "text" id = "textred" cols = "2" rows = "1"/>(Can be either one or two digits.)
			Green:
			<input type = "text" id = "textgreen" cols = "2" rows = "1"/>(Should be same number of digits as above.)
			Blue:
			<input type = "text" id = "textblue" cols = "2" rows = "1"/>(Should be same number of digits as above.)
		</form>
		<script type = "text/javascript" src = "sample project button 1 js file.js"></script>
	</body>
</html>


and the user gets to pressing one of the buttons, where is the pointer in the HTML document?

P.S.: I was thinking that I would have to call some function to attach the event listeners. Of course, the lazy way would be to include the code in sample project button 1 js file.js DIRECTLY IN THE HTML FILE, and then call the function needed, but this is kinda like using system() in C++: a no-no. Why? Because it is hard to maintain, and just as mentioned in one of the Google submissions, if the user has the Javascript disabled and tried to click the button, NOTHING HAPPENS! (This ought to be much easier than it is seeming right now.)

This post has been edited by IceHot: 26 November 2012 - 04:54 AM

Was This Post Helpful? 0
  • +
  • -

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