From cb9e359a51c3249d8f5157db69d43fd413ddeda6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:12 +0100 Subject: unslug ca: move --- .../cascade_and_inheritance/index.html | 151 +++++ .../learn/css/building_blocks/index.html | 342 ++++++++++ .../learn/css/building_blocks/selectors/index.html | 456 +++++++++++++ .../css/building_blocks/styling_tables/index.html | 475 ++++++++++++++ .../building_blocks/values_and_units/index.html | 354 ++++++++++ .../ca/conflicting/learn/css/css_layout/index.html | 383 +++++++++++ .../first_steps/how_css_is_structured/index.html | 174 +++++ .../learn/css/first_steps/how_css_works/index.html | 130 ++++ .../index.html | 111 ++++ .../index.html | 120 ++++ .../conflicting/learn/css/first_steps/index.html | 56 ++ .../learn/css/styling_text/fundamentals/index.html | 162 +++++ .../css/styling_text/styling_lists/index.html | 276 ++++++++ files/ca/conflicting/web/guide/index.html | 101 +++ .../reference/global_objects/boolean/index.html | 118 ++++ .../reference/global_objects/dataview/index.html | 147 +++++ .../reference/global_objects/date/index.html | 222 +++++++ .../reference/global_objects/error/index.html | 151 +++++ .../reference/global_objects/evalerror/index.html | 124 ++++ .../reference/global_objects/map/index.html | 126 ++++ .../reference/global_objects/number/index.html | 126 ++++ .../reference/global_objects/object/index.html | 215 ++++++ .../reference/global_objects/set/index.html | 124 ++++ .../global_objects/syntaxerror/index.html | 122 ++++ .../reference/global_objects/weakmap/index.html | 133 ++++ .../reference/global_objects/weakset/index.html | 132 ++++ .../web/javascript/reference/operators/index.html | 287 ++++++++ .../index.html | 719 +++++++++++++++++++++ .../index.html | 302 +++++++++ 29 files changed, 6339 insertions(+) create mode 100644 files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/ca/conflicting/learn/css/css_layout/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/index.html create mode 100644 files/ca/conflicting/learn/css/styling_text/fundamentals/index.html create mode 100644 files/ca/conflicting/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ca/conflicting/web/guide/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/date/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/error/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/map/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/set/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html (limited to 'files/ca/conflicting') diff --git a/files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..b7bf86a77f --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,151 @@ +--- +title: Cascada i herència +slug: Web/Guide/CSS/Inici_en_CSS/Cascada_i_herència +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Com funciona el CSS")}}Aquesta és la quarta secció del tutorial CSS Getting Started ; descriu com els fulls d'estil interactuenen en cascada, i com els elements hereten l'estil dels seus pares. S'agrega a la vostre fulla d'estils d'exemple, utilitzant l'herència per alterar l'estil de moltes parts del document en un sol pas.

+ +

Informació: Cascada i herència

+ +

L'estil final per a un element es pot especificar en molts llocs diferents, que poden interactuar d'una manera complexa. Aquesta interacció complexa fa que el CSS sigui de gran abast, però també pot fer que sigui confús i difícil de depurar.

+ +

Tres fonts principals d'informació d'estil formen una cascada. Aqueste son:

+ + + +

L'estil de l'usuari modifica l'estil per defecte del navegador. L'estil de l'autor del document modifica l'estil una mica més. En aquest tutorial, vosaltres sou l'autor del document d'exemple, i només es treballa amb fulls d'estil d'autor.

+ +
+
Exemple
+ +

Quan llegiu aquest document en un navegador, part de l'estil que es veu prové dels valors per defecte del navegador per HTML.

+ +

Part de l'estil podria venir de la configuració del navegador a mida o un arxiu de definició d'estil personalitzat. A Firefox, la configuració es pot personalitzar en el quadre de diàleg Preferències, o es pot especificar estils en un arxiu userContent.css arxiu anomenat en el vostre perfil de navegador.

+ +

Part de l'estil prové de les fulles d'estil vinculades al document per part del servidor.

+
+ +

En obrir el document d'exemple en el navegador, els elements {{ HTMLElement("strong") }} destacan més que la resta del text. Això ve de l'estil per defecte del navegador per HTML.

+ +

Els elements {{ HTMLElement("strong") }} són de color vermell. Això ve de la pròpia fulla d'estils d'exemple.

+ +

Els elements {{ HTMLElement("strong") }} també hereten gran part de  l'estil de l'element {{HTMLElement ("p")}}, perquè són els seus fills. De la mateixa manera, l'element {{ HTMLElement("p") }} hereta gran part de l'estil de l'element {{ HTMLElement("body") }}.

+ +

Per estils en cascada, els fulls d'estil d'autor tenen prioritat, a continuació els fulls d'estil del lector i seguidament els valors per defecte del navegador.

+ +

Per estils heretats, l'estil propi d'un node fill té prioritat sobre l'estil heretat del seu pare.

+ +

Aquestes no són les úniques prioritats que s'apliquen. Una pàgina més endavant en aquest tutorial s'explica més.

+ +
+
Més detalls
+ +

CSS proporciona una manera perquè el lector pugui anul·lar l'estil de l'autor del document, mitjançant l'ús de la paraula clau !important.

+ +

Això vol dir que, com a autor del document, no sempre es pot predir amb exactitud el que els vostres lectors veuran.

+ +

Si vols conèixer tots els detalls de cascada i herència, consulteu Assignació de valors de les propietats, Cascada i herència en l'especificació CSS.

+
+ +

Acció: L'ús de l'herència

+ +
    +
  1. Edita l'arxiu CSS d'exemple.
    2. +
  2. Afegir aquesta línia copiant-la i enganxant-la. Realment no importa si l'afegeixes per damunt o per sota de la línia ja existent. No obstant això, afegir-la en la part superior és el mes lògic, ja que en el document  l'element {{ HTMLElement("p") }} és el pare de l'element {{ HTMLElement("strong") }}: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Actualitzar el navegador per veure l'efecte en el document d'exemple. El subratllat afecta a tot el text en el paràgraf, incloent les lletres inicials. Els elements {{ HTMLElement("strong") }} han hagut d'heretar l'estil subratllat del seu pare, l'element {{ HTMLElement("p") }}.
    + +

    Però els elements {{ HTMLElement("strong") }} estan sent vermells. El color vermell correspont el seu propi estil, pel que té prioritat sobre el color blau del seu pare, l'element {{ HTMLElement("p") }}.

    +
    4. +
+ +

Abans

+ +

Contingut HTML

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Contingut CSS

+ +
strong {color:red}
+
+ +

{{ EmbedLiveSample('Before') }}

+ +

Després

+ +

Contingut HTML

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+ +

Contingut CSS

+ +
p {color:blue; text-decoration:underline}
+strong {color:red}
+ +

{{ EmbedLiveSample('After') }}

+ +

 

+ +
+
Repte
+Modifiqueu el full d'estils perquè només les lletres vermelles estiguin subratllades: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Veure la solució per el repte.
+ +

 

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}El full d'estils d'exemple especifica els estils per a les etiquetes <p> i <strong>, modificant l'estil dels elements corresponents a tot el document. La següent secció descriu com especificar l'estil de manera més selectiva.

diff --git a/files/ca/conflicting/learn/css/building_blocks/index.html b/files/ca/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..39d411bb19 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,342 @@ +--- +title: Caixes +slug: Web/Guide/CSS/Inici_en_CSS/Caixes +tags: + - Basic + - Beginner + - CSS + - CSS Borders + - CSS Margin + - CSS Padding + - 'CSS:Getting_Started' + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial CSS Getting Started descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.

+ +

Informació: Caixes

+ +

Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.

+ +

Al mig, és l'espai que l'element necessita per mostrar el seu contingut. Al voltant d'això, hi ha un padding (farciment). Al voltant d'això, hi ha un border (vora). Al voltant d'això, hi ha un margin (marge) que separa l'element d'altres elements.

+ + + + + + + + +
+
+

margin (marge)

+ +

border (vora)

+ +
+

padding (farciment)

+ +
+

element

+
+
+
+ +

El gris pàl·lid mostra parts de la disposició.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Això és el que es veu en el vostre navegador.

+
+ +

El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.

+ +

Acolorir

+ +

El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

L'element té un fons verd.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Això és el que es veu en el vostre navegador.

+
+ +

Vores

+ +

Podeu utilitzar les vores per decorar elements amb línies o caixes.

+ +

Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.

+ +

Els estils són:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

També podeu establir l'estil a none o hidden per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.

+ +

Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.

+ +
+
Exemple
+ +

Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

El resultat és el següent:

+ + + + + + + +
+

Stylish heading

+
+ +

Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:

+ +
img {border: 2px solid #ccc;}
+
+ +

El resultat és el següent:

+ + + + + + + + +
Imatge:Image:Blue-rule.png
+
+ +

Marges i farciment

+ +

Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.

+ +

Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.

+ +

Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).

+ +

Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.

+ +

Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.

+ +
+
Exemple
+ +

Aquesta regla distingeix els paràgrafs amb la classe remark, donant-los una vora vermella al seu voltant.

+ +

El farciment al seu voltant separa la vora del text una mica.

+ +

Un marge esquerre sagna el paràgraf en relació amb la resta del text:

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

El resultat és el següent:

+ + + + + + + +
+

Here is a normal paragraph.

+ +

Here is a remark.

+
+
+ +
+
Més detalls
+ +

Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.

+ +

Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.

+ +

Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.

+ +

Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència Model de caixa.

+
+ +

Acció: Afegir vores

+ +

Editeu l'arxiu CSS, style2.css. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

Actualitzeu el navegador per veure el resultat:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
Repte
+ +

Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)

+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el disseny del vostre document d'altres maneres.

diff --git a/files/ca/conflicting/learn/css/building_blocks/selectors/index.html b/files/ca/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..a3e8534ee5 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,456 @@ +--- +title: Selectors +slug: Web/Guide/CSS/Inici_en_CSS/Selectors +tags: + - Beginner + - CSS + - CSS Selector + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència")}}Aquesta 5th secció del tutorial CSS Getting Started; s'explica com es poden aplicar estils de forma selectiva, i com els diferents tipus de selectors tenen diferents prioritats. Afegir alguns atributs a les etiquetes en el document d'exemple, i utilitzar aquests atributs en el full d'estils d'exemple.

+ +

Informació: Selectors

+ +

CSS té la seva pròpia terminologia per descriure el llenguatge CSS. Anteriorment en aquest tutorial, heu creat una línia al full d'estils com aquesta:

+ +
strong {
+  color: red;
+}
+
+ +

En la terminologia de CSS, tota aquesta línia és una regla. Aquesta regla s'inicia amb strong, que és un selector (o una llista de selectors). Es selecciona quins elements del DOM s'aplica la regla.

+ +
+
Més detalls
+ +

La part dins de les claus és la declaració.

+ +

L'identificador color és una propietat, i el vermell és un valor.

+ +

El punt i coma després del parell propietat-valor fa de separació d'altres parells propietat-valor en la mateixa declaració.

+ +

En aquest tutorial es refereix a un selector com strong com un selector d'etiquetes. L'especificació CSS es refereix a ell com un selector de tipus.

+
+ +

Aquesta pàgina del tutorial explica més sobre els selectors que es poden utilitzar en les regles CSS.

+ +

A més dels noms de les etiquetes, podeu utilitzar els valors dels atributs en els selectors. Això permet que les regles siguin més específiques.

+ +

Dos atributs tenen un estatus especial per CSS. Són class i id.

+ +

Selectors class

+ +

Utilitzeu l'atribut class en un element per assignar l'element un nom de classe. Depèn de vosaltres el nom que trieu per a la classe. Múltiples elements d'un document poden tenir el mateix valor de classe.

+ +

En el full d'estil, escriviu un punt (. punt) abans del nom de la classe, quan s'utilitza en un selector.

+ +

Selectors ID

+ +

Utilitzeu l'atribut id en un element per assignar un identificador a l'element. Depèn de vosaltres el nom que trieu per a l'identificador. El nom de l'identificador ha de ser únic en el document.

+ +

En el full d'estil, escriviu un signe (# hash) abans de l'identificador quan s'utilitza en un selector.

+ +
+
Exemple
+Aquesta etiqueta HTML té tant un atribut class com un atribut id: + +
<p class="key" id="principal">
+
+ +

El valor id, principal, ha de ser únic en el document, però altres etiquetes en el document poden tenir el mateix nom de la class, key.

+ +

En un full d'estil CSS, aquesta regla fa que tots els elements amb la class key siguin verds. (Pot ser que no tots siguin elements {{ HTMLElement("p") }}.)

+ +
.key {
+  color: green;
+}
+
+ +

Aquesta regla fa que l'únic element amb el id principal sigui negreta:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Selectors d'atributs

+ +

No està limitat als dos atributs especials, class i id. Podeu especificar altres atributs mitjançant claudàtors. Dins dels claudàtors es posa el nom de l'atribut, opcionalment seguit d'un operador coincident i un valor. A més, es pot fer entre majúscules i minúscules afegint una "i" després del valor, però no molts navegadors són compatibles amb aquesta funció fins al moment. Exemples:

+ +
+
[disabled]
+
Selecciona tots els elements amb un atribut "disabled".
+
[type='button']
+
Selecciona els elements amb un tipus "button".
+
[class~=key]
+
Selecciona elements amb la class "key" (però no, per exemple, "keyed", "monkey", "buckeye"). Funcionalment equivalent a .key.
+
[lang|=es]
+
Selecciona els elements especificats com espanyol. Això inclou "es" i "es-MX", però no "eu-ES" (que és basca).
+
[title*="example" i]
+
Selecciona elements title els quals conté "example", ignorant majúscules i minúscules . En els navegadors que no admeten l'indicador "i", aquest selector probablement no coincidirà amb cap element.
+
a[href^="https://"]
+
Especifica com ha de començar el valor de l'atribut; en aquest cas, es selecciona enllaços segurs.
+
img[src$=".png"]
+
Selecciona elements el valor dels quals finalitza amb la cadena proporcionada. Indirectament selecciona imatges PNG; les imatges són PNGs però la URL de les quals no acabi en ".png" no seràn seleccionades (e.g. `src="some-image.png?_=cachebusterhash"`).
+
+ +

Selectors de pseudo-classes

+ +

Un pseudo-classe CSS és una paraula clau afegida als selectors que especifica un estat especial de l'element a seleccionar. Per exemple {{ Cssxref(":hover") }} aplicarà un estil quan l'usuari es desplaci sobre l'element especificat pel selector.

+ +

Les pseudo-classes, juntament amb els pseudo-elements, permeten aplicar un estil a un element no només en relació amb el contingut de l'estructura del document, sinó també en relació als factors externs com l'historial del navegador ({{ cssxref(":visited") }}, per exemple), l'estat del seu contingut (com {{ cssxref(":checked") }} en alguns elements de formulari), o la posició del ratolí (com {{ cssxref(":hover") }} que permet saber si el ratolí està sobre un element o no). Per veure una llista completa dels selectors, visiteu especificació CSS3 Selectors working.

+ +
+
Sintaxi
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Llista de pseudo-classes

+ + + +

Llista de selectors

+ +

Una regla pot ser compartida per molts selectors mitjançant una coma (,) per separar els selectors.

+ +
+
Exemple
+En l'exemple, ambdós elements que tenen la classe "content-1" i elements que tenen la classe "content-2" per visualitzar el text en negreta. + +
.content-1, .content-2 {
+  font-weight: bold;
+}
+
+
+ +

Informació: Especificitat

+ +

Diverses regles poden tenir selectors que coincideixin amb el mateix element. Si una propietat es dóna en una sola regla, no hi ha conflicte i la propietat s'estableix en l'element. Si més d'una regla s'aplica a un element i estableix la mateixa propietat, llavors CSS dóna prioritat a la regla que té el selector més específic. Un selector de ID és més específic que una classe, pseudo-classe o selector d'atribut, que al seu torn són més específics que un selector d'etiquetes o pseudo-element.

+ +
+
Més detalls
+ +

També es poden combinar selectors, fent un selector més específic. Per exemple, el selector .key selecciona tots els elements que tenen el nom de classe key. El selector p.key selecciona només elements {{ HTMLElement("p") }} que tenen el nom de classe key.

+
+ +

Si el full d'estil té un conflicte de regles i són igualment específiques, llavors CSS doneu prioritat a la regla que és més posterior en el full d'estil.

+ +

Quan tingueu un problema amb regles en conflicte, tracteu de resoldre-ho fent una de les regles més específiques, de manera que tingui prioritat. Si no podeu fer-ho, tracteu de moure una de les regles el més prop del final de la fulla d'estils perquè tingui prioritat.

+ +

Informació: Els selectors basats en relacions

+ +

CSS té algunes maneres de seleccionar elements en funció de les relacions entre els elements. Podeu utilitzar aquests per fer selectors que siguin més específics.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Selectors comuns basats en les relacions
SelectorSeleccions
A EQualsevol element E que és un descendent d'un element A (que és: un fill, o un fill d'un fill, etc.)
A > EQualsevol element E que és un fill (és a dir, descendent directe) d'un element A
E:first-childQualsevol element E que és el primer fill del seu pare
B + EQualsevol element E que és el següent germà d'un element B (és a dir: el següent fill del mateix pare)
+ +

Es poden combinar aquests per expressar relacions complexes.

+ +

També es pot utilitzar el símbol * (asterisc) en el sentit de "qualsevol element".

+ +
+
Exemple
+ +

Una taula HTML té un atribut id, però les seves files i cel·les no tenen identificadors individuals:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Aquestes regles fan que la primera cel·la de cada fila estigui subratllat, i el germà de la primera cel·la de cada fila estigui tachat (en l'exemple la 2a cel·le). Només afecta a una taula específica en el document:

+ +
    #data-table-1 td:first-child {text-decoration: underline;}
+    #data-table-1 td:first-child + td {text-decoration: line-through;}
+
+ +

Aquest és el resultat:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Més detalls
+ +

En la forma habitual, si feu un selector més específic, llavors s'augmenta la seva prioritat.

+ +

Si utilitzeu aquestes tècniques, s'evita la necessitat d'especificar els atributs class o id en tantes etiquetes en el document. En el seu lloc, CSS fa la feina.

+ +

En grans dissenys on la velocitat és important, podeu fer que les vostres fulles d'estil siguin més eficients, evitant regles complexes que depenen de les relacions entre els elements.

+ +

Per a més exemples sobre taules, consulteu Taules en la pàgina Referència CSS..

+
+ +

Acció: Ús dels selectors class i ID

+ +
    +
  1. Editeu l'arxiu HTML, i duplicar el paràgraf copiant i enganxant.
    2. +
  2. A continuació, afegir els atributs id i class a la primera còpia, i un atribut id a la segona còpia com es mostra a continuació. Com a alternativa, copiar i enganxar tot l'arxiu de nou: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Ara editeu el fitxer CSS. Substituir tot el contingut per: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Guardeu els arxius i actualitzar el navegador per veure el resultat: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Podeu tractar de reordenar les línies de l'arxiu CSS per mostrar que l'ordre no té efecte.

    + +

    Els selectors class .carrot i .spinach tenen prioritat sobre el selector d'etiqueta strong.

    + +

    El selector ID #first té prioritat sobre els selectors class i tag.

    +
    5. +
+ +
+
Reptes
+ +
    +
  1. Sense canviar el arxiu HTML, afegiu una sola regla a l'arxiu CSS que mantingui totes les lletres inicials en el mateix color que estan ara, però faci que tot l'altre text en el segon paràgraf sigui blau: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ara canvieu la regla que acabeu d'afegir (sense canviar res més), per fer el primer paràgraf també blau: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+Veure la solució per el repte.
+ +

Acció: L'ús de selectors de pseudo-classes

+ +
    +
  1. Creeu un arxiu HTML amb el següent contingut: + + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Ara editeu el fitxer CSS. Substituir tot el contingut per: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Guardeu els arxius i actualitzar el navegador per veure el resultat (posar el ratolí sobre el següent enllaç per veure l'efecte): + + + + + + +
    Anem-nos  Home page  
    +
    4. +
+ +

Acció: L'ús de selectors basats en les relacions i pseudo-classes

+ +

Amb els selectors basats en relacions i pseudo-classes es poden crear complexes algoritmes en cascada. Aquesta és una tècnica comuna que s'utilitza, per exemple, amb la finalitat de crear menús desplegables en CSS pur (això només és CSS, sense necessitat d'utilitzar JavaScript). L'essència d'aquesta tècnica és la creació d'una regla com la següent:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

per a ser aplicat a una estructura HTML com la següent:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Vegeu el exemple complet d'un menú desplegable basat en CSS com a possible referència.

+ +

I ara què?

+ +

La vostre fulla d'estils, d'exemple, està començant a semblar densa i complicada. La següent secció descriu la manera de fer més fàcil de llegir la CSS.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}}

diff --git a/files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..d7875ae370 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,475 @@ +--- +title: Taules +slug: Web/Guide/CSS/Inici_en_CSS/Taules +tags: + - CSS + - CSS Tables + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

{{CSSTutorialTOC}}{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny")}}

+ +

Aquesta és la 13th secció del tutorial CSS Getting Started tutorial; descriu selectors més avançats, i algunes formes específiques en el disseny de taules. Es crea un nou document d'exemple que conté una taula, i un full d'estil per a això.

+ +

Informació: Taules

+ +

Una taula és una disposició de la informació en una reixeta rectangular. Algunes taules poden ser complexes, i per a taules complexes, diferents navegadors poden donar resultats diferents.

+ +

En dissenyar el vostre document, utilitzeu una taula per expressar les relacions entre els elements d'informació. Llavors no importa si els diferents navegadors presenten la informació de manera lleugerament diferent, ja que el significat segueix sent clar.

+ +

No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (Disseny) són millors per a aquest propòsit.

+ +

Estructura de la taula

+ +

En una taula, cada peça d'informació es mostra en una cel·la.

+ +

Les cel·les en una línia de la pàgina constitueix una fila.

+ +

En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la capçalera (header). Un grup especial de files al final de la taula és el peu de pàgina (footer). Les principals files de la taula són el cos (body), i que també podrien estar en grups.

+ +

Les cel·les en una línia de la pàgina conformen una columna, però les columnes tenen un ús limitat en la CSS de les taules.

+ +
+
Exemple
+ +

La taula de Selectors basats en relacion en la pàgina Selectors té deu cel·les en cinc files.

+ +

La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.

+ +

Té dues columnes.

+
+ +

Aquest tutorial només cobreix taules simples, on els resultats són bastant predictibles. En una taula simple, cada cel·la ocupa només una fila i columna. Es pot utilitzar CSS per a taules complexes en les cel·les que s'estenen (s'estenen a través) més d'una fila o columna, però les taules com aquestes estan més enllà de l'abast d'aquest tutorial bàsic.

+ +

Vores

+ +

Les cel·les no tenen marges.

+ +

Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat {{cssxref("border-spacing")}} de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat {{cssxref ("border-collapse")}} de la taula a col·lapsar (collapse).

+ +
+
Exemple
+ +

Aquí hi ha tres taules.

+ +

La taula de l'esquerra té 0,5 em espaiat de vores. La taula del centre té espaiat de vores zero. La taula de la dreta ha col·lapsat les vores:

+ + + + + + + + +
+ +

{{embedLiveSample('Borders', 600)}}

+
+ +

Llegendes

+ +

Un element {{HTMLElement("caption")}} és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.

+ +

Per moure'l a la part inferior, establiu la seva  propietat {{cssxref("caption-side")}} a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.

+ +

Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.

+ +
+
Exemple
+ +

Aquesta taula té una llegenda a la part inferior.

+ +
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + +

{{embedLiveSample('Captions', 300)}}

+
+ +

Cel·les buides

+ +

Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant {{cssxref("empty-cells")}}: show; per a l'element de la taula.

+ +

Es poden amagar mitjançant l'especificació empty-cells: hide;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.

+ +
+
Exemple
+ +

Aquestes taules tenen un fons de color verd pàl·lid. Les seves cel·les tenen un fons gris clar i unes vores gris fosc.

+ +

A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:

+ + + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+ +
+
Detalls
+ +

Per obtenir informació detallada sobre les taules, vegeu Taules en l'especificació CSS.

+ +

La informació no va més enllà d'aquest tutorial, però no cobreix les diferències entre els navegadors que poden afectar a taules complexes.

+
+ +

Acció: Estil d'una taula

+ +
    +
  1. Feu un nou document HTML, doc3.html. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    2. +
  2. Feu un nova fulla d'estil, style3.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:
    + {{EmbedLiveSample("Action_Styling_a_table", 400, 380)}}
    4. +
  4. Compareu les regles de la fulla d'estil amb la taula que es mostra, per assegurar-se que compreneu l'efecte de cada regla. Si trobeu una regla que no esteu segur sobre ella, comentar-la i refresqueu el navegador per veure què passa. Aquí hi ha algunes notes sobre aquesta taula: +
      +
    • La llegenda es troba fora de la vora de la taula.
      • +
    • Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km2.
      • +
    • Hi ha tres cel·les buides. Dos d'elles permeten mostrar el fons de la taula a través. El tercer té un fons i una vora superior.
      • +
    • Els dos punts son afegits per la fulla d'estil.
      • +
    +
    5. +
+ +
+
Repte
+ +

Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:

+ + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+ +

Oceans

+
+
+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Aquesta és l'última pàgina d'aquest tutorial que se centra en les propietats i els valors CSS. Per a un resum complet de les propietats i valors, vegeu Taula de propietats completa en l'especificació CSS

+ +

En la següent pàgina es veu de nou el propòsit i l'estructura de les fulles d'estil CSS.

diff --git a/files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..ba607aab18 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,354 @@ +--- +title: Color +slug: Web/Guide/CSS/Inici_en_CSS/Color +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estils de text")}}Aquesta és la 8th secció del tutorial CSS Getting Started tutorial;explica com especificar el color en CSS. En la vostre fulla d'estil d'exemple, s'introdueix colors de fons.

+ +

Informació: Color

+ +

En aquest tutorial fins al moment, s'ha utilitzat un nombre limitat de colors amb nom. CSS2 suporta 17 colors amb nom en tots. Alguns dels noms pot ser que no sigui l'esperat:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 negre (black) gris (gray) plata (silver) blanc (white) 
primarisvermell (red) Llima (lime) blau (blue) 
secundarisgroc (yellow) aigua (aqua) fúcsia (fuchsia) 
 marró (maroon) taronge (orange) oliva (olive) porpra (purple) verd (green) blau marí (navy) verd blavós (teal) 
+ +

 

+ +
+
Detalls
+ +

El vostre navegador pot suportar molts més colors amb nom, com:

+ + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Per a més detalls d'aquesta llista ampliada, consulteu: SVG color keywords en CSS 3 mòdul de colors. Aneu amb compte d'utilitzar noms de colors que els lectors dels navegadors no siguin compatibles.

+
+ +

Per a una paleta gran, especifiqueu els components vermell, verd i blau del color que desitgeu mitjançant l'ús d'un signe de nombre (hash) i tres dígits hexadecimals en el rang de 0 - 9, a - f. Les lletres a - f representen els valors de 10 - 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
negre (black) #000
vermell (pure red) #f00
verd (pure green) #0f0
blau (pure blue) #00f
blanc (white) #fff
+ +


+ Per a la paleta completa, especificar dos dígits hexadecimals per a cada component:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
negre (black) #000000
vermell (pure red) #ff0000
verd (pure green) #00ff00
blau (pure blue) #0000ff
blanc (white) #ffffff
+ +

Normalment, es poden obtenir aquests codis hexadecimals de sis dígits d'un programa de gràfics o alguna altra eina.

+ +
+
Exemple
+ +

Amb una mica de pràctica, podeu ajustar els colors de tres dígits manualment per a la majoria de propòsits:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comenceu amb el vermell pur : #f00
Perquè sigui més clar, afegir una mica de verd i blau : #f77
Perquè sigui més taronja, afegir una mica de verd addicional: #fa7
Per enfosquir, reduir tots els seus components: #c74
Per reduir la saturació, fer els seus components més iguals: #c98
Si feu tots ells exactament iguals, s'obté gris: #ccc
+ +

Per un to pastís com el blau pàl·lid:

+ + + + + + + + + + + + + + +
Comenceu amb blanc pur: #fff
Reduir els altres components una mica: #eef
+
+ +
+
Més detalls
+ +

També podeu especificar un color utilitzant valors decimals RGB en el rang de 0-255 o percentatges.

+ +

Per exemple, aquest és de color granat (vermell fosc):

+ +
rgb(128, 0, 0)
+
+ +

Per a més detalls sobre com especificar els colors, consulteu: Colors en l'especificació CSS.

+ +

Per obtenir informació sobre l'adequació dels colors del sistema de Menú i ThreeDFace, consulteu: Colors del Sistema en CSS2 en l'especificació CSS.

+
+ +

Propietats de color

+ +

Ja heu utilitzat la propietat {{ cssxref("color") }} en el text.

+ +

També podeu utilitzar la propietat {{ cssxref("background-color") }} per canviar el fons dels elements.

+ +

Els fons els podeu configurar com transparent per eliminar de forma explícita qualsevol color, deixant al descobert el fons de l'element pare.

+ +
+
Exemple
+ +

Les caixes d'exemple en aquest tutorial utilitza aquest fons de color groc pàl·lid:

+ +
background-color: #fffff4;
+
+ +

Les caixes de Més detalls utilitza aquest color gris pàl·lid:

+ +
background-color: #f4f4f4;
+
+
+ +

 

+ +

Acció: L'ús dels codis de color

+ +

Color de la pàgina

+ +
    +
  1. Editeu l'arxiu CSS.
    2. +
  2. Feu el canvi que es mostra aquí sota, per donar a les lletres inicials d'un fons blau pàl·lid. (La disposició i comentaris a l'arxiu probablement difereixen de l'arxiu que es mostra aquí. Mantenir la disposició i els comentaris de la manera que preferiu.)
    3. +
  3. +

    Contingut HTML

    + + 
    <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p>
+<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>
+
    + +

    Contingut CSS

    + + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
+/* paragraphs */
+p {
+  color: blue;
+}
+#first {
+  font-style: italic;
+}
+
+/* initial letters */
+strong {
+  background-color: #ddf;
+  color: red;
+  font: 200% serif;
+}
+
+.spinach {
+  color: green;
+  background-color: #ddf;
+}
+
+
    +
    4. +
  4. Deseu el fitxer i actualitzeu el navegador per veure el resultat.
    5. +
  5. El resultat ha de ser com aquest:
    6. +
+ +

{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}

+ +
+
Repte
+ +

A l'arxiu CSS, canviar els noms de colors als codis de color de 3 dígits sense afectar el resultat.

+ +

Això no es pot fer exactament, però es pot aconseguir aproximadament. Per fer-ho exactament es necessita codis de 6 dígits, i cal buscar l'especificació CSS o utilitzar una eina gràfica per a que coincideixi amb els colors.

+ +
+
Possible solution
+ +

The following values are reasonable approximations of the named colors:

+ +
strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+
+ +

 

+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut")}}El document d'exemple i la seva fulla d'estil d'exemple separen el contingut de l'estil de forma estricta. La següent secció explica com es pot fer excepcions a aquesta estricta separació.

diff --git a/files/ca/conflicting/learn/css/css_layout/index.html b/files/ca/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..28045a681d --- /dev/null +++ b/files/ca/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,383 @@ +--- +title: Disseny +slug: Web/Guide/CSS/Inici_en_CSS/Disseny +tags: + - CSS + - CSS Float + - CSS Text Align + - CSS Unit + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes")}}Aquesta és la 12th secció del tutorial CSS Getting Started descriu algunes maneres d'ajustar el disseny del document. Es canvia el disseny del vostre document d'exemple.

+ +

Informació: Disseny

+ +

Feu servir CSS per especificar diversos efectes visuals que canvïin el disseny del document. Algunes de les tècniques especifiques de disseny son avançades, i van més enllà de l'àmbit d'aquest tutorial bàsic.

+ +

En dissenyar una presentació que tingui un aspecte similar en diferents navegadors, la vostre fulla d'estil interactua amb la fulla d'estil i el motor de disseny predeterminats del navegador de formes que poden ser complexes. Aquest és també un tema avançat, que va més enllà de l'àmbit d'aquest tutorial bàsic.

+ +

Aquesta pàgina descriu algunes tècniques simples que podeu intentar.

+ +

Estructura del document

+ +

Si voleu controlar el disseny del document, llavors és possible que hagiu de canviar la seva estructura.

+ +

El llenguatge de marcat del document podria tenir etiquetes d'ús general per a la creació de l'estructura. Per exemple, en HTML podeu utilitzar l'element {{ HTMLElement("div") }} per crear l'estructura.

+ +
+
Exemple
+ +

En el vostre document d'exemple, els paràgrafs numerats (Numbered paragraphs), en el marc del segon epígraf, no tenen un contenidor propi.

+ +

La vostre fulla d'estil no pot dibuixar una vora al voltant d'aquests paràgrafs, perquè no hi ha cap element per especificar en el selector.

+ +

Per solucionar aquest problema estructural, es pot afegir una etiqueta {{ HTMLElement("div") }} al voltant dels paràgrafs. Aquesta etiqueta és única, pel que pot ser identificada per un atribut id:

+ +
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+ +

Ara a la vostre fulla d'estil podeu utilitzar una regla per especificar les vores al voltant de les dues llistes:

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

El resultat és el següent:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

Unitats de mida

+ +

Fins ara, en aquest tutorial, s'han especificat les mides en píxels (px). Aquestes són apropiades, en determinats casos, en un dispositiu de visualització com una pantalla d'ordinador. Però quan l'usuari canvia la mida de la font, el disseny pot semblar inadequat.

+ +

Per a molts propòsits, és millor especificar les mides com un percentatge o en ems (em). Un em és nominalment la mida de la font actual (l'amplada d'una lletra m). Quan l'usuari canvia la mida de la lletra, el seu disseny s'ajusta automàticament.

+ +
+
Exemple
+ +

La vora de l'esquerra d'aquest text té la mida definida en píxels.

+ +

La vora de la dreta té la mida definida en ems.

+ +

En el vostre navegador, al canviar la mida de la font veureu com la vora de la dreta s'ajusta, però la vora de l'esquerra no ho fa:

+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
Més detalls
+ +

Per a altres dispositius, altres unitats de longitud són les adequades.

+ +

Hi ha més informació sobre això en una pàgina posterior d'aquest tutorial.

+ +

Per als detalls complets dels valors i les unitats que es poden utilitzar, consulteu Valors en l'especificació CSS.

+
+ +

Disposició del text

+ +

Dues propietats defineixen com el contingut d'un element és alineat. Els podeu utilitzar per realitzar ajustos sencills en el disseny:

+ +
+
{{ cssxref("text-align") }}
+
Alinea el contingut. Utilitzeu un d'aquests valors: left, right, center, justify
+
{{ cssxref("text-indent") }}
+
Sagna el contingut en una quantitat que especifiqueu.
+
+ +

Aquestes propietats s'apliquen a qualsevol text contingut en l'element, no només al text real. Recordeu que són heretats pels fills de l'element, així que pot ser que hagiu de desactivar-los explícitament en els fills per evitar resultats sorprenents.

+ +
+
Exemple
+ +

Per centrar les capçaleres:

+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

Resultant:

+ + + + + + + +
+

(A) The oceans

+
+ +

En un document HTML, el contingut que es veu per sota d'una capçalera no està estructuralment contingut per la capçalera. Així que quan s'alinea una capçalera com aquesta, les etiquetes sota de l'encapçalament no hereten l'estil.

+
+ +

Flotants

+ +

La propietat {{ cssxref("float") }} força un element cap a l'esquerra o cap a la dreta. Aquesta és una forma senzilla per controlar la seva posició i mida.

+ +

La resta del contingut del document flueix normalment al voltant de l'element flotant. Això es pot controlar mitjançant l'ús de la propietat {{ cssxref("clear") }} en altres elements per fer que es quedin allunyats dels flotants.

+ +
+
Exemple
+ +

En el vostre document d'exemple, les llistes s'estenen a través de la finestra. Això es pot evitar fent que flotin cap a l'esquerra

+ +

Per mantenir les capçaleress en el seu lloc, també heu d'especificar que es mantinguin allunyades dels flotants de la seva esquerra:

+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

El resultat és el següent:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(Una mica de farciment (padding) es necessita a la dreta de les caixes, on la vora (border) està massa a prop del text.)

+ +

Posicionament

+ +

Podeu definir la posició d'un element de quatre maneres, especificant la propietat {{ cssxref ("position") }} i un dels següents valors.

+ +

Aquestes són les propietats avançades. És possible utilitzar-les en formes simples, és per això que s'esmenten en aquest tutorial bàsic. Però el seu ús per a dissenys complexos pot ser difícil.

+ +
+
relative
+
La posició de l'element es desplaça respecte a la seva posició normal. Utilitzeu aquesta opció per a desplaçar un element en una quantitat especificada. De vegades es pot utilitzar el marge de l'element per aconseguir el mateix efecte.
+
fixed
+
La posició de l'element és fix. Definir la posició de l'element respecte a la finestra del document. Fins i tot si la resta del document es desplaça, l'element roman fix.
+
absolute
+
La posició de l'element es fixa en relació amb un element pare. Solsament un pare que estugui posicionat amb relative, fixed o absolute. Es pot fer que qualsevol element pare sigui adequat especificant position:relative; però sense especificar cap canvi.
+
static
+
+

El valor per defecte. Utilitzeu aquest valor si cal desactivar el posicionament de manera explícita.

+
+
+ +

Juntament amb aquests valors de la propietat position (a excepció de static), especifiqueu una o més de les propietats: top, right, bottom, left, width, height per identificar on voleu que aparegui l'element, i potser també la seva grandària.

+ +
+
Exemple
+ +

Per situar dos elements en un sobre l'altre, crear un contenidor pare en el vostre document amb els dos elements en el seu interior:

+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

En la vostre fulla d'estil, fer la posició dels pares relative. No hi ha necessitat d'especificar qualsevol canvi real. Fer la posició dels fills absolute:

+ +
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no margin around the elements */
+  top: 0px; /* distance from top */
+  left: 0px; /* distance from left */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+ +

El resultat es veu així, amb la barra invertida a la part superior de la barra inclinada:

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
Més detalls
+ +

La història completa de posicionament ocupa dos capítols complexes en l'especificació CSS Model de format Visual i Detalls del model de format visual.

+ +

Si esteu dissenyant fulles d'estil per a treballar en molts navegadors, llavors també cal tenir en compte les diferències en la manera com els navegadors interpreten la norma, i potser els errors en determinades versions de navegadors particulars.

+
+ +

Acció: Especificació del disseny

+ +
    +
  1. Canvieu el document d'exemple, doc2.html, i la fulla d'estil, style2.css, utilitzant els exemples de més amunt en la secció Estructura del document i Flotants.
    2. +
  2. En l'exemple Flotants afegir farciment per separar el text de la vora dret en 0,5 em.
    3. +
+ +
+
Reptes
+ +

Modifiqueu el document d'exemple, doc2.html, afegint aquesta etiqueta prop del final, just abans de </body>.

+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

Si no heu descarregat l'arxiu d'imatge al principi d'aquest tutorial, descarregar-ho ara, i ho col·loqueu en el mateix directori que els altres arxius d'exemple:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Predir on la imatge apareixerà en el document. A continuació, actualitzeu el navegador per veure si és correcte.

+ +

Afegiu una regla a la fulla d'estil que col·loqui la imatge a la part superior dreta del document.

+ +

Actualitzeu el navegador i fer la finestra petita. Comproveu que la imatge es queda a la part superior dreta, fins i tot quan es desplaça el document

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

 Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules") }}S'han cobert gairebé tots els temes d'aquest tutorial bàsic de CSS. La pàgina següent descriu selectors més avançats per a regles CSS, i algunes formes específiques en el disseny de taules.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..15b376dad0 --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,174 @@ +--- +title: CSS llegible +slug: Web/Guide/CSS/Inici_en_CSS/CSS_llegible +tags: + - CSS + - 'CSS:Getting_Started' + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Aquesta és la 6th secció del tutorial CSS Getting Started; s'analitza l'estil i la gramàtica del propi llenguatge CSS. Es canvia la forma en què  es veu el vostre arxiu CSS d'exemple, perquè sigui més llegible.

+ +

Informació: CSS Llegible

+ +

Podeu afegir espais en blanc i comentaris en les fulles d'estil perquè siguin més llegibles. També es poden agrupar selectors, quan les mateixes regles d'estil s'apliquen als elements seleccionats de diferents maneres.

+ +

Espai en blanc

+ +

L'espai en blanc vol dir espais reals, tabuladors i noves línies. Podeu afegir espais en blanc per fer les fulles d'estil més llegible.

+ +

En el context del disseny de la pàgina i composició, l'espai en blanc és la part de la pàgina que es deixa sense marcar: marges, separacions, i l'espai entre columnes i línies de text.

+ +

El arxiu CSS d'exemple actualment té una regla per línia, i gairebé el mínim d'espai en blanc. En un full d'estil complex aquesta disposició seria difícil de llegir, de manera que difilcutaria el seu manteniment.

+ +

El disseny escullit sol ser una preferència personal, però si els fulls d'estil són part de projectes compartits, aquests projectes podrian tenir les seves pròpies convencions.

+ +
+
Exemples
+ +

Hi ha qui els agrada el disseny compacte que hem estat utilitzant, i només divideixen una línia quan es fa molt llarga:

+ +
.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+ +

Hi ha qui prefereix una propietat-valor per línia:

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

Hi ha qui utilitza la sagnia de dos espais, quatre espais, o una tabulació són comuns:

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +

Hi ha qui els agrada que tot estigui alienat verticalment (però un disseny com aquest és difícil de mantenir):

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

Hi ha qui fa servir espais en blanc mixtes per millorar la lectura.

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

Hi ha qui utilitza tabulacions per al disseny. Hi ha qui només utilitza espais.

+ +

Comentaris

+ +

Els comentaris en CSS comencen amb /* i acaban amb */.

+ +

Podeu utilitzar els comentaris per fer comentaris reals en el full d'estil, i també per comentar parts d'ell temporalment per a propòsits de prova.

+ +

Per comentar part d'un full d'estil, col·locar aquesta part en un comentari perquè el navegador ho ignori. Aneu amb compte on s'inicia i acaba el comentari. La resta del full d'estil ha de tenir una sintaxi correcta.

+ +
+
Exemple
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

Selectors agrupats

+ +

Quan molts elements tenen el mateix estil, podeu especificar un grup de selectors, separant-los per comes. La declaració és vàlida per a tots els elements seleccionats.

+ +

En una altra part del full d'estils es poden especificar els mateixos selectors de nou de forma individual, per aplicar les regles d'estil individuals a ells.

+ +
+
Exemple
+ +

Aquesta regla fa que els elements {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} i {{ HTMLElement("h3") }} tinguin el mateix color.

+ +

És convenient especificar el color en un sol lloc, en el cas en què hagi de ser canviat.

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

Acció: Afegir comentaris i millorar el disseny

+ +
    +
  1. Editeu l'arxiu CSS, i assegurar-se que té aquestes regles (en qualsevol ordre): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. Feu que sigui més llegible reordenant-ho d'una manera que ho trobeu lògic, i mitjançant l'afegit d'espais en blanc i comentaris de la millor manera que us sembli.
    3. +
  3. Deseu el fitxer i refresqueu la pantalla del navegador, per assegurar-se que els canvis no afectin el funcionament de la fulla d'estil: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
Repte
+ +

Comenteu una part de la fulla d'estils, sense canviar res més, perquè la primera lletra del document sigui vermella:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(Hi ha més d'una manera de fer això.)

+ +
+
Possible solution
+One way to do this is to put comment delimiters around the rule for .carrot: + +
/*.carrot {
+  color: orange;
+}*/
+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estil de text") }}En el estil d'exemple s'ha utilitzat el text en cursiva i subratllat. La pàgina següent descriu més formes d'especificar l'aspecte del text en el document.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_works/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..eb6512b8bb --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,130 @@ +--- +title: Com funciona el CSS +slug: Web/Guide/CSS/Inici_en_CSS/Com_funciona_el_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?") }}Aquesta tercera secció del tutorial CSS Getting Started explica com funciona CSS en el navegador i el propòsit del Document Object Model (DOM). També aprendreu com analitzar el document de mostra.

+ +

Informació: Com funciona el CSS

+ +

Quan un navegador mostra un document, s'ha de combinar el contingut del document amb la seva informació d'estil. El document es processa en dues etapes:

+ +
    +
  1. El navegador converteix el llenguatge de marcat i el CSS en el DOM (Document Object Model). El DOM representa el document a la memòria de l'ordinador. Combina el contingut del document amb el seu estil.
    2. +
  2. El navegador mostra el contingut de la DOM.
    3. +
+ +

Un llenguatge de marcat utilitza elements per definir l'estructura del document. Es marca un element mitjançant etiquetes, que són cadenes que comencen amb '<' i acaban amb '>'. La majoria dels elements tenen un parell d'etiquetes, una etiqueta d'inici i una etiqueta final. Per l'etiqueta d'inici, col·locar el nom de l'element entre '<' i '>'. Per l'etiqueta final, col·locar un '/' després que el '<' i abans que el nom de l'element.

+ +

Depenent del llenguatge de marques, alguns elements només tenen una etiqueta d'inici, o una sola etiqueta on el '/' ve després que el nom de l'element. Un element també pot ser un contenidor i incloure altres elements entre la seva etiqueta inicial i final. Recordeu sempre de tancar les etiquetes dins del contenidor.

+ +

Un DOM té una estructura en forma d'arbre. Cada element, atribut i extensió de text, en el llenguatge de marcat, es converteix en un node en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb altres nodes DOM. Alguns elements són els pares dels nodes fills, i els nodes fills tenen germans.

+ +

La comprensió del DOM ajuda a dissenyar, depurar i mantenir la CSS, pel fet que el DOM és on el CSS i el contingut del document es reuneixen.

+ +
+
Exemple
+ +
 
+En el vostre document d'exemple, l'etiqueta <p> i la seva etiqueta de tancament </p> creen un contenidor: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Exemple en directe

+ +

{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}

+ +

En el DOM, el node corresponent P és un pare. Els seus fills són els nodes STRONG i els nodes de text. Els nodes STRONG són ells mateixos els pares, amb els nodes de text com els seus fills;

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Acció: Anàlisi d'un DOM

+ +

L'ús de DOM Inspector

+ +

Per analitzar un DOM, es necessita un programari especial. Podeu utilitzar el complement DOM Inspector de Mozilla (DOMi) per analitzar un DOM. Només haureu de instal·lar el complement (veure més detalls a continuació).

+ +
    +
  1. Utilitzeu el navegador Mozilla per obrir el document HTML d'exemple.
    2. +
  2. Des de la barra de menú del navegador, seleccioneu Tools > DOM Inspector, or Tools > Web Development > DOM Inspector. +
    +
    Més detalls
    + +

    Si el navegador Mozilla no té DOMI, podeu instalar-ho des de la web de complements i reiniciar el navegador. A continuació, tornar a aquest tutorial.

    + +

    Si no voleu instal·lar DOMi (o esteu fent servir un navegador que no és Mozilla), poodeu utilitzar Web X-Ray Goggles, tal com es descriu en la següent secció. O bé, podeu ometre aquesta secció i anar directament a la pàgina següent. Saltar-se aquesta secció no interfereix amb la resta del programa d'aprenentatge.

    +
    +
    3. +
  3. En DOMi, s'expandeixi els nodes del document fent clic a les fletxes. +

    Nota: Els espais creats en el arxiu HTML pot causar que DOMi mostri alguns nodes de text buits, que podeu ignorar.

    + +

    Part del resultat podria tenir aquest aspecte, depenent de quins nodes heu expandit:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    En seleccionar qualsevol dels nodes, podeu utilitzar el panell de la dreta de DOMi per esbrinar més sobre ell. Per exemple, quan es selecciona un node de text, DOMi mostra el text en el panell de la dreta.

    + +

    Quan se selecciona un node element, DOMi analitza i ofereix una enorme quantitat d'informació en el seu panell de la dreta. La informació d'estil és només part de la informació que proporciona.

    +
    4. +
+ +
+
Repte
+ +

En DOMi, feu clic en un node STRONG.

+ +

Utilitzeu el panell de la dreta de DOMi per esbrinar on el color del node és vermell, i on la seva aparença es fa més destacable que el text normal.

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Hide solution
+Veure la solució per el repte.
+ +

Utilitzar Web X-Ray Goggles

+ +

Web X-Ray Goggles mostra menys informació que DOM Inspector, però és més fàcil d'instal·lar i utilitzar.

+ +
    +
  1. Anar a la pàgina principal de Web X-Ray Goggles.
    2. +
  2. Arrossegar el enllaç de marcador a la pàgina de la barra d'eines del navegador.
    3. +
  3. Obriu el document HTML d'exemple.
    4. +
  4. Activar Web X-Ray Goggles fent clic al marcador a la barra d'eines.
    5. +
  5. Moure el punter del ratolí per sobre del document, per veure els elements del document.
    6. +
+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència") }}Si heu pres el repte, veureu que la informació d'estil de més d'un lloc interacciona per crear l'estil final per a un element. La pàgina següent explica més sobre aquestes interaccions.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html new file mode 100644 index 0000000000..d3685309c7 --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html @@ -0,0 +1,111 @@ +--- +title: Per què utilitzar CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Per_què_utilitzar_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Que és CSS?") }}Aquesta segona secció del tutorial CSS Getting Started explica la relació entre la CSS i els documents. En l'exercici aprendreu com afegir un full d'estil CSS en el document d'exemple que vam crear en la primera secció.

+ +

Informació: Per què utilitzar CSS?

+ +

S'utilitza CSS per definir estils en els documents, incloent el disseny, la disposició i les variacions en la imatge per als diferents dispositius i mides de pantalla. Podeu posar el CSS en el <head> d'un document amb un full d'estils incrustat, o adjuntar un arxiu separat que defineix els estils amb un full d'estils extern. Per enllaçar un full d'estils extern al document, se li afegeix simplement un enllaç al full d'estils en el <head> del document.

+ +

Un full d'estil extern té molts avantatges. Mantenir els estils separats del seu contingut HTML:

+ + + +
+
Exemple
+ +

L'ús de CSS, permet emmagatzemar la informació d'estil en arxius comuns que comparteixen totes les pàgines. Per exemple, quan els documents enllaçan amb el mateix full d'estil que defineix el color de les capçaleres h2, es pot aplicar l'estil de les etiquetes de capçalera h2 globalment, canviant un atribut css.

+ +

Quan un usuari visualitza una pàgina web, el navegador de l'usuari carrega la informació d'estil juntament amb el contingut de la pàgina.

+ +

Quan un usuari imprimeix una pàgina web, pot proporcionar informació de diferent estil que fa que la pàgina impresa sigui fàcil de llegir.

+
+ +

Com fer que HTML i CSS treballin junts? En general, s'utilitza HTML per descriure el contingut del document, no el seu estil. CSS s'utilitza per especificar l'estil del document, no el seu contingut. Més endavant en aquest tutorial, veureu algunes excepcions a aquesta disposició.

+ +
+
Més detalls
+ +

Un llenguatge de marcatge com l'HTML també proporciona algunes formes d'establir estil.

+ +
Per exemple, en HTML es pot utilitzar una etiqueta <b> per fer el text en negreta, i establir el color de fons d'una pàgina en la seva etiqueta <body>.
+ +
 
+ +

Quan s'utilitza CSS, normalment s'evita l'ús d'aquestes característiques del llenguatge de marcat, de manera que tota la informació d'estil del document està en un sol lloc.

+
+ +

Acció: Crear un full d'estil

+ +
    +
  1. Creeu un altre arxiu de text en el mateix directori que el document doc1.html que vau crear en la primera secció.
    2. +
  2. Guardeu el document com: style1.css. Aquest fitxer serà el full d'estil.
    3. +
  3. A l'arxiu CSS, copieu i enganxeu aquesta línia, a continuació, deseu el fitxer: + 
    strong {color: red;}
+
    +
    4. +
+ +

Vincular el document al full d'estils

+ +
    +
  1. Per enllaçar el document al full d'estils, editar l'arxiu HTML. Afegiu-hi la línia ressaltada aquí: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. Deseu el fitxer i refrescar la pantalla del navegador. El full d'estil fa que les lletres inicials siguin de color vermell, com aixó:
    3. +
+ +

{{ EmbedLiveSample('Action_Creating_a_stylesheet', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}

+ +

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

+ +
+
Repte
+ +

A més de vermell, CSS permet a alguns altres noms de colors.

+ +

Sense buscar una referència, trobar cinc noms més de colors que treballin en el full d'estil.

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+Veure la solució per el repte
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Com funciona el CSS.")}}Ara teniu un document de mostra vinculat a un full d'estil separat, ja esteu llestos per aprendre més sobre com el navegador les combina quan es mostra el document.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html new file mode 100644 index 0000000000..28db41fa98 --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html @@ -0,0 +1,120 @@ +--- +title: Que és CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Que_és_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Inici en CSS")}} Aquesta primera secció del tutorial CSS Getting Started explica breument les fulles d'estil en cascada (CSS). També es crearà un document senzill per utilitzar en els exercicis CSS en les seccions següents.

+ +

Informació: Que és CSS?

+ +

Fulles d'estil en cascada (CSS) és un llenguatge per especificar com els documents es presenten als usuaris. Aquests documents estan escrits en un llenguatge de marcat com ara HTML.

+ +

Un document és un recull d'informació que s'estructura utilitzant un llenguatge de marcat.

+ +

La presentació d'un document a un usuari vol dir convertir-lo en una format utilitzable per al seu públic. Navegadors, com Firefox, Chrome o Internet Explorer, estan dissenyats per a presentar documents visuals, per exemple, en una pantalla d'ordinador, un projector o una impressora.

+ +
+

Exemples

+ + +
+ +

En aquest tutorial, caixes amb el subtítol, Més detalls, com la de baix, contenen informació opcional i enllaços a més recursos en un concepte o tema tractat en una secció. Llegir-los com els veieu, seguir els enllaços, o ometre aquestes caixes i tornar a llegir-los més tard.

+ +
+
Més detalls
+ +

Un document no és el mateix que un arxiu. Però, es pot desar un document en un arxiu.

+ +

El document que esteu llegint en aquest moment no està emmagatzemat en un arxiu. Quan el navegador demana aquesta pàgina, el servidor consulta una base de dades i genera el document, recollint les parts del document de diferents arxius. No obstant això, aquest tutorial també pot treballar amb documents emmagatzemats en arxius.

+ +

Podeu trobar més informació sobre els documents i llenguatges de marcatge en altres àrees d'aquest lloc web:

+ + + + + + + + + + + + + + + + + + + + +
HTMLper pàgines web
XMLper documents estructurats en general
SVGper gràfics
XULper interfícies d'usuari en Mozilla
+ +

A la Part II d'aquest tutorial podreu veure exemples d'aquests llenguatges de marques.

+
+ +
+
Més detalls
+ +

En la terminologia formal de CSS, el programa que presenta un document a un usuari se anomenat un agent d'usuari (UA). Un navegador és un tipus d'UA. CSS no és només per a navegadors o presentació visual, però en la part I d'aquesta guia, solament es treballarà amb CSS en un navegador.

+ +

Per a les definicions formals de terminologia relatives a la CSS, consulteu Definitions en l'especificació CSS del World Wide Web Consortium (W3C), una comunitat internacional que estableix estàndards oberts per al web.

+
+ +

Acció: Creació d'un document

+ +
    +
  1. Creeu un nou directori en l'ordinador per guardar i organitzar els exercicis del tutorial.
    2. +
  2. Obriu un editor de text i crear un nou arxiu de text. Aquest arxiu contindrà el document per als pròxims exercicis tutorials.
    3. +
  3. Copieu i enganxeu el codi HTML que es mostra a continuació. Deseu el fitxer amb el nom doc1.html + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
    + +

    {{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}

    +
    4. +
  4. Obriu una nova pestanya o una nova finestra, a continuació, obriu el fitxer que acabeu de crear. +

    Hauria de veure el text amb les lletres inicials en negreta, com aquestes:

    + + + + + + + +
    Cascading Style Sheets
    + +

    El que veieu en el navegador pot no ser exactament el mateix a causa de la configuració del navegador i d'aquesta wiki. Algunes diferències en el tipus de lletra, espaiat i colors no són importants.

    +
    5. +
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?")}} El document encara no utilitza CSS. A la següent secció farem servir CSS per l'estil del document.

diff --git a/files/ca/conflicting/learn/css/first_steps/index.html b/files/ca/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..8de66f308e --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,56 @@ +--- +title: Inici en CSS +slug: Web/Guide/CSS/Inici_en_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

Aquest tutorial és una introducció a les característiques bàsiques i llenguatge (la sintaxi) per als fulls d'estil en cascada(Cascading Style Sheets) (CSS). S'utilitza CSS per canviar l'aspecte d'un document estructurat, com ara una pàgina web. El tutorial també inclou exemples d'exercicis que podeu provar en el vostre ordinador per veure els efectes de les CSS i les característiques que funcionen en els navegadors moderns.

+ +

El tutorial és per a principiants i per qualsevol persona que desitji revisar els conceptes bàsics de CSS. Si teniu més experiència amb CSS, la pàgina principal de CSS enumera els recursos més avançats.

+ + + +

Que es necessita per començar

+ + + +

Encara que els exercicis poden ajudar-te a aprendre, no és necessari realitzar-los. Simplement podeu llegir el tutorial i mirar les imatges.

+ +

Nota: El tutorial s'explica com funciona CSS amb el color. Serà més fàcil per completar aquestes seccions amb una pantalla a color i visió de color normal.

+ +

Com utilitzar aquest tutorial

+ +

Per utilitzar aquest tutorial, llegiu les pàgines amb cura i de forma seqüencial. Si es salta una pàgina, pot ser difícil d'entendre les pàgines següents en el tutorial.

+ +

Part I: Els fonaments del CSS

+ +

A cada pàgina, utilitzeu la secció d'informació per entendre com funciona CSS. Utilitzeu la secció Acció per probar l'ús de CSS en el vostre ordinador.

+ +

Per posar a prova la vostre comprensió, prendre el repte al final de cada pàgina. Les solucions als reptes estan vinculats en virtut dels reptes, pel que no és necessari mirar-los si no ho desitjeu.

+ +

Per comprendre CSS amb més profunditat, llegiu la informació que es troba en les caselles de subtítols Més detalls. Utilitzeu els enllaços que hi ha per trobar informació de referència sobre CSS

+ +

Part II: L'Abast del CSS

+ +

Una segona part del programa d'aprenentatge proporciona exemples, que mostren l'abast de CSS amb altres tecnologies web i Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. SVG graphics
    3. +
  3. XML data
    4. +
  4. XBL bindings
    5. +
  5. XUL user interfaces
    6. +
diff --git a/files/ca/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ca/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..a1a8c9364f --- /dev/null +++ b/files/ca/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,162 @@ +--- +title: Estils de text +slug: Web/Guide/CSS/Inici_en_CSS/Estils_de_text +tags: + - Beginner + - CSS + - CSS Fonts + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}} Aquesta és la 7th secció del tutorial CSS Getting Started; es donen més exemples d'estils de text. Modifiqueu la fulla d'estil d'exemple per utilitzar diferents fonts.

+ +

Informació: Estils de text

+ +

CSS té diverses propietats d'estil de text.

+ +

Hi ha una propietat abreujada convenient, {{ cssxref("font") }}, que podeu utilitzar per especificar diversos aspectes alhora, per exemple:

+ + + +
+
Exemple
+ +
p {
+font: italic 75%/125% "Comic Sans MS", cursive;
+}
+
+ +

Aquesta regla estableix diverses propietats de la font, fent tots els paràgrafs en cursiva.

+ +

La mida de la font s'estableix en les tres quartes parts de la mida d'element pare de cada paràgraf, i l'alçada de la línia s'estableix en 125% (una mica més separats del normal).

+ +

El tipus de lletra s'estableix en la Comic Sans MS, però si aquest tipus de lletra no està disponible, el navegador farà ús del seu tipus de lletra cursiva per defecte (escrit a mà).

+ +

La regla té l'efecte secundari de desactivar negreta i small-caps (establint el seu valor a normal).

+
+ +

Tipus de fonts

+ +

No es pot predir que tipus de lletra tindran els lectors del vostre document . Quan especifiqueu tipus de lletra de font, és una bona idea proporcionar una llista d'alternatives en ordre de preferència.

+ +

Acabar la llista amb un dels tipus de lletra per defecte incorporats: serif, sans-serif, cursive, fantasy o monospace.

+ +

Si el tipus de lletra no és compatible amb algunes característiques en el document, el navegador pot substituir per un tipus de lletra diferent. Per exemple, el document pot contenir caràcters especials que el tipus de lletra no admet. Si el navegador pot trobar un altre tipus de lletra que té aquests caràcters, llavors farà servir un altre tipus de lletra.

+ +

Per especificar un tipus de lletra, utilitzar la propietat {{ cssxref("font-family") }}.

+ +

Les mides de la font

+ +

Els usuaris del navegador poden anul·lar les mides de font per defecte o canviar la mida de text mentre llegeixen una pàgina, pel que té sentit el que utilitzeu mides relatives on es pugui.

+ +

Podeu utilitzar alguns valors incorporats per mides de font, com small, medium i large. També podeu utilitzar valors relatius a la mida de font de l'element pare com: smaller, larger, 150% o 1.5em. Un "em" és equivalent a l'amplada de la lletra "m" (per la mida de font de l'element pare); per tant 1.5em és una vegada i mitja la mida de la font de l'element pare.

+ +

Si cal, podeu especificar una mida real com: 14px (14 píxels) per a un dispositiu de visualització o 14pt (14 punts) per a una impressora. Això no és accessible per als usuaris amb discapacitat visual, ja que no els permet canviar la mida. Una estratègia més accessible és establir un valor incorporat com a mitjà en un element de nivell superior del document i, a continuació establir les mides relatives de tots els seus elements descendents.

+ +

Per especificar una mida de font, utilitzar la propietat {{ cssxref("font-size") }}.

+ +

Alçada de la línia

+ +

L'alçada de la línia especifica l'espaiat entre línies. Si el document té els paràgrafs llargs amb moltes línies, una separació més gran del normal fa que sigui més fàcil de llegir, especialment si la mida de la font és petita.

+ +

Per especificar l'alçada de la línia, utilitzar la propietat {{ cssxref("line-height") }}.

+ +

Decoració

+ +

A part de la propietat {{ cssxref("text-decoration") }} podeu especificar altres estils, com el subratllat(underline) o ratllat(line-through). Podeu configurar-ho a none per eliminar explícitament qualsevol decoració.

+ +

Altres propietats

+ +

Per especificar cursiva, utilitzar {{ cssxref("font-style") }}: italic;
+ Per especificar negreta , utilitzar {{ cssxref("font-weight") }}: bold;
+ Per especificar majúscules petites , utilitzar {{ cssxref("font-variant") }}: small-caps;

+ +

Per desactivar qualsevol d'ells individualment, especificar el valor normal o inherit.

+ +
+
Mé detalls
+ +

Podeu especificar els estils de text d'altres maneres variades.

+ +

Per exemple, algunes de les propietats esmentades aquí tenen altres valors que podeu utilitzar.

+ +

En una fulla d'estil complexa, eviteu l'ús de la propietat de font abreujada, causa efectes secundaris (reposició d'altres propietats individuals).

+ +

Per a més detalls de les propietats que es relacionen amb les fonts, vegeu Fonts en l'especificació CSS. Per a més detalls de decoració del text, vegeu Text.

+ +

Si no voleu dependre dels tipus de lletra instal·lats en els sistemes dels usuaris, podeu utilitzar {{ cssxref("@font-face") }} per especificar una font en línia. No obstant això, requereix que els usuaris tinguin un navegador compatible amb aquesta regla.

+
+ +

Acció: Especificació de les fonts

+ +

Per a un document senzill, es pot establir la font de l'element {{ HTMLElement("body") }} i la resta del document hereta la configuració.

+ +
    +
  1. Editeu l'arxiu CSS.
    2. +
  2. Afegiu la següent regla per canviar el tipus de lletra en tot el document. La part superior de l'arxiu CSS és un lloc lògic per a ell, però té el mateix efecte allà on ho posis: + 
    body {
+font: 16px "Comic Sans MS", cursive;
+}
+
    +
    3. +
  3. Afegiu un comentari explicant la regla, i afegiu espai en blanc per a que coincideixi amb el vostre disseny preferit.
    4. +
  4. Deseu el fitxer i actualitzeu el navegador per veure l'efecte. Si el sistema té Comic Sans MS, o una altra font cursiva que no suporta cursiva, l'explorador tria un tipus de lletra diferent per al text en cursiva en la primera línia:: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Des de la barra de menú del navegador, seleccioneu View > Text Size > Increase (o View > Zoom > Zoom In). Tot i que heu especificat 16 píxels en l'estil, un usuari en llegir el document pot canviar la mida.
    6. +
+ +
+
Repte
+ +

Sense canviar res més, fer que totes les sis lletres inicials sigui dues vegades la mida de la font serif per defecte en el navegador:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}El document d'exemple utilitza diversos colors amb nom. En la següent secció s'enumeren els noms dels colors estàndard i s'explica com es poden especificar altres.

diff --git a/files/ca/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ca/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..a6bd0d31a1 --- /dev/null +++ b/files/ca/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,276 @@ +--- +title: Llistes +slug: Web/Guide/CSS/Inici_en_CSS/Llistes +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut") }} Aquesta és la 10th secció del tutorial CSS Getting Started; descriu com es pot utilitzar CSS per especificar l'aspecte de les llistes. Heu de crear un nou document d'exemple que contindrà les llistes, i un nova fulla d'estil que és el estil de les llistes.

+ +

Informació: Llistes

+ +

Si vau aprendre el repte en l'última secció, llavors va veure com es podia afegir contingut abans de qualsevol element perquè aparegués com un element de la llista.

+ +

CSS proporciona propietats especials que estan dissenyades per a les llistes. En general, és convenient utilitzar aquestes propietats sempre que pugueu.

+ +

Per especificar l'estil a una llista, utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador.

+ +

El selector en la seva regla CSS pot seleccionar els elements de la llista d'elements (per exemple, {{ HTMLElement("li") }} ) o es pot seleccionar l'element de la llista dels pares (per exemple, {{ HTMLElement ("ul") }}) de manera que els elements de la llista hereten l'estil.

+ +

Llistes no ordenades

+ +

En una llista no ordenada, cada element de la llista està marcat de la mateixa manera.

+ +

CSS té tres tipus de marcadors, i aquí es veu com el navegador els mostra:

+ + + +

També podeu especificar l'adreça URL d'una imatge.

+ +
+
Exemple
+ +

Aquestes regles especifiquen diferents marcadors per a diferents classes d'elements de la llista:

+ +
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+ +

Quan aquestes classes s'utilitzen en una llista, distingeix entre els elements oberts i tancats (per exemple, en una llista de tasques pendents):

+ +
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+ +

El resultat és el següent:

+ +

{{ EmbedLiveSample('Unordered_lists', '', '', '') }}

+
+ +

Llistes ordenades

+ +

En una llista ordenada, cada element de la llista es marca de manera diferent per mostrar la seva posició en la seqüència.

+ +

Utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador:

+ + + +
+
Exemple
+ +

Aquesta regla especifica que els elements en {{ HTMLElement ("ol") }}  amb la classe info, els elements s'identifiquen amb lletres majúscules.

+ +
<ol class="info">
+  <li>Lorem ipsum</li>
+  <li>Dolor sit</li>
+  <li>Amet consectetuer</li>
+  <li>Magna aliquam</li>
+  <li>Autem veleum</li>
+</ol>
+ +
ol.info {list-style: upper-latin;}
+
+ +

El elements {{ HTMLElement ("li") }} en la llista hereten aquest estil:

+ +

{{ EmbedLiveSample('Ordered_lists', '', '', '') }}

+
+ +
+
Més detalls
+ +

La propietat {{ cssxref ("list-style") }} és una propietat abreujada. En les fulles d'estil complexes és possible que preferiu utilitzar les propietats independents per establir els valors per separat. Per als enllaços a aquestes propietats separades, i més detalls de com CSS especifica les llistes, consulteu la pàgina de referència {{ cssxref ("list-style") }}.

+ +

Si utilitzeu un llenguatge de marques com l'HTML que proporciona marques convencionals per llistes no ordenades ({{ HTMLElement("ul") }}) i llistes ordenades ({{ HTMLElement("ol") }}), llavors és una bona pràctica utilitzar les etiquetes en la forma en què estan destinades. No obstant això, podeu utilitzar CSS per fer que {{ HTMLElement("ul") }} aparegui ordenat i {{ HTMLElement("ol") }} aparegui desordenat si ho desitjeu.

+ +

Els navegadors difereixen en la forma d'aplicar els estils de llistes. No espereu que la vostre fulla d'estil doni resultats idèntics en tots els navegadors.

+
+ +

Comptadors

+ +
+

Note:  Alguns navegadors no suporten comptadors. La pàgina continguts CSS i compatibilitat del navegador en el lloc Quirks Mode conté un gràfic detallat de la compatibilitat dels navegadors per això i altres característiques CSS. Pàgines individuals en la Referència CSS d'aquest lloc, també tenen taules de compatibilitat del navegador.

+
+ +

Podeu utilitzar comptadors per enumerar els elements, no només els elements de la llista. Per exemple, en alguns documents és possible que vulgueu numerar les capçaleres o paràgrafs.

+ +

Per especificar la numeració, es necessita un comptador amb un nom que definiu.

+ +

En algun element abans que el recompte s'iniciï, reinicieu el comptador amb la propietat {{ cssxref("counter-reset") }} i el nom del seu comptador. El pare dels elements que està comptant és un bon lloc per fer-ho, però podeu utilitzar qualsevol element que vingui abans que els elements de la llista.

+ +

Per cada element en el qual s'incrementa el comptador, utilitzeu la propietat {{ cssxref("counter-increment") }} i el nom del seu comptador.

+ +

Per mostrar el comptador, afegiu {{ cssxref("::before") }} o {{ cssxref("::after") }} per al selector i l'ús de la propietat content (com ho va fer en la pàgina anterior, Content).

+ +

En el valor de la propietat content, especifiqueu counter() amb el nom del vostre comptador. També podeu indicar un tipus. Els tipus són els mateixos que en la secció anterior de llistes ordenades.

+ +

Normalment, l'element que mostra el comptador també l'incrementa.

+ +
+
Exemple
+ +

Aquesta regla inicialitza un comptador per a cada element {{ HTMLElement("h3") }} amb la classe numbered:

+ +
h3.numbered {counter-reset: mynum;}
+
+ +

Aquesta regla mostra i incrementa el comptador per a cada element {{ HTMLELement("p") }} amb la classe numbered:

+ +
<p class="numbered">Lorem ipsum</p>
+<p class="numbered">Dolor sit</p>
+<p class="numbered">Amet consectetuer</p>
+<p class="numbered">Magna aliquam</p>
+<p class="numbered">Autem veleum</p>
+
+ +
body {
+   counter-reset: mynum;
+}
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

El resultat és el següent:

+ +

{{ EmbedLiveSample("Counters", '300', '200', '') }}

+
+ +
+
Més detalls
+ +

No podeu utilitzar comptadors a menys que sàpigueu que tot el que llegeixi el document té un navegador compatible amb ells.

+ +

Si sou capaços d'utilitzar els comptadors, tenen l'avantatge que podeu donar estil els comptadors per separat dels elements de la llista. En l'exemple anterior, els comptadors estan en negreta, però els elements de la llista no ho estan.

+ +

També podeu utilitzar els comptadors en formes més complexes, per exemple, al nombre de seccions, títols, subtítols i paràgrafs en els documents formals. Per a més detalls, consulteu Comptadors i numeració automàtica en l'especificació CSS.

+
+ +

Acció: Llistes amb estil

+ +

Feu un nou document HTML, doc2.html. Copieu i enganxeu el contingut d'aquí:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+ +

Feu un nova fulla d'estil, style2.css. Copieu i enganxeu el contingut d'aquí:

+ +
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

Si la disposició i el comentari no són del vostre gust, canvieu-los.

+ +

Obriu el document en el navegador. Si el navegador és compatible amb els comptadors, es veurà alguna cosa semblant com l'exemple a continuació. Si el vostre navegador no suporta comptadors, llavors no veureu els números (i probablement ni tan sols els dos punts):

+ +

{{ EmbedLiveSample('Action_Styled_lists', '300', '400', '') }}

+ +
+
Reptes
+ +

Afegiu una regla a la fulla d'estil, per numerar els oceans utilitzant nombres romans de l'I al V:

+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

 

+ +

Canvieu la fulla d'estil per identificar les capçaleres amb lletres majúscules i en parèntesi com aquest:

+ + + + + + + +
+

(A) The oceans

+ +

. . .

+ +

(B) Numbered paragraphs

+ +

. . .

+
+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes") }}Quan el navegador mostra el document d'exemple, es crea un espai al voltant dels elements quan els col·loca a la pàgina. La pàgina següent descriu com podeu utilitzar CSS per treballar amb les formes subjacents d'elements, caixes.

diff --git a/files/ca/conflicting/web/guide/index.html b/files/ca/conflicting/web/guide/index.html new file mode 100644 index 0000000000..ba6fb934f0 --- /dev/null +++ b/files/ca/conflicting/web/guide/index.html @@ -0,0 +1,101 @@ +--- +title: Desenvolupament web +slug: Web_Development +tags: + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

El desenvolupament web comprèn tots els aspectes de construir un portal o aplicació web.

+

Aprèn a crear qualsevol cosa des d'una simple web fins a una web complexa i altament interactiva emprant les darreres tecnologies web  fullejant els articles que et mostrem aquí.

+ + + + + + + +
+

DOCUMENTACIÓ

+

Tecnologies

+
+
+ Introducció al desenvolupament web
+
+ Una guia de com desenvolupar webs.
+
+ HTML
+
+ L' HyperText Markup Language (en català, Llenguatge de Marcació de Hipertext) és el llenguatge basic per a la creació de webs i d'altres documents mostrats en un navegador.
+
+ CSS
+
+ Els Cascading Style Sheets (en català, Fulls d'estils en cascada) fan possible construir sofisticats layouts per a les planes web.
+
+ [NT: layouts podria traduir-se per estructura o disposició dels elements, però donada la generalitzada acceptació del terme en anglés he optat per no adaptar-lo al català]
+
+ JavaScript
+
+ JavaScript és el llenguatge de programació (scripting) més comú per programar aplicacions web en el costat del navegador. A més, és emprat en el desenvolupament del software de Mozilla.
+
+ DOM
+
+ De l'anglès Document Object Model (en català, Model de l'Objecte Document) és una API per a documents HTML i XML, que proporciona una representació de l'estructura del document i els seus elements que hom pot modificar per a alterar la visualització del mateix.
+
+ AJAX
+
+ De l'anglès Asynchronous JavaScript and XML (Javascript i XML Asincrònic) més que una tecnologia és una combinació de tecnologies, usant Javascript i d'altres tecnologies del costat del navegador per comunicar-se amb el servidor sense recarregar la plana sencera, lo qual permet crear aplicacions dinàmiques de qualitat.
+
+ XHTML
+
+ De l'anglès Extensible HyperText Markup Language (Llenguatge de marcació hipertext extensible) és un llenguatge de marcatge com el HTML però que respecte les regles formals del XML que ofereix una sintaxi més estricta però més robusta i potent que l'HTML.
+
+ SVG
+
+ De l'anglès Scalable Vector Graphics (gràfics de vectors escalables) és un llenguatge de marcatge XML per dibuizar gràfics vectorials 2D.
+
+

Estratègies

+
+
+ Estàndars web
+
+ Aprèn com fer que la teva web o aplicació pugui ser emprada pel màxim nombre possible d'usuaris gràcies a fer-la compatible amb la web oberta (open web).
+
+ Disseny web sensible
+
+ Juga amb el CSS per a presentar el mateix contingut a qualsevol plataforma, des de telèfons mòbils fins a pantalles amples de màquines d'escriptori d'alta resolució.
+
+ Construir webs compatibles amb equips vells i moderns
+
+ Les millors pràctiques per a crear webs que no es trenquen quan s'actualitzen els navegadors dels usuaris.
+
+ Construir webs pel mòbil
+
+ Desenvolupar webs per ser vistes en dispositius mòbils requereix prendre certes mesures úniques a les que potser no estàn avessats els desenvolupadors habituals de webs per a navegadors d'ordinadors d'escriptori.
+
+ Preguntes freqüents del desenvolupador web respostes, per Mozilla
+
+ Llegeix les respostes de Mozilla a les preguntes més freqüents dels desenvolupadors web.
+
+

Veure-ho tot...

+ 		+

COMUNITAT

+ +

EINES

+ +

Veure-ho tot...

+
+

 

diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..e0845eb102 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,118 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +
{{JSRef("Global_Objects", "Boolean")}}
+ +

Resum

+ +

La propietat Boolean.prototype representa el prototipus pel constructor {{jsxref("Global_Objects/Boolean", "Boolean")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descripció

+ +

Les instàncies de {{jsxref("Global_Objects/Boolean", "Boolean")}} hereten de Boolean.prototype. Es pot emprar l'objecte prototipus del constructor per a afegir noves propietats o mètodes a totes les instàncies de {{jsxref("Global_Objects/Boolean", "Boolean")}}.

+ +

Propietats

+ +
+
Boolean.prototype.constructor
+
Retorna la funció que ha creat la instància del prototipus. Aquesta funció és {{jsxref("Global_Objects/Boolean", "Boolean")}} per defecte.
+
+ +
{{jsOverrides("Object", "properties", "constructor")}}
+ +

Mètodes

+ +
+
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna una cadena de caràcters que conté el codi fond de l'objecte {{jsxref("Global_Objects/Boolean", "Boolean")}}; aquesta pot utilitzar-se per a crear un objecte equivalent. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Boolean.prototype.toString()")}}
+
Retorna una cadena de caràcters que valdrà o bé "true" o bé "false", depenent del valor que l'objecte representi. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Boolean.prototype.valueOf()")}}
+
Retorna el valor primitiu de l'objecte {{jsxref("Global_Objects/Boolean", "Boolean")}}. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +
{{jsOverrides("Object", "methods", "toSource", "toString", "valueOf")}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html new file mode 100644 index 0000000000..ebd6cbe729 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html @@ -0,0 +1,147 @@ +--- +title: DataView.prototype +slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype +--- +
{{JSRef}}
+ +

La propietat DataView.prototype representa el prototip de l'objecte {{jsxref("DataView")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descripció

+ +

Les instàncies DataView hereten de DataView.prototype. Com passa amb tots els constructors, podeu canviar l'objecte prototip del constructor per produir canvis a totes les instàncies DataView.

+ +

Propietats

+ +
+
DataView.prototype.constructor
+
Especifica la funció que crea un prototip de l'objecte. El valor inicial és el constructor integrat estàndard DataView.
+
{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}
+
L'{{jsxref("ArrayBuffer")}} referenciat per aquesta vista. Fixat en el temps de construcció i per tant és només de lectura.
+
{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}
+
La llargària (en bytes) d'aquesta vista des del començament del seu {{jsxref("ArrayBuffer")}}. Fixat en el temps de construcció i per tant és només de lectura.
+
{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}
+
La posició (en bytes) d'aquesta vista des de l'inici del seu {{jsxref("ArrayBuffer")}}. Fixat en el temps de construcció i per tant és només de lectura.
+
+ +

Mètodes

+ +

Lectura

+ +
+
{{jsxref("DataView.prototype.getInt8()")}}
+
Obté un nombre sencer (byte) de 8 bits amb signe al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getUint8()")}}
+
Obté un nombre sencer sense signe de 8 bits (unsigned byte) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getInt16()")}}
+
Obté un nombre sencer de 16 bits (short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getUint16()")}}
+
Obté un nombre sencer sense signe de 16 bits (unsigned short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getInt32()")}}
+
Obté un nombre sencer de 32 bits (long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getUint32()")}}
+
Obté un nombre sencer sense signe de 31 bits (unsigned long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getFloat32()")}}
+
Obté un nombre en coma flotant amb signe de 32 bits (float) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getFloat64()")}}
+
Obté un nombre en coma flotant amb signe de 64 bits (double) al byte de posició especificat des de l'inici de la vista.
+
+ +

Escritura

+ +
+
{{jsxref("DataView.prototype.setInt8()")}}
+
Emmagatzema el valor d'un nombre sencer de 8 bits (byte) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setUint8()")}}
+
Emmagatzema el valor d'un nombre sencer sense signe de 8 bits (unsigned byte) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setInt16()")}}
+
Emmagatzema el valor d'un nombre sencer amb signe de 16 bits (short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setUint16()")}}
+
Emmagatzema el valor d'un nombre sencer sense signe de 16 bits (unsigned short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setInt32()")}}
+
Emmagatzema el valor d'un nombre sencer amb signe de 32 bits (long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setUint32()")}}
+
Emmagatzema el valor d'un nombre sencer sense signe de 32 bits  (unsigned long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setFloat32()")}}
+
Emmagatzema el valor d'un nombre en coma flotant amb signe de 32 bits (float) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setFloat64()")}}
+
Emmagatzema el valor d'un nombre en coma flotant amb signe de 64 bits (double) al byte de posició especificat des de l'inici de la vista.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic9.0{{ CompatGeckoDesktop("15.0") }}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoMobile("15")}}{{CompatUnknown}}12.04.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/date/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..91e2dff38f --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,222 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Date/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

La propietat Date.prototype representa el prototipus per al constructor {{jsxref("Global_Objects/Date", "Date")}}.

+ +
{{js_property_attributes(0, 0, 1)}}
+ +

Descripció

+ +

Les instàncies de JavaScript de {{jsxref("Global_Objects/Date", "Date")}} hereten de Date.prototype. L'objecte prototipus del constructor pot modificar-se per a afectar a les propietats i mètodes heretats per les instàncies de {{jsxref("Global_Objects/Date", "Date")}}.

+ +

Per a compatibilitat amb càlculs amb milenis (en altres paraules, per a tindre en compte l'any 2000), sempre s'hauria d'especificar l'any sencer, per exemple, 1998, en comptes de 98. Per a ajudar a proveïr l'any sencer JavaScript inclou els mètodes {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} i {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.

+ +

Propietats

+ +
+
Date.prototype.constructor
+
Retorna la funció que va crear la instància. És a dir, per defecte el constructor {{jsxref("Global_Objects/Date", "Date")}}.
+
+ +
{{jsOverrides("Object", "properties", "constructor")}}
+ +

Mètodes

+ +

Getter

+ +
+
{{jsxref("Date.prototype.getDate()")}}
+
Retorna el dia del mes (1-31) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getDay()")}}
+
Retorna el dia de la setmana (0-6) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getFullYear()")}}
+
Retorna l'any (4 digits per a anys de 4 digits) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getHours()")}}
+
Retorna l'hora (0-23) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getMilliseconds()")}}
+
Retorna els milisegons (0-999) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getMinutes()")}}
+
Retorna els minuts (0-59) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getMonth()")}}
+
Retorna el mes (0-11) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getSeconds()")}}
+
Retorna els segons (0-59) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getTime()")}}
+
Retorna un valor numèric per a la data especificada que representa la data especificada com al nombre de milisegons que han passat des de l'1 de gener de 1970, 00:00:00 UTC (negatiu per a dates anteriors).
+
{{jsxref("Date.prototype.getTimezoneOffset()")}}
+
Retorna la diferència d'ús horari en minuts del temps local.
+
{{jsxref("Date.prototype.getUTCDate()")}}
+
Retorna el dia del mes (1-31) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCDay()")}}
+
Retorna el dia de la setmana (0-6) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCFullYear()")}}
+
Retorna l'any (4 digits per a anys de 4 digits) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCHours()")}}
+
Retorna l'hora (0-23) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
+
Retorna els milisegons (0-999) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCMinutes()")}}
+
Retorna els minuts (0-59) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCMonth()")}}
+
Retorna el mes (0-11) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCSeconds()")}}
+
Retorna els segons (0-59) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}
+
Retorna l'any (normalment 2-3 digits) per a la data especificada, en temps local. En comptes d'aquest mètode, utilitzeu  {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.
+
+ +

Setter

+ +
+
{{jsxref("Date.prototype.setDate()")}}
+
Assigna el dia del mes per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setFullYear()")}}
+
Assigna l'any sencer (és a dir, de 4 digits per a un any amb 4 digits) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setHours()")}}
+
Assigna l'hora per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setMilliseconds()")}}
+
Assigna els milisegons per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setMinutes()")}}
+
Assigna els minuts per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setMonth()")}}
+
Assigna el mes per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setSeconds()")}}
+
Assigna els segons per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setTime()")}}
+
Assigna la data que representarà la instància de l'objecte {{jsxref("Global_Objects/Date", "Date")}} al temps representat pel nombre de milisegons passats des de l'1 de gener de 1970, 00:00:00 UTC. Permet nombres negatius per a temps anteriors a aquesta data.
+
{{jsxref("Date.prototype.setUTCDate()")}}
+
Assigna el dia del mes per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCFullYear()")}}
+
Assigna l'any sencer (és a dir, 4 digits per a anys de 4 digits) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCHours()")}}
+
Assigna l'hora per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
+
Assigna els milisegons per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCMinutes()")}}
+
Assigna els minuts per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCMonth()")}}
+
Assigna el mes per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCSeconds()")}}
+
Assigna els segons per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}
+
Assigna l'any (normalment 2-3 digits) per a la data especificada en temps local. Utilitzeu {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} en comptes d'aquest mètode.
+
+ +

Getters amb conversió

+ +
+
{{jsxref("Date.prototype.toDateString()")}}
+
Retorna la part part de data de {{jsxref("Global_Objects/Date", "Date")}} com a string inteligible per humans.
+
{{jsxref("Date.prototype.toISOString()")}}
+
Converteix una data a un string seguint el Format Extés del ISO 8601.
+
{{jsxref("Date.prototype.toJSON()")}}
+
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} utilitzant  {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Ideat per a ser usat per {{jsxref("JSON.stringify()")}}.
+
{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}
+
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} basat en la zona horària GMT (UT). Utilitzeu {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} en comptes d'aquest mètode.
+
{{jsxref("Date.prototype.toLocaleDateString()")}}
+
Retorna un string que representa la part de la data amb temps local, basat en la configuració del sistema.
+
{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}
+
Converteix una data a string tot utilitzant un format string.
+
{{jsxref("Date.prototype.toLocaleString()")}}
+
Retorna un string que representa la data tenint en compte el temps local. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Date.prototype.toLocaleTimeString()")}}
+
Retorna un string que representa la part de temps de la data local basada en la configuració del sistema.
+
{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un string que representa el codi font per a un objecte {{jsxref("Global_Objects/Date", "Date")}} equivalent; aquest valor pot emprar-se per a crear un nou objecte. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Date.prototype.toString()")}}
+
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Date.prototype.toTimeString()")}}
+
Retorna la part de temps de l'objecte {{jsxref("Global_Objects/Date", "Date")}} com a string comprensible per humans.
+
{{jsxref("Date.prototype.toUTCString()")}}
+
Converteix una data a un string utilitzant la zona horària UTC.
+
{{jsxref("Date.prototype.valueOf()")}}
+
Retorna el valor primitiu d'un objecte {{jsxref("Global_Objects/Date", "Date")}}. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +
{{jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf")}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/error/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..53e22669e9 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,151 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Error/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
+ +

Resum

+ +

La propietat Error.prototype representa el prototipus per al constructor {{jsxref("Global_Objects/Error", "Error")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descripció

+ +

Totes les instàncies de {{jsxref("Global_Objects/Error", "Error")}} i les instàncies de {{jsxref("Global_Objects/Error", "non-generic errors", "#Error_types", 1)}} heretèn de Error.prototype. Com totes les funcions constructores, es pot utilitzar el prototipus del constructor per a afegir propietats o mètodes a totes les instànces creades amb aquest constructor.

+ +

Propietats

+ +

Propietats standard

+ +
+
Error.prototype.constructor
+
Especifica la funció que ha creat la instància del prototipus.
+
{{jsxref("Error.prototype.message")}}
+
Missatge d'error.
+
{{jsxref("Error.prototype.name")}}
+
Nom de l'error.
+
+ +

Extensions específiques del venedor

+ +
{{non-standard_header}}
+ +

Microsoft

+ +
+
{{jsxref("Error.prototype.description")}}
+
Descripció de l'error. Similar a {{jsxref("Error.prototype.message", "message")}}.
+
{{jsxref("Error.prototype.number")}}
+
Nombre de l'error.
+
+ +

Mozilla

+ +
+
{{jsxref("Error.prototype.fileName")}}
+
Ruta al fitxer que ha llençat l'error.
+
{{jsxref("Error.prototype.lineNumber")}}
+
Línia del fitxer que ha llençat l'error.
+
{{jsxref("Error.prototype.columnNumber")}}
+
Nombre de columna de la línia que ha llençat l'error.
+
{{jsxref("Error.prototype.stack")}}
+
Conté la traça de l'error.
+
+ +

Mètodes

+ +
+
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un string que conté el codi font de l'objecte {{jsxref("Global_Objects/Error", "Error")}} especificat; es pot emprar aquest valor per a crear un objecte nou. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Error.prototype.toString()")}}
+
Retorna un string que representa l'objecte especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..5f83d25a6f --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,124 @@ +--- +title: EvalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +--- +
{{JSRef}}
+ +

La propietat EvalError.prototype representa el prototip del constructor {{jsxref("EvalError")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descripció

+ +

Totes les instàncies {{jsxref("EvalError")}} hereten de EvalError.prototype. Es pot utilitzar el prototip per afegir propietats o mètodes a totes les instàncies.

+ +

Propietats

+ +
+
EvalError.prototype.constructor
+
Especifica la funció que ha creat el prototip d'una instància.
+
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
+
Missatge d'error. Tot i que l'ECMA-262 especifica que {{jsxref("EvalError")}} hauria de proveir la seva pròpia propietat message, en SpiderMonkey, hereta {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
+
Nom de l'error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
+
Camí cap al fitxer que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
+
Número de línia en el fitxer que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
+
Número de columna en la línia que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
+
Traça de l'error. Heretat de {{jsxref("Error")}}.
+
+ +

Mètodes

+ +

Tot i que l'objecte prototip {{jsxref("EvalError")}} no contè cap mètode en si mateix, les instàncies  {{jsxref("EvalError")}} hereten alguns mètodes a través de la cadena prototip.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definit com a NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definit com a NativeError.prototype.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/map/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..3a7508f042 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,126 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Map/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +
{{JSRef}}
+ +

La propietat Map.prototype representa el prototipus per al constructor de {{jsxref("Map")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descripció

+ +

Les instàncies de {{jsxref("Map")}} hereten de {{jsxref("Map.prototype")}}. Es pot utilitzar el prototipus de l'objecte constructor per a afegir propietats o mètodes a totes les instàncies de Map.

+ +

Propietats

+ +
+
Map.prototype.constructor
+
Retorna la funció que ha creat el una instància del prototipus. Per defecte és la funció {{jsxref("Map")}}.
+
{{jsxref("Map.prototype.size")}}
+
Retorna el nombre de parells clau-valor que conté l'objecte Map.
+
+ +

Mètodes

+ +
+
{{jsxref("Map.prototype.clear()")}}
+
Elimina tots els parells clau-valor de l'objecte Map.
+
{{jsxref("Map.delete", "Map.prototype.delete(clau)")}}
+
Elimina el valor associat a la clau especificada i retorna el valor que el mètode Map.prototype.has(valor) hagués retornat abans d'eliminar-lo. Map.prototype.has(clau) retornarà false després de cridar aquest mètode.
+
{{jsxref("Map.prototype.entries()")}}
+
Retorna un nou objecte Iterator que conté un array de [clau, valor] per a cada element dins l'objecte Map, en estricte ordre d'inserció.
+
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
+
Crida callbackFn per a cada parell clau-valor present a l'objecte Map, recorreguts per ordre d'inserció. Si es proporciona el paràmetre thisArg, aquest s'utilitzarà com a valor de this per a cada crida a callbackFn.
+
{{jsxref("Map.get", "Map.prototype.get(clau)")}}
+
Retorna el valor associat a la clau, o bé undefined si aquesta clau no té cap valor associat.
+
{{jsxref("Map.has", "Map.prototype.has(clau)")}}
+
Retorna un booleà que especifica si la clau té un valor associat en aquest objecte Map o no.
+
{{jsxref("Map.prototype.keys()")}}
+
Retorna un nou objecte Iterator que conté les claus de cada element de l'objecte Map, en ordre d'inserció.
+
{{jsxref("Map.set", "Map.prototype.set(clau, valor)")}}
+
Assigna valor a la clau a l'objecte Map. Retorna l'objecte Map.
+
{{jsxref("Map.prototype.values()")}}
+
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Map, en ordre d'inserció.
+
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+
Retorna un nou objecte Iterator que conté un array de [clau, valor] per a cada element de l'objecte Map, en ordre d'inserció.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("13") }}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} +

8

+
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/number/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..ae733e56ec --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,126 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Number/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +
{{JSRef}}
+ +

La propietat Number.prototype representa el prototipus per al constructor {{jsxref("Number")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descripció

+ +

Totes les instàncies de {{jsxref("Number")}} hereten de Number.prototype. L'objecte prototipus del constructor de {{jsxref("Number")}} pot ser modificat per a afectar totes les instàncies de {{jsxref( "Number")}}.

+ +

Propietats

+ +
+
Number.prototype.constructor
+
Retorna la funció que ha creat la instància d'aquest objecte. Per defecte aquesta és l'objecte {{jsxref("Number")}}.
+
+ +

Mètodes

+ +
+
{{jsxref("Number.prototype.toExponential()")}}
+
Retorna un string que representa el nombre en notació exponencial.
+
{{jsxref("Number.prototype.toFixed()")}}
+
Retorna un string que representa el nombre en notació de punt fixe.
+
{{jsxref("Number.prototype.toLocaleString()")}}
+
Retorna un string amb una representació d'aquest nombbre sensible a la llengua. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Number.prototype.toPrecision()")}}
+
Retorna un string amb una representació de precisió de punt fixe o notació exponencial del nombre.
+
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un objecte literal que representa l'objecte {{jsxref("Number")}} especificat; aquest valor pot ser emprat per a crear un nou objecte. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Number.prototype.toString()")}}
+
Retorna un string que representa l'objecte especificat en el radi (base) especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Number.prototype.valueOf()")}}
+
Retorna el valor primitiu de l'objecte especificat. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/object/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..9451ccfefe --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,215 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +
{{JSRef}}
+ +

La propietat Object.prototype representa el prototipus per a {{jsxref("Object")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descripció

+ +

A JavaScript, tots els objectes hereten de {{jsxref("Object")}}; tots els objectes hereten els mètodes i propietats de Object.prototype, tot i que es poden sobreescriure (excepte un Object amb prototipus null, és a dir, Object.create(null)). Per exemple, altres prototipus de constructors sobreescriuen la propietat constructor i ofereixen els seus propis mètodes {{jsxref("Object.prototype.toString()", "toString()")}}. Els canvis al prototipus Object es propaguen a tots els objectes a no ser que les propietats i mètodes que reben aquests canvis hagin sigut sobreescrites més avall a la cadena de prototipus.

+ +

Propietats

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
Especifica la funció que ha creat el prototipus de l'objecte.
+
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
+
Referencia l'objecte utilitzat com a prototipus quan aquest objecte va ser instanciat.
+
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
+
Permet definir una funció que serà executada quan es cridi com mètode un membre no definit.
+
{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}
+
Retornava el nombre de propietats enumerables que hi hagués a un objecte definit per l'usuari. S'ha eliminat.
+
{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}
+
Referenciava el context d'un objecte. S'ha eliminat.
+
+ +

Mètodes

+ +
+
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associa una funció a una propietat que, quan s'accedeix, executa aquesta funció i retorna el seu valor.
+
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associa una funció a una propietat que, quan s'assigna, executa aquesta funció que modifica la propietat.
+
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna una funció associada a la propietat especificada pel mètode {{jsxref("Object.defineGetter", "__defineGetter__")}}.
+
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna a funció associada a la propietat especificada pel mètode {{jsxref("Object.defineSetter", "__defineSetter__")}}.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
Retorna un booleà que indica si l'objecte conté la propietat especificada com una propietat pròpia d'ell mateix en comptes d'heretar-la a través de la cadena de prototipus.
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
Retorna un booleà que indica si l'objecte espeicfifcat pertany a la cadena de prototipus de l'objecte sobre el que es crida aquest mètode.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
Retorna un booleà que indica si està activat l'atribut intern DontEnum de l'ECMAScript.
+
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un string que conté cofi font que defineix un literal d'objecte que representa l'objecte sobre el que s'executa aquest mètode; aquest valor pot utilitzar-se per a crear un nou objecte.
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
Crida el mètode {{jsxref("Object.toString", "toString()")}}.
+
{{jsxref("Object.prototype.toString()")}}
+
Retorna una representació d'aquest objecte en forma de string.
+
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
+
Esborra un watchpoint d'una propietat de l'objecte.
+
{{jsxref("Object.prototype.valueOf()")}}
+
Retorna el valor primitiu de l'objecte especificat.
+
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
+
Afegeix un watchpoint a una propietat de l'objecte.
+
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
+
Evaluava un string de codi font JavaScript dins el context de l'objecte especificat. S'ha eliminat.
+
+ +

Exemples

+ +

Degut a que JavaScript no res semblant a subclasses d'objectes, la propietat prototype és una bona forma d'utilitzar algunes funcions que fan d'objectes com a "classe base". Per exemple:

+ +
var Person = function() {
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this);
+  this.name = name;
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+Employee.prototype.constructor = Employee;
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name + ', the ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this);
+  this.name = name;
+};
+
+Customer.prototype = Object.create(Person.prototype);
+Customer.prototype.constructor = Customer;
+
+var Mime = function(name) {
+  Person.call(this);
+  this.name = name;
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+Mime.prototype.constructor = Mime;
+
+var bob = new Employee('Bob', 'Builder');
+var joe = new Customer('Joe');
+var rg = new Employee('Red Green', 'Handyman');
+var mike = new Customer('Mike');
+var mime = new Mime('Mime');
+
+bob.greet();
+// Hi, I am Bob, the Builder
+
+joe.greet();
+// Hi, I am Joe
+
+rg.greet();
+// Hi, I am Red Green, the Handyman
+
+mike.greet();
+// Hi, I am Mike
+
+mime.greet();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/set/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..9d6f6e90ee --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,124 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Set/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +
{{JSRef}}
+ +

La propietat Set.prototype representa el prototipus per al constructor de {{jsxref("Set")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descripció

+ +

Les instàncies de {{jsxref("Set")}} hereten de {{jsxref("Set.prototype")}}. Es pot utilitzar el l'objecte prototipus del constructor per a afegir propietats o mètodes a totes les instàncies de Set.

+ +

Propietats

+ +
+
Set.prototype.constructor
+
Retorna la funció que ha creat la instància del prototipus. Per defecte es tracta de la funció {{jsxref("Set")}}.
+
{{jsxref("Set.prototype.size")}}
+
Retorna el nombre de valors emmagatzemats dins l'objecte Set.
+
+ +

Mètodes

+ +
+
{{jsxref("Set.add", "Set.prototype.add(valor)")}}
+
Afegeix un nou element a l'objecte Set amb el valor donat. Retorna l'objecte Set.
+
{{jsxref("Set.prototype.clear()")}}
+
Elimina tots els elements de l'objecte Set.
+
{{jsxref("Set.delete", "Set.prototype.delete(valor)")}}
+
Elimina l'element associat a valor i retorna el que el mètode Set.prototype.has(valor) hagués retornat prèviament a aquesta crida. Després d'aquesta crida Set.prototype.has(valor) retornarà false.
+
{{jsxref("Set.prototype.entries()")}}
+
Retorna un nou objecte Iterator que conté un array de la forma [valor, valor] per a cada element dins l'objecte Set, en ordre d'inserció. El array retornat manté similitud amb el comportament de l'objecte Map, de forma que cada entrada té el mateix valor per a la seva clau i valor.
+
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
+
Crida callbackFn per a cada valor present a l'objecte Set, recorreguts per ordre d'inserció. Si es proporciona el paràmetre thisArg, aquest s'utilitzarà com a valor de this per a cada crida a callbackFn.
+
{{jsxref("Set.has", "Set.prototype.has(value)")}}
+
Retorna un booleà que especifica si la clau té un valor associat en aquest objecte Set o no.
+
{{jsxref("Set.prototype.keys()")}}
+
Es tracta de la mateixa funció que la funció values() i retorna un nou objecte Iterator que conté els valors per a cada element de l'objecte Set, en ordre d'inserció.
+
{{jsxref("Set.prototype.values()")}}
+
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Set, en ordre d'inserció.
+
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
+
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Set, en ordre d'inserció.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("13") }}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}} +

8

+
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..35aea642bd --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,122 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/SyntaxError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +
{{JSRef}}
+ +

La propietat SyntaxError.prototype representa el prototip pel constructor {{jsxref("SyntaxError")}}.

+ +

Descripció

+ +

Totes les instàncies {{jsxref("SyntaxError")}} hereten de SyntaxError.prototype. Es pot utilitzar el prototipus per afegir propietats o mètodes a totes les instàncies.

+ +

Propietats

+ +
+
SyntaxError.prototype.constructor
+
Especifica la funció que ha creat el prototip d'una instància.
+
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
+
Missatge d'error. Tot i que l'ECMA-262 especifica que {{jsxref("SyntaxError")}} hauria de proveir la seva pròpia propietat message, en SpiderMonkey, hereta {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
+
Nom de l'herror. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
+
Ruta a l'arxiu que llança aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
+
Número de línia en el fitxa que llança aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
+
Número de columna en línia que llança aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
+
Traça de l'error. Heretat de {{jsxref("Error")}}.
+
+ +

Mètodes

+ +

Tot i que l'objecte prototip {{jsxref("SyntaxError")}} no conté cap mètode per si mateix, instàncies de{{jsxref("SyntaxError")}} heretes alguns mètodes a través de la cadena prototip.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definit com a NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definit com a NativeError.prototype.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..40c3e72ff6 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,133 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +
{{JSRef}}
+ +

La propietat WeakMap.prototype representa el prototip pel constructor {{jsxref("WeakMap")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descripció

+ +

Les instantànies {{jsxref("WeakMap")}} hereten de {{jsxref("WeakMap.prototype")}}. Es pot utilitzar l'objecte prototip del constructor per afegir propietats o mètodes a totes les instàncies WeakMap.

+ +

WeakMap.prototype és en si mateix només un objecte ordinari:

+ +
Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
+ +

Propietats

+ +
+
WeakMap.prototype.constructor
+
Retorna la funció que ha creat un prototip de la instància. Aquesta és la funció {{jsxref("WeakMap")}} per defecte.
+
+ +

Mètodes

+ +
+
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
+
Elimina qualsevol valor associat a key. WeakMap.prototype.has(key) retornarà false després d'això.
+
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
+
Retorna el valor associat a key, o undefined si no n'hi ha cap.
+
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
+
Retorna un booleà afirmant si un valor s'ha associat o no a la key en l'objecte WeakMap.
+
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
+
Estableix el valor per la key en l'objecte WeakMap. Retorna l'objecte WeakMap.
+
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
+
Elimina totes les parelles clau/valor de l'objecte WeakMap. Vegeu que es posible implementar un objecte WeakMap-like que tingui un mètode .clear() per mitjà d'encapsular un objecte WeakMap que no ho tingui (vegeu un exemple a la pàgina {{jsxref("WeakMap")}})
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Definició inicial
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic36{{CompatGeckoDesktop("6.0")}}11237.1
Objecte ordinari{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}8
Objecte ordinari{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..4e86935904 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,132 @@ +--- +title: WeakSet.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +--- +
{{JSRef}}
+ +

La propietat WeakSet.prototype representa el prototip pel constructor {{jsxref("WeakSet")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descripció

+ +

Les instàncies {{jsxref("WeakSet")}} hereten de {{jsxref("WeakSet.prototype")}}. Es pot utilitzar l'objecte prototip del constructor per afegir propietats o mètodes a totes les instàncies WeakSet.

+ +

WeakSet.prototype és en si mateix només un objecte ordinari

+ +
Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"
+ +

Propietats

+ +
+
WeakSet.prototype.constructor
+
Retorna la funció que ha creat un prototip de la instància. Aquesta és la funció {{jsxref("WeakSet")}} per defecte.
+
+ +

Mètodes

+ +
+
{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}
+
Afegeix un nou element amb el valor donat a l'objecte WeakSet.
+
{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}
+
Elimina l'element associat al value. WeakSet.prototype.has(value) retornarà després false.
+
{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}
+
Retorna un booleà afirmant si un element és o no present amb el valor donat en l'objecte WeakSet.
+
{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}
+
Elimina tots els elements de l'objecte WeakSet.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic36{{ CompatGeckoDesktop(34) }}{{CompatNo}}23{{CompatNo}}
Objecte ordinari{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChrome per AndroidAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile(34) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Objecte ordinari{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/operators/index.html b/files/ca/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..9b6816c2d6 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,287 @@ +--- +title: Operadors aritmètics +slug: Web/JavaScript/Referencia/Operadors/Arithmetic_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

Els operadors aritmètics prenen valors numèrics (poden ser tant literals com ser variables) com a operands seus i retornen un valor numèric únic. Els operadors aritmètics estàndards són la suma (+), la resta (-), la multiplicació (*), i la divisió (/).

+ +

Suma (+)

+ +

L'operador Suma produeix la suma dels operands numèrics o de la concatenació de cadenes.

+ +

Sintaxi

+ +
Operador: x + y
+
+ +

Exemples

+ +
// Nombre + Nombre -> suma
+1 + 2 // 3
+
+// Booleà + Nombre -> suma
+true + 1 // 2
+
+// Booleà + Booleà -> suma
+false + false // 0
+
+// Nombre + String -> concatenació
+5 + "foo" // "5foo"
+
+// String + Booleà -> concatenació
+"foo" + false // "foofalse"
+
+// String + String -> concatenació
+"foo" + "bar" // "foobar"
+
+ +

Resta (-)

+ +

L'operador resta produeix la resta de dos operands, produint la seva diferència.

+ +

Sintaxi

+ +
Operador: x - y
+
+ +

Exemples

+ +
5 - 3 // 2
+3 - 5 // -2
+"foo" - 3 // NaN
+ +

Divisió (/)

+ +

L'operador divisió produeix el quocient dels seus operands on el operand de l'esquerra és el dividend, i l'operand de la dreta és el divisor.

+ +

Sintaxi

+ +
Operador: x / y
+
+ +

Exemples

+ +
1 / 2      // retorna 0.5 a JavaScript
+1 / 2      // retorna 0 in Java
+// (cap dels nombres és explícitament n nombre de coma flotant)
+
+1.0 / 2.0  // retorna 0.5 a JavaScript i Java
+
+2.0 / 0    // retorna Infinity a JavaScript
+2.0 / 0.0  // també retorna Infinity
+2.0 / -0.0 // retorna -Infinity a JavaScript
+ +

Multiplicació (*)

+ +

L'operador multiplicació produeix el producte dels operands.

+ +

Sintaxi

+ +
Operador: x * y
+
+ +

Exemples

+ +
2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"foo" * 2 // NaN
+
+ +

Mòdul (%)

+ +

L'operador mòdul retorna el mòdul del primer operand amb el segon, això és, var1 modulo var2 en la sentència prèvia, on var1 i var2 són variables. La funció mòdul és la resta entera de dividir var1 per var2. Hi ha una proposta per a implementar un operador mòdul real en una futura versió de l'ECMAScript.

+ +

Sintaxi

+ +
Operador: var1 % var2
+
+ +

Exemples

+ +
12 % 5 // 2
+-1 % 2 // -1
+NaN % 2 // NaN
+
+ +

Increment (++)

+ +

L'operador increment incrementa (afegeix un) al seu operand i retorna un valor.

+ + + +

Sintaxi

+ +
Operador: x++ or ++x
+
+ +

Exemples

+ +
// Sufix
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Prefix
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

Decrement (--)

+ +

L'operador decrement decrementa (resta un) al seu operand i retorna el seu valor.

+ + + +

Sintaxi

+ +
Operador: x-- or --x
+
+ +

Exemples

+ +
// Sufix
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Prefix
+var a = 2;
+b = --a; // a = 1, b = 1
+
+ +

Negació unària (-)

+ +

L'operador de negació unària precedeix el seu operand i el nega.

+ +

Sintaxi

+ +
Operator: -x
+
+ +

Exemples

+ +
var x = 3;
+y = -x; // y = -3, x = 3
+
+ +

Operador unari de conversió a nombre (+)

+ +

L'operador unari de conversió a nombre precedeix el seu operand i intenta convertir-lo en un nombre si no ho és ja. Tot i que l'operand de negació unària també pot convertir no-nombres, l'operador de conversió és el mètode més ràpid i recomanat per a convertir quelcom a un nombre ja que no realitza cap altra operació al nombre. Pot convertir cadenes de caràcters representant sencers i nombres en coma flotant, així com els valors true, false i null. Quant a nombres sencers, tant la notació decimal com la hexadecimal (denotada amb el prefixe "0x") estàn suportades. Els nombres negatius també estàn suportats (tot i que no per a hexadecimals). Si no pot interpretar un valor determinat l'operador retornarà NaN.

+ +

Sintaxi

+ +
Operador: +x
+
+ +

Exemples

+ +
+3     // 3
++"3"   // 3
++true  // 1
++false // 0
++null  // 0
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-11.6', 'Additive operators')}}
+ {{SpecName('ES5.1', '#sec-11.5', 'Multiplicative operators')}}
+ {{SpecName('ES5.1', '#sec-11.3', 'Postfix expressions')}}
+ {{SpecName('ES5.1', '#sec-11.4', 'Unary operators')}}		{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-additive-operators', 'Additive operators')}}
+ {{SpecName('ES6', '#sec-multiplicative-operators', 'Multiplicative operators')}}
+ {{SpecName('ES6', '#sec-postfix-expressions', 'Postfix expressions')}}
+ {{SpecName('ES6', '#sec-unary-operators', 'Unary operators')}}		{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html b/files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html new file mode 100644 index 0000000000..f7fbae7b47 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html @@ -0,0 +1,719 @@ +--- +title: Operadors de bits +slug: Web/JavaScript/Referencia/Operadors/Bitwise_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Resum

+ +

Els operadors de bits tracten els seus operands com una seqüència de 32 bits (uns i zeros), en comptes de operar-los com a nombres decimals, hexadecimals o octals. Per exemple, la representació binària del és nombre decimal nou (9) 1001. Els operadors de bits treballen amb aquesta representació binària però el resultat que retorna l'operació sempre és un nombre standard de JavaScript.

+ +

La taula que trobareu a continuació és un resum dels operadors de bits que es poden trobar a JavaScript:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorÚsDescripció
AND binaria & b +

Retorna un 1 a les posicions on el bit de a i el bit de b són 1 i un 0 en totes les altres.

+
OR binaria | b +

Retorna un 1 a les posicions on al menys la posició de a o la de b són 1.

+
XOR binaria ^ b +

Retorna un 1 a cada posició on a és 1 i b és 0 o bé a és 0 i b és 1.

+
NOT binari~ aInverteix els bits de l'operand donat.
Desplaçament a l'esquerraa << bDesplaça els bits de a b posicions a l'esquerra, tot omplint amb zeros les primeres b posicions.
Desplaçament a la dreta conservant el signea >> bDesplaça els bits de a b posicions a la dreta, descartant els bits desplaçats fora.
Desplaçament a la dreta omplint amb zerosa >>> bDesplaça els bits de a b posicions a la dreta, descartant els bits desplaçats fora. Els primers b bits s'omplen amb zeros.
+ +

Enters de 32 bits amb signe

+ +

Els operands de totes les operacions de bits es converteixen a enters amb signe de 32 bits utilitzant el format de complement a 2. Això vol dir que la versió negativa d'un nombre (per exemple 5 vs -5) és exactament la mateixa representació binària però amb els bits invertits (operació de bits NOT del nombre, també coneguda com a complement del nombre) més 1. Per exemple, seguidament es mostra la representació binària de 314:

+ +
00000000000000000000000100111010
+
+ +

I a continuació ~314, és a dir, el complement de 314:

+ +
11111111111111111111111011000101
+
+ +

Finalment es mostra -314, és a dir, el complement a dos de 314:

+ +
11111111111111111111111011000110
+
+ +

El complement a dos garanteix que el bit de més a l'esquerra sempre serà un 0 quan el nombre és positiu i un 1 quan el nombre sigui negatiu. Aquest bit és doncs anomentat el bit de signe degut a això.

+ +

El nombre 0 es representa com a l'enter composat íntegrament de zeros a tots els seus bits.

+ +
0 (base 10) = 00000000000000000000000000000000 (base 2)
+
+ +

El nombre -1 és l'enter composats completament per 1s a tots els seus bits.

+ +
-1 (base 10) = 11111111111111111111111111111111 (base 2)
+
+ +

El nombre -2147483648 (representació hexadecimal: -0x80000000) és l'enter composat per zeros a tots els seus bits a excepciò del bit de més a l'esquerra, que és un 1.

+ +
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+
+ +

El nombre 2147483647 (representació hexadecimal: 0x7fffffff) és el sencer composat per 1 a tots els seus bits a excepció del de més a l'esquerra.

+ +
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+
+ +

Els nombres -2147483648 i 2147483647 són els enters més petit i més gran respectivament que poden ser representats mitjançant un nombre de 32 bits amb signe.

+ +

Operadors lògics de bits

+ +

Conceptualment els operadors lògics de bits funcionen de la següent forma:

+ + + +

& (AND binari)

+ +

Realitza l'operació AND a cada parella de bits. a AND b esdevindrà 1 només si ambdós a i b són 1. La taula de la veritat per a l'operació  AND és la següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba AND b
000
010
100
111
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+
+ +

Realitzar l'operació AND binària de qualsevol nombre amb el zero retornarà zero. Realitzar l'operació AND binària de qualsevol nombre amb -1 retornarà el mateix nombre.

+ +

| (OR binari)

+ +

Realitza la operació OR a cada parella de bits. a OR b retornarà 1 si qualsevol de a o b és 1. La taula de la veritat per a l'operació OR és:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba OR b
000
011
101
111
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+
+ +

Realitzar l'operació OR binària de qualsevol nombre x amb 0 retornarà x. Realitzar l'operació OR binària de qualsevol nombre x amb -1 retornarà ~x

+ +

^ (XOR binari)

+ +

Realitza la operació XOR a cada parella de bits. a XOR b retorna 1 si a i b són diferents. La taula de la veritat per a l'operació XOR és la següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+
+ +

Realitzar l'operació XOR binària de qualsevol nombre x amb 0 retornarà x. Realitzar l'operació OR binària de qualsevol nombre x amb -1 retornarà ~x.

+ +

~ (NOT binari)

+ +

Realitza una operació NOT a cada bit. NOT a retorna el valor invers (també conegut com el complement a 1) de a. La taula de la veritat per a la operació NOT és:

+ + + + + + + + + + + + + + + + +
aNOT a
01
10
+ +
 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+
+ +

Realitzar la operació NOT binària a un nombre x qualsevol retorna -(x + 1). Per exemple, ~5 resulta en -6.

+ +

Exemple amb indexOf:

+ +
var str = 'rawr';
+var searchFor = 'a';
+
+// fora alternativa equivalent a if (-1*str.indexOf('a') <= -1)
+if (~str.indexOf(searchFor)) {
+  // searchFor és dins l'string
+} else {
+  // searchFor no està dins l'string
+}
+
+// valors retornats per (~str.indexOf(searchFor))
+// r == -1
+// a == -2
+// w == -3
+
+ +

Operadors binaris de desplaçament

+ +

Els operadors binaris de desplaçament accepten dos operands: el primer és el valor que serà transformat a enter de 32 bits i al que se li aplicarà el desplaçament. El segon determina el nombre de posicions que es desplaçarà cada bit. La direcció en la que els bits es desplaçaran es determina per l'operador usat.

+ +

Els operadors de desplaçament converteixen els seus operands a enters de 32 bits en ordre big-endian i retornen un valor amb el mateix tipus que l'operand de l'esquerra. L'operand de la dreta hauria de ser menor de 32, però de no ser així només s'utilitzen els primers 5 bits.

+ +

<< (Desplaçament a l'esquerra)

+ +

Aquest operador desplaça el primer operand un nombre específic de bits cap a l'esquerra. Els bits de l'esquerra sobrants són descartats. Per a omplir les primeres posicions de la dreta s'utilitzen zeros.

+ +

Exemple: 9 << 2 resulta en 36:

+ +
     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+
+ +

Desplaçar a l'esquerra qualsevol nombre x y bits resulta en x * 2^y.

+ +

>> (Desplaçament a la dreta preservant el signe)

+ +

Aquest operador desplaça el primer operand un nombre específic de bits a la dreta. Els bits sobrants es descarten. Els bits de l'esquerra s'inicialitzen amb el valor inicial del primer bit de l'esquerra. Degut a que el bit de més a l'esquerra tindrà el mateix valor que el bit de més a l'esquerra abans de realitzar el desplaçament, el bit de signe no canvia. És degut a aquesta propietat que es diu que aquest operand preserva el signe.

+ +

Per exemple, 9 >> 2 resulta en 2:

+ +
     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

De la mateixa manera, -9 >> 2 resulta en -3, ja que el signe es preserva:

+ +
     -9 (base 10): 11111111111111111111111111110111 (base 2)
+                   --------------------------------
+-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+
+ +

>>> (Desplaçament a la dreta omplint amb zeros)

+ +

Aquest operador desplaça el primer operand un nombre específic de bits cap a la dreta. Els bits sobrants degut al desplaçament són descartats. Els bits de l'esquerra són omplerts utilitzant zeros. Com que el bit de signe sempre acaba sent un zero el resultat sempre és no negatiu.

+ +

Per a nombres no negatius, els operadors de desplaçament a la dreta preservant el signe i omplint amb zeros retornen el mateix resultat. Per exemple, 9 >>> 2 resulta en 2, tal com 9 >> 2:

+ +
      9 (base 10): 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

El resultat varia, però, per a nombres negatius. Per exemple, -9 >>> 2 resulta en 1073741821, el qual es diferent de -9 >> 2 (que retorna -3):

+ +
      -9 (base 10): 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+
+ +

Exemples

+ +

Exemple: Marques i màscares de bits

+ +

Els operadors lògics de bits s'empren tot sovint per a crear, manipular i llegir seqüències de marques, les quals realitzen uns funció similar a les variables booleanes. El seu avantatge davant les variables booleanes és que les seqüències de marques utilitzen molta menys memòria (per un factor de 32).

+ +

The bitwise logical operators are often used to create, manipulate, and read sequences of flags, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).

+ +

Suposem 4 marques:

+ + + +

Aquestes marques són representades per una seqüència de bits: DCBA. Quan una marca està activada, té un valor de 1. Quan una marca no està activa rep un valor de 0. Suposem que una variable anomenada flags (marques en anglès) té el valor binari 0101:

+ +
var flags = 5;   // 0101 en binari
+
+ +

Aquest valor indica:

+ + + +

Com que les operacions be bits utilitzen nombres de 32 bits, 0101 és en realitat 00000000000000000000000000000101, però els zeros a l'esquerra es poden obviar ja que no contenen informació útil.

+ +

Una màscara de bits és una seqüència que pot manipular i/o llegir marques. És molt comú definir màscares "primitives" per a cada marca:

+ +
var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+
+ +

Es fàcil crear noves màscares mitjançant operacions de bits lògiques sobre les màscares primitives. Per exemple, la màscara de bits 1011 es pot crear mitjançant operacions OR sobre FLAG_A, FLAG_B i FLAG_D:

+ +
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
+
+ +

Els valors individuals d'una marca es poden obtindre mitjançant una operació AND de la seqüència de marques amb la màscara primitiva corresponent. La màscara de bits descarta els bits de les marques que no s'escauen. Per exemple, la màscara de bits 0100 es pot emprar per veure si la marca C està activa:

+ +
// si tenim un gat...
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // ... fer coses
+}
+
+ +

Una màscara de bits amb múltiples marques activades funciona com un "or". Per exemple els següents dos blocs de codi són equivalents:

+ +
// si tenim un ratpenat o un gat...
+// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+if ((flags & FLAG_B) || (flags & FLAG_C)) {
+   // ... fer coses
+}
+
+ +
// si tenim un ratpenat o un gat...
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // ... fer coses
+}
+
+ +

Les marques es poden activar mitjançant una operació OR amb la màscara, on cada bit amb el valor 1 activarà la marca corresponent si no està ja activada. Per exemple, la màscara de bits 1100 pot ser emprada per a activar les marques C i D:

+ +
// si, tenim un gat i un ànec
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Les marques es poden desactivar mitjançant una operació AND amb una màscara de bits, on cada bit amb el valor de zero desactivarà la marca corresponent si no està ja desactivada. Aquestes màscares poden generar-se fàcilment mitjançant una operació NOT sobre la màscara primitiva adient. Per exemple, la màscara 1010 pot ser emprada per a desactivar les marques A i C:

+ +
// no, no tenim un problema amb formigues ni tenim un gat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

També es podría haver creat la màscara amb ~FLAG_A & ~FLAG_C (Llei de De Morgan):

+ +
// no, no tenim un problema amb formigues ni tenim un gat
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Es pot invertir una màscara (entenem per invertir activar-la si està desactivada i desactivar-la si està activada. És a dir, invertir el seu valor) mitjançant una operació XOR amb una màscara de bits, on cada bit amb el valor 1 invertirà el valor de la marca corresponent. Per exemple, la màscara de bits 0110 pot ser emprada per invertir les marques B i C:

+ +
// Si no teniem un ratpenat, ara en tenim un
+// i si en teniem un, adéu ratpenat
+// El mateix amb els gats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Finalment, les marques poden ser invertides mitjançant l'operador NOT:

+ +
// entrant a l'univers paral·lel
+flags = ~flags;    // ~1010 => 0101
+
+ +

Xuletes per conversions

+ +

Converteix un String binari a un Number decimal:

+ +
var sBinString = "1011";
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+
+ +

Converteix un Number decimal en un String binari:

+ +
var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+
+ +

Automatització de la creació de màscares

+ +

El procés de creació de màscares per a valors Booleans pot ser automatitzat:

+ +
function createMask () {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+
+ +

Algorisme invers: un array de booleans a partir d'una màscara

+ +

El codi següent crea un Array de Booleans a partir d'una màscara:

+ +
function arrayFromMask (nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) {
+    throw new TypeError("arrayFromMask - out of range");
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert("[" + array1.join(", ") + "]");
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+
+ +

Ambdós algorismes poden ser testejats a l'hora...

+ +
var nTest = 19; // la nostra màscara personal
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

Només amb finalitat didàctica (ja que disposem del mètode Number.toString(2)), es mostra com és posible modficiar l'algorisme arrayFromMask per a crear un String que contingui la representació d'un Number en comptes d'un Array de Booleans:

+ +
function createBinaryString (nMask) {
+  // nMask ha d'estar entre -2147483648 i 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32;
+       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
ECMAScript 1a Edició.StandardDefinició inicial
{{SpecName('ES5.1', '#sec-11.4.8', 'Bitwise NOT operator')}}
+ {{SpecName('ES5.1', '#sec-11.7', 'Bitwise shift operators')}}
+ {{SpecName('ES5.1', '#sec-11.10', 'Binary bitwise operators')}}		{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-bitwise-not-operator', 'Bitwise NOT operator')}}
+ {{SpecName('ES6', '#sec-bitwise-shift-operators', 'Bitwise shift operators')}}
+ {{SpecName('ES6', '#sec-binary-bitwise-operators', 'Binary bitwise operators')}}		{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterístiquesChromeFirefox (Gecko)Internet ExplorerOperaSafari
Bitwise NOT (~){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise AND (&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise OR (|){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise XOR (^){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Left shift (<<){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Right shift (>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Unsigned right shift (>>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Bitwise NOT (~){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise AND (&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise OR (|){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise XOR (^){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Left shift (<<){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Right shift (>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Unsigned right shift (>>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html b/files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html new file mode 100644 index 0000000000..591e1fbc4f --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html @@ -0,0 +1,302 @@ +--- +title: Operadors Lògics +slug: Web/JavaScript/Referencia/Operadors/Logical_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

Els operadors lògics s'utilitzen normalment amb valors Boolean (lògics). En cas de serh-hi presents, retornen un valor booleà. Tot i així, els operadors && i || retornen el valor d'un dels operands especificats, així que si aquests operadors es fan servir amb valors no booleans, poden retornar un valor no booleà.

+ +

Descripció

+ +

Els operadors lògics es descriuren en la taula següent:

+ + + + + + + + + + + + + + + + + + + + + + + + +
OperadorÚsDescripció
AND lògic (&&)expr1 && expr2Retorna expr1 si es pot convertir en false; sinó, retorna expr2. Així, quan es fa servir amb valors booleans, && retorna true si ambdós operands són true; de ser el contrari, retorna false.
OR lògic(||)expr1 || expr2Retorna expr1 si es pot converir en true; de ser al contrari, retorna expr2. Així, quan s'usa amb valors Booleans, || retorna true si l'operand és true; si amdós són false, retorna false.
NOT lògic (!)!exprRetorna false si el seu únic operand pot convertir-se a true; sinó, retorna true.
+ +

Exemples d'expressions que es poden converir a false son aquelles que avaluen null, 0, la cadena buida (""), o undefined.

+ +

Tot i que els operadors && i || es poden fer servir amb operands que no siguin valors Booleans, poden ser considerats operadors Booleans ja que els valors que retornen sempre es poden convertir en valors Booleans.

+ +

Avaluació de tipus curtcircuit

+ +

Com a expressions lògiques que són, s'avaluen d'esquerra a dreta, they are tested for possible "short-circuit" evaluation fent servir les regles següents:

+ + + +

Les regles de la lògica garanteixen que aquestes avaluacions són sempre correctes. Fixeu-vos que la part quelcom d'adalt no s'avalua, així que els efectes secundaris d'això no tindràn efecte. Fixeu-vos també que la part de l'expressió de dalt anomenada quelcom és una expressió lògica simple (com s'indiquen amb els parèntesis).

+ +

Per exemple, les dues funcions següents són equivalents.

+ +
function shortCircuitEvaluation() {
+  doSomething() || doSomethingElse()
+}
+
+function equivalentEvaluation() {
+  var flag = doSomething();
+  if (!flag) {
+    doSomethingElse();
+  }
+}
+
+ +

Tot i així, les següents expressions no són equivalents degut a la precendència dels operadors, i remarca la importància de requerir que l'operador de la dreta sigui una sola expressió (agrupada, si s'escau, per parèntesi).

+ +
false && true  || true      // returns true
+false && (true || true)     // returns false
+ +

AND lògic (&&)

+ +

El codi següent mostra exemples de l'operador && (AND lògic).

+ +
a1 = true  && true      // t && t returns true
+a2 = true  && false     // t && f returns false
+a3 = false && true      // f && t returns false
+a4 = false && (3 == 4)  // f && f returns false
+a5 = "Cat" && "Dog"     // t && t returns "Dog"
+a6 = false && "Cat"     // f && t returns false
+a7 = "Cat" && false     // t && f returns false
+
+ +

OR lògic (||)

+ +

El codi següent mostra exemples de l'operador || (OR lògic).

+ +
o1 = true  || true       // t || t returns true
+o2 = false || true       // f || t returns true
+o3 = true  || false      // t || f returns true
+o4 = false || (3 == 4)   // f || f returns false
+o5 = "Cat" || "Dog"      // t || t returns "Cat"
+o6 = false || "Cat"      // f || t returns "Cat"
+o7 = "Cat" || false      // t || f returns "Cat"
+
+ +

NOT lògic (!)

+ +

El codi següent mostra exemples de l'operador ! (NOT lògic).

+ +
n1 = !true              // !t returns false
+n2 = !false             // !f returns true
+n3 = !"Cat"             // !t returns false
+
+ +

Regles de conversió

+ +

Convertir AND a OR

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 && bCondition2
+ +

sempre és igual a:

+ +
!(!bCondition1 || !bCondition2)
+ +

Convertir OR a AND

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 || bCondition2
+ +

sempre és igual a:

+ +
!(!bCondition1 && !bCondition2)
+ +

Desfer-se de parèntesis aniuats

+ +

Com que les expressions lògiques s'avaluen d'esquerra a dreta, sempre és posible esborrar els parèntesi d'expressions complexes mitjançant les regles següents.

+ +

Desfer-se d'un AND aniuat

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

sempre és igual a:

+ +
bCondition1 || bCondition2 && bCondition3
+ +

Desfer-se d'un OR aniuat

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

sempre és igual a:

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
1a edició de ECMAScript.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}
+ {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}		{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}
+ {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}		{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
AND lògic (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
OR lògic (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
NOT lògic (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
AND lògic (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
OR lògic (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
NOT lògic (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Compatibilitat amb versions anteriors: Comportament a JavaScript 1.0 i 1.1

+ +

Els operadors && i || es comporten de la forma següent:

+ + + + + + + + + + + + + + + + + + + +
OperadorÚsComportament
&&expr1 && expr2Si el primer operand (expr1) es pot converitr a false, l'operador && retorna false en comptes del valor de expr1.
||expr1 || expr2Si el primer operand (expr1) es pot converitr a true, l'operador || retorna true en comptes del valor de expr1.
+ +

Vegeu també

+ + -- cgit v1.2.3-54-g00ecf