Вы находитесь на странице: 1из 20

FORMULAS R:

View(variable)
head(variable) Saca los primeros 6
head(variable, n) para decir cuantos quiero, siendo n el nmero.
View(head(variable,n)) nos dice para ver todo lo de adentro.
? variable signo y despus duda
data(variable)
tail(variable) nos ensea los ltimos.
variable[antes van las filas, columnas] para que me lo ensee o tambin
variable [filas: a la fila, columna] ejemplo cars[25:30,]
numero: nmero me da un vector
seq(0,1, length = n) genera secuencias.
seq(0,1,by=0.5) by es como de uno en uno o de .5 en .5
strvariable te dice que tipo de data es, observaciones y variables. Nos dice las
variables y los primero 5 o 10 atributos posibles. Factor es que la variable es
CUALITATIVA, y el int es de ENTEROS, num es la CONTINUAL que puede tener
decimales .
para ver solo una variable del data set dataset$price, ejemplo cars$price.
mean(cars$Price) Es el promedio.
mediana(cars$Price) El dato que esta cabal en la mitad.
max(cars$Price) el mximo precio, la P mayscula depende siempre del database
min(cars$Price)
agarra el primer vector cars$Price==min(cars$Price) Va a revisar si entre los
dos vectores, que me haga una comparacin, si son iguales pondr true o false. El
== es una comparacin.
Cars$Price>min(cars$Price) tambin me dira si es true o false.
Todos lo que son signos como para preguntar duda de lelos es entre algo as
como ?==
cars[cars$Price==min(Cars$Price),] tambin se puede con max.
cars[cars$Price<20]
cars[!cars$Proce>=30,1] me da lo opuesto
cars[cars$Proce<30 & cars$Price>12,1], le podes poner view antes para verlo en
una ventana.

COMO GRAFICAR
plot(eje x precio, eje y).. plot(cars$Price, cars$RPM)
histograma: grafica de barras
hist(cars$Price)
Como hacemos si es cualitativa
table(cars$Manufacturer) nos va a dar una tabla que nos da las frecuencias
plot(table(cars$manufacturer))

pie(cars$Price)
summary(cars)

CLASE DEL 20 de ene. de 15


Tanto R como PHP podemos producir desde le primer momento.
PHP ES: x = 5;
R ES: x<- 5
Html
<div> agrupa elementos
<a href=#>jshdjhjahjdhjh</a> provides a link
<!DOCTYPE html>
<html>
<body>
<div class="nav">
<div class="container"
<ul>
<li>Estefana Vizcano</li>
<li>Browse</li>
</ul>
<ul>
<li>Sign up</li>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay</h1>
<p> Rent from people in over 34,000 cities and 192 countries</p>
</div>
</div>
<div class="learn-more">
<div class="container">
<div>
<h3>Travel</h3>
<p>From apartment and rooms to treehouses and boats:stay in unique spaces in 192
countries</p>
<p>
<a href="#">See how to travel Airbnb</a>
</p>
</div>
<div>
<h3>Host</h3>
<p>Renting out your unused place could pay ypur bills or fund your next
vacation</p>

<p>
<a href="#">Learn more about hosting</a>
</p>
</div>
<div>
<h3>Trust and Safaty</h3>
<p>From Verifies ID to our worldwide custumer support team, weve got your
back</p>
<p>
<a href="#">Learn about trust at Airbnb</a>
</p>
</div>
</div>
</div>
<li>Log in</li>
<li>Help</li>
</ul>
</body>
</html>
CSS Rules
CSS uses rules to style HTML elements. Here's how CSS rules work:
A CSS rule starts with a selector. A selector specifies which HTML elements to style. Here the
h1 CSS selector selects all h1 HTML elements on the page.
Inside the braces { }, a property and its value define what aspect of the h1 elements to style.
Setting the color property to red changes the color of the h1 element to red.
Together, a selector and its property-value pairs are called a CSS rule.
The .header selector applies a blue text color only to the elements nested inside <div
class="header">..</div>.
In this way, classes are useful to specifically target groups of HTML elements.
color
The color property sets the color of an HTML element's text.
We can use color names to change the text's color. But this only works for 140 colors.
Instead, we can use RGB values or hexadecimal numbers. They can represent millions of colors.
RGB values and hex numbers express colors as different amounts of red, green and blue.
RGB values range from 0 to 255, with 255 being the brightest.
Hex numbers vary from 00 to ff, with ff being the brightest.
Change the color from red to hex number #9933CC.
font-family
The font-family property sets the font of an HTML element's text.
Three fonts commonly used with font-family are:
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
Google Fonts is a free collection of over 600 more web fonts that you can use on your page.

Change the font-family from Shift, sans-serif to 'Open Sans', sans-serif.

.jumbotron h1 {
color: red;
font-family: 'Shift', sans-serif;
font-size: 60px;
}
.jumbotron {
background-color: #0099cc;
}
.jumbotron {
background-image: url('http://goo.gl/ODpi3y');
}

Settheborderto3pxsolid#cc0000.Thischangestheborderwidthto3px,
theborderstyletosolid,andthebordercolorto#cc0000.
.jumbotron h1 {
border:3px solid #cc0000;
}

padding

Thepaddingpropertycreatesspacebetweenthecontentandborderofan
element.Thiswhitespaceisusefulinordertoimprovereadabilityand
organizationofthepage.
.jumbotron h1 {
padding: 23px;
border: 3px solid #ffffff;
}
.jumbotron h1 {
padding-top: 10px;
padding-bottom: 23px;
border: 3px solid #ffffff;
}

MARGIN
.jumbotron h1 {
margin: 14px;
border: 3px solid #ffffff;
}
.jumbotron h1 {
margin-top: 10px;
margin-left: 23px;
border: 3px solid #ffffff;
}

margin

Thepropertiesmarginleft,andmarginrightareavailabletosetthe
marginoneithersideofanHTMLelement.Ifoneofthesepropertiesis
settoauto,thenitwilltakeasmuchaspossible.
TomovetheHTMLelementtothefarleftofthescreen,usemarginright:
auto.Thiswillmaximizetheamountofspacethereisontherightside
margin,pushingtheelementtothefarleft.
Tocenteranelement,setmarginright:autoandmarginleft:auto.The
margintotheleftandrightwillbeequalandtheelementwillbecentered.
.jumbotron h1 {
margin-right: auto;
margin-left: auto;
border: 3px solid #ffffff;
}
http://www.w3schools.com/htmL/html_examples.asp
http://www.w3schools.com/tags/

ThecodeforthedropdownmenulivesintheJavaScriptfileapp.js.
Thiscodeisreadfromtoptobottom,andhastwoparts.
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
}

$(document).ready(main);

ThecodestartswithaJavaScriptfunctioncalledmain().Afunctionisa
setofinstructionsthattellsthecomputertodosomething.
Themain()functionismadeupofthreeparts.
First,thecodeselectsthe<aclass="dropdowntoggle">..</a>element.
jQueryusesselectorstotargetHTMLelements.jQueryselectorsarebased
onCSSselectors.Ifclicked,thedropdownmenuwillalternatebetween
showingandhiding,termedtoggling.
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
}
$(document).ready(main);

Summary

JavaScriptisaprogramminglanguageusedtoaddinteractivitytoaweb
page.jQuerysimplifiesJavaScriptsyntaxandmakesiteasiertobuild
interactivewebpagesthatworkacrossmultiplebrowsers.
jQueryenablesustodothreemainthingsonawebpage:
Events.Respondtouserinteractions.
DOMManipulation.ModifyHTMLelementsonthepage.
Effects.Addanimations.
We'llseehowtodoeachofthesethingsinthenextsections.

> plot(Galton)
> sunflowerplot(Galton)
> sunflowerplot(Galton, cex=0.5)
> sunflowerplot(Galton, cex=0.6)
> sunflowerplot(Galton, cex=1.5)
> sunflowerplot(Galton, size=0.01)
> sunflowerplot(Galton, size=1.5)
> sunflowerplot(Galton, size=.15)
> sunflowerplot(Galton, size=.10)

> sunflowerplot(Galton, size=.10, rotate=TRUE)


> sunflowerplot(Galton, size=.10, rotate=TRUE)
> sunflowerplot(Galton, size=.10, rotate=TRUE)
> sunflowerplot(Galton, size=.10, col="green")
> sunflowerplot(Galton, size=.10, col="green", seg.lwd=".7")
> sunflowerplot(Galton, size=.10, col="green", seg.lwd=".7",seg.col="blue")
> plot(Galton)
> plot(jitter(Galton&parent),Galton$child)
Error en jitter(Galton & parent) : objeto 'parent' no encontrado
> plot(jitter(Galton$parent),Galton$child)
> plot(Galton$parent,jitter(Galton$child))
> plot(Galton$parent,jitter(Galton$child))
> plot(jitter(Galton$parent),jitter(Galton$child))
> 4 +5
[1] 9
> sqrt(9)
[1] 3
> 4 +5
[1] 9
> sqrt(9)
[1] 3
> View(cars)
> mean(cars)
[1] NA
Mensajes de aviso perdidos
In mean.default(cars) : argument is not numeric or logical: returning NA
> a<-c(1,2,2,2,3,4,5)
> mean(a)
[1] 2.714286
> plot(a)
> hist(a)
> sunflower(a)
Error: no se pudo encontrar la funci'on "sunflower"
> b<-(a,b,b,b,b,b.c,c,d,d,d,w,e,r,t,y,u)
Error: inesperado ',' in "b<-(a,"
> b<-c(a,b,b,b,b,b.c,c,d,d,d,w,e,r,t,y,u)
Error: objeto 'b' no encontrado
> is<-(a,b,c,d,e,f,f,f,f,f,f,c)
Error: inesperado ',' in "is<-(a,"
> Is(a,a,a,a,a,b,b,c)
Error: no se pudo encontrar la funci'on "Is"
> d<-c("manzana","manzana","corazon","correr")
> plot(c)
> summary(cars)
Manufacturer Model
Type
Chevrolet: 8 100 : 1 Compact:16
Ford : 8 190E : 1 Large :11
Dodge : 6 240 : 1 Midsize:22
Mazda : 5 300E : 1 Small :21
Pontiac : 5 323 : 1 Sporty :14
Buick : 4 535i : 1 Van : 9
(Other) :57 (Other):87

Min.Price
Price
Max.Price
Min. : 6.70 Min. : 7.40 Min. : 7.9
1st Qu.:10.80 1st Qu.:12.20 1st Qu.:14.7
Median :14.70 Median :17.70 Median :19.6
Mean :17.13 Mean :19.51 Mean :21.9
3rd Qu.:20.30 3rd Qu.:23.30 3rd Qu.:25.3
Max. :45.40 Max. :61.90 Max. :80.0
MPG.city
MPG.highway
Min. :15.00 Min. :20.00
1st Qu.:18.00 1st Qu.:26.00
Median :21.00 Median :28.00
Mean :22.37 Mean :29.09
3rd Qu.:25.00 3rd Qu.:31.00
Max. :46.00 Max. :50.00
AirBags DriveTrain Cylinders
Driver & Passenger:16 4WD :10 3 : 3
Driver only
:43 Front:67 4 :49
None
:34 Rear :16 5 : 2
6 :31
8 :7
rotary: 1
EngineSize
Horsepower
RPM
Min. :1.000 Min. : 55.0 Min. :3800
1st Qu.:1.800 1st Qu.:103.0 1st Qu.:4800
Median :2.400 Median :140.0 Median :5200
Mean :2.668 Mean :143.8 Mean :5281
3rd Qu.:3.300 3rd Qu.:170.0 3rd Qu.:5750
Max. :5.700 Max. :300.0 Max. :6500
Rev.per.mile Man.trans.avail Fuel.tank.capacity
Min. :1320 No :32
Min. : 9.20
1st Qu.:1985 Yes:61
1st Qu.:14.50
Median :2340
Median :16.40
Mean :2332
Mean :16.66
3rd Qu.:2565
3rd Qu.:18.80
Max. :3755
Max. :27.00
Passengers
Length
Wheelbase
Min. :2.000 Min. :141.0 Min. : 90.0
1st Qu.:4.000 1st Qu.:174.0 1st Qu.: 98.0
Median :5.000 Median :183.0 Median :103.0
Mean :5.086 Mean :183.2 Mean :103.9
3rd Qu.:6.000 3rd Qu.:192.0 3rd Qu.:110.0
Max. :8.000 Max. :219.0 Max. :119.0
Width
Turn.circle Rear.seat.room
Min. :60.00 Min. :32.00 Min. :19.00
1st Qu.:67.00 1st Qu.:37.00 1st Qu.:26.00
Median :69.00 Median :39.00 Median :27.50

Mean :69.38 Mean :38.96 Mean :27.83


3rd Qu.:72.00 3rd Qu.:41.00 3rd Qu.:30.00
Max. :78.00 Max. :45.00 Max. :36.00
NA's :2
Luggage.room
Weight
Origin
Min. : 6.00 Min. :1695 USA :48
1st Qu.:12.00 1st Qu.:2620 non-USA:45
Median :14.00 Median :3040
Mean :13.89 Mean :3073
3rd Qu.:15.00 3rd Qu.:3525
Max. :22.00 Max. :4105
NA's :11
Make
Acura Integra: 1
Acura Legend : 1
Audi 100 : 1
Audi 90
:1
BMW 535i : 1
Buick Century: 1
(Other)
:87
> a <- c(1,2,3,4)
> > b <- c(2,4,6,8)
Error: inesperado '>' in ">"
> > levels <- factor(c("A","B","A","B"))
Error: inesperado '>' in ">"
> > bubba <- data.frame(first=a,
Error: inesperado '>' in ">"
>
second=b,
Error: inesperado ',' in "
second=b,"
>
f=levels)
Error: inesperado ')' in "
f=levels)"
> a<-c(1,2,3,4)
> b<-(2,4,6,8)
Error: inesperado ',' in "b<-(2,"
> b<-c(2,4,6,8)
> Levels<-factor(c("A","B","C"))
> Bubba<-data.frame(first=a,second=b,f=levels)
Error en as.data.frame.default(x[[i]], optional = TRUE) :
cannot coerce class ""function"" to a data.frame
> Bubba<-data.frame(first=a,second=b,levels=f)
Error en data.frame(first = a, second = b, levels = f) :
objeto 'f' no encontrado
> Bubba<-data.frame(first=a,second=b,levels=TRUE)
> Bubba
first second levels
1 1
2 TRUE
2 2
4 TRUE
3 3
6 TRUE
4 4
8 TRUE
> summary(bubba)
Error en summary(bubba) : objeto 'bubba' no encontrado
> summary(Bubba)

first
second levels
Min. :1.00 Min. :2.0 Mode:logical
1st Qu.:1.75 1st Qu.:3.5 TRUE:4
Median :2.50 Median :5.0 NA's:0
Mean :2.50 Mean :5.0
3rd Qu.:3.25 3rd Qu.:6.5
Max. :4.00 Max. :8.0
> levels
function (x)
UseMethod("levels")
<bytecode: 0x103880ad0>
<environment: namespace:base>
> mean(bubba)
Error en mean(bubba) : objeto 'bubba' no encontrado
> mean(Bubba)
[1] NA
Mensajes de aviso perdidos
In mean.default(Bubba) : argument is not numeric or logical: returning NA
> mean("Bubba")
[1] NA
Mensajes de aviso perdidos
In mean.default("Bubba") : argument is not numeric or logical: returning NA
> f<-factor(c(1,2,3,4,5,6,6,6,6,6,7,7,8,9))
> results<-table(f)
> results
f
123456789
111115211
> plot(f)
> mean(results)
[1] 1.555556
> mediana(results)
Error: no se pudo encontrar la funci'on "mediana"
> median(results)
5
1
> (5+1)/2
[1] 3
> var(results)
[1] 1.777778
> plot(var(results))
> sd?
+ ?sd
Error en help.search("sd", fields = "sd", package = NULL) :
incorrect field specification
> sd(results)
[1] 1.333333
> plot(sd(Results))
Error en is.data.frame(x) : objeto 'Results' no encontrado
> plot(sd(results))
> ?Sd
No documentation for 'Sd' in specified packages and libraries:

you could try '??Sd'


> ?cor
> cor(results)
Error en cor(results) : supply both 'x' and 'y' or a matrix-like 'x'
> cor(x,y=Results, use=FALSE, use)
Error en cor(x, y = Results, use = FALSE, use) : invalid 'use' argument
> cor(x,y)
[1] 0.9745586
> plot(cor(x,y))
> desv.est
Error: objeto 'desv.est' no encontrado
> ?desv,est
Error: inesperado ',' in "?desv,"
> ?cor
> cor(Results)
Error en is.data.frame(x) : objeto 'Results' no encontrado
> cor(x,y = results)
Error en cor(x, y = results) : incompatible dimensions
> cor(x,y)
[1] 0.9745586
> ?sd
> sd(x, results=TRUE)
Error en sd(x, results = TRUE) : unused argument (results = TRUE)
> sd(f)
[1] 2.243428
> plot(s(f))
Error en plot(s(f)) : no se pudo encontrar la funci'on "s"
> plot(sd(f))
> plot(f)
> point(sd(f))
Error: no se pudo encontrar la funci'on "point"
> point(sd)
Error: no se pudo encontrar la funci'on "point"
> sd(f)
[1] 2.243428
> point(2.243428)
Error: no se pudo encontrar la funci'on "point"
> view(sd(f))
Error: no se pudo encontrar la funci'on "view"
> view(2.24)
Error: no se pudo encontrar la funci'on "view"
> boxplot(f)
Error en boxplot.default(f) :
se agreg'o una clase"factor" a un objeto no v'alido
> mean(f)
[1] NA
Mensajes de aviso perdidos
In mean.default(f) : argument is not numeric or logical: returning NA
> mean(results)
[1] 1.555556
> ds(results)
Error: no se pudo encontrar la funci'on "ds"

> mean(results)
[1] 1.555556
> sd(results)
[1] 1.333333
> summary(results)
Number of cases in table: 14
Number of factors: 1
> stem(results)
The decimal point is at the |
1 | 0000000
2|0
3|
4|
5|0
> ?boxplot
> boxplot("results", data=results)
Error en x[floor(d)] + x[ceiling(d)] :
argumento no-num'erico para operador binario
> plot(stem(results))
The decimal point is at the |
1 | 0000000
2|0
3|
4|
5|0
Error en plot.window(...) : se necesitan valores finitos de 'xlim'
Adem'as: Mensajes de aviso perdidos
1: In min(x) : ning'un argumento finito para min; retornando Inf
2: In max(x) : ningun argumento finito para max; retornando -Inf
3: In min(x) : ning'un argumento finito para min; retornando Inf
4: In max(x) : ningun argumento finito para max; retornando -Inf
> g<-c(1,2,3,4,5,6,7,7,7,8,5,5,5,8,,9,10,10)
Error en c(1, 2, 3, 4, 5, 6, 7, 7, 7, 8, 5, 5, 5, 8, , 9, 10, 10) :
argument 15 is empty
> g<-c(1,2,3,4,5,6,7,7,7,8,5,5,5,8,9,10,10)
> stem(g)
The decimal point is at the |
0|0
2 | 00
4 | 00000
6 | 0000
8 | 000
10 | 00

> plot(stem(g))
The decimal point is at the |
0|0
2 | 00
4 | 00000
6 | 0000
8 | 000
10 | 00
Error en plot.window(...) : se necesitan valores finitos de 'xlim'
Adem'as: Mensajes de aviso perdidos
1: In min(x) : ning'un argumento finito para min; retornando Inf
2: In max(x) : ningun argumento finito para max; retornando -Inf
3: In min(x) : ning'un argumento finito para min; retornando Inf
4: In max(x) : ningun argumento finito para max; retornando -Inf
> summary(g)
Min. 1st Qu. Median Mean 3rd Qu. Max.
1
5
6
6
8
10
> ?summary
> plot(g)
> boxplot(x, ylab=numero de repeticiones)
Error: inesperado entrada in "boxplot(x, ylab="
> boxplot(x, y=numero de repeticiones)
Error: inesperado entrada in "boxplot(x, y="
> boxplot(x,y=results)
> ?plot
> ?sd
> sd(summary)
Error en as.double(x) :
cannot coerce type 'closure' to vector of type 'double'
> sd(g)
[1] 2.622022
> boxplot(x,y="numero de repeticiones")
>g
[1] 1 2 3 4 5 6 7 7 7 8 5 5 5 8 9 10 10
> median(g)
[1] 6
> mean(g)
[1] 6
> sd(g)
[1] 2.622022
> median(g)
[1] 6
> ?mode
> ?cor
> cor(g)
Error en cor(g) : supply both 'x' and 'y' or a matrix-like 'x'
> cor(x,y=results)
Error en cor(x, y = results) : incompatible dimensions
> cor(x,y=g)

Error en cor(x, y = g) : incompatible dimensions


> cor(x,y="g")
Error en cor(x, y = "g") : 'y' must be numeric
>g
[1] 1 2 3 4 5 6 7 7 7 8 5 5 5 8 9 10 10
> median(g)
[1] 6
> mean(g)
[1] 6
> sd(g)
[1] 2.622022
> stem(g)
The decimal point is at the |
0|0
2 | 00
4 | 00000
6 | 0000
8 | 000
10 | 00
> ?stem
> stem(g, scale=1)
The decimal point is at the |
0|0
2 | 00
4 | 00000
6 | 0000
8 | 000
10 | 00
> stem(g, scale=2)
The decimal point is at the |
1|0
2|0
3|0
4|0
5 | 0000
6|0
7 | 000
8 | 00
9|0
10 | 00
> plot(stem(g,scale=2))
The decimal point is at the |

1|0
2|0
3|0
4|0
5 | 0000
6|0
7 | 000
8 | 00
9|0
10 | 00
Error en plot.window(...) : se necesitan valores finitos de 'xlim'
Adem'as: Mensajes de aviso perdidos
1: In min(x) : ning'un argumento finito para min; retornando Inf
2: In max(x) : ningun argumento finito para max; retornando -Inf
3: In min(x) : ning'un argumento finito para min; retornando Inf
4: In max(x) : ningun argumento finito para max; retornando -Inf
> boxplot(x,y="numero de repeticiones", scale=2)
> boxplot(x,y="numero de repeticiones", scale=1)
> boxplot(x,y="numero de repeticiones")
>g
[1] 1 2 3 4 5 6 7 7 7 8 5 5 5 8 9 10 10
> mean(g)
[1] 6
> median(g)
[1] 6
> stem(g, scale=2)
The decimal point is at the |
1|0
2|0
3|0
4|0
5 | 0000
6|0
7 | 000
8 | 00
9|0
10 | 00
> sd(g)
[1] 2.622022

var main = function() {


$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
}

$(document).ready(main);
$('.social li').click(function() {
$(this).toggleClass('active');
});
$(document).keypress(function(event) {
if(event.which === 109) {
$('.dropdown-menu').toggle();
}
});
tercera cosa
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$(document).keypress(function(event) {
if(event.which === 111) {
$('.description').hide();
$('.current').children('.description').show();
}
else if(event.which === 110) {
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
}
});
}
$(document).ready(main);

var myName = "Jordan";


var status = "";
if( myName.length >= 7 ) {
status = "You have a long name!";
}
else {

status = "You have a short name!";


}
var myName = "Michaelangelo";
var status;
if( myName.length >= 15 ) {
status = "You have a very long name!";
}
else if( myName.length >= 7 ) {
status = "You have a long name!";
}
else {
status = "You have a short name!";
}
var main = function() {
$(".like-button").click(function() {
$(this).toggleClass("active");
});
};
$(document).ready(main);

$('.socialli')selectseachsharebuttonatthetopofthewebpage.
The.click()methodattachesaneventhandlertoeachbutton.
TheeventhandleraddstheCSSclass.active,whichchangesthebutton's
backgroundcolortored.
Weuse$(this)torefertotheHTMLelementthatwasclickedon.Wecan
nowoperateonthiselementusing.toggleClass().
Inthepagetotheright,clickinsidethepage,andthenpressanyletteror
numberkey.
Anothercommonusereventisthekeypressevent.Akeypressevent
occurswhenausertypesakeyonthekeyboard.
The.keypress()methodattachesaneventhandlertoanHTMLelementso
thatitcanrespondtoakeypressevent.
$(document)selectsthewholewebpage.The.keypress()methodattaches
aneventhandlertodocument.Whenanykeyboardkeyispressed,the

eventhandlertogglesthedropdownmenu.Puttingitalltogether,when
youpressanykeyboardkey,akeypresseventistriggeredbythebrowser.
Whenthekeypresseventoccurs,the.keypress()methodrunstheevent
handler.
Here,theeventhandlertogglesthedropdownmenu.
<div class="row">
<div class="col-md-6">
<h4>Content 1</h4>
</div>
<div class="col-md-6">
<h4>Content 2</h4>
</div>
</div>

<!DOCTYPEhtml>
<html>
<head>
<linktype="text/css"rel="stylesheet"href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<divid="header">
<divid="navbar">
<ul>
<li>Home</li>
<li>AboutMe</li>
<li>PlansforWorldDomination</li>
<li>Contact</li>
</ul>
</div>

<h2>AboutMe</h2>
</div>
<divid="left">
<imgsrc="http://s3.amazonaws.com/codecademy
blog/assets/puppymain_zps26d178c5.jpg"/>
<p>Iamtheangriestpuppyintheworld.Thishasbeen
scientificallyproveninseveralclinicaltrials.</p>
</div>
<divid="right">
<table>
<thcolspan="3">MyBros</th>
<tr>
<td><img
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
1_zps5666b8e7.jpg"/></td>
<td><img
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
2_zps1539e6b2.jpg"/></td>
<td><img
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
3_zps4692eafa.png"/></td>
</tr>
<tr>
<td><img
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
4_zps63ff5aa8.jpg"/></td>
<td><img
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
5_zps0ee0d2c8.jpg"/></td>
<td><img
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
6_zpsc4450a60.jpg"/></td>
</tr>

<tr>
<td><imgid="bottom_left"
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
7_zps26e8a8d9.jpg"/></td>
<td><img
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
8_zps9a1469be.jpg"></td>
<td><imgid="bottom_right"
src="http://s3.amazonaws.com/codecademyblog/assets/puppy
9_zps3bab7732.jpg"/></td>
</tr>
</table>
</div>
<divid="footer">
<divid="button">
<p>Sendmean<spanclass="bold">email</span>!
</p>
</div>
</div>
</body>
</html>

Вам также может понравиться