Introduktion till webbutveckling (DA156A)

Malmö Högskola

Föreläsning 9 - JavaScript i webbutveckling


Dagens exempel

Todo-lista

Här hittar du exemplet live

HTML


<!doctype>
<html>
	<head>
		<link href="style.css" type="text/css" rel="stylesheet">
		<meta charset="utf-8">
	</head>

	<body>
		<div id="todoWrapper">
			<h1>Todo</h1>
			<fieldset>
				<legend>Att göra:</legend>
				<input type="text" id="todo">
				<button id="addTodo">Lägg till</button>
			</fieldset>
			<h2>Saker att göra:</h2>
			<ul id="todoList">

			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="script.js"></script>
	</body>
</html>

JavaScript


// När användaren klickar på elementet med id "addTodo" (vår knapp)
$("#addTodo").on("click", function () {
    // Hämta värdet från elementet med id "todo" (texten i vår textruta)
	var todo = $("#todo").val();
    // Lägg till en ny punkt i vår punktlista med id "todoList" (texten är den från vår textruta)
	$("#todoList").append("
  • "+todo+"X
  • "); // Ta bort värdet från elementet med id "todo" (nollställ vår textruta) $("#todo").val(""); }); // När man klickar på ett element med klassen "deleteItem" (vår "X"-knapp för att ta bort en todo-item) $("#todoList").on("click", ".deleteItem", function() { // Från elementet man klickade på (knappen) ta bort föräldern (todo-item) $(this).parent().remove(); });

    CSS

    
    body{
    	font-family:"century gothic";
    	margin-top:50px;
    }
    
    h1{
    	margin:5px 0;
    }
    
    h2{
    	font-size:16px;
    	border-bottom: 1px solid #666;
    }
    
    #todoWrapper{
    	width:400px;
    	padding:20px;
    	height:auto;
    	overflow:hidden;
    	margin:0px auto;
    	background-color:#EFEFEF;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
    	-webkit-box-shadow: 0px 0px 10px 0px #666;
    	box-shadow: 0px 0px 10px 0px #666;
    }
    
    .deleteItem {
    	float: right;
    	border: 2px solid #000;
    	background-color: #eee;
    	padding: 0px 5px;
    	border-radius: 5px;
    	font-size: 12px;
    	cursor: pointer;
    }
    

    Bildspel

    HTML

    Här hittar du exemplet live

    
    <!doctype>
    <html>
    	<head>
    		<link href="style.css" type="text/css" rel="stylesheet">
    		<meta charset="utf-8">
    	</head>
    
    	<body>
    		<div id="slideshow">
    			<img src="images/1.jpg" alt="image" id="show">
    			<img src="images/2.jpg" alt="image">
    			<img src="images/3.jpg" alt="image">
    		</div>
    
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    		<script src="script.js"></script>
    	</body>
    </html>
    

    JavaScript

    
    // Koden inuti funktionen nedan körs var 4:e sekund
    setInterval(function() {
        // Leta upp elementet med id "show" (bilden som just nu visas i bildspelet)
    	var activeImg = $("#show");
    
        // Kontrollera om det finns en bild efter den som just nu visas (nästkommande syskon), eller om bildspelet ska börja om från början
    	if (activeImg.next().length == 1) {
            // Om det finns en bild efter, visa den bilden
    		activeImg.next().attr("id", "show");
    	} else {
            // Annars visa den första bilden i bildspelet
    		$("#slideshow").children().first().attr("id", "show");
    	}
    
        // Ta bort id "show" från bilden som tidigare visats
    	activeImg.removeAttr("id");
    
    }, 4000);
    

    CSS

    
    #slideshow{
    	position: relative;
    	width:600px;
    	height: 300px;
    	padding:20px;
    	overflow:hidden;
    	margin:0px auto;
    	background-color:#EFEFEF;
    	border-radius: 10px;
    	box-shadow: 0px 0px 10px 0px #666;
    }
    
    #slideshow > img {
    	position: absolute;
    	opacity: 0;
    	transition: all 1s;
    }
    
    #slideshow > #show {
    	opacity: 1;
    }
    

    Användning av allt material är fritt, om motsatsen inte anges. Länka gärna! Formellt utrycks detta med licensen Creative Commons Erkännande 4.0 Sverige.

    Webbplatsen drivs av Anton Tibblin, som också ansvarar för kursen Introduktion till webbutveckling, fristående distanskurs, Malmö högskola.