Jan 13
Javascript Tutorial 3
Alright! Session 3!
Time to get into document.getElementByID() , document.getElementsByTagName() , and .innerHTML !!
Lets dive right in shall we?
Stating with document.getElementByID().
document.getElementByID() :
- document.getElementByID()
<script type="text"/javascript">
var iuser = document.getElementByID("userlinks").innerHTML;
document.write(iuser);
</script>
So what do you see? a variable using the new document.getElementByID() or TagName() with .innerHTML and the document.write writing the variable like we learned in the last tutorial.
so what does this all mean? document.getElementByID() does this... when the browser read this it already knows what ID's and Classes are on the page. Since you should already know IDs are only on the page once we use .getElementByID() . Now remember this is case sensitive!! So we grabed that Element with the ID of userlinks. AWESOME! now the .innerHTML basically means it is grabbing everything inside that Element.
Than we are writing all the stuff inside the element using the document.write()
got that? good moving on
document.getElementsByTagName() :
- document.getElementsByTagName()
<script type="text"/javascript">
var iuser = document.getElementByID("userlinks").getElementsByTagName("a")[0].innerHTML;
document.write(iuser);
</script>
Alright same code as above except we used .getElementsByTagName("a") after the document.getElementByID("userlinks") What does this mean? and What is that [0] mean now?! OMG YOUR CONFUSING ME! don't fret! Lets look at this one step at a time.
1) we have a variable [which we learned how to use before]
2) we have the document.getElementByID("userlinks") [which we just learned on what it does]
3) we have .getElementsByTagName("a")
ok what does that mean? it means that it will look at all the tag names within that element. in this case the element with the ID of userlinks. Remember when you use .getElementsByTagName("a") you MUST have an "s" after Element why? because you can have multiple elements of that tag. just like if you were to use div instead of that "a" you have multiple "div"s on a page. hence you need to use the "s". now that we have a basic understanding of .getElementsByTagName("a") lets move on.
4.) we have a [0]
What the heck is that?!
well if you look before that we have the ID of userlinks and we are calling all the "a" tags inside the userlinks element. so since there are many "a" tags inside that element the [0] tells is which one we want. [0] called the first "a" tag it sees. so if we used [1] it would be the second "a" tag. So why don't we use [1] as the first ? because it starts at 0
hope you understood that a little bit
5) we have .innerHTML [which we kind of went over]
alright so lets look at this over as a whole.
- document.getElementsByTagName()
<script type="text"/javascript">
var iuser = document.getElementByID("userlinks").getElementsByTagName("a")[0].innerHTML;
document.write(iuser);
</script>
in the variable "iuser" we are calling the Element with ID of userlinks, and inside that element we are looking at the "a" tags and since we have the [0] we are looking at the first "a" tag in the Element of userlinks. Since we would be using this on IF that would be the Portal link. than we are using .innerHTML to grab the word "Portal". once we have that we are writing it using document.write().
I hope you understand that tutorial a little bit. If you have any questions please feel free to post and i will try my best to answer them.
Next Up: If statements and For loops
Jan 13
Javascript Tutorial 2
Welcome back class! Round 2!
Ring the Bell!!
Ding! Ding!
All right, Variables and document.write()
Like in the first tutorial we got you started with the script tag and a start on variables. so what did we learn? we learned how to use quotes in a variable. but what about some of these codes that use variables and display them on the page?
Excellent Question!!
Using these variables and displaying them:
First lets talk about displaying them on a page. There are several options to display something on a page but what we are going to use now is document.write()
- document.write()
<script type="text/javascript">
var x = "this is a test";
document.write(x);
</script>
alright lets look at this code.
What do we see that we already know. We have the script tag we have a variable and something new.
document.write() is a way to write stuff directly on the page. so what does that code produce?
- Output
this is a test
why does that output it like that? well the browser read the code like this. sees that it is a javascript, notices a variable inside the script. sees the document.write and writes what is in the parentheses in this case it sees the variable and that variable says "this is a test". so it writes out "this is a test". That is one way document.write() outputs information and works with variables.
Whats another way of writing stuff on a page?
- document.write() 2
<script type="text/javascript">
document.write("this is a test");
</script>
This is another way. if you noticed there is no variable now and it is put directly right into the document.write(), quotes and all. just like a variable you need to watch your quotes inside the document.write(). This would output the same as above.
Now what would happen if we mixed the two?
Well lets find out!
- document.write() 3
<script type="text/javascript">
var x = "with a variable";
document.write("this is a test "+ x);
</script>
- output
this is a test with a variable
How does it do that?!
Well lets find out!
we have a variable and a document.write(). like before the document.write() outputs "this is a test" but than it has a variable in it. Well you see the + in there? dont be scared it wont hurt you! that is called an operator. what that does in there is it adds the variable into the text that is already in there.
so it reads it like this
- Quote:
<script type="text/javascript">
var x = "with a variable";
document.write("this is a test "+ "with a variable");
</script>
as you can see it replaced the variable with the line that variable represents. it combines both of them together! a match made in heaven.
awww..
I hope you learned a little something so far and don't worry more tutorials will come. next up we will be talking about grabbing elements by ID or Tag Names and how those get worked into javascript along with innerHTML, because looking at all these scripts they all have it
So stay tuned for more Javascript lessons!
Jan 13
Javascript Tutorial 1
Alrighty class , this class is about to begin! if you could all please find your seats that would be great..
Lets get started!
we are going to go over some basics first.
Script Tag:
- Script Tag
<script type="text"/javascript">
</script>
that my friends is the script tag. notice how i added the type in there. it is proper javascript to do that since it makes the browser read everything better. since there are multiple scripting languages this will tell the browser "HEY! YOUR ABOUT TO READ JAVASCRIPT!"
simple huh? even though
- Script Tag
<script>
</script>
does work its best to get in the habit of using the type.
Got that? Ready to move on?
AWESOME!
Javascript Variables:
Now you can have almost anything as a variable name. obviously like all scripting/programming languages there are certain things you can't have. but you should be able to use common sense on whether you can have it.
lets have an example:
- Variables
var x = 0;
x =0;
alright i just made the variable x there are 2 ways you can do it. if you look through some of the javascript codes on IF or ZB you will notice some codes use either or. both can be fine. however i find it more practical to use var x= 0;
now you dont always have to use a number in the variable. variables can hold all sort of information! like a word or a phrase or even HTML !!
- Variables
var x = 0;
var y = "This is Text";
var z = "<a href=' # ' >link</a>"
now look what is done. variable x is still zero , variable y is text , variable z is a little different variable z has HTML. it uses the same base for the variable with text but using either an opening/closing double quote or single quote. but if you look close enough right after the href=
comes ' # ' now we all know you should have the url encased in quotes. but wouldn't that break the string ( string is this = " anything in here" ) no it won't in this case. anytime you are calling a variable or using innerHTML or document.write ( i will get to innerHTML and document.write in future tutorials) you can use both however whatever quote you choose to use to open it what you can't use in the string itself. Example time!
- Variables ( Wrong Way)
var z = "<a href="#" >link</a>"
so why wont this work? because the browser reads the first double quotes as the start of the string. using the double quotes in the string will tell the browser to stop at the second double quotes. causeing you to have some excess wordage and stuff that errors because the browser doesn't know how to read that. so if you start with double quotes you must end with double quotes. and use single quotes in the middle of the string.
- Variables ( Right Way)
var z = "<a href='#' >link</a>"
var z = "<a href=\"#\" >link</a>"
What did i just do there?! I added some slashes. If you MUST use double or single quotes inside that are the same as what you started/ended with than you must escape them by using the slashes . That will tell the browser to not read it as closing the variable and just read it as quotes inside the string. yeah that might not make to much sense thats why i say use the right way
ok so what have we learned? using variables and script tags correctly.
Whats next Up?
Working with Variables some more, document.write()
4:29 PM Sep 3
