הלינקייה: מגזין חודשי למפתחים

רוצה לשמוע על כל האירועים, המדריכים, הקורסים והמאמרים שנכתבו החודש ?
הלינקייה הינו מגזין חופשי בעברית שמשאיר אותך בעניינים.
בלי ספאם. בלי שטויות. פעם בחודש אצלך בתיבה.

Javascript And The DOM

Changing CSS with jQuery

<html>
    <head>
        <title>jQuery Examples</title>
 
        <link rel="stylesheet" href="master.css" />
 
        <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script src="example1.js"></script>
    </head>
 
    <body>
        <div class="colored">
        </div>
        <form>            
            <input type="button" id="red" value="red"/>
            <input type="button" id="green" value="green"/>
            <input type="button" id="blue" value="blue"/>
            <br />
            <input type="button" id="round" value="round" />
            <input type="button" id="unround" value="unround" />
            <br />
            <input type="button" id="toggle" value="toggle" />
 
        </form>
 
    </body>
</html>
.colored {
    width : 200px;
    height: 200px;
    position: absolute;
    top: 40%;
    left: 40%;
    background-color: red;
}
$('document').ready(function() {
 
    var div = $('div.colored');
 
    $('#red').click( function() {
        div.css('background-color', 'red');
    });
 
    $('#blue').click( function() {
        div.css('background-color', 'blue');
    });
 
    $('#green').click( function() {
       div.css('background-color', 'green');        
    });
 
    $('#round').click( function() {
       div.css('border-radius', 10); 
    });
 
    $('#unround').click( function() {
       div.css('border-radius', 0); 
    });
 
    $('#toggle').click( function() {
       div.fadeToggle();
    });
 
});

Mouse Movement

<html>
    <head>
        <title>Mouse Move</title>
        <link rel="stylesheet" href="mouse.css" />
        <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script src="mouse.js"></script>
    </head>
 
    <body>
        <div id="info" class="text-panel">
            <p>Mouse Coordinates: <span id="result"></span></p>
        </div>
 
        <div id="instructions" class="text-panel">
            <p>Move the mouse inside the yellow box and watch its coordinates
            in the result box
            </p>
        </div>
 
        <div id="board">
        </div>
    </body>
</html>
div.text-panel {
    background-color: lightgrey;    
}
 
#info {
    width: 200px;
    height: 20px;
    padding-left: 5px;
    padding-right: 5px;
}
 
#instructions {
    width: 220px;
    height: 100px;
    overflow: auto;
    margin-top: 20px;
    padding: 20px;
}
#board {
    background-color: yellow;
    width: 500px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
}
$('document').ready(function() {
 
    var result = $('#result'),
        board  = $('#board'),
        colors = ['yellow', 'blue', 'green', 'red', 'lightblue', 'cyan', 'purple'],
        currentColor = 0;
 
    board.mousemove(function(e) {
        result.html( '(' + e.offsetX + ','+ e.offsetY+ ')');
    });
 
    board.mouseup(function(e) {
        ++currentColor;
        board.css('background-color', colors[currentColor % colors.length]);
    });
});
 
<!DOCTYPE html>
 
<html>
<head>
    <title>Shopping list</title>    
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script src="shopping.js"></script>
 
</head>
 
<body>
    <h1>Ye Old Shopping List</h1>    
    <ul class="shopping-list">
    </ul>
    <form>
        <input type="text" id="item" />
        <input type="submit" value="Add" />
    </form>
</body>
</html>
 
$('document').ready(function() {
 
   $('form').submit(function(e) {
        e.preventDefault();
        var textfield = $('#item'),
            item = textfield.val(),
            newItem;
 
        if ( item.length > 0 ) {
            newItem = $(document.createElement('li'));            
            newItem.addClass('shopping-item');
            newItem.html(item);
 
            $('ul.shopping-list').append(newItem);
            textfield.val("");    
        }
   });
});

Adding DOM Elements - Tic Tac Toe

<html>
    <head>
        <style>
            @import 'xo.css';
        </style>
 
        <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script src="xo.js"></script>
    </head>
 
    <body>
        <table>
            <tr>
                <td class="bottom right"           id="0"></td>
                <td class="bottom left right"      id="1"></td>
                <td class="bottom left"            id="2"></td>
            </tr>
            <tr>
                <td class="top bottom right"       id="3"></td>
                <td class="top bottom left right"  id="4"></td>
                <td class="top bottom left"        id="5"></td>
            </tr>            
            <tr>
                <td class="top right"              id="6"></td>
                <td class="top left right"         id="7"></td>
                <td class="top left"               id="8"></td>
            </tr>            
        </table>
    </body>
</html>
body {
    background-color: #BBB07C;
}
 
form#newgame {
    font-size: 0.5em;
}
 
table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    background-color: #5A6F75;
}
 
td {
    width: 30%;
    height: 30%;
    border: hidden 1px;
}
 
.top {
    border-top: solid;
}
 
.bottom {
    border-bottom: solid;
}
 
.left {
    border-left: solid;
}
 
.right {
    border-right: solid;
}
$(function() {
 
    function getPlayerId(move) {
        return (move % 2) + 1;
    }
 
    function getImageForMove(move) {
        var playerid = getPlayerId(move);
 
        if ( playerid === getPlayerId(0) ) {
            return 'o.png';
        } else {
            return 'x.png';
        }
    }
 
    function checkVictory(board, player) {
        // check winning row
        if ( board[0] === player && board[1] === player && board[2] === player ) return true;
        if ( board[3] === player && board[4] === player && board[5] === player ) return true;
        if ( board[6] === player && board[7] === player && board[8] === player ) return true;
 
        // check winning column
        if ( board[0] === player && board[3] === player && board[6] === player ) return true;
        if ( board[1] === player && board[4] === player && board[7] === player ) return true;
        if ( board[2] === player && board[5] === player && board[8] === player ) return true;
 
        // check winning diag
        if ( board[0] === player && board[4] === player && board[8] === player ) return true;
        if ( board[2] === player && board[4] === player && board[6] === player ) return true;
 
        return false;    
    }
 
 
    $('document').ready(function() {
        var board         = [0, 0, 0, 0, 0, 0, 0, 0, 0],
            currentMove   = 0;
 
 
        $('td').click(function(e) {
            var td = $(this),
                square = td.attr('id'),
                center = $(document.createElement('center')),
                img = $(document.createElement('img')),
                currentPlayer = getPlayerId(currentMove);
 
 
            if ( board[square] !== 0 ) {
                alert('Sorry, This one is taken');
                return;
            }
 
            img.attr('src', getImageForMove(currentMove) );
            board[square] = currentPlayer;
 
            center.append(img);
            td.html( center );
 
            if ( checkVictory(board, currentPlayer) ) {
                alert('Player ' + currentPlayer + ' Won !');
                $('td').unbind();
            }
            ++currentMove;
        });
 
 
    });
 
}());

Converter Code

<html>
    <head>
        <link rel="stylesheet" href="converter.css" />           
 
        <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script src="converter.js"></script>
 
        <title>Best Converter Tool In The World</title>
    </head>
 
    <body>
        <form id="converter">
            Seconds: <input type="text" id="seconds" /> <br />
            Minutes: <input type="text" id="minutes" /> <br />
            Hours: <input type="text" id="hours" /> <br />
        </form>
    </body>
</html>
input {
    margin: 5px;
}
$('document').ready(function() {
 
    $('input').change(function() {
       var src = $(this),
           amt = src.val(),
           unit = src.attr('id'),
           input_sec = $('input#seconds'),
           input_min = $('input#minutes'),
           input_hr  = $('input#hours');
 
        if ( unit === 'seconds') {
           input_sec.val(amt);
           input_min.val(amt / 60);
           input_hr.val(amt / 3600);
 
        } else if ( unit === 'minutes' ) {
            input_sec.val(amt * 60);
           input_min.val(amt);
           input_hr.val(amt / 60);
 
        } else if ( unit === 'hours') {
           input_sec.val(amt * 3600);
           input_min.val(amt * 60);
           input_hr.val(amt);
        }
    });
});