+- Forums - Open Redstone Engineers (https://forum.openredstone.org)
+-- Forum: Off-Topic (https://forum.openredstone.org/forum-4.html)
+--- Forum: Programming (https://forum.openredstone.org/forum-8.html)
+--- Thread: javascript tutorials? (/thread-776.html)
javascript tutorials? - David - 08-19-2013
I've recently been getting into building websites, I know enough about HTML and CSS, so I decided to follow some javascript tutorials. I've already completed the ones on w3schools. Now for some more advanced stuffz?
-David
RE: javascript tutorials? - mort96 - 08-19-2013
the way I've learned JS is to simply start playing around with the language. Try to make simple games. Try making more advanced games. Set yourself goals. Once you discover a pattern, try making an application (game?) using that pattern.
Of corse, Google is insanely handy.
RE: javascript tutorials? - David - 08-19-2013
(08-19-2013, 03:47 PM)mort96 Wrote: the way I've learned JS is to simply start playing around with the language. Try to make simple games. Try making more advanced games. Set yourself goals. Once you discover a pattern, try making an application (game?) using that pattern.
Of corse, Google is insanely handy.
ty
RE: javascript tutorials? - Billman555555 - 08-20-2013
I learned my JS off of W3Schools and stealing/borrowing; mort/googles code.
BEST WAY EVAH!!!
RE: javascript tutorials? - David - 08-20-2013
(08-20-2013, 01:48 AM)Billman555555 Wrote: I learned my JS off of W3Schools and stealing/borrowing; mort/googles code.
BEST WAY EVAH!!!
Ive completed the w3s tuts, and I dont feel very smart now.
I just gotta practice a lil.
RE: javascript tutorials? - mort96 - 08-20-2013
W3Schools may be useful, but before relying too much on them, make sure to read W3Fools.
RE: javascript tutorials? - David - 08-20-2013
OK now, I was messin' round with javascript, HTML and CSS and I created a fancy menu that appears if you mouse-over some text, and dissapears if you leave the div with your mouse, now there is one problem: If you hover over a link it also dissapears.
HTML and a part of the java-script (forum bug: cannot write it without the dash here.):
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="javascript\fadeEffects.js"></script>
<script>
function fadeInMenu() {
fadeIn('menu')
document.getElementById('menu').style.visibility='visible';
}
function fadeOutMenu() {
if(document.getElementById('menu').style.opacity == 1)
{
fadeOut('menu')
}
}
</script>
</head>
<body>
<div id="container">
<div id="menu" onmouseout="fadeOutMenu()"> Menu </br></br> <a href="http://google.nl/">Google</a></div>
<div id="header"> <h1>THIS IS THE HEADER</h1> </div>
<div id="content"> <a onmouseOver="fadeInMenu()">Menu</a> </div>
</div>
</body>
</html>The CSS (I doubt if you need it, but I'll post is anyway):
Code:
#header
{
width:990px;
height:200px;
background:linear-gradient(45deg, rgb(0, 255, 255), rgb(0, 0, 255));
color:rgb(175,255,255);
padding-left:10px;
}
#content
{
margin-top:50px;
width:960px;
height:500px;
background-color:lightblue;
padding:20px;
}
#menu
{
width:100px;
height:539px;
position:absolute;
border:1px solid rgb(100,255,255);
background:linear-gradient(-135deg, lightblue, blue);
margin-top:250px;
visibility:hidden;
float:left;
text-align:center;
}
#container
{
margin-left:auto;
margin-right:auto;
width:1050px;
}
a
{
color:red;
}
h1
{
font-size:90px;
padding-top:50px;
}This is the code for fading in and out, I did not write it though:
Code:
// fadeEffects.js written By AdamKhoury.com
/*
USAGE IS SIMPLE: fadeIn(elementID); fadeOut(elementID);
*/
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
// opacity ranges from 0 to 1
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);
}If anybody can help me, please do
.