JS and CSS/HTML

[Mark H]

Hi all,I'm going through the Javascript tutorial at the moment and have got the hand of some things, but many areas I'm still unclear on.The main question I want to ask at the moment is how js interacts with CSS and HTML.As an example, to have a function that executes on a mouse click I understand, but can I then link that function to HTML and CSS so that a specifically styled box appears at a specified place on the page?I'm unsure how to go about this.Thanks,Mark.

[boen_robot]

Think of it like this - normally, without JavaScript, you code up something (a "code") and the browser does something with it. Want something changed? You change the code.What JavaScript does is like performing these changes on your behalf. You specify that when, for example, a mouse click occurs, you want a certain piece of code changed to a certain something. After that change, the browser of course reinterprets the new code, and you can view the changes.So to answer your more specific question... you can make a specifically styled box appear at a specified place on the page... you just have to think how would that look like in code without JavaScript, and then make JavaScript replicate that kind of change.

[Mark H]

Thanks boen...I've been reviewing the early sections in the tutorial, and I see that I can use the document.write() statement and within that use HTML tags such as, e.g. <h1> and <p>. If I place the <script> within a <div> will it correspond to the CSS for that <div> ?I'm thinking that I could use a CSS styled box set to display: none, and then use javascript to execute a change in the display to display: block?Am I thinking correctly?Mark.

[boen_robot]

WARNING: Lots of terminology coming your way... prepare for a headache...

I've been reviewing the early sections in the tutorial, and I see that I can use the document.write() statement and within that use HTML tags such as, e.g. <h1> and <p>. If I place the <script> within a <div> will it correspond to the CSS for that <div> ?

The only thing a <script> element does is to mark the start and end of a scripting block. It doesn't really connect with its surroundings, other than being present there.Once within a script block, you can target parts of your (X)HTML document* with the so called "DOM" API. An "API", in the case of JavaScript means simply "a set of functions and properties", and the DOM API means "the vast majority of built in functions and properties".Among those functions is for example the getElementById() function, part of the document object.Check out the HTML DOM tutorial for details on this.Once you've targeted the part(s) you want, you can get or set stuff to them, as shown in all of W3Schools' examples.

I'm thinking that I could use a CSS styled box set to display: none, and then use javascript to execute a change in the display to display: block?Am I thinking correctly?

You can do that, yes. It's a common technique in fact. It has some potential drawbacks to it (what happens without JavaScript?), but it works for the most part.* The term for "part of your HTML, XML or XHTML document" is "node".

[Mark H]

Thanks, things are becoming a little clearer...still a little muddy, but clearer...I'll check out the links you provided. I'm still going through and also looking back on the tutorials.Thanks loads...be back to you later!:)Mark.

[thescientist]

basically think of it this way. CSS has properties and values that you can apply to HTML elements to make them appear certain colors, widths, lengths, positions, etc. With Javascript, you have the common native abilities of most programming languages, like being able to use strings, math functions, timers, dates, etc. What javascript can also do, by using the DOM* (document object model) API is access any element and alter it's CSS properties and change those values on the fly, by responding to certain events that can occur. An event in this case is a user clicking on something, moving in and out of focus on an element, etc. So, with all that in mind, you can, have a user click on a link, which triggers a function to run, that after 3 seconds, makes something on the page appear, or disappear.* The DOM is a tree like representation of all HTML elements in a page, and their corresponding properties and values. It's a way for browsers to create a mapping of the code that right, to create relationships between the root element <html> and all it's various combination's of child elements, like <head>, <body> and any elements within those, like <div>, <p>, etc.http://www.w3schools.com/htmldom/default.asp

[Mark H]

Thanks scientist,I've gone through the htmlDOM tutorial..things are much clearer. Will the fact that I am using an XHTML doctype affect this? Or will the normal HTMLDOM be applicable still?Thanks,Mark.

[jeffman]

Works the same for HTML and XHTML.