Feb 15
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
Feb 10
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()
Feb 09
Javascript Tutorial The Beginning
With in the next couple days i will be posting some really basic Javascript tutorials for people to learn and work off of. This is NOT jQuery this is straight Javascript. we will start very simple working with document.writes and grabbing elements by IDs and Tag Names. from there we will work into for loops and narrowing down our searches to edit parts we want to access on an IF or possibly ZB board.
So hop on this tutorial train and buckle up your safety belts because this is going to be one fun trip to Javascript CityIf you are reading through the tutorials and have any questions please comment and i will be more than happy to answer your question, and how knows maybe we will end up making some scripts for IF/ZB !!
Till next time my young JS learners
-HS
Feb 06
Javascriptin.com
I know a lot of people would love to learn Javascript. Whether they just know a little bit or none at all. I have created a Javascript tutorial website for people willing to learn. currently there are only about 17 tutorials in there for you to read up on and no scripts yet. but it will at least get you started on what you want to learn. whether it is just some basics or learning more advanced techniques. This should at least get you started!.
If you are a coder and would like to help out with tutorials or post up some website scripts please feel free to PM me and i will give you more information.
I hope you enjoy it and make a lot of use out of it, I will keep adding more things to it so you can all keep learning and getting better.
11:44 AM Dec 8
