Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
ian izaguirre
3,220 PointsJust starting to teach myself JavaScript but have a question on use?
Hi I am teaching myself Java Script but have a few questions. On one of the introduction to Java videos here on Treehouse the teacher changes a divs background color and font color using "document.getElementById"
) But WHY would anyone want to use JavaScript to change a divs colors or background when it would be so much easier and faster to do this all through a child theme and CSS ?
) Would doing this only through Java work on all browsers better then doing it through CSS , for example with changing the background through java of a div mean that I would not have to include the larger lines of code like -webkit-gradient , moz etc... to make it cross browser compatible? Does java take away the need for this extra css ?
3.) any benefits to doing simple things like this through java and reducing the size of my css file ?
ian izaguirre
3,220 Pointsthanks I fixed the title
5 Answers
sdfasdfagasdgasdg
475 PointsJava and JavaScript are not the same thing. Java is an object oriented, statically typed language while JavaScript is not object oriented and not statically typed.
JavaScript is what makes the web interactive. You can't use CSS for form validation. You can't use CSS for game logic. You can't use CSS to dynamically fetch content from another location. You can't even use CSS to control CSS3 animations fully.
If you want to see how a website would work without JavaScript, just turn JavaScript off in your browser and you will see that they won't work very well or at all.
Treehouse the teacher changes a divs background color and font color using "document.getElementById"
Many tutorials are like this. They teach the basic concepts but do not always apply them to real world contexts - and this is good - you want to be able to do the unnecessary to do the (seemingly) impossible. In a real world situation I wouldn't use JavaScript to change the background colour of a div directly, but I would use JavaScript to set that div's class to one that does change the colour.
Concerning question 2 (and probably 3), JavaScript certainly does not take away from this. When you change the background colour of a div with JavaScript, you are still setting a CSS style value. Plus as far as I know, you can only change this to one value. Say you want a box-shadow? Applying that directly using JavaScript won't work too well with vendor prefixes.
Don't worry about vendor prefixes though. Entities such as Google and probably other corporations are working towards eliminating the currently inevitable vendor-prefix hell :)
ian izaguirre
3,220 PointsThank you for your answer. Some questions 1.) how would I learn after the videos how to apply them to real world contexts?
2.) "In a real world situation I wouldn't use JavaScript to change the background colour of a div directly, but I would use JavaScript to set that div's class to one that does change the colour."
What do you mean ? If I have a div in my css style sheet called div.ian-heading { color: #000 } , that would be a direct div that your saying you would not use javascript to change , what do you mean the you would though change a divs class? what does this mean isent it the same thing?
sdfasdfagasdgasdg
475 Points- Is achieved through experience, experiment around or look at other tutorials :)
- Instead of doing
javascript document.getElementById("myElement").style.backgroundColor = "#f0a";I tend to do it this way:css .messageRead { background-color: #f0a; }javascript var classes = document.getElementById("myElement").className; classes += " messageRead"; document.getElementById("myElement").className = class.trim();
The example is crude, but I hope you get the gist. Obviously you would have more styles for one element in your CSS. This is only really useful if you only switch your div between different, predefined states which is what is typically only necessary. If, however you need to change the colour (or any other style such as left, top, etc) a lot then setting them directly through elem.style.aStyle makes more sense.
sdfasdfagasdgasdg
475 PointsGreat that I can't edit comments and that the code block doesn't work properly in comments ¬_¬
ian izaguirre
3,220 PointsHahaha thanks for your help :-)
This : .messageRead { background-color: #f0a; } javascript var classes = document.getElementById("myElement").className; classes += " messageRead"; document.getElementById("myElement").className = class.trim();
Is Chinese to me lmao , I only understand this so far : javascript document.getElementById("myElement").style.backgroundColor = "#f0a";
--- I guess I have to continue the videos as I am only on the first , to understand what you wrote :-) . Quick question though , So I have a website ( www.IAmDentistry.com) , If I want to start playing around with JS as I am learning , can I just create a JS file and add it to my child theme , or do I have to link it through putting the title of the file in a script tag and placing it somewhere ? ( In the videos it gives the example of placing the script tags in the index.html file but I went to my parent theme and looked and saw no files that said index.html ? )
sdfasdfagasdgasdg
475 PointsThe "javascript" and "css" parts are only for syntax highlighting, but that appears to be broken for comments right now.
What do you mean by "parent theme"?
ian izaguirre
3,220 PointsO I use wordpress I have a child theme and a parent theme , that's what I was referring to, the main themes files
sdfasdfagasdgasdg
475 PointsI'm afraid I've never used Wordpress, so I can't help you with that. You can just serve your JavaScript locally, you don't need to serve it from a remote - if that is what you mean?
ian izaguirre
3,220 PointsNope that's not what I mean, but its ok I will figure that part out, thanks for your help, its very much appreciated.
Vijay Rangan
7,543 PointsIf you're using WordPress, you probably have files with .php in them. Look around the file structure for the index.php file. After you've found it, include your .js file using script tags as shown in the video. It should look something like this ***JavaScript <script src="path/to/your/file"></script>
ian izaguirre
3,220 PointsThis code: <script src="myscript.js"></script> goes in my index file which I found, but the JavaScript file that I create , I create that folder and put it in my child theme right ?
ian izaguirre
3,220 PointsI cant edit the comment the code I am referring to in the above comment is the myscript tag
Rodrigo Muñoz
Courses Plus Student 20,171 PointsWell I guess you already realize Java an Javascript are different programming languages.
Answering to your questions: 1.- Adding and removing divs or other tags will help you to do a lot of things that are helpful. This case is about interactivity with the user.
ian izaguirre
3,220 PointsHi thank you. I am trying to make my JavaScript file active for my wordpress theme but I am lost, its not working. I started a thread but with no real luck yet: ("https://teamtreehouse.com/forum/put-myscript-tag-into-my-indexphp-of-parent-theme-then-added-javascript-file-to-wordpress-child-theme-but-not-working")
Stone Preston
42,016 PointsStone Preston
42,016 PointsJava and Javscript are not the same thing, so its generally best to refer to javascript as javascript or JS to avoid confusion.