2026-01-10 00:23:33 -05:00
import { _ as a , c as s , o as t , ah as i } from "./chunks/framework.j4Nev8bF.js" ; const u = JSON . parse ( '{"title":"Introducing JavaScript","description":"","frontmatter":{},"headers":[],"relativePath":"rebel_coding/step2.md","filePath":"rebel_coding/step2.md"}' ) , n = { name : "rebel_coding/step2.md" } ; function o ( l , e , r , p , h , c ) { return t ( ) , s ( "div" , null , [ ... e [ 0 ] || ( e [ 0 ] = [ i ( ` <h1 id="introducing-javascript" tabindex="-1">Introducing JavaScript <a class="header-anchor" href="#introducing-javascript" aria-label="Permalink to “Introducing JavaScript”"> ’ ’ ’ ’
2026-01-09 23:05:52 -05:00
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > let item3 = & # 39 ; some other string & # 39 ; ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > const newItem = & # 39 ; new string & # 39 ; ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h e f i r s t t w o l i n e s , u s i n g < e m > v a r < / e m > a n d < e m > l e t < / e m > , h a v e t h e s a m e m e a n i n g . E a c h s e t a v a r i a b l e t h a t c a n l a t e r b e c h a n g e d , o r i s < e m > m u t a b l e < / e m > . < / p > < p > O p p o s i n g l y , < e m > c o n s t < / e m > s e t s a v a r i a b l e t h a t < e m > c a n n o t < / e m > b e c h a n g e d , o r i s < e m > i m m u t a b l e < / e m > . < / p > < h 3 i d = " b o o l e a n " t a b i n d e x = " - 1 " > B o o l e a n < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # b o o l e a n " a r i a - l a b e l = " P e r m a l i n k t o “ B o o l e a n ” " > < / a > < / h 3 > < p > B o o l e a n v a l u e s a r e < e m > t r u e / f a l s e < / e m > v a l u e s . < / p > < p > T r a n s l a t e d i n t o m a c h i n e c o d e , v a l u e s a r e e i t h e r a 0 o r 1 . < / p > < p > < c o d e > v a r t a r g e t = t r u e ; < / c o d e > < / p > < p > < s t r o n g > o r < / s t r o n g > < / p > < p > < c o d e > v a r t a r g e t = 1 ; < / c o d e > < / p > < p > N o t i c e t h a t i n J a v a S c r i p t t h e t r u e o r f a l s e v a l u e s a r e s p e l l e d w i t h a l o w e r - c a s e f i r s t - l e t t e r ; t h i s t o o i s s p e c i f i c t o J a v a S c r i p t . < / p > < p > I n P y t h o n t h e T r u e & a m p ; F a l s e n e e d t o b e c a p i t a l i z e d t o b e t r e a t e d a s b o o l e a n v a r i a b l e s . < / p > < h 3 i d = " l i s t s " t a b i n d e x = " - 1 " > L i s t s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # l i s t s " a r i a - l a b e l = " P e r m a l i n k t o “ L i s t s ” " > < / a > < / h 3 > < p > L i s t s a r e a c o l l e c t i o n o f o b j e c t s s e p a r a t e d b y c o m m a s a n d e n c l o s e d b y s q u a r e b r a c k e t s [ ] . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > l e t n e w L i s t = [ & # 3 9 ; s o m e & # 3 9 ; , & # 3 9 ; l i s t & # 3 9 ; , & # 3 9 ; o f & # 3 9 ; , & # 3 9 ; s t r i n g s & # 3 9 ; , [ & # 3 9 ; w i t h a n o t h e r l i s t & # 3 9 ; , & # 3 9 ; w i t h i n & # 3 9 ; , 2 3 5 ] , t r u e , ] ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h e o b j e c t s d o n o t a l l n e e d t o b e o f t h e s a m e t y p e . < / p > < h 5 i d = " l i s t - i n d e x e s " t a b i n d e x = " - 1 " > L i s t I n d e x e s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # l i s t - i n d e x e s " a r i a - l a b e l = " P e r m a l i n k t o “ L i s t I n d e x e s ” " > < / a > < / h 5 > < p > A t t i m e s , o n e m a y w i s h t o o b t a i n a n o b j e c t b y i t s p o s i t i o n i n a l i s t , o r a n o p e r a t i o n o f s i m i l a r e f f e c t . < / p > < p > T h i s w o u l d m e a n , t o o b t a i n o b j e c t s b y t h e i r l i s t i n d e x n u m b e r . < / p > < p > I n b o t h J a v a S c r i p t a n d P y t h o n , l i s t s b e g i n a t 0 . < / p > < p > I n o u r e x a m p l e n e w L i s t f r o m a b o v e , i f I w a n t e d t o g e t t h e f i r s t o b j e c t i n t h e l i s t I w o u l d u s e t h e f o l l o w i n g c o d e : < / p > < p > < c o d e > l e t s p e c i f i c I t e m = n e w L i s t [ 0 ] < / c o d e > < / p > < p > < s t r o n g > I f w e w a n t e d t h e t h i r d o b j e c t < / s t r o n g > < / p > < p > < c o d e > l e t i t e m 3 = n e w L i s t [ 2 ] < / c o d e > < / p > < p > W h y i s t h a t ? < / p > < p > N o t i c e t h a t w e a r e n o t u s i n g q u o t a t i o n s a r o u n d t h i s n u m b e r , a n d t h a t i t i s p l a c e d w i t h s q u a r e - b r a c k e t s . < / p > < p > H o w w o u l d y o u g e t t h e s e c o n d i t e m o f t h e l i s t w i t h i n o u r e x a m p l e l i s t ? < / p > < h 3 i d = " d i c t i o n a r y " t a b i n d e x = " - 1 " > D i c t i o n a r y < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # d i c t i o n a r y " a r i a - l a b e l = " P e r m a l i n k t o “ D i c t i o n a r y ” " > < / a > < / h 3 > < p > D i c t i o n a r i e s a r e a c o l l e c t i o n o f < e m > k e y - v a l u e p a i r s e n c l o s e d b y c u r l y b r a c k e t s < / e m > . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > v a r t a r g e t = { & # 3 9 ; t e x t & # 3 9 ; : & # 3 9 ; s o m e s t r i n g & # 3 9 ; , & # 3 9 ; p u b l i s h e d & # 3 9 ; : f a l s e , & # 3 9 ; c o l o r s & # 3 9 ; : [ & # 3 9 ; r e d & # 3 9 ; , & # 3 9 ; b l u e & # 3 9 ; , ] , } ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > B r e a k i n g t h i s c o d e d o w n , t h e < e m > k e y < / e m > i s d e f i n e d b y a s t r i n g , a n d s e p a r a t e d f r o m t h e < e m > v a l u e < / e m > b y a c o l o n . < / p > < p > E a c h < e m > k e y / v a l u e p a i r < / e m > i s t h e n s e p a r a t e d b y a c o m m a . < / p > < p > T h i s i s a l l e n c l o s e d w i t h i n < e m > c u r l y b r a c k e t s < / e m > { } . < / p > < p > N o t i c e a g a i n h o w t h e v a l u e c a n b e a n y t y p e o f v a r i a b l e . < / p > < h 2 i d = " t h e - m o v i n g - p a r t s " t a b i n d e x = " - 1 " > < a h r e f = " # t h e - m o v i n g - p a r t s " > # < / a > T h e M o v i n g P a r t s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # t h e - m o v i n g - p a r t s " a r i a - l a b e l = " P e r m a l i n k t o “ # T h e M o v i n g P a r t s ” " > < / a > < / h 2 > < h 3 i d = " i f - e l s e - s t a t e m e n t " t a b i n d e x = " - 1 " > I f - E l s e S t a t e m e n t < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # i f - e l s e - s t a t e m e n t " a r i a - l a b e l = " P e r m a l i n k t o “ I f - E l s e S t a t e m e n t ” " > < / a > < / h 3 > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s
< span class = "line" > < span > var display = & quot ; Welcome to Rebel Coding 101 & quot ; ; < / s p a n > < / s p a n >
< span class = "line" > < span > } else if ( x & lt ; z ) { < / s p a n > < / s p a n >
< span class = "line" > < span > var display = & quot ; Welcome to Rebel Coding 102 & quot ; ; < / s p a n > < / s p a n >
< span class = "line" > < span > } else { < / s p a n > < / s p a n >
< span class = "line" > < span > var display = & quot ; We haven & # 39 ; t planned this far ahead yet : / & q u o t ; < / s p a n > < / s p a n >
< span class = "line" > < span > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > R e a d i t o u t - l o u d : < / p > < p > I f < e m > x i s l e s s t h a n y < / e m > , t h e v a r i a b l e < e m > d i s p l a y < / e m > e q u a l s a c e r t a i n s t r i n g . < / p > < p > < e m > E l s e , i f x < / e m > i s n o t l e s s t h a n < e m > y a n d i s l e s s t h a n z < / e m > , < e m > d i s p l a y < / e m > e q u a l s a d i f f e r e n t s t r i n g . < / p > < p > I f < e m > x i s l a r g e r t h a n t h e m a l l , u s i n g t h e e l s e < / e m > s t a t e m e n t , < e m > d i s p l a y < / e m > i s s e t t o e q u a l a t h i r d s t r i n g . < / p > < h 3 i d = " f o r - l o o p " t a b i n d e x = " - 1 " > F o r - L o o p < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # f o r - l o o p " a r i a - l a b e l = " P e r m a l i n k t o “ F o r - L o o p ” " > < / a > < / h 3 > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > f o r ( v a r i = 0 ; i & l t ; 9 ; i + + ) { < / s p a n > < / s p a n >
< span class = "line" > < span > console . log ( i ) ; < / s p a n > < / s p a n >
< span class = "line" > < span > // more statements</span></span>
< span class = "line" > < span > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > R e a d i t o u t : < / p > < p > F o r < e m > v a r i a b l e i < / e m > t h a t e q u a l s z e r o , w h e n < e m > i i s l e s s t h a n 9 , i < / e m > + + . < e m > c o n s o l e . l o g ( i ) ; < / e m > ? < / p > < p > c o n s o l e . l o g ( ) p r i n t s o u t w h a t e v e r i s c o n t a i n e d i n t h e p a r e n t h e s e s . < / p > < p > I n J a v a S c r i p t t h e s h o r t e n e d v e r s i o n t o i n c r e m e n t a v a l u e b y 1 i s < e m > + + < / e m > . < / p > < p > I t ’ s d i f f e r e n t i n P y t h o n ( + = 1 ) . < / p > < p > S e a r c h f o r o t h e r v a r i a t i o n s ; a l s o w h a t s e q u e n c e o f n u m b e r s d o e s t h i s f o r - l o o p p r i n t d o y o u t h i n k ? < / p > < h 3 i d = " f u n c t i o n s " t a b i n d e x = " - 1 " > F u n c t i o n s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # f u n c t i o n s " a r i a - l a b e l = " P e r m a l i n k t o “ F u n c t i o n s ” " > < / a > < / h 3 > < p > F u n c t i o n s a r e w h e r e i t a l l c o m e s t o g e t h e r , i n a s e n s e . < / p > < p > F i r s t w e d e f i n e a n o b j e c t t h a t c o n s u m e s o t h e r o b j e c t s , a n d u s e s t h e m t o c r e a t e a n o u t p u t . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > v a r b l u m p = f u n c t i o n ( p r o p 1 , p r o p 2 ) { < / s p a n > < / s p a n >
< span class = "line" > < span > var a = prop1 < / s p a n > < / s p a n >
< span class = "line" > < span > var b = prop2 < / s p a n > < / s p a n >
< span class = "line" > < span > var c = a / b < / s p a n > < / s p a n >
< span class = "line" > < span > return c < / s p a n > < / s p a n >
< span class = "line" > < span > } ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > blump ( 5 , 3 ) < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > S o l e t & # 3 9 ; s r e a d t h i s o u t - l o u d : < / p > < p > V a r i a b l e < e m > b l u m p < / e m > i s a f u n c t i o n t h a t c o n s u m e s / u s e s t w o o b j e c t s , < e m > p r o p 1 < / e m > a n d < e m > p r o p 2 < / e m > . < / p > < p > W i t h i n o u r f u n c t i o n t h e s e t w o o b j e c t s a r e m a d e i n t o v a r i a b l e s < e m > a a n d b < / e m > , w h i c h a r e t h e n u s e d t o c r e a t e a t h i r d v a r i a b l e < e m > c < / e m > . < / p > < p > T h i s l a s t v a r i a b l e < e m > c < / e m > i s t h e n r e t u r n e d b y o u r f u n c t i o n . < / p > < b l o c k q u o t e > < p > Q N : M a t h e m a t i c a l o p e r a t o r s R e v i e w < / p > < / b l o c k q u o t e > < p > R e m e m b e r w h e n w e m a d e t h e d i s t i n c t i o n b e t w e e n i n t e g e r s a n d f l o a t s ? < / p > < p > H e r e i s w h e r e i t c o m e s i n t o p l a y ; a r i t h m e t i c o p e r a t i o n s a r e n o t n o t a t e d a s y o u m a y h a v e l e a r n e d t h e m i n s c h o o l . < / p > < p > S u r e a d d i t i o n s t i l l u s e s t h e “ + ” s i g n . < / p > < p > S u b t r a c t i o n s t i l l u s e s t h e “ - ” s i g n , a n d d i v i s i o n s t i l l u s e s t h e “ / ” s i g n . < / p > < p > B u t m u l t i p l i c a t i o n u s e s a n a s t e r i s k “ * ” . < / p > < p > W h i l e e x p o n e n t i a t i o n u s e s t h e d o u b l e - a s t e r i s k “ * * ” . < / p > < p > W e a l s o h a v e a n o t h e r o p e r a t o r w e c a n u s e t o f i n d t h e r e m a i n d e r s o f d i v i s i o n . < / p > < p > T h i s i s c a l l e d t h e m o d u l u s o p e r a t o r , “ % ” . < / p > < p > P r e t t y n i f t y , e h . < / p > < h 1 i d = " j q u e r y - t h e - d o m " t a b i n d e x = " - 1 " > j Q u e r y & a m p ; t h e D O M < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # j q u e r y - t h e - d o m " a r i a - l a b e l = " P e r m a l i n k t o “ j Q u e r y & a m p ; t h e D O M ” " > < / a > < / h 1 > < h r > < p > W e h a v e s e e n w i t h C S S t h a t w e c a n m o d i f y t h e a e s t h e t i c s o f o u r w e b p a g e s . B e t h i s b y a d d i n g c o l o r s , c h a n g i n g f o n t s i z e s , a n d o t h e r m o d i f i c a t i o n s . B u t w h a t i f y o u c o u l d & q u o t ; a u t o m a t e t h a t & q u o t ; ? H o w w o u l d y o u d o s u c h a t h i n g ? < / p > < p > F i r s t t h i n g s f i r s t , w e n e e d t o i m p o r t a f e w l i b r a r i e s : < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; s c r i p t s r c = & q u o t ; b o o t s t r a p . m i n . j s & q u o t ; & g t ; & l t ; / s c r i p t & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; script src = & quot ; jquery . min . js & quot ; & gt ; & lt ; / s c r i p t & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h e n , w e n e e d t o < e m > h o o k i n t o < / e m > t h e H T M L s t r u c t u r e , o r t h e D O M , D o c u m e n t O b j e c t M o d e l . < / p > < p > W e d o t h i s u s i n g t h e d o l l a r - s i g n n o t a t i o n , w h i c h i s s p e c i f i c t o j Q u e r y , t h a t a l l o w s u s t o r e a c h i n t o t h e H T M L c o d e a n d m a k e c h a n g e s ! < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; s c r i p t & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > $ ( & quot ; . jobLabel a & quot ; ) . on ( & quot ; click & quot ; , function ( ) { < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > var target = $ ( this ) . attr ( & quot ; rel & quot ; ) ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > $ ( & quot ; # & quot ; + target ) . show ( ) . siblings ( & quot ; div & quot ; ) . hide ( ) ; < / s p a n > < / s p a n >
< span class = "line" > < span > } ) ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / s c r i p t & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > W h i l e t h i s m a y a p p e a r t o b e a c o m p l e x - l o o k i n g f u n c t i o n , l e t & # 3 9 ; s d i s a s s e m b l e i t a n d s e e w h a t & # 3 9 ; s g o i n g o n : < / p > < h 3 i d = " t h e " t a b i n d e x = " - 1 " > T h e $ < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # t h e " a r i a - l a b e l = " P e r m a l i n k t o “ T h e $ ” " > < / a > < / h 3 > < p > T h e d o l l a r - s i g n a l l o w s u s t o a c c e s s t h e D O M . < / p > < p > O n c e i n s i d e t h e D O M , w e c a n i d e n t i f y s p e c i f i c e l e m e n t s a n d c h a n g e t h e m ! < / p > < p > P a r e n t h e s i s c o n t a i n t h i n g s ( < e m > d u h < / e m > ) , a n d c o n t a i n e d i n t h e s e f i r s t p a r e n t h e s i s a r e s e t o f i t e m s s e p a r a t e d b y a s p a c e , < e m > . j o b L a b e l < / e m > a n d < e m > a < / e m > . < / p > < p > W e r e c o g n i z e t h e s y n t a x o f < e m > . j o b L a b e l < / e m > f r o m C S S , a n d d e t e r m i n e t h a t i t i n d i c a t e s a c l a s s , w h i l e t h e < e m > a < / e m > i s a n h t m l t a g ! < / p > < p > S o n o w w e h a v e i d e n t i f i e d a s p e c i f i c s e t o f o b j e c t s o n t h e w e b p a g e / D O M w i t h w h i c h t o w o r k ! < / p > < p > < c o d e > $ ( & # 3 9 ; . j o b L a b e l a & # 3 9 ; ) < / c o d e > w h i c h m e a n s a l l o f t h e < e m > a < / e m > t a g s w i t h t h e c l a s s & # 3 9 ; j o b L a b e l & # 3 9 ; . < / p > < h 3 i d = " i n t e r a c t i v i t y " t a b i n d e x = " - 1 " > I n t e r a c t i v i t y < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # i n t e r a c t i v i t y " a r i a - l a b e l = " P e r m a l i n k t o “ I n t e r a c t i v i t y ” " > < / a > < / h 3 > < p > N o w t h a t w e h a v e t h e o b j e c t s d i s c e r n e d , w h a t d o w e d o w i t h t h e m ? ! < / p > < p > T h e r e i s a p e r i o d a f t e r o u r p a r e n t h e t i c a l s t a t e m e n t , f o l l o w e d b y t h e w o r d < e m > o n < / e m > , a n d a n o t h e r s e t o f p a r e n t h e s e s . < / p > < p > T h i s i s c a l l e d & q u o t ; c h a i n i n g & q u o t ; o p e r a t i o n s . < / p > < p > W e h a v e a n a c t i o n , o r s e t o f a c t i o n s : . o n ( & # 3 9 ; c l i c k & # 3 9 ; , f u n c t i o n ( ) { } ) ; < / p > < p > T o t r a n s l a t e , w h a t w e h a v e s o f a r $ ( & # 3 9 ; . j o b L a b e l a & # 3 9 ; ) . o n ( & # 3 9 ; c l i c k & # 3 9 ; , f u n c t i o n ( ) { } ) ; : < / p > < p > F o r a l l < e m > a < / e m > t a g s w i t h t h e c l a s s & q u o t ; j o b L a b e l & q u o t ; . . . w h e n t h e e l e m e n t i s c l i c k e d p e r f o r m t h e f o l l o w i n g f u n c t i o n . < / p > < h 3 i d = " a c t i n g " t a b i n d e x = " - 1 " > A c t i n g < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # a c t i n g " a r i a - l a b e l = " P e r m a l i n k t o “ A c t i n g ” " > < / a > < / h 3 > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > v a r t a r g e t = $ ( t h i s ) . a t t r ( & q u o t ; r e l & q u o t ; ) ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > $ ( & quot ; # & quot ; + target ) . show ( ) . siblings ( & quot ; div & quot ; ) . hide ( ) ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > W i t h i n t h i s f u n c t i o n w e d e c l a r e a n d d e f i n e a v a r i a b l e c a l l e d < e m > t a r g e t < / e m > . < / p > < p > N e x t , w e s e t t h i s v a r i a b l e u s i n g o u r d o l l a r - s i g n , w h i l e s p e c i f y i n g a s p e c i f i c p r o p e r t y a t t r i b u t e , < e m > r e l < / e m > . < / p > < p > T h i s a t t r i b u t e v a l u e i s t h e n u s e d t o i d e n t i f y a t h i r d o b j e c t . < / p > < p > F i n a l l y , w e h a v e o u r a c t i o n . < / p > < p > T o < e m > s h o w < / e m > o u r s e l e c t e d i t e m , w h i l e < e m > h i d i n g < / e m > a l l o f i t s < e m > s i b l i n g s < / e m > . < / p > < p > W i t h i n t h e f u n c t i o n w e a r e a b l e t o a f f e c t , a n d c h a n g e , t h e D O M . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > v a r t a r g e t = $ ( t h i s ) . a t t r ( & # 3 9 ; r e l & # 3 9 ; ) ; < / s p a n > < / s p a n >
< span class = "line" > < span > $ ( & quot ; # & quot ; + target ) . show ( ) . siblings ( & quot ; div & quot ; ) . hide ( ) ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > N o t i c e h o w e a c h l i n e e n d s w i t h a s e m i c o l o n . < / p > < p > A n d h o w e a c h p a r e n t h e t i c a l s t a t e m e n t , o r b r a c k e t e d s t a t e m e n t , i s c l o s e d . < / p > < p > L a s t l y , I w a n t u s t o n o t i c e t h e u s e o f s h o w ( ) a n d h i d e ( ) . < / p > < p > W h i l e o t h e r p a r e n t h e s e s h a v e i t e m s w i t h i n t h e m , t h e s e p a r e n t h e s e s a r e l e f t e m p t y . . . < / p > < p > I n t h i s i n s t a n c e t h e p a r e n t h e s i s a r e i d e n t i f y i n g a f u n c t i o n t h a t i s t o b e p e r f o r m e d , a n d r e q u i r e s n o p a r a m e t e r s < / p > < h 1 i d = " i m p o r t i n g - e x t e r n a l - s c r i p t s - c d n - s " t a b i n d e x = " - 1 " > I m p o r t i n g E x t e r n a l S c r i p t s & a m p ; C D N ’ s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # i m p o r t i n g - e x t e r n a l - s c r i p t s - c d n - s " a r i a - l a b e l = " P e r m a l i n k t o “ I m p o r t i n g E x t e r n a l S c r i p t s & a m p ; C D N ’ s ” " > < / a > < / h 1 > < h r > < p > E a r l i e r w e j u s t p u l l e d i n B o o t s t r a p a n d j Q u e r y f r o m o u r l o c a l f o l d e r s … t h i s w a s e a s y . < / p > < p > T h o u g h m o s t o f t h e t i m e w e w i l l n e e d t o , o r w a n t t o , p u l l s c r i p t s f r o m e x t e r n a l s o u r c e s , o n e t y p e o f w h i c h a r e c a l l e d C D N ’ s , o r c o n t e n t d e l i v e r y n e t w o r k s . < / p > < p > T h e s e a r e l o c a t i o n s t h a t c o n t a i n o u r n e c e s s a r y f i l e s p r e - p a c k a g e d a n d r e a d y t o b e e x p e d i t e d , s u p e r - q u i c k l y , t o o u r p r o d u c t i o n w e b s i t e s . < / p > < p > < a h r e f = " h t t p s : / / c o d e . j q u e r y . c o m / " t a r g e t = " _ b l a n k " r e l = " n o r e f e r r e r " > j Q u e r y C D N < / a > < / p > < p > < a h r e f = " h t t p s : / / w w w . b o o t s t r a p c d n . c o m / " t a r g e t = " _ b l a n k " r e l = " n o r e f e r r e r " > B o o t s t r a p C D N < / a > < / p > ` , 1 2 5 ) ] ) ] ) } c o n s t m = a ( n , [ [ " r e n d e r " , o ] ] ) ; e x p o r t { u a s _ _ p a g e D a t a , m a s d e f a u l t } ;
