game jump: frontend introduction #1
Post on 27-Jan-2015
104 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introduction● HTML● Web Style Sheets
○ CSS○ SASS
● JavaScript○ jquery○ requirejs
● First game
HTML5
HTML
Head
Body #html tags
Body #own tagsCreate own tag & attribute:
<mytagname attributeName=”attributeValue” />
Examples:jQuery MobileAngularJS
Web Style Sheets
CSS #What is CSS?
“Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents”
by W3C
CSS #selectors*{...}E{...}E F{...}E > F{...}E:first-child{...}E#id{...}
E.class{...}a:visited{...}E + F{...}E[foo="warning"]{...}E[foo~="warning"]{...}E[lang|="en"]{...}
CSS #combining selectors
div.car.destroyed .wheel,span.motor.destroyed .wheel{...}
#id ul li:first-child,#id ul li:nth-child(3n){...}
CSS #propertiesdisplay: block;float: left;background-color: red;width: 300px;color: black;font-weight: bold;font: 1em Helvetica, sans-serif;
-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
SASS
SASS #What is SASS?
“Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.”
http://sass-lang.com/
SASS #variables$m-margin: 33px;
#menu{margin:$m-margin+10px;}
$color: #333;
ul li{ color:$color; a{ lighten($color, 50%); }}
SASS #nestingnav { background: red;
ul{background: black;
}}
nav { background: red;}
nav ul{ background: black;}
SASS @import
@import 'path/to/file';
SASS @mixin@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px); }
JavaScript
js #What is it?!?!
“JavaScript is a programming language used to make web pages interactive.”
“Java is to JavaScript as ham is to hamster”
js #script
<script src="myscripts.js"></script>
<script type="text/javascript">alert(“gamejump.pl”);</script>
js #varszm = 22; //mean window.zm = 22
var arr = [“a1”,”a2”];var obj = {
“key”:”value”,number: 22,string:”text”
};
js #functionfunction globalFn(){
return “global”;}
var localFn = function(){return “function is a object”;
}
js #closurevar makeCounter = function() {
var privateCounter = 0;return {
increment: function() {return privateCounter ++;
}}
};
jQuery
jQuery #What is it?!?!
“jQuery is a JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”
jquery.com
jQuery #ready
$(document).ready(function() { // Your code here.});
$(function() { // Your code here.});
jQuery #selectors
//show elements$(“#menu :hide”).show();
//hide elements$(“#menu :visible”).hide();
//findvar $set = $(“#menu”);$set.find(“:visible”).hide();
jQuery #css
$(selector).addClass(name);
$(selector).removeClass(name);
$(selector).css(name,val);
$(selector).css({“background”:”red”,“color”:”blue”
});
jQuery #events
$(“.button”).on(“click”, function(){
alert(“clicked”);});
$(“.button”).on(“click”, function(event){
event.preventDefault();alert(“clicked”);
});
jQuery #val
<form method=”post” id=”f”><input id=”in” /></form>
$(“#f”).on("submit", function(){
var v = $(“#in”).val();alert(v);return false;
});
jQuery #ajax$.get("url",function(data){
alert(data);});
$.post("url", {k1:1,k2:2}, function(data){
alert(data);});
$.ajax({type: "POST",url: "some.php"
}).done(function( msg ) {alert(msg);
});
requirejs
requirejs #What is it?!?!
“RequireJS is a JavaScript file and module loader… Using a modular script loader like RequireJS will improve the speed and quality of your code.”
http://requirejs.org/
requirejs #start<html>
<head><script data-main="js/app" src="js/require.js"></script>
</head><!-- … - ->
</html>
requirejs #configrequire.config({
paths: { backbone: "libs/backbone.js/backbone", jquery: "http://ajax.googleapis.com/.../jquery.min", underscore: "libs/underscore.js/underscore"}
});
requirejs #app
require(["jquery"], function() {$(function(){
alert(“loaded”);});
});
requirejs #module
define([], function() {alert(“module”);
});
Questions??
We can start create a first game now :)
Download a game template from github
Thank you for your attention
sebastian@pozoga.eu
top related