From 41c76addc97200aa71105773397aa4edd2af6b4c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:44:35 +0100 Subject: unslug ar: move --- .../api/geolocation/using_geolocation/index.html | 294 --------- .../using_the_geolocation_api/index.html | 166 ----- files/ar/web/api/geolocation_api/index.html | 294 +++++++++ .../using_the_geolocation_api/index.html | 166 +++++ files/ar/web/api/history_api/example/index.html | 416 ++++++++++++ .../\331\205\330\253\330\247\331\204/index.html" | 416 ------------ files/ar/web/api/navigator.battery/index.html | 31 - files/ar/web/api/navigator/battery/index.html | 31 + files/ar/web/css/comments/index.html | 64 ++ .../ar/web/css/css_animated_properties/index.html | 19 + .../basic_concepts_of_flexbox/index.html | 233 +++++++ .../index.html" | 233 ------- .../relationship_of_grid_layout/index.html | 623 ++++++++++++++++++ .../relationship_of_grid_layout_arabic/index.html | 623 ------------------ files/ar/web/css/transform/index.html | 136 ++++ .../index.html" | 136 ---- .../index.html" | 64 -- .../index.html" | 19 - files/ar/web/guide/css/getting_started/index.html | 44 -- .../css/getting_started/readable_css/index.html | 178 ------ .../index.html" | 384 ------------ files/ar/web/guide/css/index.html | 24 - files/ar/web/guide/graphics/index.html | 47 ++ .../guide/html/html5/html5_element_list/index.html | 599 ------------------ files/ar/web/guide/mobile/index.html | 18 + .../index.html" | 47 -- files/ar/web/html/element/article/index.html | 153 +++++ files/ar/web/html/element/bdo/index.html | 108 ++++ .../web/html/element/heading_elements/index.html | 244 +++++++ files/ar/web/html/element/index.html | 239 +++++++ files/ar/web/html/element/span/index.html | 122 ++++ files/ar/web/html/element/tt/index.html | 161 +++++ .../index.html" | 88 --- files/ar/web/javascript/guide/functions/index.html | 698 +++++++++++++++++++++ .../index.html" | 698 --------------------- .../index.html | 424 ------------- .../javascript/reference/functions/get/index.html | 165 +++++ .../web/javascript/reference/functions/index.html | 645 +++++++++++++++++++ .../reference/global_objects/number/index.html | 12 + .../index.html" | 12 - .../get/index.html" | 165 ----- .../index.html" | 645 ------------------- files/ar/web/reference/index.html | 42 ++ files/ar/web/security/index.html | 16 + .../index.html" | 16 - .../\331\205\330\261\330\254\330\271/index.html" | 42 -- 46 files changed, 4652 insertions(+), 5348 deletions(-) delete mode 100644 files/ar/web/api/geolocation/using_geolocation/index.html delete mode 100644 files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html create mode 100644 files/ar/web/api/geolocation_api/index.html create mode 100644 files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html create mode 100644 files/ar/web/api/history_api/example/index.html delete mode 100644 "files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" delete mode 100644 files/ar/web/api/navigator.battery/index.html create mode 100644 files/ar/web/api/navigator/battery/index.html create mode 100644 files/ar/web/css/comments/index.html create mode 100644 files/ar/web/css/css_animated_properties/index.html create mode 100644 files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 "files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" create mode 100644 files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html delete mode 100644 files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html create mode 100644 files/ar/web/css/transform/index.html delete mode 100644 "files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" delete mode 100644 "files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" delete mode 100644 "files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" delete mode 100644 files/ar/web/guide/css/getting_started/index.html delete mode 100644 files/ar/web/guide/css/getting_started/readable_css/index.html delete mode 100644 "files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" delete mode 100644 files/ar/web/guide/css/index.html create mode 100644 files/ar/web/guide/graphics/index.html delete mode 100644 files/ar/web/guide/html/html5/html5_element_list/index.html create mode 100644 files/ar/web/guide/mobile/index.html delete mode 100644 "files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" create mode 100644 files/ar/web/html/element/article/index.html create mode 100644 files/ar/web/html/element/bdo/index.html create mode 100644 files/ar/web/html/element/heading_elements/index.html create mode 100644 files/ar/web/html/element/index.html create mode 100644 files/ar/web/html/element/span/index.html create mode 100644 files/ar/web/html/element/tt/index.html delete mode 100644 "files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" create mode 100644 files/ar/web/javascript/guide/functions/index.html delete mode 100644 "files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" delete mode 100644 files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/ar/web/javascript/reference/functions/get/index.html create mode 100644 files/ar/web/javascript/reference/functions/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/number/index.html delete mode 100644 "files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" delete mode 100644 "files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" delete mode 100644 "files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" create mode 100644 files/ar/web/reference/index.html create mode 100644 files/ar/web/security/index.html delete mode 100644 "files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" delete mode 100644 "files/ar/web/\331\205\330\261\330\254\330\271/index.html" (limited to 'files/ar/web') diff --git a/files/ar/web/api/geolocation/using_geolocation/index.html b/files/ar/web/api/geolocation/using_geolocation/index.html deleted file mode 100644 index a27275b2b5..0000000000 --- a/files/ar/web/api/geolocation/using_geolocation/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Using geolocation -slug: Web/API/Geolocation/Using_geolocation -translation_of: Web/API/Geolocation_API ---- -

The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

- -

The geolocation object

- -

The geolocation API is published through the {{domxref("navigator.geolocation")}} object.

- -

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

- -
if ("geolocation" in navigator) {
-  /* geolocation is available */
-} else {
-  /* geolocation IS NOT available */
-}
-
- -
-

Note: On Firefox 24 and older versions, "geolocation" in navigator always returned true even if the API was disabled. This has been fixed with Firefox 25 to comply with the spec. ({{bug(884921)}}).

-
- -

Getting the current position

- -

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

- -
-

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

-
- -
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The above example will cause the do_something() function to execute when the location is obtained.

- -

Watching the current position

- -

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

- -
-

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

-
- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

Fine tuning response

- -

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

- -

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

- -

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

- -
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Sorry, no position available.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
- -

A demo of watchPosition in use: http://www.thedotproduct.org/experiments/geo/
- 

- -

Describing a position

- -

The user's location is described using a Position object referencing a Coordinates object.

- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

- -

Handling errors

- -

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a PositionError object as its first parameter.

- -
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-
- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

- -

Geolocation Live Example

- - - -

HTML Content

- -
<p><button onclick="geoFindMe()">Show my location</button></p>
-<div id="out"></div>
-
- -

JavaScript Content

- -
function geoFindMe() {
-  var output = document.getElementById("out");
-
-  if (!navigator.geolocation){
-    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
-    return;
-  }
-
-  function success(position) {
-    var latitude  = position.coords.latitude;
-    var longitude = position.coords.longitude;
-
-    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
-
-    var img = new Image();
-    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
-
-    output.appendChild(img);
-  };
-
-  function error() {
-    output.innerHTML = "Unable to retrieve your location";
-  };
-
-  output.innerHTML = "<p>Locating…</p>";
-
-  navigator.geolocation.getCurrentPosition(success, error);
-}
-
- -

Live Result

- -

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

- -

Prompting for permission

- -

Any add-on hosted on addons.mozilla.org which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the pref parameter, if applicable. The function provided in the callback parameter will be called with a boolean value indicating the user's response. If true, the add-on may access geolocation data.

- -
function prompt(window, pref, message, callback) {
-    let branch = Components.classes["@mozilla.org/preferences-service;1"]
-                           .getService(Components.interfaces.nsIPrefBranch);
-
-    if (branch.getPrefType(pref) === branch.PREF_STRING) {
-        switch (branch.getCharPref(pref)) {
-        case "always":
-            return callback(true);
-        case "never":
-            return callback(false);
-        }
-    }
-
-    let done = false;
-
-    function remember(value, result) {
-        return function() {
-            done = true;
-            branch.setCharPref(pref, value);
-            callback(result);
-        }
-    }
-
-    let self = window.PopupNotifications.show(
-        window.gBrowser.selectedBrowser,
-        "geolocation",
-        message,
-        "geo-notification-icon",
-        {
-            label: "Share Location",
-            accessKey: "S",
-            callback: function(notification) {
-                done = true;
-                callback(true);
-            }
-        }, [
-            {
-                label: "Always Share",
-                accessKey: "A",
-                callback: remember("always", true)
-            },
-            {
-                label: "Never Share",
-                accessKey: "N",
-                callback: remember("never", false)
-            }
-        ], {
-            eventCallback: function(event) {
-                if (event === "dismissed") {
-                    if (!done) callback(false);
-                    done = true;
-                    window.PopupNotifications.remove(self);
-                }
-            },
-            persistWhileVisible: true
-        });
-}
-
-prompt(window,
-       "extensions.foo-addon.allowGeolocation",
-       "Foo Add-on wants to know your location.",
-       function callback(allowed) { alert(allowed); });
-
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}[1]910.60
- {{CompatNo}} 15.0
- 16.0		5
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
- {{CompatNo}} 15.0
- 16.0		{{CompatUnknown}}
-
- -

[1] Firefox includes support for locating you based on your WiFi information using Google Location Services. In the transaction between Firefox and Google, data is exchanged including WiFi Access Point data, an access token (similar to a 2 week cookie), and the user's IP address. For more information, please check out Mozilla's Privacy Policy and Google's Privacy Policy covering how this data can be used.

- -

Firefox 3.6 (Gecko 1.9.2) added support for using the GPSD (GPS daemon) service for geolocation on Linux.

- -

See also

- - diff --git a/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html deleted file mode 100644 index d696d6c9f2..0000000000 --- a/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Using the Geolocation API -slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API -translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API ---- -
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
- -

The Geolocation API is used to retrieve the user's location, so that it can for example be used to display their position using a mapping API. This article explains the basics of how to use it.

- -

The geolocation object

- -

The Geolocation API is available through the {{domxref("navigator.geolocation")}} object.

- -

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

- -
if ("geolocation" in navigator) {
-  /* geolocation is available */
-} else {
-  /* geolocation IS NOT available */
-}
-
- -

Getting the current position

- -

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

- -
-

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

-
- -
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The above example will cause the do_something() function to execute when the location is obtained.

- -

Watching the current position

- -

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

- -
-

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

-
- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

Fine tuning the response

- -

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

- -

This object allows you to specify whether to enable high accuracy, a maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out.

- -

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

- -
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Sorry, no position available.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
- -

Describing a position

- -

The user's location is described using a {{domxref("GeolocationPosition")}} object instance, which itself contains a {{domxref("GeolocationCoordinates")}} object instance.

- -

The GeolocationPosition instance contains only two things, a coords property that contains the GeolocationCoordinates instance, and a timestamp property that contains a {{domxref("DOMTimeStamp")}} instance representing the time at which the position data was retrieved.

- -

The GeolocationCoordinates instance contains a number of properties, but the two you'll use most commonly are latitude and longitude, which are what you need to draw your position on a map. Hence many Geolocation success callbacks look fairly simple:

- -
function success(position) {
-  const latitude  = position.coords.latitude;
-  const longitude = position.coords.longitude;
-
-  // Do something with your latitude and longitude
-}
- -

You can however get a number of other bits of information from a GeolocationCoordinates object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.

- -

Handling errors

- -

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a GeolocationPositionError object instance as its first parameter. This object type contains two properties, a code indicating what type of error has been returned, and a human-readable message that describes what the error code means.

- -

You could use it like so:

- -
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-
- -

Examples

- -

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

- - - -

HTML Content

- -
<button id = "find-me">Show my location</button><br/>
-<p id = "status"></p>
-<a id = "map-link" target="_blank"></a>
-
- -

JavaScript Content

- -
function geoFindMe() {
-
-  const status = document.querySelector('#status');
-  const mapLink = document.querySelector('#map-link');
-
-  mapLink.href = '';
-  mapLink.textContent = '';
-
-  function success(position) {
-    const latitude  = position.coords.latitude;
-    const longitude = position.coords.longitude;
-
-    status.textContent = '';
-    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
-    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
-  }
-
-  function error() {
-    status.textContent = 'Unable to retrieve your location';
-  }
-
-  if (!navigator.geolocation) {
-    status.textContent = 'Geolocation is not supported by your browser';
-  } else {
-    status.textContent = 'Locating…';
-    navigator.geolocation.getCurrentPosition(success, error);
-  }
-
-}
-
-document.querySelector('#find-me').addEventListener('click', geoFindMe);
-
- -

Live Result

- -

{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}

diff --git a/files/ar/web/api/geolocation_api/index.html b/files/ar/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..a27275b2b5 --- /dev/null +++ b/files/ar/web/api/geolocation_api/index.html @@ -0,0 +1,294 @@ +--- +title: Using geolocation +slug: Web/API/Geolocation/Using_geolocation +translation_of: Web/API/Geolocation_API +--- +

The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

+ +

The geolocation object

+ +

The geolocation API is published through the {{domxref("navigator.geolocation")}} object.

+ +

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

+ +
if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+
+ +
+

Note: On Firefox 24 and older versions, "geolocation" in navigator always returned true even if the API was disabled. This has been fixed with Firefox 25 to comply with the spec. ({{bug(884921)}}).

+
+ +

Getting the current position

+ +

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

+ +
+

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The above example will cause the do_something() function to execute when the location is obtained.

+ +

Watching the current position

+ +

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

+ +
+

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Fine tuning response

+ +

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

+ +

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

A demo of watchPosition in use: http://www.thedotproduct.org/experiments/geo/
+ 

+ +

Describing a position

+ +

The user's location is described using a Position object referencing a Coordinates object.

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

+ +

Handling errors

+ +

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a PositionError object as its first parameter.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

+ +

Geolocation Live Example

+ + + +

HTML Content

+ +
<p><button onclick="geoFindMe()">Show my location</button></p>
+<div id="out"></div>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Unable to retrieve your location";
+  };
+
+  output.innerHTML = "<p>Locating…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Live Result

+ +

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

+ +

Prompting for permission

+ +

Any add-on hosted on addons.mozilla.org which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the pref parameter, if applicable. The function provided in the callback parameter will be called with a boolean value indicating the user's response. If true, the add-on may access geolocation data.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}[1]910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
+ {{CompatNo}} 15.0
+ 16.0		{{CompatUnknown}}
+
+ +

[1] Firefox includes support for locating you based on your WiFi information using Google Location Services. In the transaction between Firefox and Google, data is exchanged including WiFi Access Point data, an access token (similar to a 2 week cookie), and the user's IP address. For more information, please check out Mozilla's Privacy Policy and Google's Privacy Policy covering how this data can be used.

+ +

Firefox 3.6 (Gecko 1.9.2) added support for using the GPSD (GPS daemon) service for geolocation on Linux.

+ +

See also

+ + diff --git a/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..d696d6c9f2 --- /dev/null +++ b/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -0,0 +1,166 @@ +--- +title: Using the Geolocation API +slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

The Geolocation API is used to retrieve the user's location, so that it can for example be used to display their position using a mapping API. This article explains the basics of how to use it.

+ +

The geolocation object

+ +

The Geolocation API is available through the {{domxref("navigator.geolocation")}} object.

+ +

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

+ +
if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+
+ +

Getting the current position

+ +

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

+ +
+

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The above example will cause the do_something() function to execute when the location is obtained.

+ +

Watching the current position

+ +

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

+ +
+

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Fine tuning the response

+ +

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

+ +

This object allows you to specify whether to enable high accuracy, a maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out.

+ +

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Describing a position

+ +

The user's location is described using a {{domxref("GeolocationPosition")}} object instance, which itself contains a {{domxref("GeolocationCoordinates")}} object instance.

+ +

The GeolocationPosition instance contains only two things, a coords property that contains the GeolocationCoordinates instance, and a timestamp property that contains a {{domxref("DOMTimeStamp")}} instance representing the time at which the position data was retrieved.

+ +

The GeolocationCoordinates instance contains a number of properties, but the two you'll use most commonly are latitude and longitude, which are what you need to draw your position on a map. Hence many Geolocation success callbacks look fairly simple:

+ +
function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}
+ +

You can however get a number of other bits of information from a GeolocationCoordinates object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.

+ +

Handling errors

+ +

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a GeolocationPositionError object instance as its first parameter. This object type contains two properties, a code indicating what type of error has been returned, and a human-readable message that describes what the error code means.

+ +

You could use it like so:

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

Examples

+ +

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

+ + + +

HTML Content

+ +
<button id = "find-me">Show my location</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+
+ +

Live Result

+ +

{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}

diff --git a/files/ar/web/api/history_api/example/index.html b/files/ar/web/api/history_api/example/index.html new file mode 100644 index 0000000000..1bcce72374 --- /dev/null +++ b/files/ar/web/api/history_api/example/index.html @@ -0,0 +1,416 @@ +--- +title: مثال تصفح آجاكس +slug: Web/API/History_API/مثال +translation_of: Web/API/History_API/Example +--- +

هذا مثال عن موقع واب يستعمل تقنية Ajax مُكَـوَّن فقط من ثلاث صفحات (first_page.php، second_page.php  و third_page.php). لرؤية كيفية اشتغالها، رجاء، قم بصنع الملفات التالية (أو git clone https://github.com/giabao/mdn-ajax-nav-example.git)

+ +
ملاحظة: لدمج كامل لعناصر{{HTMLElement("form")}} ضمن هذه الآلية، رجاء ألق نظرة على فقرة Submitting forms and uploading files.
+ +

first_page.php:

+ +
+
<?php
+    $page_title = "First page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

second_page.php:

+ +
+
<?php
+    $page_title = "Second page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

third_page.php:

+ +
+
<?php
+    $page_title = "Third page";
+    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

css/style.css:

+ +
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+ +

include/after_content.php:

+ +
<p>This is the footer. It is shared between all ajax pages.</p>
+
+ +

include/before_content.php:

+ +
<p>
+[ <a class="ajax-nav" href="first_page.php">First example</a>
+| <a class="ajax-nav" href="second_page.php">Second example</a>
+| <a class="ajax-nav" href="third_page.php">Third example</a>
+| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
+</p>
+
+
+ +

include/header.php:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+ +

js/ajax_nav.js:

+ +

(قبل تنفيذها في بيئة العمل، رجاءً اقرأ the note about the const statement compatibility)

+ +
+
"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+
+ +
ملاحظة: التنفيذ الحالي لـconst (تعليمة ثابتة) ليست جزءا من ECMAScript 5. هي مدعومة على متصفحات فايرفوكس وكروم (V8) ومدعومة جزئيا على أوبرا 9+ وسافاري. ليست مدعومة على Internet Explorer 6-9، ولا في معاينة Internet Explorer 10. - ستكون معرفة في ECMAScript 6، لكن بدلالات أخرى. على غرار المتغيرات المعرفة (declared) بـتعليمة let ، الثوابت المعرفة بـconst ستكون. نقوم باستعمالها لغرض تعليمي. إذا كنت تريد توافقا كاملا مع المتصفح، رجاء قم باستبدال تعليمات const بتعليمات var.
+ +

For more information, please see: Manipulating the browser history.

+ +

See also

+ + diff --git "a/files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" "b/files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" deleted file mode 100644 index 1bcce72374..0000000000 --- "a/files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: مثال تصفح آجاكس -slug: Web/API/History_API/مثال -translation_of: Web/API/History_API/Example ---- -

هذا مثال عن موقع واب يستعمل تقنية Ajax مُكَـوَّن فقط من ثلاث صفحات (first_page.php، second_page.php  و third_page.php). لرؤية كيفية اشتغالها، رجاء، قم بصنع الملفات التالية (أو git clone https://github.com/giabao/mdn-ajax-nav-example.git)

- -
ملاحظة: لدمج كامل لعناصر{{HTMLElement("form")}} ضمن هذه الآلية، رجاء ألق نظرة على فقرة Submitting forms and uploading files.
- -

first_page.php:

- -
-
<?php
-    $page_title = "First page";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>first_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

second_page.php:

- -
-
<?php
-    $page_title = "Second page";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>second_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

third_page.php:

- -
-
<?php
-    $page_title = "Third page";
-    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
-
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

css/style.css:

- -
#ajax-loader {
-    position: fixed;
-    display: table;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#ajax-loader > div {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-    text-align: center;
-    background-color: #000000;
-    opacity: 0.65;
-}
-
- -

include/after_content.php:

- -
<p>This is the footer. It is shared between all ajax pages.</p>
-
- -

include/before_content.php:

- -
<p>
-[ <a class="ajax-nav" href="first_page.php">First example</a>
-| <a class="ajax-nav" href="second_page.php">Second example</a>
-| <a class="ajax-nav" href="third_page.php">Third example</a>
-| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
-</p>
-
-
- -

include/header.php:

- -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
- -

js/ajax_nav.js:

- -

(قبل تنفيذها في بيئة العمل، رجاءً اقرأ the note about the const statement compatibility)

- -
-
"use strict";
-
-const ajaxRequest = new (function () {
-
-    function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
-        bIsLoading = false;
-    }
-
-    function abortReq () {
-        if (!bIsLoading) { return; }
-        oReq.abort();
-        closeReq();
-    }
-
-    function ajaxError () {
-        alert("Unknown error.");
-    }
-
-    function ajaxLoad () {
-        var vMsg, nStatus = this.status;
-        switch (nStatus) {
-            case 200:
-                vMsg = JSON.parse(this.responseText);
-                document.title = oPageInfo.title = vMsg.page;
-                document.getElementById(sTargetId).innerHTML = vMsg.content;
-                if (bUpdateURL) {
-                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
-                    bUpdateURL = false;
-                }
-                break;
-            default:
-                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
-                switch (Math.floor(nStatus / 100)) {
-                    /*
-                    case 1:
-                        // Informational 1xx
-                        console.log("Information code " + vMsg);
-                        break;
-                    case 2:
-                        // Successful 2xx
-                        console.log("Successful code " + vMsg);
-                        break;
-                    case 3:
-                        // Redirection 3xx
-                        console.log("Redirection code " + vMsg);
-                        break;
-                    */
-                    case 4:
-                        /* Client Error 4xx */
-                        alert("Client Error #" + vMsg);
-                        break;
-                    case 5:
-                        /* Server Error 5xx */
-                        alert("Server Error #" + vMsg);
-                        break;
-                    default:
-                        /* Unknown status */
-                        ajaxError();
-                }
-        }
-        closeReq();
-    }
-
-    function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
-    }
-
-    function getPage (sPage) {
-        if (bIsLoading) { return; }
-        oReq = new XMLHttpRequest();
-        bIsLoading = true;
-        oReq.onload = ajaxLoad;
-        oReq.onerror = ajaxError;
-        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
-        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
-        oReq.send();
-        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
-    }
-
-    function requestPage (sURL) {
-        if (history.pushState) {
-            bUpdateURL = true;
-            getPage(sURL);
-        } else {
-            /* Ajax navigation is not supported */
-            location.assign(sURL);
-        }
-    }
-
-    function processLink () {
-        if (this.className === sAjaxClass) {
-            requestPage(this.href);
-            return false;
-        }
-        return true;
-    }
-
-    function init () {
-        oPageInfo.title = document.title;
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
-    }
-
-    const
-
-        /* customizable constants */
-        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
-
-        /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
-        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
-        oPageInfo = {
-            title: null,
-            url: location.href
-        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
-            100: "Continue",
-            101: "Switching Protocols",
-            102: "Processing",
-            200: "OK",
-            201: "Created",
-            202: "Accepted",
-            203: "Non-Authoritative Information",
-            204: "No Content",
-            205: "Reset Content",
-            206: "Partial Content",
-            207: "Multi-Status",
-            208: "Already Reported",
-            226: "IM Used",
-            300: "Multiple Choices",
-            301: "Moved Permanently",
-            302: "Found",
-            303: "See Other",
-            304: "Not Modified",
-            305: "Use Proxy",
-            306: "Reserved",
-            307: "Temporary Redirect",
-            308: "Permanent Redirect",
-            400: "Bad Request",
-            401: "Unauthorized",
-            402: "Payment Required",
-            403: "Forbidden",
-            404: "Not Found",
-            405: "Method Not Allowed",
-            406: "Not Acceptable",
-            407: "Proxy Authentication Required",
-            408: "Request Timeout",
-            409: "Conflict",
-            410: "Gone",
-            411: "Length Required",
-            412: "Precondition Failed",
-            413: "Request Entity Too Large",
-            414: "Request-URI Too Long",
-            415: "Unsupported Media Type",
-            416: "Requested Range Not Satisfiable",
-            417: "Expectation Failed",
-            422: "Unprocessable Entity",
-            423: "Locked",
-            424: "Failed Dependency",
-            425: "Unassigned",
-            426: "Upgrade Required",
-            427: "Unassigned",
-            428: "Precondition Required",
-            429: "Too Many Requests",
-            430: "Unassigned",
-            431: "Request Header Fields Too Large",
-            500: "Internal Server Error",
-            501: "Not Implemented",
-            502: "Bad Gateway",
-            503: "Service Unavailable",
-            504: "Gateway Timeout",
-            505: "HTTP Version Not Supported",
-            506: "Variant Also Negotiates (Experimental)",
-            507: "Insufficient Storage",
-            508: "Loop Detected",
-            509: "Unassigned",
-            510: "Not Extended",
-            511: "Network Authentication Required"
-        };
-
-    var
-
-        oReq, bIsLoading = false, bUpdateURL = false;
-
-    oLoadingBox.id = "ajax-loader";
-    oCover.onclick = abortReq;
-    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
-    oCover.appendChild(oLoadingImg);
-    oLoadingBox.appendChild(oCover);
-
-    onpopstate = function (oEvent) {
-        bUpdateURL = false;
-        oPageInfo.title = oEvent.state.title;
-        oPageInfo.url = oEvent.state.url;
-        getPage();
-    };
-
-    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
-
-    // Public methods
-
-    this.open = requestPage;
-    this.stop = abortReq;
-    this.rebuildLinks = init;
-
-})();
-
-
-
- -
ملاحظة: التنفيذ الحالي لـconst (تعليمة ثابتة) ليست جزءا من ECMAScript 5. هي مدعومة على متصفحات فايرفوكس وكروم (V8) ومدعومة جزئيا على أوبرا 9+ وسافاري. ليست مدعومة على Internet Explorer 6-9، ولا في معاينة Internet Explorer 10. - ستكون معرفة في ECMAScript 6، لكن بدلالات أخرى. على غرار المتغيرات المعرفة (declared) بـتعليمة let ، الثوابت المعرفة بـconst ستكون. نقوم باستعمالها لغرض تعليمي. إذا كنت تريد توافقا كاملا مع المتصفح، رجاء قم باستبدال تعليمات const بتعليمات var.
- -

For more information, please see: Manipulating the browser history.

- -

See also

- - diff --git a/files/ar/web/api/navigator.battery/index.html b/files/ar/web/api/navigator.battery/index.html deleted file mode 100644 index 563c6d5288..0000000000 --- a/files/ar/web/api/navigator.battery/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Navigator.battery -slug: Web/API/Navigator.battery -tags: - - API - - batter - - navigator.battery - - المراجع - - كائن البطارية -translation_of: Web/API/Navigator/battery ---- -

{{ ApiRef() }}

-

الملخص

-

يقوم كائن battery بتقديم معلومات حول مستوى شحن بطارية النظام.

-

بإمكانك أيضاً التنصت على الأحداث التي يرسلها النظام حول تحديثات حالة البطارية.هذه الأداة تندرج تحت تطبيق الواجهة البرمجية لحالة البطارية,اقرأ ذلك المستند لتفاصيل إضافية,مع دليل لكيفية أستعمالها,و نموذج برمجي.

-

الشكل العام

-
var battery = window.navigator.battery;
-

القيمة

-

navigator.battery هو كائن {{domxref("لإدارة البطارية.")}}.

-

المواصفات

-

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

-

توافق المتصفحات

-

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

-

اقرأ أيضاً

- diff --git a/files/ar/web/api/navigator/battery/index.html b/files/ar/web/api/navigator/battery/index.html new file mode 100644 index 0000000000..563c6d5288 --- /dev/null +++ b/files/ar/web/api/navigator/battery/index.html @@ -0,0 +1,31 @@ +--- +title: Navigator.battery +slug: Web/API/Navigator.battery +tags: + - API + - batter + - navigator.battery + - المراجع + - كائن البطارية +translation_of: Web/API/Navigator/battery +--- +

{{ ApiRef() }}

+

الملخص

+

يقوم كائن battery بتقديم معلومات حول مستوى شحن بطارية النظام.

+

بإمكانك أيضاً التنصت على الأحداث التي يرسلها النظام حول تحديثات حالة البطارية.هذه الأداة تندرج تحت تطبيق الواجهة البرمجية لحالة البطارية,اقرأ ذلك المستند لتفاصيل إضافية,مع دليل لكيفية أستعمالها,و نموذج برمجي.

+

الشكل العام

+
var battery = window.navigator.battery;
+

القيمة

+

navigator.battery هو كائن {{domxref("لإدارة البطارية.")}}.

+

المواصفات

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

توافق المتصفحات

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

اقرأ أيضاً

+ diff --git a/files/ar/web/css/comments/index.html b/files/ar/web/css/comments/index.html new file mode 100644 index 0000000000..4fbf59d3f9 --- /dev/null +++ b/files/ar/web/css/comments/index.html @@ -0,0 +1,64 @@ +--- +title: التعليقات +slug: Web/CSS/التعليقات +tags: + - CSS + - تعليقات + - مرجع + - ملاحظات +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

تعليقات CSS تستخدم من أجل إضافة جمل توضيحية وتنبيهات في الكود أو حتى لمنع المتصفح من تطبيق بعض الأكواد المكتوبة في ورقة الأنماط (ملف CSS)، هذه التعليقات لا تؤثر على تصميم الملفات نهائيًا.

+ +

طريقة الكتابة

+ +

يمكن كتابة التعليقات في أي مكان داخل ورقة الأنماط، سواء كانت بسطر واحد أو بعدة أسطر.

+ +
/* تعليق */
+ +

أمثلة

+ +
/* تعليق بسطر واحد */
+
+/*
+تعليق
+يمكن
+كتابته
+بأكثر
+من
+سطر
+*/
+
+/* التعليق أدناه جعل الخواص المذكروة للعنصر
+   Span
+   دون تأثير */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+
+ +

تنبيهات

+ +

الرمز /* */ يستخدم في كلا الحالتين سطر واحد أو متعدد الأسطر، لا يوجد أي طريقة أخرى من أجل كتابة تعليقات داخل ورقة الأنماط، عندما تستخدم عنصر {{htmlelement("style")}} فيمكنك استخدام <!-- --> من أجل إخفاء أكواد CSS عن المتصفحات القديمة، رغم أن ذلك غير مستحسن، معظم المبرمجين يستخدمون صيغة /* */.

+ +

لا يمكن كتابة التعليقات بشكل متداخل، بمعنى أن التعليقات ستبدأ عند كتابة /* وستغلق عند أول علامة */ تقابلها.

+ +

الخصائص

+ + + +

اقرأ أيضًا

+ + + +

 

diff --git a/files/ar/web/css/css_animated_properties/index.html b/files/ar/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..d9a0da44f2 --- /dev/null +++ b/files/ar/web/css/css_animated_properties/index.html @@ -0,0 +1,19 @@ +--- +title: العناصر التي يمكن تحريكها باستخدام CSS Transitions +slug: Web/CSS/العناصر_التي_يمكن_تحريكها_باستخدام_CSS_Transitions +tags: + - CSS + - CSS3 + - تحريك + - ترانزشن + - سلاسة + - نعومة +translation_of: Web/CSS/CSS_animated_properties +--- +

{{CSSRef}}

+ +

يمكن تحريك بعض عناصر CSS بشكل ناعم وسلس عندما تتغير قيم وخصائص العناصر، سواء باستخدام CSS Animations أو CSS Transitions.

+ +

هذه قائمة بالعناصر التي يمكن استخدام خاصية Transitions عليها:

+ +

{{CSSAnimatedProperties}}

diff --git a/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..c30338c62b --- /dev/null +++ b/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,233 @@ +--- +title: المفاهيم الأساسية للصندوق المرن +slug: Web/CSS/CSS_Flexible_Box_Layout/المفاهيم_الأساسية_للصندوق_المرن +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

يشار لوحدة الصندوق المرن عادةً  بالflexbox وقد تم تصميمها كنموذج تخطيط احادي البعد. وكطريقة يمكنها ان تعرض توزيع المسافات بين العناصر في واجهة وقدرات محاذاة (ترتيب) قوية. تقدم هذه المقالة الخطوط العريضة للميزات الرئيسية لفلكس بوكس (flexbox)، والتي سنكتشف تفاصيلها في بقية هذه الارشادات.

+ +

عندما نوصف الفلكس بوكس بأنه احادي البعد، نقوم بوصف الحقيقة ان الفلكس بوكس يتعامل مع المخطط في بعد واحد في ذات الوقت — إما كصف أو كعمود. وهذا يمكن أن يتناقض مع نموذج ثنائي الأبعاد الخاص بـتخطيط شبكة CSS Grid والذي يتحكم في الصفوف والاعمدة معاً.

+ +

مِحوَريّ الفلكس بوكس

+ +

عندما نشتغل بفلكس بوكس نحتاج للتفكير في محورين — المحور الاساشي او الرئيسي ومحور التقاطع (المتقاطع).
+ يتم تعريف المحور الرئيسي بإستخدام الخاصية {{cssxref("flex-direction")}}
+ ومن هناك يتم تعامد المحور المتقاطع بناءًا على المحور الرئيسي.
+ لذا يجدر فهم كيفية عملها منذ البداية.

+ +

المحور الرئيسي

+ +

يتم تعريف المحور الرئيسي عن طريق flex-direction  ، والتي لديها اربع قيم ممكنة هي:

+ + + +

هل تختار الصف او الصف المعكوس؟ سيشتغل المحور الاساسي في اتجاه مضمَن مع الصف.

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

اختر العامود او العامود المعكوس وسيعمل المحور الاساسي من رأس الصفحة الى قاعها في اتجاه السد

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

محور التقاطع

+ +

يتعامد محور التقاطع على المحور الرئيسي الذي تم تعريفة مسبقا باستخدام flex-direction كصف row  او صف معكوس row-reverse  فيشغل دور الاعمدة.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

أما لو كان عامود column او عامود معكوس column-reverse  فيشغل محور التقاطع دور الصف.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

من المهم فهم اي محور من الاخر عندما نبدأ في البحث عن الترتيب والاصطفاف لعانصر الفلكس، خصائص ميزات الفلكس بوكس التي ستقوم بإصطفافها وترتيب المحتوى على محور او الاخر.

+ +

خطوط البداية والنهاية

+ +

من النقاط المهمة للغاية أن نفهم كيف يقوم فلكس بوكس بعدم افتراض كيفية الكتابة في الوثيقة. ففي الماضي، كانت الCSS مثقولة الوزن نحو الكتابة الافقية و اسلوب كتابة اليسار الى اليمين. اما في المخططات الحديثة تشمل نطاق من اساليب الكتابة. فلهذا لم نعد نفرض ان بداية خط الكتابة سيكون في يسار اعلى الصفحة ويسري الى اليمين، بصفوف جديدة تظهر اسفل بعضها تلو الاخرى.

+ +

يمكنك ان تقرأ اكثر عن العلاقة ما بين الفلكس بوكس وخصائص اساليب الكتابة في مقالة لاحقة. ومع ذلك، من المفروض ان يساعدك الوصف التالي بشرح السبب للماذا لا نتحدث عن تحديد يسار ويمين واعلى واسفل عندما نقوم بوصف اتجاه سير عناصر فلكس.

+ +

اذا كان الصف هو اتجاه فلكس،  flex-direction: row ونعمل باستخدام اللغة الانجليزية.
+ اذن ستكون حافة البداية للمحور الاساسي على اليسار ويقابلها على الجهة الاخرى علي اليمين حافة النهاية.

+ +

Working in English the start edge is on the left.

+ +

اما اذا كنا سنستخدم اللغة العربية، فستكون حافة البداية للمحور الاساسي على اليمين ويقابلها على الجهة الاخرى علي اليسار حافة النهاية.

+ +

The start edge in a RTL language is on the right.

+ +

وفي كلا الحالتين ستكون حافة البداية للمحور المتقاطع في الاعلى من حاوية الفلكس وحافة النهاية في اسفلها. وذلك لان اللغتين يسيرون في سياق افقي للكتابة.

+ +

بعد فترة، التفكير في البداية والنهاية بدلا من الايمن والايسر سيصبح طبيعيا اكثر. وسيكون مفيدا عن التعامل مع وسائل التخطيط الاخرى مثل مخطط الشبكة CSS Grid Layout الذي يتبع النمط نفسه.

+ +

حاوية فلكس

+ +

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

+ + + +

The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

+ +

You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Changing flex-direction

+ +

Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting flex-direction: row-reverse will keep the items displaying along the row, however the start and end lines are switched.

+ +

If we change flex-direction to column the main axis switches and our items now display in a column. Set column-reverse and the start and end lines are again switched.

+ +

The live example below has flex-direction set to row-reverse. Try the other values — row, column and column-reverse — to see what happens to the content.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Multi-line flex containers with flex-wrap

+ +

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

+ +

To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

+ +

The flex-flow shorthand

+ +

You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

+ +

In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Properties applied to flex items

+ +

To have more control over flex items we can target them directly. We do this by way of three properties:

+ + + +

We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

+ +

Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

+ +

If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

+ +

This flex container has available space after laying out the items.

+ +

If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

+ +

The flex-basis property

+ +

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

+ +

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

+ +

The flex-grow property

+ +

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

+ +

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

+ +

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

+ +

The flex-shrink property

+ +

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

+ +

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

+ +
+

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

+
+ +

Shorthand values for the flex properties

+ +

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

+ +

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

+ + + +

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

+ +

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

+ +

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

+ +

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

+ +

Try these shorthand values in the live example below.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alignment, justification and distribution of free space between items

+ +

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

+ +

align-items

+ +

The {{cssxref("align-items")}} property will align the items on the cross axis.

+ +

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

+ +

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

+ +

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

+ +

Try the following values of justify-content in the live example:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

+ +

Next steps

+ +

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git "a/files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" "b/files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" deleted file mode 100644 index c30338c62b..0000000000 --- "a/files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: المفاهيم الأساسية للصندوق المرن -slug: Web/CSS/CSS_Flexible_Box_Layout/المفاهيم_الأساسية_للصندوق_المرن -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

يشار لوحدة الصندوق المرن عادةً  بالflexbox وقد تم تصميمها كنموذج تخطيط احادي البعد. وكطريقة يمكنها ان تعرض توزيع المسافات بين العناصر في واجهة وقدرات محاذاة (ترتيب) قوية. تقدم هذه المقالة الخطوط العريضة للميزات الرئيسية لفلكس بوكس (flexbox)، والتي سنكتشف تفاصيلها في بقية هذه الارشادات.

- -

عندما نوصف الفلكس بوكس بأنه احادي البعد، نقوم بوصف الحقيقة ان الفلكس بوكس يتعامل مع المخطط في بعد واحد في ذات الوقت — إما كصف أو كعمود. وهذا يمكن أن يتناقض مع نموذج ثنائي الأبعاد الخاص بـتخطيط شبكة CSS Grid والذي يتحكم في الصفوف والاعمدة معاً.

- -

مِحوَريّ الفلكس بوكس

- -

عندما نشتغل بفلكس بوكس نحتاج للتفكير في محورين — المحور الاساشي او الرئيسي ومحور التقاطع (المتقاطع).
- يتم تعريف المحور الرئيسي بإستخدام الخاصية {{cssxref("flex-direction")}}
- ومن هناك يتم تعامد المحور المتقاطع بناءًا على المحور الرئيسي.
- لذا يجدر فهم كيفية عملها منذ البداية.

- -

المحور الرئيسي

- -

يتم تعريف المحور الرئيسي عن طريق flex-direction  ، والتي لديها اربع قيم ممكنة هي:

- - - -

هل تختار الصف او الصف المعكوس؟ سيشتغل المحور الاساسي في اتجاه مضمَن مع الصف.

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

اختر العامود او العامود المعكوس وسيعمل المحور الاساسي من رأس الصفحة الى قاعها في اتجاه السد

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

محور التقاطع

- -

يتعامد محور التقاطع على المحور الرئيسي الذي تم تعريفة مسبقا باستخدام flex-direction كصف row  او صف معكوس row-reverse  فيشغل دور الاعمدة.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

أما لو كان عامود column او عامود معكوس column-reverse  فيشغل محور التقاطع دور الصف.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

من المهم فهم اي محور من الاخر عندما نبدأ في البحث عن الترتيب والاصطفاف لعانصر الفلكس، خصائص ميزات الفلكس بوكس التي ستقوم بإصطفافها وترتيب المحتوى على محور او الاخر.

- -

خطوط البداية والنهاية

- -

من النقاط المهمة للغاية أن نفهم كيف يقوم فلكس بوكس بعدم افتراض كيفية الكتابة في الوثيقة. ففي الماضي، كانت الCSS مثقولة الوزن نحو الكتابة الافقية و اسلوب كتابة اليسار الى اليمين. اما في المخططات الحديثة تشمل نطاق من اساليب الكتابة. فلهذا لم نعد نفرض ان بداية خط الكتابة سيكون في يسار اعلى الصفحة ويسري الى اليمين، بصفوف جديدة تظهر اسفل بعضها تلو الاخرى.

- -

يمكنك ان تقرأ اكثر عن العلاقة ما بين الفلكس بوكس وخصائص اساليب الكتابة في مقالة لاحقة. ومع ذلك، من المفروض ان يساعدك الوصف التالي بشرح السبب للماذا لا نتحدث عن تحديد يسار ويمين واعلى واسفل عندما نقوم بوصف اتجاه سير عناصر فلكس.

- -

اذا كان الصف هو اتجاه فلكس،  flex-direction: row ونعمل باستخدام اللغة الانجليزية.
- اذن ستكون حافة البداية للمحور الاساسي على اليسار ويقابلها على الجهة الاخرى علي اليمين حافة النهاية.

- -

Working in English the start edge is on the left.

- -

اما اذا كنا سنستخدم اللغة العربية، فستكون حافة البداية للمحور الاساسي على اليمين ويقابلها على الجهة الاخرى علي اليسار حافة النهاية.

- -

The start edge in a RTL language is on the right.

- -

وفي كلا الحالتين ستكون حافة البداية للمحور المتقاطع في الاعلى من حاوية الفلكس وحافة النهاية في اسفلها. وذلك لان اللغتين يسيرون في سياق افقي للكتابة.

- -

بعد فترة، التفكير في البداية والنهاية بدلا من الايمن والايسر سيصبح طبيعيا اكثر. وسيكون مفيدا عن التعامل مع وسائل التخطيط الاخرى مثل مخطط الشبكة CSS Grid Layout الذي يتبع النمط نفسه.

- -

حاوية فلكس

- -

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

- - - -

The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

- -

You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Changing flex-direction

- -

Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting flex-direction: row-reverse will keep the items displaying along the row, however the start and end lines are switched.

- -

If we change flex-direction to column the main axis switches and our items now display in a column. Set column-reverse and the start and end lines are again switched.

- -

The live example below has flex-direction set to row-reverse. Try the other values — row, column and column-reverse — to see what happens to the content.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Multi-line flex containers with flex-wrap

- -

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

- -

To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

- -

The flex-flow shorthand

- -

You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

- -

In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Properties applied to flex items

- -

To have more control over flex items we can target them directly. We do this by way of three properties:

- - - -

We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

- -

Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

- -

If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

- -

This flex container has available space after laying out the items.

- -

If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

- -

The flex-basis property

- -

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

- -

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

- -

The flex-grow property

- -

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

- -

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

- -

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

- -

The flex-shrink property

- -

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

- -

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

- -
-

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

-
- -

Shorthand values for the flex properties

- -

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

- -

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

- -

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

- - - -

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

- -

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

- -

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

- -

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

- -

Try these shorthand values in the live example below.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alignment, justification and distribution of free space between items

- -

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

- -

align-items

- -

The {{cssxref("align-items")}} property will align the items on the cross axis.

- -

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

- -

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

- -

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

- -

Try the following values of justify-content in the live example:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

- -

Next steps

- -

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..7ccf10282f --- /dev/null +++ b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,623 @@ +--- +title: العلاقة بين التنسيق الشبكي وطرق التنسيق الأخرى +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout_arabic +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

صمم التنسيق الشبكي ليعمل جنبا إلى جنب مع جميع التنسيقات الأخرى مشكلا بذلك نظاما متكاملا لإنشاءها. في هذا الدليل سوف نشرح كيف يتوافق النظام الشبكي مع التقنيات الأخرى التي كنت قد استعملتها سابقا.

+ +

نظام الشبكة ونظام الأجزاء المرنة

+ +

إن الفرق الأساسي بين نظام التنسيق الشبكي ونظام نتسيق الأجزاء المرنة يثمثل في كون أن نظام نتسيق الأجزاء المرنة قد صمم للتنسيق على بعد واحد -أي أفقيا أو عموديا. بينما صمم نظام التنسيق الشبكي لإنشاء تنسيقات على بعدين -إي أفقيا وعموديا في نفس الوقت. إن نصوص المواصفات المعيارية لكلا النظامين يلتقيان في العديد من المميزات، لذلك فإن كنت قد تعلمت استعمال نظام الأجزاء المرنة، فإن هذا التشابه المتواجد بينهما سيمكنك من ضبط استعمال نظام الشبكة.

+ +

النسق ذو بعد واحد مقارنة مع النسق ذو بعدين

+ +

سنستعمل مثالا بسيطا لإظاهر الإختلاف المتواجد بين النسق ذو بعد واحد والنسق ذو بعدين.

+ +

في هذا المثال الأول، سنستعمل نسق الأجزاء المرنة لتنسيق مجموعة من المربعات. حيث أتوفر على حاوية تضم خمسة أبناء من العناصر، وقد أعطيت خاصيات وقيم flex بيحث ستتمكن هذه العناصر من التمدد والتقلص انطلاقا من 200 بيكسل.

+ +

وقمنا كذلك بإعطاء القيمة wrap للخاصية  {{cssxref("flex-wrap")}}،  مما ينتج عنه انتقال العناصر إلى سطر جديد في حالة إن كانت مساحة الحاوية غير كافية لضمان قيمة المرونة الأساسية.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

في هذه الصورة، يمكننا ملاحظة انتقال (قفز) عنصرين إلى سطر جديد. حيث يتقاسمان نفس المساحة المتوفرة وأنهما غير منتظمين في نفس العمود مع العناصر المتواجدة بالإعلى. و يرجع ذلك إلى كون الأسطر ( أو الأعمدة في حالة استعمال الأعمدة) الجديدة المكونة من انتقال عناصر مرنة جديدة تصبح حاويات (أوعية) مرنة كذلك. ويحدث هذا التوزيع على طول السطر.

+ +

وسؤال المطروح هو كيف يمكننا تنظيم هاته العناصر في نفس العمود. وهنا تأتي الحاجة إلى طريقة للتنسيق العناصر على بعدين: تريد ضبط توزيع العناصر من خلال أسطر وأعمدة، وهنا يبدأ دور التنسيق الشبكي.

+ +

نفس التنسيق باستعمال نظام الشبكات

+ +

في المثال الموالي، قمنا بانشاء نفس النسق باستعمال نظام الشبكة. حيث نتوفر حاليا على ثلاثة مسارات عمودية قياسها 1fr. مع العلم أننا لسنا بحاجة إلى إضافة أية خاصية على مستوى العناصر نفسها، حيث ستتوزع  هاته العناصر بشكل تلاقئ وسيتموضع كل عنصر داخل خلية من الشبكة التي أنشأنها. ويمكننا ملاحظة أن هاته العناصر موزعة (متراصة) في أسطر وأعمدة، بالإضافة إلى تواجد فجوة في نهاية السطر الثاني عند استعمالنا لخسمة عناصر.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

من بين الأسئلة البسيطة التي يتوجب على كل مصمم طرحها عند محاولة الاختيار بين نظام الأجزاء المرنة و نظام الشبكة هي:

+ + + +

المحتوى الخارجي أو النسق الداخلي؟

+ +

توجد طريقة أخرى لتحديد النظام المناسب الذي يجب عليك اختياره عند محاولتك الاختيار بين نظام الأجزاء المرنة و نظام الشبكة، بالإضافة إلى الطريقة التي تعرفنا عليها سابقا والمتمحورة حول الفرق بين العمل على بعد واحد أو بعدين.

+ +

نظام الأجزاء المرنة Flexbox يعتمد على المحتوى الخارجي. من بين طرق الاستعمال لهذا النظام وهي عند توفرك على مجموعة من العناصر وتريد توزيعها على مساحة لحاوية بشكل متساوي. حيث أن حجم محتوى كل عنصر هو المحدد الأول للمساحة التي سيحتلها ( أي أن المساحة المحتلة متناسبة مع حجم محتوى العنصر). عند انتقال العناصر إلى سطر جديد فسنتظم نفسها بناء على مقاسها و المساحة المتوفرة في هذا السطر الجديد.

+ +

يعتمد نظام الشبكة على التنسيق الداخلي. أي عندما نعمل بنظام الشبكة فإننا نقوم تعريف نسق مسبقا ونحدده ثم نقوم بوضع هذه العناصر داخل هذا النسق (أو الشبكة). ويمكن كذلك استعمال خاصيات التموضع الآلي التي تعمل على توزيع العناصر داخل الشبكة في خلايا محددة باتباع نظام الشبكة المحكمة. يمكن أيضا إنشاء مسارات مرنة تتكيف مع حجم المحتوى، هذه التقينة تجعل من حجم المسار يتغيير بالكامل. ( ملاحظة سيأخد المسار حجم العنصر الذي به محتوى أكبر).

+ +

إن كنت تستعمل نظام Flex وشعرت بأنك تفقد شيئا من المرونة التي يفرها فهنالك احتمال كبير على أنك بحاجة لاستعمال نظام Grid. فعلى سبيل المثال إن قمت بتحديد قيمة مئوية لعرض أحد عناصر نظام Flex لكي يأخد نفس قياس العناصر المتواجدة في السطر الأعلى، في هذه الحالة فعليك استعمال نظام Grid. 

+ +

المحاذات بين الأجزاء

+ +

من بين الخاصيات الأكثر إثارة للكثير منا والتي تقدم بها نظام الأجزاء المرنة هي القدرة ولأول مرة على التحكم في توزيع العناصر والمحاذاة فيما بينها وبشكل واضح. حيث جعل من عملية وضع أي جزء في مركز أية صفحة سهلة للغاية. تتمدد العناصر المرنة لتأخد كل الحيز الموجود بالحاوية، مما يعني إمكانية الحصول على أعمدة متساوية الإرتفاع. حيت تعتبر هاته الأشياء المذكورة من الأمور التي كنا دائما نرغب في فعلها منذ وقت طويل، مما جعلنا نقوم بالبحث وخلق العديد من الحيل لإنشاء تأثير بصري على الأقل مشابه لذلك.

+ +

لقد تمت إضافة خاصيات المحاذاة المتواجدة في نصوص المواصفات المعيارية لنظام الأجزاء المرنة إلى معيار جديد يسمى المحاذاة بين الأجزاء المستوى 3. مما يعني أنها سوف تستعمل في نصوص المواصفات المعيارية، من ضمنها نظام الشبكة. حيث من الممكن كذلك إدراجها في أنظمة التنسيق الأخرى.

+ +

سوف نتطرق وبشكل واضح في دليل مقبل من هاته السلسلة إلى الكيفية التي تعمل بها خاصيات المحاذاة بين الأجزاء في نظام الشبكة. إليك مقارنة بسيطة بين نظام الأجزاء المرنة و نظام الشبكة.

+ +

في المثال الأول والذي يستعمل نظام الأجزاء المرنة، نتوفر على حاوية (وعاء) بها ثلاثة عناصر. قمنا بتحديد ارتفاع هاته الحاوية المرنة من خلال إعطاء قيمة للخاصية {{cssxref("min-height")}} للفئة wrapper. ولكي نبدأ ترتيب العناصر داخل هاته الحاوية المرنة انطلاقا من النهاية قمنا بإعطاء القيمة flex-end للخاصية {{cssxref("align-items")}}. نريد كذلك إلغاء خاصية التمدد الإفتراضية للعنصر box1 وجعله يتمدد ليحتل كل ارتفاع هاته الحاوية بالإضافة لذلك قمنا بإعطاء القيمة stretch للخاصية {{cssxref("align-self")}} بالإضافة قمنا بإعطاء هاته الخاصية القيمة flex-start بالنسية للعنصر box2 لكي يقوم بوضع نفسه (يصطف) انطلاقا من نقطة بداية هاته الحاوية المرنة.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

+ +

 المحاذاة في نظام الشبكات

+ +

في هذا المثال الثاني استعملنا نظام الشبكة لإنشاء نفس التنسيق. حيث سنستعمل خاصيات محاذاة الأجزاء كما ثم تطبيقها في التنسق الشبكي. نقوم بمحاذاة باستعمال start و end عوضا عن flex-start  وflex-end. في حالة التنسيق الشبكي، يتم توزيع العناصر لتستقر في الحيز الشبكي الخاص بها في هاته الشبكة، والمتمثلة في خلية واحدة في هذا المثال، مع إمكانية تكونه من عدد كثير من الخلايا الشبكية.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

+ +

الوحدة fr و flex-basis

+ +

لقد قمنا بالتعرف على الكيفية التي تقوم بها الوحدة fr لتحديد نسبة من المساحة المتوفرللمسارات الشبكية لشبكة حاوية. عند المزج بين الوحدة fr و بين الدالة {{cssxref("minmax", "minmax()")}} فإننا نحصل على نتيجة ( سلوك) مشابهة لخاصيات flex التي يمنحها نظام تنسيق الأجزاء المرنة مع منحنا إمكاينة إنشاء نسق ذو بعدين.

+ +

إن قمنا بالرجوع إلى المثل السابق الذي بينا فيه الفرق بين التنسيق ذو البعد الواحد والتنسيق ذو البعدين، فإننا سنلاحظ الفرق في كفية استجابة بالنسبة لكل منهما. فبالنسبة للتنسيق المرن، وفي حالة تحريك نافذة المتصفح لتوسيع أو تضييق حجمها، فإن نظام الأجزاء المرنة يقوم بعمل جيد في نتظيم عدد العناصر المكونة لكل سطر بناء على المساحة المتوفر. فإن كنا نتوفر على مساحة كبيرة فإن جميع العناصر الخمسة ستجد مكانها في سطر واحد، أما إن كنا نتوفر على حاوية جد صغير فمن الممكن أن نجد أن هاته المساحة تتسع لعنصر واحد فقط.

+ +

وبالمقارنة، فإن النسخة المبنية باستعمال النظام الشبكي تتكون دائما من ثلاثة مسارات عمودية. حيث تقوم هاته المسارات بالتمدد والتقلص، وستظهر لنا ثلاث مسارات عمودية دائما، لأننا قمنا بتحديدها منذ البداية عند تعريفنا لهاته الشبكة.

+ +

الملأ الآلي لمسارات الشبكة

+ +

يمكننا إنشاء تأثير مشابه لنظام الأجزاء المرنة، مع إمكانية المحافظة على تموضع المحتوى بإحكام في أسطر وأعمدة، وذلك باستعمال الدالة repeat و الخاصيتين auto-fill و auto-fit لإنشاء مجموع هاته المسارات.

+ +

في المثال التالي، استعملت الخاصية auto-fill عوضا عن القيم الرقيمة داخل الدالة repeat و تحديد قيمة 200 بيكسل لمجموع هاته المسارات. أي أن هاته الشبكة سوف تعمل على إنشاء العدد الكافي من أعمدة المسارات لتتناسب مع حجم الحاوية.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

عدد المسارات المرنة

+ +

يختلف الوضع هنا بالنسبة لنظام الأجزاء المرنة. في المثال الخاص بنظام الأجزاء المرنة،  تنتقل العناصر إلى السطر الموالي عندما تتجاوز 200 بيكسل. ويمكننا الوصول إلى نفس النتيجة بنظام الشبكة باستعمال  auto-fill والدالة {{cssxref("minmax", "minmax()")}}. وفي المثال الموالي، قمت بإنشاء مسارات آلية الملأ باستعمال الدالة minmax. أريد من المسارات أن تأخذ عرضا لا يقل عن 200 بيكسل، وحددت الحد الأقصى في 1fr. بمجرد أن يقوم المتصفح بحساب عدد المرات المرات الكافية لملأ الحاوية بمسارات ذات قياس 200 بيكسل - مع الأخد بعين الإعتبار قياس الفجوات المتواجدة بين مسارات الشبكة- فإنه يقوم بالتعامل مع المساحة القصوية 1fr كوحدة لتوزيعها بين جميع العناصر المتبيقة.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

+ +

لقد أصبحنا الآن قادرين على إنشاء شبكة مكونة من عدد مرن من المسارات المرنة كذلك، في ظل إمكانية أن تتوزع هذه العناصر وفي نفس الوقت على مستوى أسطر وأعمدة.

+ +

Grid and absolutely positioned elements

+ +

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

+ +

A grid container as containing block

+ +

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

+ +

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+ +

{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}

+ +

You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.

+ +

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

+ +

A grid container as parent

+ +

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

+ +

Image of grid container as parent

+ +

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

+ +

With a grid area as the parent

+ +

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

+ +

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}

+ +

Grid and display: contents

+ +

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and display: contents. The contents value of the display property is a new value that is described in the Display specification as follows:

+ +
+

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

+
+ +

If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.

+ +

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout, to get the different effects you need.

+ + diff --git a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html deleted file mode 100644 index 7ccf10282f..0000000000 --- a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html +++ /dev/null @@ -1,623 +0,0 @@ ---- -title: العلاقة بين التنسيق الشبكي وطرق التنسيق الأخرى -slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout_arabic -translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout ---- -

صمم التنسيق الشبكي ليعمل جنبا إلى جنب مع جميع التنسيقات الأخرى مشكلا بذلك نظاما متكاملا لإنشاءها. في هذا الدليل سوف نشرح كيف يتوافق النظام الشبكي مع التقنيات الأخرى التي كنت قد استعملتها سابقا.

- -

نظام الشبكة ونظام الأجزاء المرنة

- -

إن الفرق الأساسي بين نظام التنسيق الشبكي ونظام نتسيق الأجزاء المرنة يثمثل في كون أن نظام نتسيق الأجزاء المرنة قد صمم للتنسيق على بعد واحد -أي أفقيا أو عموديا. بينما صمم نظام التنسيق الشبكي لإنشاء تنسيقات على بعدين -إي أفقيا وعموديا في نفس الوقت. إن نصوص المواصفات المعيارية لكلا النظامين يلتقيان في العديد من المميزات، لذلك فإن كنت قد تعلمت استعمال نظام الأجزاء المرنة، فإن هذا التشابه المتواجد بينهما سيمكنك من ضبط استعمال نظام الشبكة.

- -

النسق ذو بعد واحد مقارنة مع النسق ذو بعدين

- -

سنستعمل مثالا بسيطا لإظاهر الإختلاف المتواجد بين النسق ذو بعد واحد والنسق ذو بعدين.

- -

في هذا المثال الأول، سنستعمل نسق الأجزاء المرنة لتنسيق مجموعة من المربعات. حيث أتوفر على حاوية تضم خمسة أبناء من العناصر، وقد أعطيت خاصيات وقيم flex بيحث ستتمكن هذه العناصر من التمدد والتقلص انطلاقا من 200 بيكسل.

- -

وقمنا كذلك بإعطاء القيمة wrap للخاصية  {{cssxref("flex-wrap")}}،  مما ينتج عنه انتقال العناصر إلى سطر جديد في حالة إن كانت مساحة الحاوية غير كافية لضمان قيمة المرونة الأساسية.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-.wrapper > div {
-  flex: 1 1 200px;
-}
-
-
- -

{{ EmbedLiveSample('onedtwod', '500', '230') }}

- -

في هذه الصورة، يمكننا ملاحظة انتقال (قفز) عنصرين إلى سطر جديد. حيث يتقاسمان نفس المساحة المتوفرة وأنهما غير منتظمين في نفس العمود مع العناصر المتواجدة بالإعلى. و يرجع ذلك إلى كون الأسطر ( أو الأعمدة في حالة استعمال الأعمدة) الجديدة المكونة من انتقال عناصر مرنة جديدة تصبح حاويات (أوعية) مرنة كذلك. ويحدث هذا التوزيع على طول السطر.

- -

وسؤال المطروح هو كيف يمكننا تنظيم هاته العناصر في نفس العمود. وهنا تأتي الحاجة إلى طريقة للتنسيق العناصر على بعدين: تريد ضبط توزيع العناصر من خلال أسطر وأعمدة، وهنا يبدأ دور التنسيق الشبكي.

- -

نفس التنسيق باستعمال نظام الشبكات

- -

في المثال الموالي، قمنا بانشاء نفس النسق باستعمال نظام الشبكة. حيث نتوفر حاليا على ثلاثة مسارات عمودية قياسها 1fr. مع العلم أننا لسنا بحاجة إلى إضافة أية خاصية على مستوى العناصر نفسها، حيث ستتوزع  هاته العناصر بشكل تلاقئ وسيتموضع كل عنصر داخل خلية من الشبكة التي أنشأنها. ويمكننا ملاحظة أن هاته العناصر موزعة (متراصة) في أسطر وأعمدة، بالإضافة إلى تواجد فجوة في نهاية السطر الثاني عند استعمالنا لخسمة عناصر.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

-
- -

من بين الأسئلة البسيطة التي يتوجب على كل مصمم طرحها عند محاولة الاختيار بين نظام الأجزاء المرنة و نظام الشبكة هي:

- - - -

المحتوى الخارجي أو النسق الداخلي؟

- -

توجد طريقة أخرى لتحديد النظام المناسب الذي يجب عليك اختياره عند محاولتك الاختيار بين نظام الأجزاء المرنة و نظام الشبكة، بالإضافة إلى الطريقة التي تعرفنا عليها سابقا والمتمحورة حول الفرق بين العمل على بعد واحد أو بعدين.

- -

نظام الأجزاء المرنة Flexbox يعتمد على المحتوى الخارجي. من بين طرق الاستعمال لهذا النظام وهي عند توفرك على مجموعة من العناصر وتريد توزيعها على مساحة لحاوية بشكل متساوي. حيث أن حجم محتوى كل عنصر هو المحدد الأول للمساحة التي سيحتلها ( أي أن المساحة المحتلة متناسبة مع حجم محتوى العنصر). عند انتقال العناصر إلى سطر جديد فسنتظم نفسها بناء على مقاسها و المساحة المتوفرة في هذا السطر الجديد.

- -

يعتمد نظام الشبكة على التنسيق الداخلي. أي عندما نعمل بنظام الشبكة فإننا نقوم تعريف نسق مسبقا ونحدده ثم نقوم بوضع هذه العناصر داخل هذا النسق (أو الشبكة). ويمكن كذلك استعمال خاصيات التموضع الآلي التي تعمل على توزيع العناصر داخل الشبكة في خلايا محددة باتباع نظام الشبكة المحكمة. يمكن أيضا إنشاء مسارات مرنة تتكيف مع حجم المحتوى، هذه التقينة تجعل من حجم المسار يتغيير بالكامل. ( ملاحظة سيأخد المسار حجم العنصر الذي به محتوى أكبر).

- -

إن كنت تستعمل نظام Flex وشعرت بأنك تفقد شيئا من المرونة التي يفرها فهنالك احتمال كبير على أنك بحاجة لاستعمال نظام Grid. فعلى سبيل المثال إن قمت بتحديد قيمة مئوية لعرض أحد عناصر نظام Flex لكي يأخد نفس قياس العناصر المتواجدة في السطر الأعلى، في هذه الحالة فعليك استعمال نظام Grid. 

- -

المحاذات بين الأجزاء

- -

من بين الخاصيات الأكثر إثارة للكثير منا والتي تقدم بها نظام الأجزاء المرنة هي القدرة ولأول مرة على التحكم في توزيع العناصر والمحاذاة فيما بينها وبشكل واضح. حيث جعل من عملية وضع أي جزء في مركز أية صفحة سهلة للغاية. تتمدد العناصر المرنة لتأخد كل الحيز الموجود بالحاوية، مما يعني إمكانية الحصول على أعمدة متساوية الإرتفاع. حيت تعتبر هاته الأشياء المذكورة من الأمور التي كنا دائما نرغب في فعلها منذ وقت طويل، مما جعلنا نقوم بالبحث وخلق العديد من الحيل لإنشاء تأثير بصري على الأقل مشابه لذلك.

- -

لقد تمت إضافة خاصيات المحاذاة المتواجدة في نصوص المواصفات المعيارية لنظام الأجزاء المرنة إلى معيار جديد يسمى المحاذاة بين الأجزاء المستوى 3. مما يعني أنها سوف تستعمل في نصوص المواصفات المعيارية، من ضمنها نظام الشبكة. حيث من الممكن كذلك إدراجها في أنظمة التنسيق الأخرى.

- -

سوف نتطرق وبشكل واضح في دليل مقبل من هاته السلسلة إلى الكيفية التي تعمل بها خاصيات المحاذاة بين الأجزاء في نظام الشبكة. إليك مقارنة بسيطة بين نظام الأجزاء المرنة و نظام الشبكة.

- -

في المثال الأول والذي يستعمل نظام الأجزاء المرنة، نتوفر على حاوية (وعاء) بها ثلاثة عناصر. قمنا بتحديد ارتفاع هاته الحاوية المرنة من خلال إعطاء قيمة للخاصية {{cssxref("min-height")}} للفئة wrapper. ولكي نبدأ ترتيب العناصر داخل هاته الحاوية المرنة انطلاقا من النهاية قمنا بإعطاء القيمة flex-end للخاصية {{cssxref("align-items")}}. نريد كذلك إلغاء خاصية التمدد الإفتراضية للعنصر box1 وجعله يتمدد ليحتل كل ارتفاع هاته الحاوية بالإضافة لذلك قمنا بإعطاء القيمة stretch للخاصية {{cssxref("align-self")}} بالإضافة قمنا بإعطاء هاته الخاصية القيمة flex-start بالنسية للعنصر box2 لكي يقوم بوضع نفسه (يصطف) انطلاقا من نقطة بداية هاته الحاوية المرنة.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  align-items: flex-end;
-  min-height: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: flex-start;
-}
-
- -

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

- -

 المحاذاة في نظام الشبكات

- -

في هذا المثال الثاني استعملنا نظام الشبكة لإنشاء نفس التنسيق. حيث سنستعمل خاصيات محاذاة الأجزاء كما ثم تطبيقها في التنسق الشبكي. نقوم بمحاذاة باستعمال start و end عوضا عن flex-start  وflex-end. في حالة التنسيق الشبكي، يتم توزيع العناصر لتستقر في الحيز الشبكي الخاص بها في هاته الشبكة، والمتمثلة في خلية واحدة في هذا المثال، مع إمكانية تكونه من عدد كثير من الخلايا الشبكية.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  align-items: end;
-  grid-auto-rows: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: start;
-}
-
- -

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

- -

الوحدة fr و flex-basis

- -

لقد قمنا بالتعرف على الكيفية التي تقوم بها الوحدة fr لتحديد نسبة من المساحة المتوفرللمسارات الشبكية لشبكة حاوية. عند المزج بين الوحدة fr و بين الدالة {{cssxref("minmax", "minmax()")}} فإننا نحصل على نتيجة ( سلوك) مشابهة لخاصيات flex التي يمنحها نظام تنسيق الأجزاء المرنة مع منحنا إمكاينة إنشاء نسق ذو بعدين.

- -

إن قمنا بالرجوع إلى المثل السابق الذي بينا فيه الفرق بين التنسيق ذو البعد الواحد والتنسيق ذو البعدين، فإننا سنلاحظ الفرق في كفية استجابة بالنسبة لكل منهما. فبالنسبة للتنسيق المرن، وفي حالة تحريك نافذة المتصفح لتوسيع أو تضييق حجمها، فإن نظام الأجزاء المرنة يقوم بعمل جيد في نتظيم عدد العناصر المكونة لكل سطر بناء على المساحة المتوفر. فإن كنا نتوفر على مساحة كبيرة فإن جميع العناصر الخمسة ستجد مكانها في سطر واحد، أما إن كنا نتوفر على حاوية جد صغير فمن الممكن أن نجد أن هاته المساحة تتسع لعنصر واحد فقط.

- -

وبالمقارنة، فإن النسخة المبنية باستعمال النظام الشبكي تتكون دائما من ثلاثة مسارات عمودية. حيث تقوم هاته المسارات بالتمدد والتقلص، وستظهر لنا ثلاث مسارات عمودية دائما، لأننا قمنا بتحديدها منذ البداية عند تعريفنا لهاته الشبكة.

- -

الملأ الآلي لمسارات الشبكة

- -

يمكننا إنشاء تأثير مشابه لنظام الأجزاء المرنة، مع إمكانية المحافظة على تموضع المحتوى بإحكام في أسطر وأعمدة، وذلك باستعمال الدالة repeat و الخاصيتين auto-fill و auto-fit لإنشاء مجموع هاته المسارات.

- -

في المثال التالي، استعملت الخاصية auto-fill عوضا عن القيم الرقيمة داخل الدالة repeat و تحديد قيمة 200 بيكسل لمجموع هاته المسارات. أي أن هاته الشبكة سوف تعمل على إنشاء العدد الكافي من أعمدة المسارات لتتناسب مع حجم الحاوية.

- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 200px);
-}
-
- -

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

- -

عدد المسارات المرنة

- -

يختلف الوضع هنا بالنسبة لنظام الأجزاء المرنة. في المثال الخاص بنظام الأجزاء المرنة،  تنتقل العناصر إلى السطر الموالي عندما تتجاوز 200 بيكسل. ويمكننا الوصول إلى نفس النتيجة بنظام الشبكة باستعمال  auto-fill والدالة {{cssxref("minmax", "minmax()")}}. وفي المثال الموالي، قمت بإنشاء مسارات آلية الملأ باستعمال الدالة minmax. أريد من المسارات أن تأخذ عرضا لا يقل عن 200 بيكسل، وحددت الحد الأقصى في 1fr. بمجرد أن يقوم المتصفح بحساب عدد المرات المرات الكافية لملأ الحاوية بمسارات ذات قياس 200 بيكسل - مع الأخد بعين الإعتبار قياس الفجوات المتواجدة بين مسارات الشبكة- فإنه يقوم بالتعامل مع المساحة القصوية 1fr كوحدة لتوزيعها بين جميع العناصر المتبيقة.

- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
- -

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

- -

لقد أصبحنا الآن قادرين على إنشاء شبكة مكونة من عدد مرن من المسارات المرنة كذلك، في ظل إمكانية أن تتوزع هذه العناصر وفي نفس الوقت على مستوى أسطر وأعمدة.

- -

Grid and absolutely positioned elements

- -

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

- -

A grid container as containing block

- -

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

- -

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">
-   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
-  </div>
-  <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-  position: relative;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: absolute;
-  top: 40px;
-  left: 40px;
-}
-
- -

{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}

- -

You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.

- -

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

- -

A grid container as parent

- -

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

- -

Image of grid container as parent

- -

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

- -

With a grid area as the parent

- -

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

- -

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three
-    <div class="abspos">
-     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
-    </div>
-  </div>
-  <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: relative;
-}
-.abspos {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  background-color: rgba(255,255,255,.5);
-  border: 1px solid rgba(0,0,0,0.5);
-  color: #000;
-  padding: 10px;
-}
-
- -

{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}

- -

Grid and display: contents

- -

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and display: contents. The contents value of the display property is a new value that is described in the Display specification as follows:

- -
-

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

-
- -

If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-}
-
-
- -

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

-
- -

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  display: contents;
-}
-
- -

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

-
- -

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.

- -

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout, to get the different effects you need.

- - diff --git a/files/ar/web/css/transform/index.html b/files/ar/web/css/transform/index.html new file mode 100644 index 0000000000..93ef2bb84e --- /dev/null +++ b/files/ar/web/css/transform/index.html @@ -0,0 +1,136 @@ +--- +title: التحول (transform) +slug: Web/CSS/التحول +tags: + - التحول + - التحول في صفحات الطرز المتراصة + - خواص صفحات الطرز المتراصة + - صفحات الطرز المتراصة + - مرجع +translation_of: Web/CSS/transform +--- +
{{CSSRef}}
+ +

تسمح لك خاصية التحويل transform في CSS بإدارة وتغيير إحداثيات وأبعاد العناصر وما إلى ذلك كما سنتعرف في هذه الوثيقة.

+ +

ويتم ذلك عن طريق تعديل الإحداثيات لنموذج التنسيق المرئي للـ CSS.

+ +

 

+ +
{{EmbedInteractiveExample("pages/css/transform.html")}}
+ + + +

إذا كانت الخاصية لها قيمة مختلفة عن none ، فسيتم إنشاء سياق تجميع. في هذه الحالة ، سيكون الكائن بمثابة كتلة تحتوي على position: fixed العناصر التي تحتوي عليها.

+ +

بناء الجملة

+ +
/* قيم رئيسية */
+transform: none;
+
+/* قيم وضيفية */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: translate(12px, 50%);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: scale(2, 0.5);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: rotate(0.5turn);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: translate3d(12px, 50%, 3em);
+transform: translateZ(2px);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleZ(0.3);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: perspective(17px);
+
+/*  قيم وضيفية متعددة */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+
+/* قيمة عامة */
+transform: inherit;
+transform: initial;
+transform: unset;
+
+ +

التحويل يمكن أن يحدد بقيمة واحدة أو أكثر من وضيفة.

+ +

القيم

+ +
+
{{cssxref("<transform-function>")}}
+
يمكنك استعمال وظيفة واحد أو أكثر من وظائف تحويل CSS ليتم تطبيقها. يتم تطبيق التحويلات المركبة بشكل فعال بالترتيب من اليسار إلى اليمين.
+
noneيحدد بعدم تحديد أي تحويل.
+
+ +

البنية

+ +
{{csssyntax}}
+ +

أمثلة

+ +

HTML

+ +
<div>عنصر التحويل</div>
+ +

CSS

+ +
div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}
+ +

النتيجة

+ +

{{EmbedLiveSample("Examples", "400", "160")}}

+ +

Please see Using CSS transforms and {{cssxref("<transform-function>")}} for more examples.

+ +

الميزات

+ + + + + + + + + + + + + + + + + + + + + +
الميزةالحالةالتعليق
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
+ +

{{cssinfo}}

+ +

توافق المتصفح

+ + + +

{{Compat("css.properties.transform")}}

+ +

قد يفيدك

+ + diff --git "a/files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" "b/files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" deleted file mode 100644 index 93ef2bb84e..0000000000 --- "a/files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: التحول (transform) -slug: Web/CSS/التحول -tags: - - التحول - - التحول في صفحات الطرز المتراصة - - خواص صفحات الطرز المتراصة - - صفحات الطرز المتراصة - - مرجع -translation_of: Web/CSS/transform ---- -
{{CSSRef}}
- -

تسمح لك خاصية التحويل transform في CSS بإدارة وتغيير إحداثيات وأبعاد العناصر وما إلى ذلك كما سنتعرف في هذه الوثيقة.

- -

ويتم ذلك عن طريق تعديل الإحداثيات لنموذج التنسيق المرئي للـ CSS.

- -

 

- -
{{EmbedInteractiveExample("pages/css/transform.html")}}
- - - -

إذا كانت الخاصية لها قيمة مختلفة عن none ، فسيتم إنشاء سياق تجميع. في هذه الحالة ، سيكون الكائن بمثابة كتلة تحتوي على position: fixed العناصر التي تحتوي عليها.

- -

بناء الجملة

- -
/* قيم رئيسية */
-transform: none;
-
-/* قيم وضيفية */
-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
-transform: translate(12px, 50%);
-transform: translateX(2em);
-transform: translateY(3in);
-transform: scale(2, 0.5);
-transform: scaleX(2);
-transform: scaleY(0.5);
-transform: rotate(0.5turn);
-transform: skew(30deg, 20deg);
-transform: skewX(30deg);
-transform: skewY(1.07rad);
-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-transform: translate3d(12px, 50%, 3em);
-transform: translateZ(2px);
-transform: scale3d(2.5, 1.2, 0.3);
-transform: scaleZ(0.3);
-transform: rotate3d(1, 2.0, 3.0, 10deg);
-transform: rotateX(10deg);
-transform: rotateY(10deg);
-transform: rotateZ(10deg);
-transform: perspective(17px);
-
-/*  قيم وضيفية متعددة */
-transform: translateX(10px) rotate(10deg) translateY(5px);
-
-/* قيمة عامة */
-transform: inherit;
-transform: initial;
-transform: unset;
-
- -

التحويل يمكن أن يحدد بقيمة واحدة أو أكثر من وضيفة.

- -

القيم

- -
-
{{cssxref("<transform-function>")}}
-
يمكنك استعمال وظيفة واحد أو أكثر من وظائف تحويل CSS ليتم تطبيقها. يتم تطبيق التحويلات المركبة بشكل فعال بالترتيب من اليسار إلى اليمين.
-
noneيحدد بعدم تحديد أي تحويل.
-
- -

البنية

- -
{{csssyntax}}
- -

أمثلة

- -

HTML

- -
<div>عنصر التحويل</div>
- -

CSS

- -
div {
-  border: solid red;
-  transform: translate(30px, 20px) rotate(20deg);
-  width: 140px;
-  height: 60px;
-}
- -

النتيجة

- -

{{EmbedLiveSample("Examples", "400", "160")}}

- -

Please see Using CSS transforms and {{cssxref("<transform-function>")}} for more examples.

- -

الميزات

- - - - - - - - - - - - - - - - - - - - - -
الميزةالحالةالتعليق
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
- -

{{cssinfo}}

- -

توافق المتصفح

- - - -

{{Compat("css.properties.transform")}}

- -

قد يفيدك

- - diff --git "a/files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" "b/files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" deleted file mode 100644 index 4fbf59d3f9..0000000000 --- "a/files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: التعليقات -slug: Web/CSS/التعليقات -tags: - - CSS - - تعليقات - - مرجع - - ملاحظات -translation_of: Web/CSS/Comments ---- -
{{CSSRef}}
- -

تعليقات CSS تستخدم من أجل إضافة جمل توضيحية وتنبيهات في الكود أو حتى لمنع المتصفح من تطبيق بعض الأكواد المكتوبة في ورقة الأنماط (ملف CSS)، هذه التعليقات لا تؤثر على تصميم الملفات نهائيًا.

- -

طريقة الكتابة

- -

يمكن كتابة التعليقات في أي مكان داخل ورقة الأنماط، سواء كانت بسطر واحد أو بعدة أسطر.

- -
/* تعليق */
- -

أمثلة

- -
/* تعليق بسطر واحد */
-
-/*
-تعليق
-يمكن
-كتابته
-بأكثر
-من
-سطر
-*/
-
-/* التعليق أدناه جعل الخواص المذكروة للعنصر
-   Span
-   دون تأثير */
-/*
-span {
-  color: blue;
-  font-size: 1.5em;
-}
-*/
-
- -

تنبيهات

- -

الرمز /* */ يستخدم في كلا الحالتين سطر واحد أو متعدد الأسطر، لا يوجد أي طريقة أخرى من أجل كتابة تعليقات داخل ورقة الأنماط، عندما تستخدم عنصر {{htmlelement("style")}} فيمكنك استخدام <!-- --> من أجل إخفاء أكواد CSS عن المتصفحات القديمة، رغم أن ذلك غير مستحسن، معظم المبرمجين يستخدمون صيغة /* */.

- -

لا يمكن كتابة التعليقات بشكل متداخل، بمعنى أن التعليقات ستبدأ عند كتابة /* وستغلق عند أول علامة */ تقابلها.

- -

الخصائص

- - - -

اقرأ أيضًا

- - - -

 

diff --git "a/files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" "b/files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" deleted file mode 100644 index d9a0da44f2..0000000000 --- "a/files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: العناصر التي يمكن تحريكها باستخدام CSS Transitions -slug: Web/CSS/العناصر_التي_يمكن_تحريكها_باستخدام_CSS_Transitions -tags: - - CSS - - CSS3 - - تحريك - - ترانزشن - - سلاسة - - نعومة -translation_of: Web/CSS/CSS_animated_properties ---- -

{{CSSRef}}

- -

يمكن تحريك بعض عناصر CSS بشكل ناعم وسلس عندما تتغير قيم وخصائص العناصر، سواء باستخدام CSS Animations أو CSS Transitions.

- -

هذه قائمة بالعناصر التي يمكن استخدام خاصية Transitions عليها:

- -

{{CSSAnimatedProperties}}

diff --git a/files/ar/web/guide/css/getting_started/index.html b/files/ar/web/guide/css/getting_started/index.html deleted file mode 100644 index 2bfc5c76bb..0000000000 --- a/files/ar/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Getting started with CSS -slug: Web/Guide/CSS/Getting_started -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - Needs - - NeedsBeginnerUpdate - - NeedsTranslation - - NeedsUpdate - - TopicStub - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

-

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

- -

What you need to get started

- -

Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.

-

Note: The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.

-

How to use this tutorial

-

To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.

-

Part I: The Basics of CSS

-

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

-

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

-

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

-

Part II: The Scope of CSS

-

A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.

-
    -
  1. JavaScript
    2. -
  2. SVG graphics
    3. -
  3. XML data
    4. -
  4. XBL bindings
    5. -
  5. XUL user interfaces
    6. -
diff --git a/files/ar/web/guide/css/getting_started/readable_css/index.html b/files/ar/web/guide/css/getting_started/readable_css/index.html deleted file mode 100644 index f65331a2bd..0000000000 --- a/files/ar/web/guide/css/getting_started/readable_css/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Readable CSS -slug: Web/Guide/CSS/Getting_started/Readable_CSS -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")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

- -

معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)

- -

يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.

- -

المساحة الفارغة

- -

المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.

- -

في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.

- -

يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.

- -

التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.

- -

 

- -
-
Examples
- -

بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:

- -

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

- -


- بعض الناس يفضلون خاصية واحدة لكل سطر:

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

بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:

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


- (بعض الأشخاص يفضلون جعل كل شيء عموديا  (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.

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

بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.

- -
.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 }
-
-
- -

بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.

- -

التعليقات
-  

- -

التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».
-
- يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.
-
- التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.

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

تجميع العناصر
-
- عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.
-  

- -

في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.

- -
-
Example
- -

This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.

- -

إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.

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

العمل: إضافة تعليقات و تحسين التخطيط

- -
    -
  1. قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.
    3. -
  3. قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
- -
-
تحدي
- -
 
- -

ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون  تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

(هناك العديد من الطرق لفعل ذلك)

- -
-
Possible solution
- -

One way to do this is to put comment delimiters around the rule for .carrot:

- -
/*.carrot {
-  color: orange;
-}*/
- -

Hide solution

-
- -

See a solution for the challenge.

-
- -

ما التالي؟

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git "a/files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" "b/files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" deleted file mode 100644 index 2b7fdeb726..0000000000 --- "a/files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" +++ /dev/null @@ -1,384 +0,0 @@ ---- -title: القوائم -slug: Web/Guide/CSS/Getting_started/القوائم -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

- -

 الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة  تعليم لغة CSS على هذا الموقع  CSS Getting Started، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML  وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. 

- -

معلومات عن القوائم 

- -

لو نظرت إلى الجزء السابق، سوف يتضح لك  كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.

- -

تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.

- -

لتحديد نمط القائمة، عليك استخدام هذه الخاصية «list-style» وذلك لتحديد نوع  العلامة الموجودة قبل كل عنصر في القائمة. 

- -
-

من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «ul» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «li».  

- -

وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«ul»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. 

-
- -

القوائم غير المرتبة

- -

 في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. 

- -

 يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:

- -

• disc  قرص 

- -

○ circle دائرة

- -

◘ square مربع

- -

بدلا من ذلك، يمكن تحديد رابط صورة لاستخدامها كعلامة للعناصر بدل من العلامات السابقة.

- -
-

مثال 

- -

 هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:

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

عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).

- -
<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>
-
- -

وهكذا تبدو النتيجة: 

- -
  ○ Lorem ipsum
- -
  •  Dolor sit
- -
  •  Amet consectetuer
- -
  ○ Magna aliquam
- -
  • Autem veleum
- -
 
-
- -

القوائم المُـرَتَّـبة 

- -

في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.

- -

استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.

- - - -
-
 
- -

مثال                                                                                                                                              

- -
القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة.  
- -
 
- -
<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;
-}
-
- -
-

عند تطبيق خاصية النمط على الـ «ol»  يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «li».

-
- -

فتكون النتيجة كالتالي:

- -
ِA. Lorem ipsum
- -
B. Dolor sit
- -
C. Amet consectetuer
- -
D. Magna aliquam
- -
E. Autem veleum
-
- -
-
-

تفاصيل أكثر                                                                             

- -
الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان 
- -
 (صورة أو رقم أو شكل أو حرف )
- -
       ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها  خاصية محددة مثل «list-style-image»    
- -

يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة  list style 

- -
إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال  للقوائم المرتبة يُستخدم هذا الوسم «ol»
- -
والقوائم  الغير مرتبة «ul»
- -
  فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا 
- -
والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج 
- -
ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. 
- -
 
- -

قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. 

-
-
- -

العَـدَّادَات

- -
-

ملاحظة هامّة:

- -
  بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة CSS contents and browser comptability على موقع QuirksMode معلومات تفصيلية عن دعم  المتصفحات لهذه الميزة وميزات أخرى.
- -
كما توفّر الصّفحات الفرديّة في CSS مرجعا للمعلومات عن دعم  المتصفحات أيضا لهذه الخاصية وغيرها.
-
- -

 

- -
يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.
- -
تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.
- -
 
- -
 يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. 
- -
وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.
- -
 
- -
 في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.
- -
 استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).
- -
يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة Content. 
- -
 
- -

استخدام ()counter مع اسم العّداد كقيمة لـcontent   

- -
ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.
- -

عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. 

- -
-
          مثال                                                                                                                                            
- -
 
- -
    هذه القاعدة تُنشئ عدّادًا لكلّ عنصر<h3> له تصنيف (كلاس) «numbered»:                                          
- -
h3.numbered {
-    counter-reset: mynum;
-}
-
- -

 أما هذه القاعدة فهى تعرض عّداد الـ <p>  والتي لها تصنيف «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;
-}
-
- -

والنتيجة ستبدُو هكذا:

- -
1: Lorem ipsum
- -
2: Dolor sit
- -
3: Amet consectetuer
- -
4: Magna aliquam
- -
5:  Autem veleum
- -
 
-
- -
-
تفاصِيل أكثر                                                                                                                                 
- -
 
- -
   لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل  متصفحاً يُدعمها.  
- -
  العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق 
- -
ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة.  
- -
 
- -
يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.
- -
 ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة  Automatic counters and numbering.
-
- -

تمرين: قوائم مُنسقة

- -

   قم بإنشاء ملف  HTML  باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:

- -
<!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>
-
- -

  قم بإنشاء ملف CSS وقُم بتسميته  style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:

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

قم بتغيير أسلوب  التعليقات كما تحبّ إن لم يعجبك هذا.

- -

افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :

- -

The oceans

- -
Arctic
- -
Atlantic
- -
Pacific
- -
Indian
- -
Southern
- -

Numbered paragraphs

- -
1:Lorem ipsum
- -
2:Dolor sit
- -
3:Amet consectetuer
- -
4:Magna aliquam
- -
5:Autem veleum
- -
-
 تمرين إضافي                                                                                                                                          
- -
 أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: 
- -
 
- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: 

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

See solutions to these challenges.

- -

ما هو القادم ؟

- -

الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")

- -

عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع  هذه الأشكال من خلال الـboxes.

diff --git a/files/ar/web/guide/css/index.html b/files/ar/web/guide/css/index.html deleted file mode 100644 index 2bd34295c7..0000000000 --- a/files/ar/web/guide/css/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CSS developer guide -slug: Web/Guide/CSS -tags: - - CSS - - Guide - - Landing - - NeedsTranslation - - TopicStub -translation_of: Learn/CSS -translation_of_original: Web/Guide/CSS ---- -

{{draft}}

-

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

-

CSS is one of the core languages of the open Web and has a standardized W3C specification.

-

{{LandingPageListSubpages}}

-

Pages elsewhere

-

Here are other pages related to CSS that should be linked to from here.

-

See also

- diff --git a/files/ar/web/guide/graphics/index.html b/files/ar/web/guide/graphics/index.html new file mode 100644 index 0000000000..9c8335471a --- /dev/null +++ b/files/ar/web/guide/graphics/index.html @@ -0,0 +1,47 @@ +--- +title: الرسومات على الويب +slug: Web/Guide/الرسومات +tags: + - رسومات + - رسوميات ثلاثية الأبعاد + - رسوميات ثنائية الأبعاد + - كانفاس +translation_of: Web/Guide/Graphics +--- +

غالباً ما تحتاج المواقع والتطبيقات لعرض الرسومات. الصور العاديّة يمكن عرضها بسهولة باستخدام العنصر {{HTMLElement("img")}}، أو بإعداد خلفيّة الصفحة باستخدام الخاصيّة {{cssxref("background-image")}}. تستطيع أيضاً إنشاء رسومات في الهواء (طافية)، أو يمكنك التلاعب بالصور بعد حدث ما. هذه المقالات توفر نظرة حول كيف يمكنك القيام بهذه الأشياء.

+ +
+
+

الرسوميات ثنائيّة الأبعاد

+ +
+
الكانفاس
+
عنصر <canvas> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.
+
الرسوميات المتجهيّة المتغيرة
+
تتيح الرسوميات المتجهيّة المتغيرة (SVG) لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.
+
+ +

عرض المزيد...

+
+ +
+

الرسوميات ثلاثيّة الأبعاد

+ +
+
تقنيّة WebGL
+
دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.
+
+ +

فيديو

+ +
+
استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق
+
تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.
+
+ +
+
تقنيّة WebRTC
+
تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.
+
+
+
diff --git a/files/ar/web/guide/html/html5/html5_element_list/index.html b/files/ar/web/guide/html/html5/html5_element_list/index.html deleted file mode 100644 index 4c2a85ac03..0000000000 --- a/files/ar/web/guide/html/html5/html5_element_list/index.html +++ /dev/null @@ -1,599 +0,0 @@ ---- -title: مجموعه عناصر لغة HTML5 -slug: Web/Guide/HTML/HTML5/HTML5_element_list -tags: - - اتش تي ام ال - - اتش تي ام ال 5 - - المبتدئين - - الويب - - انترنت - - دليل - - وسوم -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -

كل عناصر HTML5 المعتمدة مدرجة هنا، حيث أن اسماءها تصفها ومرتبة في مجموعات حسب وظائفها.

- -

على عكس فهرس عناصر HTML الذي يشمل جميع عناصر HTML بما فيها المعتمدة وغير المعتمدة والصالحة والمهملة والملغية أيضًا، هذه الصفحة تتضمن عناصر HTML5 الصالحة فقط، العناصر الموجودة هنا هي التي يتوجب أن تستعمل في إنشاء المواقع الجديدة.

- -

العلامة This element was added as part of HTML5 ترمز إلى أن العنصر قد تمت إضافته في HTML5، لاحظ أن العناصر الأخرى الموجودة هنا قد تكون ممددة أو معدلة في معانيها ضمن مواصفات HTML5.

- -

عنصر الجذر

- - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("html")}}وهو يمثل جذر الـ HTML أو مستند XHTML و يجب أن تكون جميع العناصر الأخرى من نسل هذا العنصر.
- -

البيانات الرئيسة للوثيقة

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("head")}}وهو يمثل مجموعة من البيانات الوصفية حول الوثيقة بما في ذلك الوصلات أو تعريفات و البرامج النصية والسكريبتات و انماط الـ CSS .
{{HTMLElement("title")}}يحدد عنوان الوثيقة  كما هو موضح في شريط عنوان المتصفح أو في علامة التبويب الصفحة ولابد أن يحتوي على نصوص فقط لا غير .
{{HTMLElement("base")}}وهو يحدد الرابط الفتراضي للوثيقة كي يتم من خلاله فرز الروابط المنتسبة لصفحة من الرابط التابعه لاجناس اخرى .
{{HTMLElement("link")}}وهو يستخدم لربط ملفات  ألـ CSS والـ Javascript الخارجي مع وثيقة HTML .
{{HTMLElement("meta")}}يستخدم لتعريف العناصر التي لايمكن تعريفها مثل الترميز وغير من الاستخدامات الاخرى .
{{HTMLElement("style")}}يستخدم لكتابة CSS داخل وثيقة HTML  .
- -

البرمجة

- - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("script")}}يستخدم لربط ملف نصي برمجي خارجي او تضمين ملف نص برمجي ويمكن الكتابة داخله بالغات متعدده مثل javascript او php و غيره .
{{HTMLElement("noscript")}}يحدد محتوى بديل لعرضه عندما لا يدعم المتصفح البرمجة .
{{HTMLElement("template")}}This element has been added in HTML5حاوية للمحتوى العميل أثناء وقت التشغيل باستخدام جافا سكريبت .
- -

اقسام التضمين

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("body")}} -
وهو يمثل محتوى وثيقة HTML ولابد ان تكون كل العناصر الضاهره في الجسم داخلة .
-
{{HTMLElement("section")}} This element has been added in HTML5يمثل قطعه في في المستند .
{{HTMLElement("nav")}} This element has been added in HTML5يحدد المقطع الذي يحتوي على ارتباطات التنقل .
{{HTMLElement("article")}} This element has been added in HTML5يحدد محتوى  منفصل بذاته والذي يمكن أن يوجد بشكل مستقل عن بقية المحتوى.
{{HTMLElement("aside")}} This element has been added in HTML5يعرف بعض المحتويات التي لها علاقة فضفاضة إلى محتوى الصفحة. إذا تم إزالته ، والمحتوى المتبقية لا يزال من المنطقي .
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>وهو يمثل 6 مستويات من عناوين النصية واكبرهم حجماً <h1> وعكسه <h6>
{{HTMLElement("header")}} This element has been added in HTML5يحدد محتوى بذاتها التي يمكن أن توجد بشكل مستقل عن بقية المحتوى . 
{{HTMLElement("footer")}} This element has been added in HTML5>يحدد تذييل للصفحة أو قسم  فإنه غالبا ما يحتوي على إشعار حقوق التأليف والنشر وبعض الروابط على المعلومات القانونية أو عناوين .
{{HTMLElement("address")}}يعرف الجزء الذي يحتوي على معلومات للإتصال به.
{{HTMLElement("main")}}This element has been added in HTML5يحدد المحتوى الرئيسي أو مهم في الوثيقة. هناك واحد فقط <main> عنصر في الوثيقة.
- -

جداول البيانات

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("p")}}يحدد الجزء الذي يجب أن يتم عرض كفقرة .
{{HTMLElement("hr")}}يمثل خط فاصل بين موضوعين .
{{HTMLElement("pre")}}يحدد النص المكتوب كما هو بالسطر وافراغ .
{{HTMLElement("blockquote")}} -

يمثل المحتوى الذي يتم نقلا عن مصدر آخر.

-
{{HTMLElement("ol")}}يحدد قائمة مرتبة مرقمة من العناصر .
{{HTMLElement("ul")}}يحدد قائمة غير مرتبة من البنود.
{{HTMLElement("li")}}يحدد عنصر من قائمة التعداد.
{{HTMLElement("dl")}}تعرف على قائمة تعريف ، وهذا هو ، على قائمة المصطلحات والتعاريف المرتبطة بها .
{{HTMLElement("dt")}}يمثل مصطلح يعرفه القادم < DD > .<dd>.
{{HTMLElement("dd")}}يمثل تعريف المصطلحات الواردة فورا قبل ذلك.
{{HTMLElement("figure")}} This element has been added in HTML5يمثل الرقم يتضح كجزء من الوثيقة.
{{HTMLElement("figcaption")}} This element has been added in HTML5يمثل أسطورة شخصية .
{{HTMLElement("div")}}يمثل وعاء العامة مع عدم وجود معنى خاص .
- -

عناصر النصوص

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("a")}}يمثل الارتباط التشعبي   وربط إلى مورد آخر .
{{HTMLElement("em")}}يمثل خط مائل .
{{HTMLElement("strong")}} يمثل خط مشدد .
{{HTMLElement("small")}}يمثل خط نحيف .
{{HTMLElement("s")}}يمثل نص مشطوب او محذوف
{{HTMLElement("cite")}} -

يمثل عنوان العمل. .

-
{{HTMLElement("q")}}يمثل الاقتباس المضمنة. .
{{HTMLElement("dfn")}}يمثل مصطلح الذي يرد في أقرب محتوى الجد التعريف.
{{HTMLElement("abbr")}}يمثل اختصار أو اختصار . التوسع في اختصار يمكن أن تكون ممثلة في سمة العنوان.
{{HTMLElement("data")}} This element has been added in HTML5الزميلة ل محتواه ما يعادل المقروءة آليا . ( هذا العنصر فقط في إصدار WHATWG للمعيار HTML ، و ليس في الإصدار W3C من HTML5
{{HTMLElement("time")}} This element has been added in HTML5يمثل قيمة التاريخ والوقت . أي ما يعادل المقروءة آليا يمكن أن تكون ممثلة في سمة التاريخ والوقت .
{{HTMLElement("code")}}يمثل عنصر يكتب بداخله الكود
{{HTMLElement("var")}}يمثل المتغير ، وهذا هو ، تعبير أو البرمجة الرياضية السياق الفعلي ، معرف تمثل ثابت ، رمزا تحديد الكمية الفعلية ، معلمة وظيفة ، أو مجرد نائب في النثر .
{{HTMLElement("samp")}}يمثل الناتج من برنامج أو جهاز كمبيوتر .
{{HTMLElement("kbd")}}تمثل مدخلات المستخدمين، في كثير من الأحيان من لوحة المفاتيح ، ولكن ليس بالضرورة . قد تمثل المدخلات الأخرى ، مثل الأوامر الصوتية كتب .
{{HTMLElement("sub")}},{{HTMLElement("sup")}}يمثل نص منخفظ او مرتفع
{{HTMLElement("i")}}تمثل بعض النص في صوت بديل أو المزاج، أو على الأقل من نوعية مختلفة ، مثل تسمية التصنيف، مصطلح تقني ، عبارة اصطلاحية ، الفكر، أو اسم السفينة
{{HTMLElement("b")}}يمثل نص مشدد .
{{HTMLElement("u")}}يمثل annoatation غير النصية التي العرض التقليدية و التسطير ، واصفة هذا النص كما يجري أخطأ في الهجاء أو وصفها الاسم الصحيح في النص الصيني
{{HTMLElement("mark")}} This element has been added in HTML5يمثل نص مشار اليه بالون الاصفر
{{HTMLElement("ruby")}} This element has been added in HTML5يمثل المحتوى إلى أن تكون علامة مع شروح روبي ، المديين القصير من النص قدمت جنبا إلى جنب مع النص. وكثيرا ما يستخدم هذا بالتزامن مع لغة شرق آسيا حيث تعمل شروح كدليل للنطق ، مثل furigana الياباني . .
{{HTMLElement("rt")}} This element has been added in HTML5يمثل نص الشرح روبي .
{{HTMLElement("rp")}} This element has been added in HTML5يمثل قوسين حول الشرح روبي ، وتستخدم لعرض الشرح بطريقة بديلة من قبل المتصفحات لا تدعم العرض القياسية ل شروحه.
{{HTMLElement("bdi")}} This element has been added in HTML5يمثل النص الذي يجب أن تكون معزولة عن محيطها ل تنسيق النص ثنائي الاتجاه . لأنها تتيح تضمين فترة من النص مع مختلف أو غير معروف، الاتجاهية .
{{HTMLElement("bdo")}}يمثل اتجاهها من أبنائها ، من أجل تجاوز صراحة خوارزمية ثنائية الاتجاه يونيكود
{{HTMLElement("span")}}يمثل النص مع عدم وجود معنى محدد . هذا لابد من استخدامها عند ينقل أي عنصر النص الدلالي الآخرين معنى كاف، وهو ، في هذه الحالة، وغالبا ما رفعتها سمات عالمية مثل الطبقة ، لانج ، أو دير.
{{HTMLElement("br")}}يمثل سطر جديد
{{HTMLElement("wbr")}} This element has been added in HTML5يمثل فرصة كسر خط ، وهذا هو نقطة المقترحة لل التفاف النص من أجل تحسين إمكانية القراءة من تقسيم النص على عدة أسطر .
- -

التعديلات

- - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("ins")}}عنصر مضاف او تم تعديله
{{HTMLElement("del")}}عنصر محذوف وهو مثيل العنصر {{HTMLElement("s")}}
- -

التضمين و الميديا

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("img")}}يستخدم لربط الصور بالوثيقه
{{HTMLElement("iframe")}}يمثل السياق تصفح متداخلة ، وهذا هو وثيقة HTML المضمنة.
{{HTMLElement("embed")}} This element has been added in HTML5تمثل نقطة التكامل ل خارجي ، في كثير من الأحيان غير HTML ، تطبيق أو المحتوى التفاعلي .
{{HTMLElement("object")}}تمثل الموارد الخارجية ، التي تعامل على أنها صورة، وثيقة الفرعية HTML ، أو الموارد الخارجية التي سيتم تجهيزها من قبل في المكونات .
{{HTMLElement("param")}}تعرف المعلمات للاستخدام من قبل المكونات الإضافية التي يحتج بها <كائن > العناصر.
{{HTMLElement("video")}} This element has been added in HTML5يمثل الفيديو ، والملفات المرتبطة به الصوت و تعليق عليها، مع واجهة اللازمة لتشغيله .
{{HTMLElement("audio")}} This element has been added in HTML5يمثل الصوت ، أو تيار الصوت.
{{HTMLElement("source")}} This element has been added in HTML5يسمح المؤلفين لتحديد الموارد وسائل الإعلام البديلة ل عناصر الوسائط مثل {{HTMLElement("video")}} or {{HTMLElement("audio")}}.
{{HTMLElement("track")}} This element has been added in HTML5يسمح المؤلفين لتحديد مسار النص توقيت ل عناصر الوسائط مثل {{HTMLElement("video")}}or {{HTMLElement("audio")}}.
{{HTMLElement("canvas")}} This element has been added in HTML5تمثل منطقة خريطة أبيت أن النصوص يمكن استخدامها ل تقديم الرسومات ، مثل الرسوم البيانية والرسوم البيانية لعبة ، أو أي الصور المرئية على الطاير .
{{HTMLElement("map")}}بالتزامن مع {{HTMLElement("area")}}, يحدد مخطط صورة.
{{HTMLElement("area")}}بالتزامن مع {{HTMLElement("map")}},يحدد مخطط صورة.
{{SVGElement("svg")}} This element has been added in HTML5تعرف على إد الإدارة الانتخابية دائرة التنمية الاقتصادية صورة اتجاهي .
{{MathMLElement("math")}} This element has been added in HTML5يحدد صيغة رياضية.
- -

Tabular data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("table")}}تمثل البيانات مع أكثر من بعد واحد.
{{HTMLElement("caption")}}يمثل عنوان الجدول.
{{HTMLElement("colgroup")}}تمثل مجموعة من واحد أو أكثر من الأعمدة من الجدول.
{{HTMLElement("col")}}يمثل عمود من الجدول.
{{HTMLElement("tbody")}}يمثل كتلة من الصفوف التي تصف البيانات ملموسة من الجدول.
{{HTMLElement("thead")}}يمثل كتلة من الصفوف التي تصف التسميات عمود من الجدول.
{{HTMLElement("tfoot")}}يمثل كتلة من الصفوف التي تصف ملخصات عمود من الجدول.
{{HTMLElement("tr")}}يمثل صف من الخلايا في الجدول.
{{HTMLElement("td")}}يمثل خلية البيانات في الجدول.
{{HTMLElement("th")}}يمثل خلية رأس في الجدول.
- -

 الاشكال

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("form")}}عنصر تبادل المعلومات مع الخادم حيث يكون داخله مجموعه من العناصر تتيح لمستخدم التعديل والاضافه
{{HTMLElement("fieldset")}}مثل عنصار او ضوابط مرتبة
{{HTMLElement("legend")}}يمثل عنوان <fieldset> .
{{HTMLElement("label")}}يعتبر توضيح او اسم عنصر داخل <form>
{{HTMLElement("input")}}يمثل حقل من البينات مما يتحُيح للمستخدم استعمالها
{{HTMLElement("button")}}عباره عن وز .
{{HTMLElement("select")}} يمثل مجموعه من الخيارات المٌسدله المرتبة .
{{HTMLElement("datalist")}} This element has been added in HTML5يمثل  قائمة منسدله تحوي مجموعه من الخيارات المعدة مسبقاً اشبه باقائمة .
{{HTMLElement("optgroup")}}يمثل عنوان لمجموعه خيارات <option> الي تكون ادخل {{HTMLElement("optgroup")}} الي هي داخل {{HTMLElement("datalist")}}.
{{HTMLElement("option")}}يمثلخيارات داخل العنصر{{HTMLElement("select")}} أو اقتراح من{{HTMLElement("datalist")}}.
{{HTMLElement("textarea")}}مربع يكتب بداخله نص يمكن التحكم به .
{{HTMLElement("keygen")}} This element has been added in HTML5يمثل سطر مولد مفاتيح .
{{HTMLElement("output")}} This element has been added in HTML5سَحاب يمكن التحكم به .
{{HTMLElement("progress")}} This element has been added in HTML5يمثل شريط اخذ بالمتلاء يعني مثل الداون لود منيجر لما يكون ايحمل
{{HTMLElement("meter")}} This element has been added in HTML5يمثل قيمة مئويه اخذه بالمتلاء بشكل صغير .
- -

العناصر التفاعلية

- - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("details")}} This element has been added in HTML5يمثل قائمة مُنسدله من الخيارات
{{HTMLElement("summary")}} This element has been added in HTML5وهو يمثل عنوان لقائمة العنصر <details> .
{{HTMLElement("menuitem")}} This element has been added in HTML5يمثل الأوامر  التي تمكن المستخدم  من الاستدعاء.
{{HTMLElement("menu")}} This element has been added in HTML5يمثل قائمة من العناصر .
- -

وهنُاك أيضاً

- - diff --git a/files/ar/web/guide/mobile/index.html b/files/ar/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/ar/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

+ diff --git "a/files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" "b/files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" deleted file mode 100644 index 9c8335471a..0000000000 --- "a/files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: الرسومات على الويب -slug: Web/Guide/الرسومات -tags: - - رسومات - - رسوميات ثلاثية الأبعاد - - رسوميات ثنائية الأبعاد - - كانفاس -translation_of: Web/Guide/Graphics ---- -

غالباً ما تحتاج المواقع والتطبيقات لعرض الرسومات. الصور العاديّة يمكن عرضها بسهولة باستخدام العنصر {{HTMLElement("img")}}، أو بإعداد خلفيّة الصفحة باستخدام الخاصيّة {{cssxref("background-image")}}. تستطيع أيضاً إنشاء رسومات في الهواء (طافية)، أو يمكنك التلاعب بالصور بعد حدث ما. هذه المقالات توفر نظرة حول كيف يمكنك القيام بهذه الأشياء.

- -
-
-

الرسوميات ثنائيّة الأبعاد

- -
-
الكانفاس
-
عنصر <canvas> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.
-
الرسوميات المتجهيّة المتغيرة
-
تتيح الرسوميات المتجهيّة المتغيرة (SVG) لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.
-
- -

عرض المزيد...

-
- -
-

الرسوميات ثلاثيّة الأبعاد

- -
-
تقنيّة WebGL
-
دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.
-
- -

فيديو

- -
-
استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق
-
تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.
-
- -
-
تقنيّة WebRTC
-
تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.
-
-
-
diff --git a/files/ar/web/html/element/article/index.html b/files/ar/web/html/element/article/index.html new file mode 100644 index 0000000000..4ffbdbe80a --- /dev/null +++ b/files/ar/web/html/element/article/index.html @@ -0,0 +1,153 @@ +--- +title: عنصر المقالة
+slug: HTML/Element/article +translation_of: Web/HTML/Element/article +--- +
{{HTMLRef}}
+ +

عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. 

+ +

في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها: 

+ +
{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
+ +
+ + + +

يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).

+ +

اليك معلومات خاطفة عن هذا العنصر:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
فئة المكون +

Flow content, sectioning content, palpable content

+
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content. Note that an <article> element must not be a descendant of an {{HTMLElement("address")}} element.
Implicit ARIA rolearticle
Permitted ARIA roles{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}
DOM interface{{domxref("HTMLElement")}}
+ +

الخصائص

+ +

هذا العنصر يحتوي على الخصائص العامة فقط. يمكنك زيارتها من هنا

+ +

ملاحظات الاستخدام

+ +

انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.

+ + + +

المثال التالي يلخص لك هذه النقاط:

+ +
<article class="film_review">
+  <header>
+    <h2>Jurassic Park</h2>
+  </header>
+  <section class="main_review">
+    <p>Dinos were great!</p>
+  </section>
+  <section class="user_reviews">
+    <article class="user_review">
+      <p>Way too scary for me.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-16 19:00">May 16</time>
+          by Lisa.
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <p>I agree, dinos are my favorite.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-17 19:00">May 17</time>
+          by Tom.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posted on
+      <time datetime="2015-05-15 19:00">May 15</time>
+      by Staff.
+    </p>
+  </footer>
+</article>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.article")}}

+ +

يمكنك زيارة التالي:

+ + diff --git a/files/ar/web/html/element/bdo/index.html b/files/ar/web/html/element/bdo/index.html new file mode 100644 index 0000000000..ee154b30c1 --- /dev/null +++ b/files/ar/web/html/element/bdo/index.html @@ -0,0 +1,108 @@ +--- +title: ': عنصر تجاوز النص ثنائي الاتجاه' +slug: HTML/Element/bdo +translation_of: Web/HTML/Element/bdo +--- +
{{HTMLRef}}
+ +

HTML عنصر تجاوز النص ثنائي الاتجاه(<bdo>) يتجاوز الاتجاه الحالي للنص، بحيث يتم تقديم النص داخل في اتجاه مختلف. يتم رسم أحرف النص من نقطة البداية في الاتجاه المحدد. لا يتأثر اتجاه الحروف الفردية (حتى لا تحصل على أحرف إلى الوراء، على سبيل المثال).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
يحتوي الفئاتFlow content, phrasing content, palpable content.
المحتوى المسموح بهPhrasing content.
وسم الإقفال{{no_tag_omission}}
يسمح الآباءأي عنصر يقبل  صياغة المحتوى.
قواعد ARIA مسموحالكل
DOM واجهة{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+ +

السِمات

+ +

تتضمن سمات هذه العناصر  السمات العامة.

+ +
+
{{htmlattrdef("dir")}}
+
الاتجاه الذي يجب أن يظهر فيه النص في محتويات هذا العنصر.
+
القيم المحتملة هي:
+
+
    +
  • ltr: يشير إلى أن النص يجب أن يسير في الاتجاه من اليسار إلى اليمين.
    • +
  • rtl:يشير إلى أن النص يجب أن يكون في الاتجاه من اليمين إلى اليسار.
    • +
+
+
+ +

الأمثلة

+ +
<!-- Switch text direction -->
+<p>This text will go left to right.</p>
+<p><bdo dir="rtl">This text will go right
+to left.</bdo></p>
+
+ +

النتيجة

+ +

 

+ +

{{EmbedLiveSample('Examples')}}

+ +

 

+ +

ملاحظات

+ +

مواصفات HTML 4 لم تحدد أحداث لهذا العنصر؛ تمت إضافتها في XHTML. وهذا على الأرجح سهو.

+ +

مميزات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
المميزاتالحالةتعليق
{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}{{Spec2('HTML4.01')}} 
+ +

التكامل(دعم) مع المتصفح

+ + + +

{{Compat("html.elements.bdo")}}

diff --git a/files/ar/web/html/element/heading_elements/index.html b/files/ar/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..acd3267d37 --- /dev/null +++ b/files/ar/web/html/element/heading_elements/index.html @@ -0,0 +1,244 @@ +--- +title: '

–

: عناصر العناوين' +slug: HTML/Element/headings_elements +translation_of: Web/HTML/Element/Heading_Elements +--- +

 عناصر <h1>–<h6> تقدم لنا سته مستويات من عناوين الأقسام. حيث أن العنصر<h1> يمثل العنوان الأعلى مستوى في الأهمية بينما العنصر <h2> هو الأقل.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
فئات المحتوى Flow content, heading content, palpable content.
المحتوى المسموح بهPhrasing content.
إغفال الوسوملا شئ، كلاً من وسمّي الفتح والإقفال إجباري
الأباء المسموح بهم للعنصرAny element that accepts flow content; don't use an heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.
Permitted ARIA roles{{ARIARole("tab")}}, {{ARIARole("presentation")}}
DOM interface{{domxref("HTMLHeadingElement")}}
+ +

السمات

+ +

هذه العناصر تتضمن السمات العامة.

+ +
+

السمة align عفاء عنها الزمن، لا تستخدمها

+
+ +

ملاحظات الإستخدام

+ +
    +
  • يمكن إستخدام معلومات العناوين من قبل الـ user agents, على سبيل المثال لإنشاء جدول المحتويات لمستند بشكل تلقائي.
    • +
  • لا تستخدم عناوين بمستويات منخفضة لتقليل حجم خط العناوين: إستخدم خاصية لغة CSS المسؤولة عن التحكم بأحجام الخطوط font-size بدلاً من ذلك.
    • +
  •  تجنب تخطي مستويات العناوين: دائماً إبدا من <h1>، من ثم إستخدم <h2> وهكذا.
    • +
  • يجب أن تأخذ بعين الإعتبار تجنب إستخدام العنصر <h1> أكثر من مرة في الصفحة. إطلع على تعريف الأقسام في إستخدام الأقسام و وتسلسل العناوين في الـ HTML لمعلومات أكثر.
    • +
+ +

أمثلة

+ +

جميع العناوين

+ +

الكود التالي يظهر كل مستويات العناوين، قيد الإستخدام.

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+
+ +

هنا نتيجة هذا الكود:

+ +

{{ EmbedLiveSample('All_headings', '280', '300', '') }}

+ +

مثال لصفحة

+ +

الكود التالي يظهر بعض العناوين مع بعض المحتوى بأسفلها.

+ +
<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here...</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here...</p>
+
+<h3>Example 2</h3>
+<p>Some text here...</p>
+
+<h2>See also</h2>
+<p>Some text here...</p>
+
+ +

هنا نتيجة هذا الكود:

+ +

{{ EmbedLiveSample('Example_page', '280', '480', '') }}

+ +

سهولة الوصول

+ +

التنقل بين الأجزاء والصفحات

+ +

من الأساليب الشائعة للتنقل بين أجزاء الصفحة من قبل مستخدمي قارئات الشاشات هو القفز من عنوان لأخر لتحديد محتوى الصفحة بشكل سريع. 

+ +

لهذا السبب، من المهم عدم تخطي أحد مستويات العناوين فالقيام بذلك قد يسبب ارتباك للشخص الذي يقوم بالتنقل بين أجزاء الموقع بهذه الطريقة وربما يترك لدية نوع من الحيرة عن أين هو العنوان المفقود.

+ +

لا تقم بالتالي:

+ +
<h1>Heading level 1</h1>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+
+ +

قم بالتالي:

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+
+ +

تسلسل العناوين -  Nesting

+ +

قد يتم عمل تسلسل لبعض العناوين لتبدو كعناوين أقسام فرعية لعكس تنظيم محتوى الصفحة. أغلب قارئات الشاشات تستطيع أيضا تكوين قائمة مرتبة لكل العناوين التي في الصفحة، ما قد يساعد الشخص لتحديد التسلسل الهرمي للمحتوى بسرعة :

+ +
    +
  1. h1 Beetles + +
      +
    1. h2 Etymology
      2. +
    2. h2 Distribution and Diversity
      3. +
    3. h2 Evolution +
        +
      1. h3 Late Paleozoic
        2. +
      2. h3 Jurassic
        3. +
      3. h3 Cretaceous
        4. +
      4. h3 Cenozoic
        5. +
      +
      4. +
    4. h2 External Morphology +
        +
      1. h3 Head +
          +
        1. h4 Mouthparts
          2. +
        +
        2. +
      2. h3 Thorax +
          +
        1. h4 Prothorax
          2. +
        2. h4 Pterothorax
          3. +
        +
        3. +
      3. h3 Legs
        4. +
      4. h3 Wings
        5. +
      5. h3 Abdomen
        6. +
      +
      5. +
    +
    2. +
+ +

When headings are nested, heading levels may be "skipped" when closing a subsection.

+ + + +

Labeling section content

+ +

Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

+ +

Sectioning content can be labeled using a combination of the aria-labelledby and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

+ +

Example

+ +
<header>
+  <nav aria-labelledby="primary-navigation">
+    <h2 id="primary-navigation">Primary navigation</h2>
+    <!-- navigation items -->
+  </nav>
+</header>
+
+<!-- page content -->
+
+<footer>
+  <nav aria-labelledby="footer-navigation">
+    <h2 id="footer-navigation">Footer navigation</h2>
+    <!-- navigation items -->
+  </nav>
+</footer>
+
+ +

In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}} 
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.h1")}}

+ +

See also

+ +
    +
  • {{HTMLElement("p")}}
    • +
  • {{HTMLElement("div")}}
    • +
  • {{HTMLElement("section")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/ar/web/html/element/index.html b/files/ar/web/html/element/index.html new file mode 100644 index 0000000000..a2fb5187e7 --- /dev/null +++ b/files/ar/web/html/element/index.html @@ -0,0 +1,239 @@ +--- +title: HTML element reference +slug: HTML/Element +translation_of: Web/HTML/Element +--- +

يسرد مرجع HTML هذا جميع عناصر HTML ، المحددة في HTML5 أو في مواصفات سابقة. عند تضمينها داخل أقواس زاوية ، فإنها تشكل علامات HTML : <elementname>.العناصر عبارة عن كيانات تحدد كيفية إنشاء مستندات HTML ، ونوع المحتوى الذي يجب وضعه في أي جزء من مستند HTML .

+ +

تسرد هذه الصفحة جميع علامات HTML5 القياسية ، ولكنها تحتوي أيضًا على العلامات القديمة والبالية والمهملة ، بالإضافة إلى العلامات غير القياسية التي قد تدعمها المتصفحات. غالبًا ما يشار إلى العناصر التي تم تقديمها في HTML5 على أنها عناصر HTML5 الجديدة ، على الرغم من أن العناصر القياسية الأخرى صالحة أيضًا في HTML5.

+ +

في مستند HTML ، يتم تعريف عنصر بواسطة علامة البداية . إذا احتوى عنصر المحتويات الأخرى، وينتهي مع علامة إغلاق، حيث يسبق اسم العنصر بواسطة خط مائل: </elementname>. لا تحتاج إلى إغلاق بعض العناصر ، مثل عناصر الصورة.هذه هي المعروفة باسم العناصر باطلة . تحتوي مستندات HTML على شجرة من هذه العناصر. يدعى كل لتمثيل ما يفعله. على سبيل المثال ، <title>يمثل العنصر عنوان المستند. فيما يلي قائمة أبجدية بعناصر HTML.

+ +

تمت إضافة هذا العنصر في HTML5يشير الرمز إلى أنه تمت إضافة العنصر في HTML5. لاحظ أنه ربما تم تعديل أو توسيع العناصر الأخرى المدرجة هنا حسب مواصفات HTML5. العناصر البعدية غير قياسية أو قديمة أو متوقفة ؛ يجب عدم استخدامها في مواقع ويب جديدة ، ويجب إزالتها بشكل تدريجي من المواقع الحالية لتجنب النتائج غير المرغوب فيها.

+ +

يشير الرمز Ⓒ إلى أن العنصر معرف في مجموعة المواصفات Web Components.

+ +
A + +
    +
  • {{ HTMLElement("a") }}
    • +
  • {{ HTMLElement("abbr") }}
    • +
  • {{ HTMLElement("acronym") }}
    • +
  • {{ HTMLElement("address") }}
    • +
  • {{ HTMLElement("applet") }}
    • +
  • {{ HTMLElement("area") }}
    • +
  • {{ HTMLElement("article") }}
    • +
  • {{ HTMLElement("aside") }}
    • +
  • {{ HTMLElement("audio") }}
    • +
+B + +
    +
  • {{ HTMLElement("b") }}
    • +
  • {{ HTMLElement("base") }}
    • +
  • {{ HTMLElement("basefont") }}
    • +
  • {{ HTMLElement("bdi") }}
    • +
  • {{ HTMLElement("bdo") }}
    • +
  • {{ HTMLElement("bgsound") }}
    • +
  • {{ HTMLElement("big") }}
    • +
  • {{ HTMLElement("blink") }}
    • +
  • {{ HTMLElement("blockquote") }}
    • +
  • {{ HTMLElement("body") }}
    • +
  • {{ HTMLElement("br") }}
    • +
  • {{ HTMLElement("button") }}
    • +
+C + +
    +
  • {{ HTMLElement("canvas") }}
    • +
  • {{ HTMLElement("caption") }}
    • +
  • {{ HTMLElement("center") }}
    • +
  • {{ HTMLElement("cite") }}
    • +
  • {{ HTMLElement("code") }}
    • +
  • {{ HTMLElement("col") }}
    • +
  • {{ HTMLElement("colgroup") }}
    • +
+D + +
    +
  • {{ HTMLElement("data") }}
    • +
  • {{ HTMLElement("datalist") }}
    • +
  • {{ HTMLElement("dd") }}
    • +
  • {{ HTMLElement("decorator")}}
    • +
  • {{ HTMLElement("del") }}
    • +
  • {{ HTMLElement("details") }}
    • +
  • {{ HTMLElement("dfn") }}
    • +
  • {{ HTMLElement("dir") }}
    • +
  • {{ HTMLElement("div") }}
    • +
  • {{ HTMLElement("dl") }}
    • +
  • {{ HTMLElement("dt") }}
    • +
+E + +
    +
  • {{HTMLElement("em") }}
    • +
  • {{ HTMLElement("embed") }}
    • +
+F + +
    +
  • {{ HTMLElement("fieldset") }}
    • +
  • {{ HTMLElement("figcaption") }}
    • +
  • {{ HTMLElement("figure") }}
    • +
  • {{ HTMLElement("font") }}
    • +
  • {{ HTMLElement("footer") }}
    • +
  • {{ HTMLElement("form") }}
    • +
  • {{ HTMLElement("frame") }}
    • +
  • {{ HTMLElement("frameset") }}
    • +
+G H + +
    +
  • {{ HTMLElement("h1") }}
    • +
  • {{ HTMLElement("h2") }}
    • +
  • {{ HTMLElement("h3") }}
    • +
  • {{ HTMLElement("h4") }}
    • +
  • {{ HTMLElement("h5") }}
    • +
  • {{ HTMLElement("h6") }}
    • +
  • {{ HTMLElement("head") }}
    • +
  • {{ HTMLElement("header") }}
    • +
  • {{ HTMLElement("hgroup") }}
    • +
  • {{ HTMLElement("hr") }}
    • +
  • {{ HTMLElement("html") }}
    • +
+I + +
    +
  • {{ HTMLElement("i") }}
    • +
  • {{ HTMLElement("iframe") }}
    • +
  • {{ HTMLElement("img") }}
    • +
  • {{ HTMLElement("input") }}
    • +
  • {{ HTMLElement("ins") }}
    • +
  • {{ HTMLElement("isindex") }}
    • +
+J K + +
    +
  • {{ HTMLElement("kbd") }}
    • +
  • {{ HTMLElement("keygen") }}
    • +
+L + +
    +
  • {{ HTMLElement("label") }}
    • +
  • {{ HTMLElement("legend") }}
    • +
  • {{ HTMLElement("li") }}
    • +
  • {{ HTMLElement("link") }}
    • +
  • {{ HTMLElement("listing") }}
    • +
+M + +
    +
  • {{HTMLElement("main")}}
    • +
  • {{ HTMLElement("map") }}
    • +
  • {{ HTMLElement("mark") }}
    • +
  • {{ HTMLElement("marquee") }}
    • +
  • {{ HTMLElement("menu") }}
    • +
  • {{ HTMLElement("menuitem") }}
    • +
  • {{ HTMLElement("meta") }}
    • +
  • {{ HTMLElement("meter") }}
    • +
+N + +
    +
  • {{ HTMLElement("nav") }}
    • +
  • {{ HTMLElement("nobr") }}
    • +
  • {{ HTMLElement("noframes") }}
    • +
  • {{ HTMLElement("noscript") }}
    • +
+O + +
    +
  • {{ HTMLElement("object") }}
    • +
  • {{ HTMLElement("ol") }}
    • +
  • {{ HTMLElement("optgroup") }}
    • +
  • {{ HTMLElement("option") }}
    • +
  • {{ HTMLElement("output") }}
    • +
+P + +
    +
  • {{ HTMLElement("p") }}
    • +
  • {{ HTMLElement("param") }}
    • +
  • {{ HTMLElement("plaintext") }}
    • +
  • {{ HTMLElement("pre") }}
    • +
  • {{ HTMLElement("progress") }}
    • +
+Q + +
    +
  • {{ HTMLElement("q") }}
    • +
+R + +
    +
  • {{ HTMLElement("rp") }}
    • +
  • {{ HTMLElement("rt") }}
    • +
  • {{ HTMLElement("ruby") }}
    • +
+S + +
    +
  • {{ HTMLElement("s") }}
    • +
  • {{ HTMLElement("samp") }}
    • +
  • {{ HTMLElement("script") }}
    • +
  • {{ HTMLElement("section") }}
    • +
  • {{ HTMLElement("select") }}
    • +
  • {{ HTMLElement("small") }}
    • +
  • {{ HTMLElement("source") }}
    • +
  • {{ HTMLElement("spacer") }}
    • +
  • {{ HTMLElement("span") }}
    • +
  • {{ HTMLElement("strike") }}
    • +
  • {{ HTMLElement("strong") }}
    • +
  • {{ HTMLElement("style") }}
    • +
  • {{ HTMLElement("sub") }}
    • +
  • {{ HTMLElement("summary") }}
    • +
  • {{ HTMLElement("sup") }}
    • +
+T + +
    +
  • {{ HTMLElement("table") }}
    • +
  • {{ HTMLElement("tbody") }}
    • +
  • {{ HTMLElement("td") }}
    • +
  • {{ HTMLElement("template")}}
    • +
  • {{ HTMLElement("textarea") }}
    • +
  • {{ HTMLElement("tfoot") }}
    • +
  • {{ HTMLElement("th") }}
    • +
  • {{ HTMLElement("thead") }}
    • +
  • {{ HTMLElement("time") }}
    • +
  • {{ HTMLElement("title") }}
    • +
  • {{ HTMLElement("tr") }}
    • +
  • {{ HTMLElement("track") }}
    • +
  • {{ HTMLElement("tt") }}
    • +
+U + +
    +
  • {{ HTMLElement("u") }}
    • +
  • {{ HTMLElement("ul") }}
    • +
+V + +
    +
  • {{ HTMLElement("var") }}
    • +
  • {{ HTMLElement("video") }}
    • +
+W + +
    +
  • {{ HTMLElement("wbr") }}
    • +
+X Y Z + +
    +
  • {{ HTMLElement("xmp") }}
    • +
+
+ +

 

diff --git a/files/ar/web/html/element/span/index.html b/files/ar/web/html/element/span/index.html new file mode 100644 index 0000000000..79a265b804 --- /dev/null +++ b/files/ar/web/html/element/span/index.html @@ -0,0 +1,122 @@ +--- +title: +slug: HTML/Element/span +translation_of: Web/HTML/Element/span +--- +

و HTML <span>العنصر هو حاوية مضمنة عامة لمحتوى الصيغة، التي لا تمثل في حد ذاتها أي شيء. يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام classأو idالسمات) ، أو لأنها تتشارك في قيم السمات ، مثل lang. يجب استخدامه فقط عندما يكون أي عنصر دلالي آخر مناسبًا. <span>تشبه إلى حد كبير على <div>عنصر، ولكن <div>هو عنصر على مستوى الكتلة في حين أن <span>هو عنصر المضمنة .

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
فئات المحتوى
+ 		محتوى التدفق ، محتوى الصياغة .
المحتوى المسموح به + + + + + + +
محتوى الصياغة
+
إغفال العلامةالآباء المسموح بهم
أي عنصر يقبل محتوى الصياغة ، أو أي عنصر يقبل محتوى التدفق .
يسمح أدوار ARIAأي
واجهة DOMHTMLSpanElement(قبل HTML 5 ، كانت الواجهة HTMLElement)
+ +

السمات

+ +

هذا العنصر يشمل فقط السمات العالمية .

+ +

المثال 1

+ +
<p><span>Some text</span></p>
+ +

نتيجة

+ +

بعض النصوص

+ +

 

+ +

المثال 2

+ +
<li><span>
+    <a href="portfolio.html" target="_blank">See my portfolio</a>
+</span></li>
+
+ +

CSS:

+ +
+

li span {
+ background: gold;
+ }

+
+ +

مواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
تخصيصالحالةتعليق
{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}{{Spec2('HTML5 W3C')}}واجهة DOM هي الآن {{domxref("HTMLSpanElement")}}.
{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}{{Spec2('HTML4.01')}} 
+ +

توافق التصفح

+ + + +

{{Compat("html.elements.span")}}

+ +

انظر أيضا

+ +
    +
  • HTML {{HTMLElement("div")}} عنصر 
    • +
+ +
{{HTMLRef}}
diff --git a/files/ar/web/html/element/tt/index.html b/files/ar/web/html/element/tt/index.html new file mode 100644 index 0000000000..30cfcc09f9 --- /dev/null +++ b/files/ar/web/html/element/tt/index.html @@ -0,0 +1,161 @@ +--- +title: ': The Teletype Text element (obsolete)' +slug: HTML/Element/tt +translation_of: Web/HTML/Element/tt +--- +
{{ obsolete_header() }}
+ +

وعفا عليها الزمن HTML المبرقة الكاتبة عنصر نص ( <tt>) بإنشاء النص المضمن الذي يقدم باستخدام وكيل المستخدم وجه الافتراضي أحادي المسافة الخط. تم إنشاء هذا العنصر لغرض تقديم نص كما سيتم عرضه على شاشة عرض ثابت مثل نمط teletype أو نص فقط أو طابعة خط

+ +

تُستخدم المصطلحات غير المتناسبة ، والنمط الأحادي ، والمونوسبيس بشكل تبادلي ولها نفس المعنى العام: فهي تصف حرفًا محرفًا تكون جميع أحرفه هي نفس عدد وحدات البكسل على نطاق واسع.

+ +

هذا العنصر عفا عليه الزمن ، ومع ذلك. يجب عليك استخدام أكثر مفيدة لغويا <code>، <kbd>، <var>، أو<samp>عناصر النص المضمن الذي يحتاج إلى أن تقدم في نوع أحادي المسافة، أو <pre>شعارا لالمحتوى الذي ينبغي أن تقدم ككتلة منفصل.

+ +
إذا لم يكن أي من العناصر الدلالية مناسبًا لحالة الاستخدام الخاصة بك (على سبيل المثال ، إذا كنت تحتاج ببساطة إلى عرض بعض المحتوى بخط غير تناسبي) ، فيجب أن تفكر في استخدام <span>العنصر ، وأن تصممه كما تريد باستخدام CSS. و font-familyالخاصية هي مكان جيد للبدء
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
فئات المحتوى + + + + + + +
محتوى التدفق ، ومحتوى الصياغة ، ومحتوى واضح
+
المحتوى المسموح بهمحتوى الصياغة .
إغفال العلامةلا شيء ، كل من علامة البداية والنهاية إلزامية.
الآباء المسموح بهمي عنصر يقبل محتوى الصياغة
يسمح أدوار ARIAأي
+ + + + + + +
واجهة DOM
+ 		HTMLElement
+ +

السمات

+ +

هذا العنصر يشمل فقط السمات العالمية

+ +

أمثلة

+ +

المثال الأساسي

+ +

يستخدم هذا المثال <tt>لإظهار النص الذي تم إدخاله والإخراج بواسطة تطبيق طرفي.

+ +
<p>Enter the following at the telnet command prompt: <code>set localecho</code><br />
+
+The telnet client should display: <tt>Local Echo is on</tt></p>
+
+ +

نتيجة

+ +

{{EmbedLiveSample("Basic_example", 650, 80)}}

+ +

تجاوز الخط الافتراضي

+ +

يمكنك تجاوز الخط الافتراضي للمتصفح - إذا كان المتصفح يسمح لك بذلك ، وهو أمر غير مطلوب - باستخدام CSS:

+ +

CSS

+ +
tt {
+  font-family: "Lucida Console", "Menlo", "Monaco", "Courier",
+               monospace;
+}
+ +

HTML

+ +
<p>Enter the following at the telnet command prompt: <code>set localecho</code><br />
+
+The telnet client should display: <tt>Local Echo is on</tt></p>
+ +

نتيجة

+ +

{{EmbedLiveSample("Overriding_the_default_font", 650, 80)}}

+ +

ملاحظات الاستخدام

+ +

 

+ +

يتم تقديم <tt>العنصر افتراضيًا باستخدام الخط الافتراضي غير المتناسب في المستعرض. يمكنك إلغاء ذلك باستخدام CSS عن طريق إنشاء قاعدة باستخدام ttالمحدد ، كما هو موضح في المثال تجاوز الخط الافتراضي أعلاه.

+ +

 

+ +
+

 

+ +

التغييرات التي تمت تهيئتها بواسطة المستخدم على إعداد خط أحادي المسافة الافتراضي قد تكون لها الأسبقية على CSS الخاص بك.

+ +

 

+
+ +

على الرغم من أن هذا العنصر لم يتم إهماله رسميًا في HTML 4.01 ، إلا أنه تم تثبيط استخدامه بسبب العناصر الدلالية و / أو CSS. و <tt>العنصر عفا عليه الزمن في HTML 5.

+ +

مواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'obsolete.html#tt', '<tt>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}{{Spec2('HTML4.01')}} 
+ +

التوافق المتصفح

+ + + +

{{Compat("html.elements.tt")}}

+ +

انظر أيضا

+ +
    +
  • The semantic {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("kbd")}}, and {{HTMLElement("samp")}} elements
    • +
  • The {{HTMLElement("pre")}} element for displaying preformatted text blocks
    • +
+ +
{{ HTMLRef }}
diff --git "a/files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" "b/files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" deleted file mode 100644 index b228c2f893..0000000000 --- "a/files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: HTML (لغة ترميز النص الفائق) -slug: Web/HTML_لغة_ترميز_النص_الفائق -translation_of: Web/HTML ---- -
{{HTMLSidebar}}
- -

HTML ( لغة ترميز النصوص التشعبية ) هي اللبنة الأساسية للويب. فهي تقوم بوصف و تعريف محتوى صفحة الويب. التقنيات الأخرى إلى جانب HTML تعمل عادةً على وصف مظهر صفحة الويب (CSS) أو تفاعلها مع المستخدم (الجافاسكربت).

- -

مصطلح "نص تشعبي" يشير إلى الروابط التي تربط صفحات الويب ببعضها, إما بموقع واحد أو بين مواقع متعددة. فالروابط هي جانب أساسي من الويب. عبر رفعك لمحتوى على الأنترنت و ربطه بصفحات أخرى أنشأها أشخاص آخرون, فأنت تصبح مشارك نشيط في شبكة الأنترنت.

- -

تستخدم HTML "الوسوم" لوصف النصوص, الصور, وغيرها من المحتويات لعرضعها على متصفح الويب. وسوم HTML تتضمن "عناصر" خاصة مثل  {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, وغيرها الكثير.

- -

المقالات أدناه ستساعدك على تعلم المزيد حول HTML.

- -
-
    -
  • مقدمة عن HTMLإذا كنت جديداً على تطوير الويب, فاحرص على قراءة مقالتنا حول أساسيات HTML لتعرف ماهي HTML وكيف يمكنك استخدامها.
    • -
  • دورات عن HTMLللحصول على مقالات عن كيفية استخدام HTML, و كذلك على دورات و أمثلة شاملة, تفقد منطقة تعلم HTML خاصتنا.
    • -
  • مرجع HTML -

    في قسم مرجع HTML الشامل خاصتنا, ستجد تفاصيل حول كل عنصر و صِفة في HTML . 

    -
    • -
- -
-
-

دورات للمبتدئين

- -

منطقة تعلم HTML خاصتنا تتميز بوحدات متعددة و التي تقوم بتعليم HTML من الألف إلى الياء — لا تتطلب معرفة مسبقة.

- -
-
مقدمة عن HTML
-
هذا الوحدة تقوم بتحديد المستوى, تأخذك لتعلم المفاهيم المهمة و تركيب اللغة, كيف يمكنك إنشاء وصلات أنترنت, و كيف يمكنك استخدام HTML لبناء صفحة ويب.
-
الوسائط المتعددة و التضمين
-
هذه الوحدة تشرح كيف يمكنك استخدام أتش تي أم إل لتضمين وسائط متعددة في صفحات الويب خاصتك, وتتضمن المقالة طرق مختلفة يمكنك استخدامها لإضافة صورة, و كيف يمكنك تضمين فيديو, صوت, و حتى صفحات ويب أخرى كاملة.
-
جداول HTML
-
يمثل عرض البيانات المجدولة على صفحة الويب بطريق مفهومة و سهلة الوصول تحدياً. هذه الوحدة تغطي وسوم الجدول الأساسية, إلى جانب ميزات أكثر تعقيداً مثل إضافة تسميات توضيحية و ملخصات.
-
استمارات HTML
-
الاستمارات هي جزئ مهم جداً من الويب — فهذا يوفر الكثير من الوظائف التي ستحتاجها للتفاعل مع الموقع, مثل التسجيل و تسجيل التدخول, ارسال دعم, شراء منتجات, و المزيد. هذه الوحدة ستأخذك لتبدأ بإنشاء استمارة من ناحية جهة الخادم.
-
استخدام HTML لحل مشاكل شائعة
-
توفر هذه المقالة روابط لأقسام تحتوي على شرح لكيفية استخدام HTML لحل مشاكل شائعة جداً عندما تقوم بإنشاء صفحة ويب مثل: التعامل مع العناوين, إضافة صورة أو فيديو, تأكيد المحتوى, إنشاء استمارة بسيطة و المزيد.
-
- -

مواضيع متقدمة

- -
-
ادارة التركيز في HTML
-
الصفة activeElement و الدالة hasFocus() التي تساعدك على تتبع و التحكم بتفاعلات المستخدم مع عناصر صفحة الويب. 
-
استخدام ذاكرة التخزين المؤقت للتطبيق
-
ذاكرة التخزين المؤقت تسمح للتطبيقات المبنية على الويب بالعمل في وضع عدم الإتصال. يمكنك استخدام واجهة ذاكرة التخزين المؤقت للتطبيق (AppCache) لتحديد الموارد التي يجب على المتصفح تخزينها و إتاحتها للمستخدمين في وضع عدم الإتصال. التطبيقات التي يتم تحميلها مؤقتاً تعمل بشكل صحيح حتى و لو قام المستخدمون بالضغط على زر التحديث عندما يكونون في وضع عدم الإتصال. 
-
-
- -
-

مراجع

- -
-
مرجع HTML
-
تتألف HTML من عناصر, كل منها يمكن تعديلها بواسطة عدد من الصفات. وثائق HTML متلصة ببعضها البعض بواسطة روابط.
-
مرجع عناصر HTML
-
تصفح قائمة لجميع عناصر HTML.
-
مرجع صفات HTML
-
العناصر في HTML تمتلك صفات. تعد هذه الصفات قيم إضافية تقوم بتعديل العناصر أو تخصيص وظيفتها بطرق مختلفة.
-
الصفات الشاملة
-
الصفات الشاملة قد يمكن استخدامها على جميع عناصر HTML, حتى العناصر الغير معيارية. هذا يعني أنَّ أي عنصر غير معياري لا يزال يجب أن يسمح باستخدام هذه الصفات, على الرغم أنَّ هذه العناصر تجعل مستند HTML5 غير متوافق.
-
العناصر المضمنة و العناصر المستحوذة
-
العناصر في HTML عادةً إما "مضمنة" أو "مستحوذة". العنصر المضمن يأحذ المساحة المحصورة بواسطة الوسوم التي تحدده. أما العنصر المستحوذ فأنه يأخذ كامل مساحة العنصر الأب (الحاوي), وبالتالي فإنه ينشئ "كتلة".
-
أنواع الرابط
-
في HTML, أنواع روابط متنوعة يمكن استخدامها لإنشاء أو تعريف صلة بين وثيقتين. تتضمن عناصر الرابط التي يمكن استخدامها على <a>, <area>, و <link>.
-
صيغ الوسائط المدعومة في HTML و عناصر الصوت و الفيديو
-
عنصر <audio> و <video> يسمح لك بتشغيل وسائط الصوت و الفيديو. هذه العناصر توفر بدائل مشابهة للمتصفح كالتي موجودة في أدوبي فلاش و الإضافات الأخرى.
-
أنواع محتوى HTML
-
تتألف HTML من عدة أنواع من المحتوى, كل نوع يسمح لك باستخدام عدة سياقات و يمنعك استخدامها في أخرى. وبالمثل كل نوع يملك مجموعة من الفئات يمكن أن تحتوي على عناصر يمكن أو لا يمكن استخدامها. هذا دليل لهذه الفئات.
-
وضع المراوغة و الوضع المعياري
-
معلومات تاريخية عن وضع المراوغة و الوضع المعياري.
-
- -

مواضيع متعلقة

- -
-
إضافة لون إلى عناصر HTML باستخدام السي أس أس
-
هذه المقالة تغطي معظم الطرق التي يمكن ان تستخدمها لإضافة لون لمحتوى HTML, و تسرد ما الأجزاء من وثيقة HTML التي يمكن تلوينها و ما خصائص السي أس أس التي يمكنك استخدامها لفعل ذلك. تتضمن أمثلة, روابط لأدوات تصميم أنماط (اختيار ألوان, اختيار تدرج لوني ..), و المزيد.
-
-
-
- -

رؤية المزيد..

-
diff --git a/files/ar/web/javascript/guide/functions/index.html b/files/ar/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..af934b397d --- /dev/null +++ b/files/ar/web/javascript/guide/functions/index.html @@ -0,0 +1,698 @@ +--- +title: الدوال +slug: Web/JavaScript/Guide/الدوال +tags: + - الدوال + - جافا سكريبت + - دليل +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
+ +

الدوال هي واحدة من اللبنات الأساسية في جافاسكريبت. الدالة، هي عبارة عن مجموعة من التعليمات البرمجية التي تؤدي وظيفة معينة. حتى تتمكن من إستخدام الدالة، عليك أولا تعريفها في مكان ما من النطاق الذي تود إستدعائها منه.

+ +
+

يمكنك القاء نظرة في مرجع مفصل عن دوال الجافاسكريبت حتى تتعرف على تفاصيل اكثر.

+ +

انشاء الدوال

+ +

الاعلان عن الدوال - الصيغة الافتراضية - Function declarations

+ +

تعريف الدالة: تتكون الدالة من الكلمة المحجوزة function، متبوعة بـ :

+ +
    +
  • إسم الدالة.
    • +
  • قائمة بارامترات الدالة، محصورة بين قوسين ويفصل بينها بفواصل.
    • +
  • تعليمات الجافاسكريبت التي تُعرف الدالة، داخل الأقواس المتعرجة {}.
    • +
+ +

على سبيل المثال، الكود التالي يعرف دالة بسيطة تسمى square :

+ +
function square(number) {
+  return number * number;
+}
+
+ +

الدالة square تمتلك بارامتر واحد، هو number. وتعليمة برمجية واحدة تقوم بإرجاع بارامتر الدالة number مضروباً في نفسه. والتعليمة return تحدد القيمة التي سترجعها الدالة.

+ +
return number * number;
+
+ +

يتم تمرير البارامترات الاولية primitives (كالسلاسل الحرفية، الاعداد...الخ) الى الدالة، بوسيلة تسمى، الاستدعاء بالقيمة، call by value وهي، ان يتم تحليل argument الدالة، والقيمة الناتجة سَتُرسل نسخة منها فقط إلى المتغير المستقبل (بارامتر الدالة)، بعد ذالك تقوم الدالة بتخزين هذه القيمة في الذاكرة، ثم، إذا كانت الدالة قادرة على تعيين القيم للبارامترات الخاصة بها، تبدا بالعمل على هذه النسخة فقط، دون تغيير اي شئ في قيمة المتغير الاصلي.

+ +

في المثال التالي، لدينا المتغير value سنقوم بتمريره إلى الدالة square. ثم ضمن الدالة square سيتم إنشاء نسخة جديدة، وهكذا، حتى وان قمنا بتغيير القيمة داخل الدالة، فلن يؤثر هذا على قيمة المتغير الأصلي الذي تم تعريفه خارج الدالة. لان هذا التغيير لن يكون مرئيا خارج الدالة:

+ +
function square(number) { // parameter = recipient
+  return number * number;
+}
+var value = 10;
+square(value);   // argument = Sender
+document.write(value);  // log: 10
+
+ +

على عكس المثال السابق، اذا قمت بتمرير كائن (مثلا، قيمة غير اولية ك {{jsxref("Array")}} او كائن معرف من قبل المستخدم) كبارامتر، وقامت الدالة بتغيير خصائص الكائن، سيكون هذا التغيير مرئيا خارج الدالة:

+ +
function myFunc(theObject) {
+  theObject.make = "Toyota";
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+var x, y;
+
+x = mycar.make; // x gets the value "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y gets the value "Toyota"
+                // (the make property was changed by the function)
+
+ +

الاعلان عن الدوال بصيغة ال Function expressions

+ +

في حين ان الدالة اعلاه تم الاعلان عنها بصيغة  function declaration، يمكن ايضا انشاء الدوال بصيغة ال function expression. كما يمكن ايضا للدوال ان تكون بصيغة ال anonymous (دوال مجهولة الاسم). على سبيل المثال، الدالة square يمكن تعريفها ايضا بصيغة ال function expression على النحو التالى:

+ +
var square = function(number) { return number * number };
+var x = square(4) // x gets the value 16
+ +

يمكن تعيين اسم للدوال بصيغة ال function expression، لجعل الدالة تعيد استدعاء ذاتها (الاستدعاء الداتي)، أو استخدامه في المنقح debugger. او لتعقب اخطاء الدالة من خلال stack traces.

+ +
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
+
+console.log(factorial(3));
+
+ +

يمكنك تمرير دالة كبارامتر لدالة اخرى. يظهر المثال التالي الدالة map تستخدم دالة اخرى كبارامتر اول لها :

+ +
function map(f,a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

طريقة استخدامها مع الصيغة function expression:

+ +
var multiply = function(x) { return x * x * x; };
+map(multiply, [0, 1, 2, 5, 10]);
+
+ +

طريقة استخدامها مع الصيغة anonymous function مباشرة:

+ +
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+
+ +

returns [0, 1, 8, 125, 1000].

+ +

في الجافاسكريبت يمكن الاعلان عن دالة اعتمادا على شرط. على سبيل المثال، ستقوم التعليمة البرمجية التالية بالاعلان عن الدالة myFunc شرط ان يكون  num يساوي 0:

+ +
var myFunc;
+if (num === 0){
+  myFunc = function(theObject) {
+    theObject.make = "Toyota"
+  }
+}
+ +

بالإضافة إلى انشاء الدوال كما هو موضح اعلاه، يمكنك ايضا استخدام الصيغة {{jsxref("Function")}} constructor لانشاء دوال من خلال السلاسل النصية، تنفذ وقت التشغيل، تماما كما في  {{jsxref("eval", "()eval")}}.

+ +

هناك فرق بين الدوال (functions) والوظائف (methods)، الدوال هي ما نناقشه في هذا الفصل، والوظائف هي تلك المرتبطة بالكائنات (قيمة لخاصية في الكائن)، اقرأ المزيد حول الكائنات والوظائف العمل مع الكائنات [عربي].

+ +

إستدعاء الدوال

+ +

تعريف الدالة يعني ببساطة إعطاء إسم لها وتحديد ماستقوم به عندما يتم إستدعائها. أما إستدعاء الدالة فيقوم فعليا بتنفيذ الإجراءات مع البرامترات المحددة. على سبيل المثال، إذا قمت بتعريف الدالة square، فستقوم بإستدعائها كما يلي :

+ +
square(5);
+
+ +

تقوم التعليمة البرمجية اعلاه باستدعاء الدالة مع البارامتر 5. ثم تقوم بتنفيذ التعليمات البرمجية المرتبطة بها وترجع القيمة 25.

+ +

الدوال يجب ان تنتمي للنطاق الذي استدعيت فيه، ولان الدوال بصيغة function declaration ترفع اعلى النطاق، فمن الممكن أن تعرف في وقت لاحق، كما في المثال التالي:

+ +
console.log(square(5));
+/* ... */
+function square(n) { return n*n }
+
+ +

نطاق الدالة هو اما الدالة التي تم الإعلان عنها، أو البرنامج بأكمله إذا تم الاعلان عنها في المستوى العلوي.

+ +
+

ملاحظة: سيعمل هذا فقط عندما يتم تعريف الدالة باستخدام الصيغة (مثل {}()function funcName). اما التعليمة البرمجية التالية فسوف لن تعمل، وهذا يعني ان الية الرفع (hoisting) بالنسبة للدوال تعمل فقط مع الدوال ذات الصيغة function declaration ولا تعمل مع الدوال ذات الصيغة function expression.

+
+ +
console.log(square); // square is hoisted with an initial value undefined.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+
+ +

arguments الدالة لا تقتصر على الاعداد او السلاسل الحرفية فقط، يمكنك تمرير الكائنات ايضا. في القسم الخاص بالعمل مع الكائنات العمل مع الكائنات[عربي] توجد دالة باسم ()showProps توضح كيفية تمرير كائن ك argument للدالة.

+ +

يمكن للدالة أن تقوم بإستدعاء ذاتها. على سبيل المثال، هذه الدالة تقوم بحساب المضروب بشكل متكرر :

+ +
function factorial(n){
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+
+ +

في كل مرة تقوم الدالة باستدعاء ذاتها، يتم خصم 1 من قيمة البرامتر الممرر، ويتم ضرب القيمة المحصلة في القيمة العائدة من جديد، فرضا، اذا كانت القيمة الممررة 5، الاستدعاء الاول سيكون 5، الاستدعاء الثاني سيكون 4، الاستدعاء الثالث سيكون 3، وهكذا، ويتم ضرب هذه القيم العائدة مع بعضها البعض. بهذا الشكل :  5 * 4 * 3 * 2 * 1 == 120

+ +

امثلة متنوعة:

+ +
var a, b, c, d, e;
+a = factorial(1); // a gets the value 1    // 1 * 1
+b = factorial(2); // b gets the value 2    // 2 * 1
+c = factorial(3); // c gets the value 6    // 3 * 2 * 1
+d = factorial(4); // d gets the value 24   // 4 * 3 * 2 * 1
+e = factorial(5); // e gets the value 120  // 5 * 4 * 3 * 2 * 1
+
+ +

هناك طرق أخرى لاستدعاء الدوال. غالبا ما تكون هناك حالات تحتاج الى دالة تُستدعى بشكل ديناميكي، حيث يمكن التعامل مع مجموعة من ال arguments، وحيث سياق (context) استدعاء الدالة يجب ان ينشا في وظيفة لكائن يحدد وقت التشغيل. وهذا يبين ان الدوال هي نفسها كائنات، وهذه الكائنات بدورها لديها وظائف ( شاهد {{jsxref("Function")}} object). من ضمن هذه الوظائف، الوظيفة {{jsxref("Function.apply", "()apply")}} يمكن استخدامها لتحقيق هذه الاهداف.

+ +

نطاق الدالة

+ +

المتغيرات المعرفة داخل الدالة لايمكن الوصول إليها من أي مكان آخر خارج الدالة، لأن هذه المتغيرات معرفة فقط داخل نطاق الدالة. على كل، يمكن للدالة الوصول إلى كل المتغيرات والدوال المعرفة في النطاق المعرفة فيه الدالة. بعبارة أخرى، الدالة المعرفة في النطاق العام تستطيع الوصول إلى كل المتغيرات المعرفة في النطاق العام. الدالة المعرفة داخل دالة أخرى يمكنها أيضا الوصول إلى كل المتغيرات المعرفة في دالتها الأم وكل المتغيرات الأخرى التي يمكن للدالة الأم الوصول لها.

+ +
// المتغيرات التالية معرفة في النطاق العام
+var num1 = 20,
+    num2 = 3,
+    name = "Chamahk";
+
+// هذه الدالة معرفة في النطاق العام
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Returns 60
+
+// مثال على دالة داخل دالة
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Returns "Chamahk scored 5"
+
+ +

النطاق ومكدس الدوال

+ +

الاستدعاء الذاتي

+ +

يمكن للدالة ان تستدعي داتها بثلاثة طرق:

+ +
    +
  1. من خلال اسم الدالة
    2. +
  2. arguments.callee
    3. +
  3. من خلال المتغيرات التي تشير إلى الدالة
    4. +
+ +

على سبيل المثال، انظر الدالة التالية:

+ +
var foo = function bar() {
+   // statements go here
+};
+
+ +

تضمين الاستدعاء الذاتي داخل جسم الدالة bar:

+ +
    +
  1. ()bar
    2. +
  2. ()arguments.callee
    3. +
  3. ()foo
    4. +
+ +

الدوال التي تقوم باستدعاء نفسها تسمى recursive function. الاستدعاء الداتي يشبه آلِية الحلقات في بعض النواحي، كلاهما ينفذان التعليمات البرمجية نفسها عدة مرات، وايضا كلاهما يتطلبان تعبيرا شرطيا (لتجنب التكرار الى ما لا نهاية، او بالاحرى، الاستدعاء الذاتي الى ما لا نهاية في حالتنا هذه). على سبيل المثال، الحلقة التالية:

+ +
var x = 0;
+while (x < 10) { // "x < 10" is the loop condition
+   // do stuff
+   x++;
+}
+
+ +

المثال التالي يبين دالة تقوم بالاستدعاء الذاتي، يمكنها محاكات الحلقة :

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+
+ +

ومع ذلك، لا يمكن أن تكون بعض الخوارزميات حلقات تكرارية بسيطة. على سبيل المثال، الوصول الى كافة العقد nodes في بنية الشجرة DOM سيكون اسهل واكثر تفصيلا باستخدام الاستدعاء الذاتي:

+ +
function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i < node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+
+ +

على عكس الحلقات التكرارية البسيطة، والتي تقوم بالتكرار السطحي على DOM، تمكننا دوال الاستدعاء الداتي من تنفيذ عدة استدعاءات، كل استدعاء داتي ينتج عنه العديد من الاستدعاءات الفرعية، بمعنى ان هذا النوع من الدوال يمكنها الوصول الى عمق ال DOM. لتتيح لك امكانية التعامل مع كل جزئية فيه. كما يوضح المثال التالي:

+ +
var walkTree = function recycle( node, fn ) {
+	fn( node );
+	node = node .firstChild;
+	while( node ){
+		recycle( node, fn );
+		node = node.nextSibling;
+	}
+}
+
+walkTree( document.body , function( node ){
+	if( node.nodeType == 1 ){
+		// do something with [object HTMLElements]
+	}
+	if( node.nodeType == 3 ){
+		// do something with [object Text]
+	}
+});
+
+ +

كلا الدالتين اعلاه، تؤدي نفس الغرض، لا اختلاف بينهما، الفرق الوحيد هو شكل بناء الدالة، حيث بنيت الدالة الاولى على طريقة ال  function declaration  فيما بنيت الدالة الثانية على شكل، ال  function expression  وال  anonymous function، وكلاهما تنتهج اسلوب recursive function.

+ +

من الناحية النظرية، من الممكن تحويل أي خوارزمية الاستدعاء الذاتي الى خوارزمية الاستدعاء العادي (مع الحلقات، على سبيل المثال). عموما، المنطق الناتج أكثر تعقيداً ويتطلب استخدام  المكدس. الاستدعاء الذاتي أيضا يستخدم المكدس، مكدس الدالة function stack.

+ +

سلوك مكدس الذاكرة المؤقتة يمكن أن ينظر إليه كما في المثال التالي:

+ +
function foo(i) {
+  if (i < 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin:3
+// begin:2
+// begin:1
+// begin:0
+// end:0
+// end:1
+// end:2
+// end:3
+ +

الدوال المتداخلة  و الاغلاق (closures)

+ +

يمكن انشاء دالة داخل دالة اخرى. الدالة الداخلية هي دالة خاصة private بالدالة الخارجة. الدالة الداخلية تشكل الاغلاق closure، والإغلاق هو فقط تعبير (عموما الاغلاق هو دالة). والذي يمكنه الوصول إلى المتغيرات المجانية free variables (المصطلح free variable يشير الى المتغيرات المستخدمة في الدالة، وهي ليست متغيرات محلية او بارامترات لهذه الدالة. بمعنى اخر هي متغيرات معرفة خارج الدالة وتستفيد منها الدالة، وهذا هو سبب تسميتها بالمتغيرات المجانية)،  كما يمكنه ايضا، الوصول الى اي شئ في البيئة التي ترتبط بها هذه المتغيرات المجانية.

+ +

بما ان الدالة الداخلية هي closure. فهذا يعني انها تستطيع ان ترث البرامترات والمتغيرات من الدالة الخارجية. بمعنى اخر، الدالة الداخلية تمتلك النطاق الخاص بالدالة الخارجية.

+ +

الخلاصة:

+ +
    +
  • لايمكن الوصول إلى الدالة الداخلية الا من خلال التعليمات البرمجية الخاصة بالدالة الخارجية.
    • +
  • الدالة الداخلية تشكل الاغلاق closure: الدالة الداخلية يمكنها استخدام البرامترات والمتغيرات الخاصة بالدالة الخارجية، فيما لا يمكن للدالة الخارجية استخدام البرامترات والمتغيرات الخاصة بالدالة الداخلية.
    • +
+ +

يظهر المثال التالي الدوال المتداخلة:

+ +
function addSquares(a,b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2,3); // returns 13
+b = addSquares(3,4); // returns 25
+c = addSquares(4,5); // returns 41
+
+ +

بما ان الدالة الداخلية تشكل closure. فمن الضروري استدعاء الدالة الخارجية أولا، بعد ذالك يمكنك تحديد ال  arguments لكل منهما :

+ +
function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
+result = fn_inside(5); // returns 8
+
+result1 = outside(3)(5); // returns 8
+
+ +

الحفاظ على المتغيرات

+ +

في المثال اعلاه، لاحظ كيف تم الحفاظ على x عندما تم ارجاع الدالة inside. الاغلاق يحفاظ على البرامترات والمتغيرات في جميع النطاقات التي تشير إليه. مع كل استدعاء للدالة الخارجية، يمكنك تعيين arguments مختلفة، سيتم إنشاء إغلاق جديد مع كل استدعاء للدالة outside. يمكن تحرير الذاكرة فقط عندما يكون عائد الدلة inside غير متاحا.

+ +

وهذا لا يختلف عن تخزين المراجع في كائنات أخرى، ولكن غالبا ما يكون أقل وضوحاً نظراً لعدم تعيين المراجع مباشرة ولا يمكن فحصها.

+ +

الدوال الاكثر تداخلا

+ +

الدوال يمكن ان تكون اكثر تداخلا، بمعنى، الدالة (A) تحتضن الدالة (B)، والدالة (B) تحتضن الدالة (C). هنا كل من الدالة B و C تشكل closures، وهكذا B يمكنها الوصول الى  A، و  C يمكنها الوصول الى B. بالاضافة الى ذالك، C يمكنها الوصول الى B و A، وبالتالي، الإغلاق يمكن أن يحتوي على عدة نطاقات. وهذا ما يسمى بسلسلة النطاق scope chaining. (سيتم شرح لماذا يطلق عليه "تسلسل" في وقت لاحق).

+ +

انظر في المثال التالي:

+ +
function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+
+ +

في هذا المثال C تصل الى y الخاصة ب B وايضا الى x الخاصة ب A، أصبح هذا ممكناً لأن:

+ +
    +
  1. B تشكل closure، وتمتلك A، بمعنى B يمكنها الوصول الى البارامترات والمتغيرات الخاصة ب A.
    2. +
  2. C تشكل closure، وتمتلك B.
    3. +
  3. بسبب ان B تمتلك A، فقد اصبح C يمتلك A، وعليه ف C يمكنه الوصول الى البارامترات والمتغيرات الخاصة ب B و A. بعبارات أخرى، C سلسلة نطاقات ل B و A في هذا الترتيب.
    4. +
+ +

العكس ليس صحيحاً. A لا يمكنها الوصول الى C، لان A لا يمكنها الوصول لاي من البارامترات او المتغيرات الخاصة ب B. (فيما C هي متغير لها). وهكذا، C ستصبح خاصة private فقط ب B.

+ +

تضارب الاسماء

+ +

عند وجود اثنين من البارامترات أو المتغيرات التي تحمل نفس الاسم في نطاقات الاغلاق، فهذا يسمى تضارب في الاسماء، وفي هذه الحالة، ستكون الاسبقية للنطاقات الاكثر عمقا في استخدام هذا الاسم، اما بالنسبة للنطاقات الأكثر سطحية سوف تحظى بأولوية أدنى لاستخدام هذا الاسم، من وجهة نظر سلسلة النطاق، النطاق الاول في السلسلة هو النطاق الاكثر عمقا ( اسفل السلسلة)، والنطاق الاخير في السلسلة هو النطاق الاكثر سطحية (اعلى السلسلة). شاهد المثال التالي:

+ +
function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // returns 20 instead of 10
+
+ +

يحدث تعارض الاسم  في التعليمة return x، وهو مابين الباراميتر x الخاص ب inside وبين المتغير x الخاص ب outside. سلسلة النطاق سترى الامر على هذا النحو {inside, outside, global object}. وبناءا عليه x الخاص ب inside سياخد الاسبقية على x الخاص ب outside، وبالتالي الناتج هو 20 (inside x) بدلا من 10 (outside x).

+ +

الاغلاقات - Closures

+ +

الإغلاق هي واحدة من أقوى المميزات في جافا سكريبت. جافا سكريبت تسمح بتداخل الوظائف وتمنح الدوال الداخلية حق الوصول الكامل إلى كافة المتغيرات والدوال المعرفة داخل الدالة الخارجية (وجميع المتغيرات والدوال الأخرى التي يمكن للدالة الخارجية الوصول إليها). ومع ذالك، الدوال الخارجية لا يمكنها الوصول الى المتغيرات والدوال المعرفة داخل الدوال الداخلية. وهذا يوفر نوعا من الحماية للمتغيرات والدوال الداخلية. وأيضا، لأن الدوال الداخلية لديها حق الوصول إلى نطاق الدالة الخارجية، فالمتغيرات والدوال المعرفة داخل الدالة الخارجية ستدوم اطول من مدة تنفيذ الدالة الخارجىة، اذا تمكنت الدالة الداخلية ان تدوم أطول من الدالة الخارجية. يتم إنشاء الاغلاق عندما تكون الدالة الداخلية بطريقة أو بأخرى في متناول أي نطاق خارج الدالة الخارجية.

+ +
var pet = function(name) {   // The outer function defines a paramrter called "name"
+  var getName = function() {
+    return name;             // The inner function has access to the "name" paramrter of the outer function
+  }
+  return getName;            // Return the inner function, thereby exposing it to outer scopes
+},
+myPet = pet("Vivie");
+
+myPet();                     // Returns "Vivie"
+
+ +

من الناحية العملية، يمكن أن تكون المسالة أكثر تعقيداً من التعليمات البرمجية أعلاه. يمكن إرجاع كائن والذي سيحتوي على وظائف للتعامل مع المتغيرات الداخلية للدالة الخارجية:

+ +
var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === "string" && (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet("Vivie");
+pet.getName();                  // Vivie
+
+pet.setName("Oliver");
+pet.setSex("male");
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+
+ +

في التعليمات البرمجية اعلاه، المتغير name الخاص بالدالة الخارجية يمكن الوصول اليه من الدوال الداخلية. من المعلوم ايضا، انه، ليس هناك طريقة أخرى للوصول إلى المتغيرات الداخلية إلا من خلال الدوال الداخلية. المتغيرات الداخلية الخاصة بالدوال االداخلية هي بمثابة مخازن آمنة بالنسبة للبارامترات و المتغيرات الخارجية. كما انها تتيح امكانية الوصول الى البيانات الداخلية بشكل دقيق وامن. بالنسبة للدوال، ليس من الضروري تعيينها إلى متغير أو حتى تسميتها.

+ +
var getCode = (function(){
+  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secureCode
+
+ +

ومع ذلك، يجب الاحتراس جيدا من الوقوع في بعض الفخاخ عند استخدام عمليات الإغلاق. إذا كانت دالة مغلقة تعرف متغير بنفس الاسم، كاسم متغير في النطاق الخارجي، فلا توجد طريقة للإشارة إلى المتغير في النطاق الخارجي مرة أخرى.

+ +
var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+
+ +

الكلمة المحجوزة this (في بعض الاحيان تسمى بالمتغير العجيب)، ينبغي التعامل معها بحذر في حالات الإغلاق. احذر، ف this تشير إلى السياق حيث سيتم استدعاء الدالة وليس إلى المكان حيث تم تعريف الدالة.

+ +

استخدام الكائن arguments

+ +

يمكنك التعامل مع  arguments الدالة من الداخل، من خلال الكائن (arguments او الحجج). يمكنك معالجة ال  arguments الممررة الى الدالة على النحو التالي:

+ +
arguments[i]
+
+ +

حيث ان i هو الفهرس الرقمي لل arguments، ويبتدئ من 0، وبالتالي، ال argument الاول الممرر الى الدالة سيكون arguments[0]. لمعرفة عدد ال arguments الممررة نستخدم arguments.length.

+ +

باستخدام الكائن arguments، يمكنك استدعاء دالة مع arguments أكثر من التي تم التصريح بها رسميا. وهي مفيذة جدا، خصوصا إذا كنت لا تعرف مسبقاً كم عدد ال  arguments التي ستمرر اثناء استدعاء الدالة. يمكنك استخدام arguments.length لمعرفة عدد البرامترات الممرة الى الدالة، حتى تتمكن بعد ذالك من التعامل معها من خلال الكائن arguments.

+ +

على سبيل المثال، يمكننا انشاء دالة تقوم بوصل عدة سلاسل حرفية. ال argument الوحيد المحدد رسميا في الدالة، هو السلسلة الحرفية التي ستفصل بين باقي السلاسل الحرفية التي ستمرر ك arguments بعد ال argument الرسمي للدالة.  كما في المثال التالي:

+ +
function myConcat(separator) {
+   var result = "", // initialize list
+       i;
+   // iterate through arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+ +

يمكنك تمرير اي عدد من ال arguments لهذه الدالة، وسترتبط ببعضها البعض من خلال ما سيمرر الى ال argument الرسمي:

+ +
// returns "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+
+ +
+

ملاحظة: المتغير arguments هو شبه مصفوفة، ولكنه ليس مصفوفة. وانما يتصرف كالمصفوفة، يستخدم الفهرسة الرقمية، يستخدم الخاصية length، ومع ذالك، لا يمكنه استخدام الوظائف الخاصة بالمصفوفات مثل push او join ...الخ.

+
+ +

الفرق بين parameters و arguments

+ +

Function parameters او بارامترات الدالة، هي الأسماء المدرجة في تعريف الدالة. فيما Function arguments هي القيم الحقيقية التي تمرر إلى الدالة عند الاستدعاء (راجع التعريف والاستدعاء اعلى الصفحة). انظر المثال التالي:

+ +
function foo( param1, param2, ...) // parameters {
+    // Do things
+}
+foo(arg1, arg2, ...); // arguments
+
+ +
+

ملاحظة: ال parameter هو متغير باسم معين يمرر الى الدالة. تستخدم الباراميترات لجلب ال arguments داخل الدوال.

+
+ +

راجع الكائن {{jsxref("Function")}} في مرجع الجافا سكريبت لمزيد من المعلومات.

+ +

بارامترات الدالة

+ +

بدأً من ECMAScript 6، أصبح هناك نوعان من البارامترات: البارامترات الإفتراضية وبقية البارامترات.

+ +

البارامترات الإفتراضية

+ +

في الجافاسكريبت، القيمة الافتراضية لبرامترات الدوال هي undefined. ومع ذالك، في بعض الحالات، قد يكون من المفيد تعيين قيمة افتراضية مختلفة. البارامترات الافتراضية يمكنها تدارك الموقف.

+ +

قبل ECMAScript 2015، كانت الاستراتيجية العامة لوضع الافتراضات هي اختبار قيمة البارامتر في جسم الدالة وتعيين قيمة له اذا كانت قيمته undefined. على سبيل المثال، في التعليمة البرمجية التالية، لم يتم تحديد قيمة للبارامتر b في الاستدعاء، وبالتالي قيمتة ستساوي undefined، عند اختبار (a * b) ستعود الدالة multiply ب NaN. لتجنب هذا،  يقوم السطر الثاني في التعليمة البرمجية اسفله بتعيين قيمة افتراضية للبارامتر b:

+ +
function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiply(5); // 5
+
+ +

ابتداءا من ECMAScript 2015، اصبح من الممكن عمل اعدادات افتراضية على غرار (php)، والاختبار في جسم الدالة لم يعد ضروريا. الان، ببساطة يمكنك تعيين 1 كقيمة افتراضية للبارامتر b في تعريف الدالة:

+ +
function multiply(a, b = 1) {
+  return a*b;
+}
+
+multiply(5); // 5
+ +

لمزيد من التفاصيل، راجع  default parameters في مرجع الجافاسكريبت.

+ +

بقية البارامترات - rest parameter

+ +

الصيغة rest parameter تسمح بتمثيل عدد غير محدود من ال arguments كمصفوفة. في هذا المثال، نستخدم بقية البارامترات لتجميع ال arguments ابتداءا من البرامتر الثاني لغاية النهاية. ثم نقوم بضربها باول بارامتر. هذا المثال يستخدم دالة السهم، والتي سندرسها في القسم التالي.

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x => multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

دوال السهم - Arrow functions

+ +

تعبيرات دوال السهم تسمح لك باستخدام تعبيرا أكثر إيجازاً من التعبير عن الوظائف الكلاسيكية. والقيمة this يتم ربطها بشكل نحوي. فيما تكون دوال السهم مجهولة الاسم anonymous. راجع ايضا هذه المدونة  ES6 In Depth: Arrow functions.

+ +

اثنين من العوامل التي أثرت في مقدمة دوال السهم: الدوال المختصرة و lexical this.

+ +

الدوال المختصرة

+ +

في بعض الأنماط الوظيفية، الدوال المختصرة هي موضع ترحيب. قارن التعليمات البرمجية التالية:

+ +
var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+
+var a3 = a.map( s => s.length );
+ +

التعليمة Lexical this

+ +

قبل وجود وظائف السهم، كانت كل دالة جديدة تعرف قيمة ال this الخاصة بها (كائن جديد في حالة الدالة الإنشائية، undefined في استدعاءات الدوال مع الوضع الصارم، في سياق الكائن قيد التشغيل في حالة الوظيفة، إلخ.). وهذا يمكن أن يسبب بعض المشاكل مع نمط البرمجة الكائنية:

+ +
function Person() {
+  // The Person() constructor defines 'this' as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines 'this'
+    // as the global object, which is different from the 'this'
+    // defined by the Person() constructor.
+  this.age++;
+  }, 1000);
+}
+var p = new Person();
+ +

في ECMAScript 3/5، تم إصلاح هذه المشكلة عن طريق تخزير القيمة this في متغير اخر.

+ +
function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}
+ +

بدلا من ذلك، يمكننا إنشاء دالة ملزمة bound function بحيث تكون "احسن"  قيمة this سيتم تمريرها إلى الدالة ()growUp.

+ +

دوال السهم تلتقط القيمة this من السياق المغلق (enclosing context)، لذا ستعمل التعليمة البرمجية التالية كما هو متوقع.

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

دوال معرفة مسبقا

+ +

جافا سكريبت لديها العديد من الوظائف المدمجة ذات المستوى الاعلى top-level :

+ +
+
{{jsxref("Global_Objects/eval", "()eval")}}
+
+

الوظيفة ()eval تستخدم لاختبار شفرة الجافا سكريبت على شكل سلسلة حرفية.

+
+
{{jsxref("Global_Objects/uneval", "()uneval")}} {{non-standard_inline}}
+
+

الوظيفة ()uneval تستخدم لانشاء سلسلة حرفية عبارة عن مصدر كود الكائن {{jsxref("Object")}}.

+
+
{{jsxref("Global_Objects/isFinite", "()isFinite")}}
+
+

الدالة العامة () isFinite تقوم بتحديد ما إذا كانت القيمة التي تم تمريرها عدد محدود. إذا لزم الأمر، يتم تحويل البارامتر إلى رقم.

+
+
{{jsxref("Global_Objects/isNaN", "()isNaN")}}
+
+

تستخدم الدالة()isNaN للتاكد من ان القيمة ليست رقمية {{jsxref("Global_Objects/NaN", "NaN")}}  ملاحظة: يمكننا ايضا استخدام {{jsxref("Number.isNaN()")}}, الجديدة في ECMAScript 6 او استخدام التعليمة typeof. كلها تادي نفس الغرض.

+
+
{{jsxref("Global_Objects/parseFloat", "()parseFloat")}}
+
+

تستخدم الدالة ()parseFloat لتحويل سلسلة حرفية الى عدد كسري.

+
+
{{jsxref("Global_Objects/parseInt", "()parseInt")}}
+
+

تستخدم الدالة ()parseInt لتحويل سلسلة حرفية الى عدد صحيح (البارامتر الثاني خاص بالتعامل مع القاعدة في الأنظمة العددية الرياضية).

+
+
{{jsxref("Global_Objects/decodeURI", "()decodeURI")}}
+
+

تستخدم الدالة ()decodeURI لفك تشفير معرف الموارد الموحد (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او عن طريق نفس الروتين.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "()decodeURIComponent")}}
+
+

تستخدم الوظيفة ()decodeURIComponent لفك تشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} او عن طريق نفس الروتين.

+
+
{{jsxref("Global_Objects/encodeURI", "()encodeURI")}}
+
+

تستخدم الوظيفة ()encodeURI لتشفير معرف الموارد الموحد (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لرموز تتألف من اثنين من الحروف "البديلة").

+
+
{{jsxref("Global_Objects/encodeURIComponent", "()encodeURIComponent")}}
+
+

تستخدم الوظيفة ()encodeURIComponent لتشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لاحرف تتألف من اثنين من الحروف "البديلة").

+
+
{{jsxref("Global_Objects/escape", "()escape")}} {{deprecated_inline}}
+
+

الوظيفة ()escape الغير مرغوب فيها. تحتسب سلسلة جديدة من بعض الأحرف التي يجب استبدلها من قبل hexadecimal escape sequence. استخدم {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او استخدم {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} بدلا عنها.

+
+
{{jsxref("Global_Objects/unescape", "()unescape")}} {{deprecated_inline}}
+
+

الوظيفة()unescape الغير مرغوب فيها. تحتسب سلسلة جديدة بحيث hexadecimal escape sequence. اسبدلت مع الرمز الذي يمثلها. متتالية التهريب يمكن ان تاتى من دالة مثل {{jsxref("Global_Objects/escape", "escape")}}. على العموم استخدم {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} او استخدم {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} بدلا عنها.

+
+
+ +

 

+
+ +

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git "a/files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" "b/files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" deleted file mode 100644 index af934b397d..0000000000 --- "a/files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" +++ /dev/null @@ -1,698 +0,0 @@ ---- -title: الدوال -slug: Web/JavaScript/Guide/الدوال -tags: - - الدوال - - جافا سكريبت - - دليل -translation_of: Web/JavaScript/Guide/Functions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
- -

الدوال هي واحدة من اللبنات الأساسية في جافاسكريبت. الدالة، هي عبارة عن مجموعة من التعليمات البرمجية التي تؤدي وظيفة معينة. حتى تتمكن من إستخدام الدالة، عليك أولا تعريفها في مكان ما من النطاق الذي تود إستدعائها منه.

- -
-

يمكنك القاء نظرة في مرجع مفصل عن دوال الجافاسكريبت حتى تتعرف على تفاصيل اكثر.

- -

انشاء الدوال

- -

الاعلان عن الدوال - الصيغة الافتراضية - Function declarations

- -

تعريف الدالة: تتكون الدالة من الكلمة المحجوزة function، متبوعة بـ :

- -
    -
  • إسم الدالة.
    • -
  • قائمة بارامترات الدالة، محصورة بين قوسين ويفصل بينها بفواصل.
    • -
  • تعليمات الجافاسكريبت التي تُعرف الدالة، داخل الأقواس المتعرجة {}.
    • -
- -

على سبيل المثال، الكود التالي يعرف دالة بسيطة تسمى square :

- -
function square(number) {
-  return number * number;
-}
-
- -

الدالة square تمتلك بارامتر واحد، هو number. وتعليمة برمجية واحدة تقوم بإرجاع بارامتر الدالة number مضروباً في نفسه. والتعليمة return تحدد القيمة التي سترجعها الدالة.

- -
return number * number;
-
- -

يتم تمرير البارامترات الاولية primitives (كالسلاسل الحرفية، الاعداد...الخ) الى الدالة، بوسيلة تسمى، الاستدعاء بالقيمة، call by value وهي، ان يتم تحليل argument الدالة، والقيمة الناتجة سَتُرسل نسخة منها فقط إلى المتغير المستقبل (بارامتر الدالة)، بعد ذالك تقوم الدالة بتخزين هذه القيمة في الذاكرة، ثم، إذا كانت الدالة قادرة على تعيين القيم للبارامترات الخاصة بها، تبدا بالعمل على هذه النسخة فقط، دون تغيير اي شئ في قيمة المتغير الاصلي.

- -

في المثال التالي، لدينا المتغير value سنقوم بتمريره إلى الدالة square. ثم ضمن الدالة square سيتم إنشاء نسخة جديدة، وهكذا، حتى وان قمنا بتغيير القيمة داخل الدالة، فلن يؤثر هذا على قيمة المتغير الأصلي الذي تم تعريفه خارج الدالة. لان هذا التغيير لن يكون مرئيا خارج الدالة:

- -
function square(number) { // parameter = recipient
-  return number * number;
-}
-var value = 10;
-square(value);   // argument = Sender
-document.write(value);  // log: 10
-
- -

على عكس المثال السابق، اذا قمت بتمرير كائن (مثلا، قيمة غير اولية ك {{jsxref("Array")}} او كائن معرف من قبل المستخدم) كبارامتر، وقامت الدالة بتغيير خصائص الكائن، سيكون هذا التغيير مرئيا خارج الدالة:

- -
function myFunc(theObject) {
-  theObject.make = "Toyota";
-}
-
-var mycar = {make: "Honda", model: "Accord", year: 1998};
-var x, y;
-
-x = mycar.make; // x gets the value "Honda"
-
-myFunc(mycar);
-y = mycar.make; // y gets the value "Toyota"
-                // (the make property was changed by the function)
-
- -

الاعلان عن الدوال بصيغة ال Function expressions

- -

في حين ان الدالة اعلاه تم الاعلان عنها بصيغة  function declaration، يمكن ايضا انشاء الدوال بصيغة ال function expression. كما يمكن ايضا للدوال ان تكون بصيغة ال anonymous (دوال مجهولة الاسم). على سبيل المثال، الدالة square يمكن تعريفها ايضا بصيغة ال function expression على النحو التالى:

- -
var square = function(number) { return number * number };
-var x = square(4) // x gets the value 16
- -

يمكن تعيين اسم للدوال بصيغة ال function expression، لجعل الدالة تعيد استدعاء ذاتها (الاستدعاء الداتي)، أو استخدامه في المنقح debugger. او لتعقب اخطاء الدالة من خلال stack traces.

- -
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
-
-console.log(factorial(3));
-
- -

يمكنك تمرير دالة كبارامتر لدالة اخرى. يظهر المثال التالي الدالة map تستخدم دالة اخرى كبارامتر اول لها :

- -
function map(f,a) {
-  var result = [], // Create a new Array
-      i;
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-  return result;
-}
-
- -

طريقة استخدامها مع الصيغة function expression:

- -
var multiply = function(x) { return x * x * x; };
-map(multiply, [0, 1, 2, 5, 10]);
-
- -

طريقة استخدامها مع الصيغة anonymous function مباشرة:

- -
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
-
- -

returns [0, 1, 8, 125, 1000].

- -

في الجافاسكريبت يمكن الاعلان عن دالة اعتمادا على شرط. على سبيل المثال، ستقوم التعليمة البرمجية التالية بالاعلان عن الدالة myFunc شرط ان يكون  num يساوي 0:

- -
var myFunc;
-if (num === 0){
-  myFunc = function(theObject) {
-    theObject.make = "Toyota"
-  }
-}
- -

بالإضافة إلى انشاء الدوال كما هو موضح اعلاه، يمكنك ايضا استخدام الصيغة {{jsxref("Function")}} constructor لانشاء دوال من خلال السلاسل النصية، تنفذ وقت التشغيل، تماما كما في  {{jsxref("eval", "()eval")}}.

- -

هناك فرق بين الدوال (functions) والوظائف (methods)، الدوال هي ما نناقشه في هذا الفصل، والوظائف هي تلك المرتبطة بالكائنات (قيمة لخاصية في الكائن)، اقرأ المزيد حول الكائنات والوظائف العمل مع الكائنات [عربي].

- -

إستدعاء الدوال

- -

تعريف الدالة يعني ببساطة إعطاء إسم لها وتحديد ماستقوم به عندما يتم إستدعائها. أما إستدعاء الدالة فيقوم فعليا بتنفيذ الإجراءات مع البرامترات المحددة. على سبيل المثال، إذا قمت بتعريف الدالة square، فستقوم بإستدعائها كما يلي :

- -
square(5);
-
- -

تقوم التعليمة البرمجية اعلاه باستدعاء الدالة مع البارامتر 5. ثم تقوم بتنفيذ التعليمات البرمجية المرتبطة بها وترجع القيمة 25.

- -

الدوال يجب ان تنتمي للنطاق الذي استدعيت فيه، ولان الدوال بصيغة function declaration ترفع اعلى النطاق، فمن الممكن أن تعرف في وقت لاحق، كما في المثال التالي:

- -
console.log(square(5));
-/* ... */
-function square(n) { return n*n }
-
- -

نطاق الدالة هو اما الدالة التي تم الإعلان عنها، أو البرنامج بأكمله إذا تم الاعلان عنها في المستوى العلوي.

- -
-

ملاحظة: سيعمل هذا فقط عندما يتم تعريف الدالة باستخدام الصيغة (مثل {}()function funcName). اما التعليمة البرمجية التالية فسوف لن تعمل، وهذا يعني ان الية الرفع (hoisting) بالنسبة للدوال تعمل فقط مع الدوال ذات الصيغة function declaration ولا تعمل مع الدوال ذات الصيغة function expression.

-
- -
console.log(square); // square is hoisted with an initial value undefined.
-console.log(square(5)); // TypeError: square is not a function
-var square = function(n) {
-  return n * n;
-}
-
- -

arguments الدالة لا تقتصر على الاعداد او السلاسل الحرفية فقط، يمكنك تمرير الكائنات ايضا. في القسم الخاص بالعمل مع الكائنات العمل مع الكائنات[عربي] توجد دالة باسم ()showProps توضح كيفية تمرير كائن ك argument للدالة.

- -

يمكن للدالة أن تقوم بإستدعاء ذاتها. على سبيل المثال، هذه الدالة تقوم بحساب المضروب بشكل متكرر :

- -
function factorial(n){
-  if ((n === 0) || (n === 1))
-    return 1;
-  else
-    return (n * factorial(n - 1));
-}
-
- -

في كل مرة تقوم الدالة باستدعاء ذاتها، يتم خصم 1 من قيمة البرامتر الممرر، ويتم ضرب القيمة المحصلة في القيمة العائدة من جديد، فرضا، اذا كانت القيمة الممررة 5، الاستدعاء الاول سيكون 5، الاستدعاء الثاني سيكون 4، الاستدعاء الثالث سيكون 3، وهكذا، ويتم ضرب هذه القيم العائدة مع بعضها البعض. بهذا الشكل :  5 * 4 * 3 * 2 * 1 == 120

- -

امثلة متنوعة:

- -
var a, b, c, d, e;
-a = factorial(1); // a gets the value 1    // 1 * 1
-b = factorial(2); // b gets the value 2    // 2 * 1
-c = factorial(3); // c gets the value 6    // 3 * 2 * 1
-d = factorial(4); // d gets the value 24   // 4 * 3 * 2 * 1
-e = factorial(5); // e gets the value 120  // 5 * 4 * 3 * 2 * 1
-
- -

هناك طرق أخرى لاستدعاء الدوال. غالبا ما تكون هناك حالات تحتاج الى دالة تُستدعى بشكل ديناميكي، حيث يمكن التعامل مع مجموعة من ال arguments، وحيث سياق (context) استدعاء الدالة يجب ان ينشا في وظيفة لكائن يحدد وقت التشغيل. وهذا يبين ان الدوال هي نفسها كائنات، وهذه الكائنات بدورها لديها وظائف ( شاهد {{jsxref("Function")}} object). من ضمن هذه الوظائف، الوظيفة {{jsxref("Function.apply", "()apply")}} يمكن استخدامها لتحقيق هذه الاهداف.

- -

نطاق الدالة

- -

المتغيرات المعرفة داخل الدالة لايمكن الوصول إليها من أي مكان آخر خارج الدالة، لأن هذه المتغيرات معرفة فقط داخل نطاق الدالة. على كل، يمكن للدالة الوصول إلى كل المتغيرات والدوال المعرفة في النطاق المعرفة فيه الدالة. بعبارة أخرى، الدالة المعرفة في النطاق العام تستطيع الوصول إلى كل المتغيرات المعرفة في النطاق العام. الدالة المعرفة داخل دالة أخرى يمكنها أيضا الوصول إلى كل المتغيرات المعرفة في دالتها الأم وكل المتغيرات الأخرى التي يمكن للدالة الأم الوصول لها.

- -
// المتغيرات التالية معرفة في النطاق العام
-var num1 = 20,
-    num2 = 3,
-    name = "Chamahk";
-
-// هذه الدالة معرفة في النطاق العام
-function multiply() {
-  return num1 * num2;
-}
-
-multiply(); // Returns 60
-
-// مثال على دالة داخل دالة
-function getScore () {
-  var num1 = 2,
-      num2 = 3;
-
-  function add() {
-    return name + " scored " + (num1 + num2);
-  }
-
-  return add();
-}
-
-getScore(); // Returns "Chamahk scored 5"
-
- -

النطاق ومكدس الدوال

- -

الاستدعاء الذاتي

- -

يمكن للدالة ان تستدعي داتها بثلاثة طرق:

- -
    -
  1. من خلال اسم الدالة
    2. -
  2. arguments.callee
    3. -
  3. من خلال المتغيرات التي تشير إلى الدالة
    4. -
- -

على سبيل المثال، انظر الدالة التالية:

- -
var foo = function bar() {
-   // statements go here
-};
-
- -

تضمين الاستدعاء الذاتي داخل جسم الدالة bar:

- -
    -
  1. ()bar
    2. -
  2. ()arguments.callee
    3. -
  3. ()foo
    4. -
- -

الدوال التي تقوم باستدعاء نفسها تسمى recursive function. الاستدعاء الداتي يشبه آلِية الحلقات في بعض النواحي، كلاهما ينفذان التعليمات البرمجية نفسها عدة مرات، وايضا كلاهما يتطلبان تعبيرا شرطيا (لتجنب التكرار الى ما لا نهاية، او بالاحرى، الاستدعاء الذاتي الى ما لا نهاية في حالتنا هذه). على سبيل المثال، الحلقة التالية:

- -
var x = 0;
-while (x < 10) { // "x < 10" is the loop condition
-   // do stuff
-   x++;
-}
-
- -

المثال التالي يبين دالة تقوم بالاستدعاء الذاتي، يمكنها محاكات الحلقة :

- -
function loop(x) {
-  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
-    return;
-  // do stuff
-  loop(x + 1); // the recursive call
-}
-loop(0);
-
- -

ومع ذلك، لا يمكن أن تكون بعض الخوارزميات حلقات تكرارية بسيطة. على سبيل المثال، الوصول الى كافة العقد nodes في بنية الشجرة DOM سيكون اسهل واكثر تفصيلا باستخدام الاستدعاء الذاتي:

- -
function walkTree(node) {
-  if (node == null) //
-    return;
-  // do something with node
-  for (var i = 0; i < node.childNodes.length; i++) {
-    walkTree(node.childNodes[i]);
-  }
-}
-
- -

على عكس الحلقات التكرارية البسيطة، والتي تقوم بالتكرار السطحي على DOM، تمكننا دوال الاستدعاء الداتي من تنفيذ عدة استدعاءات، كل استدعاء داتي ينتج عنه العديد من الاستدعاءات الفرعية، بمعنى ان هذا النوع من الدوال يمكنها الوصول الى عمق ال DOM. لتتيح لك امكانية التعامل مع كل جزئية فيه. كما يوضح المثال التالي:

- -
var walkTree = function recycle( node, fn ) {
-	fn( node );
-	node = node .firstChild;
-	while( node ){
-		recycle( node, fn );
-		node = node.nextSibling;
-	}
-}
-
-walkTree( document.body , function( node ){
-	if( node.nodeType == 1 ){
-		// do something with [object HTMLElements]
-	}
-	if( node.nodeType == 3 ){
-		// do something with [object Text]
-	}
-});
-
- -

كلا الدالتين اعلاه، تؤدي نفس الغرض، لا اختلاف بينهما، الفرق الوحيد هو شكل بناء الدالة، حيث بنيت الدالة الاولى على طريقة ال  function declaration  فيما بنيت الدالة الثانية على شكل، ال  function expression  وال  anonymous function، وكلاهما تنتهج اسلوب recursive function.

- -

من الناحية النظرية، من الممكن تحويل أي خوارزمية الاستدعاء الذاتي الى خوارزمية الاستدعاء العادي (مع الحلقات، على سبيل المثال). عموما، المنطق الناتج أكثر تعقيداً ويتطلب استخدام  المكدس. الاستدعاء الذاتي أيضا يستخدم المكدس، مكدس الدالة function stack.

- -

سلوك مكدس الذاكرة المؤقتة يمكن أن ينظر إليه كما في المثال التالي:

- -
function foo(i) {
-  if (i < 0)
-    return;
-  console.log('begin:' + i);
-  foo(i - 1);
-  console.log('end:' + i);
-}
-foo(3);
-
-// Output:
-
-// begin:3
-// begin:2
-// begin:1
-// begin:0
-// end:0
-// end:1
-// end:2
-// end:3
- -

الدوال المتداخلة  و الاغلاق (closures)

- -

يمكن انشاء دالة داخل دالة اخرى. الدالة الداخلية هي دالة خاصة private بالدالة الخارجة. الدالة الداخلية تشكل الاغلاق closure، والإغلاق هو فقط تعبير (عموما الاغلاق هو دالة). والذي يمكنه الوصول إلى المتغيرات المجانية free variables (المصطلح free variable يشير الى المتغيرات المستخدمة في الدالة، وهي ليست متغيرات محلية او بارامترات لهذه الدالة. بمعنى اخر هي متغيرات معرفة خارج الدالة وتستفيد منها الدالة، وهذا هو سبب تسميتها بالمتغيرات المجانية)،  كما يمكنه ايضا، الوصول الى اي شئ في البيئة التي ترتبط بها هذه المتغيرات المجانية.

- -

بما ان الدالة الداخلية هي closure. فهذا يعني انها تستطيع ان ترث البرامترات والمتغيرات من الدالة الخارجية. بمعنى اخر، الدالة الداخلية تمتلك النطاق الخاص بالدالة الخارجية.

- -

الخلاصة:

- -
    -
  • لايمكن الوصول إلى الدالة الداخلية الا من خلال التعليمات البرمجية الخاصة بالدالة الخارجية.
    • -
  • الدالة الداخلية تشكل الاغلاق closure: الدالة الداخلية يمكنها استخدام البرامترات والمتغيرات الخاصة بالدالة الخارجية، فيما لا يمكن للدالة الخارجية استخدام البرامترات والمتغيرات الخاصة بالدالة الداخلية.
    • -
- -

يظهر المثال التالي الدوال المتداخلة:

- -
function addSquares(a,b) {
-  function square(x) {
-    return x * x;
-  }
-  return square(a) + square(b);
-}
-a = addSquares(2,3); // returns 13
-b = addSquares(3,4); // returns 25
-c = addSquares(4,5); // returns 41
-
- -

بما ان الدالة الداخلية تشكل closure. فمن الضروري استدعاء الدالة الخارجية أولا، بعد ذالك يمكنك تحديد ال  arguments لكل منهما :

- -
function outside(x) {
-  function inside(y) {
-    return x + y;
-  }
-  return inside;
-}
-fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
-result = fn_inside(5); // returns 8
-
-result1 = outside(3)(5); // returns 8
-
- -

الحفاظ على المتغيرات

- -

في المثال اعلاه، لاحظ كيف تم الحفاظ على x عندما تم ارجاع الدالة inside. الاغلاق يحفاظ على البرامترات والمتغيرات في جميع النطاقات التي تشير إليه. مع كل استدعاء للدالة الخارجية، يمكنك تعيين arguments مختلفة، سيتم إنشاء إغلاق جديد مع كل استدعاء للدالة outside. يمكن تحرير الذاكرة فقط عندما يكون عائد الدلة inside غير متاحا.

- -

وهذا لا يختلف عن تخزين المراجع في كائنات أخرى، ولكن غالبا ما يكون أقل وضوحاً نظراً لعدم تعيين المراجع مباشرة ولا يمكن فحصها.

- -

الدوال الاكثر تداخلا

- -

الدوال يمكن ان تكون اكثر تداخلا، بمعنى، الدالة (A) تحتضن الدالة (B)، والدالة (B) تحتضن الدالة (C). هنا كل من الدالة B و C تشكل closures، وهكذا B يمكنها الوصول الى  A، و  C يمكنها الوصول الى B. بالاضافة الى ذالك، C يمكنها الوصول الى B و A، وبالتالي، الإغلاق يمكن أن يحتوي على عدة نطاقات. وهذا ما يسمى بسلسلة النطاق scope chaining. (سيتم شرح لماذا يطلق عليه "تسلسل" في وقت لاحق).

- -

انظر في المثال التالي:

- -
function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // logs 6 (1 + 2 + 3)
-
- -

في هذا المثال C تصل الى y الخاصة ب B وايضا الى x الخاصة ب A، أصبح هذا ممكناً لأن:

- -
    -
  1. B تشكل closure، وتمتلك A، بمعنى B يمكنها الوصول الى البارامترات والمتغيرات الخاصة ب A.
    2. -
  2. C تشكل closure، وتمتلك B.
    3. -
  3. بسبب ان B تمتلك A، فقد اصبح C يمتلك A، وعليه ف C يمكنه الوصول الى البارامترات والمتغيرات الخاصة ب B و A. بعبارات أخرى، C سلسلة نطاقات ل B و A في هذا الترتيب.
    4. -
- -

العكس ليس صحيحاً. A لا يمكنها الوصول الى C، لان A لا يمكنها الوصول لاي من البارامترات او المتغيرات الخاصة ب B. (فيما C هي متغير لها). وهكذا، C ستصبح خاصة private فقط ب B.

- -

تضارب الاسماء

- -

عند وجود اثنين من البارامترات أو المتغيرات التي تحمل نفس الاسم في نطاقات الاغلاق، فهذا يسمى تضارب في الاسماء، وفي هذه الحالة، ستكون الاسبقية للنطاقات الاكثر عمقا في استخدام هذا الاسم، اما بالنسبة للنطاقات الأكثر سطحية سوف تحظى بأولوية أدنى لاستخدام هذا الاسم، من وجهة نظر سلسلة النطاق، النطاق الاول في السلسلة هو النطاق الاكثر عمقا ( اسفل السلسلة)، والنطاق الاخير في السلسلة هو النطاق الاكثر سطحية (اعلى السلسلة). شاهد المثال التالي:

- -
function outside() {
-  var x = 10;
-  function inside(x) {
-    return x;
-  }
-  return inside;
-}
-result = outside()(20); // returns 20 instead of 10
-
- -

يحدث تعارض الاسم  في التعليمة return x، وهو مابين الباراميتر x الخاص ب inside وبين المتغير x الخاص ب outside. سلسلة النطاق سترى الامر على هذا النحو {inside, outside, global object}. وبناءا عليه x الخاص ب inside سياخد الاسبقية على x الخاص ب outside، وبالتالي الناتج هو 20 (inside x) بدلا من 10 (outside x).

- -

الاغلاقات - Closures

- -

الإغلاق هي واحدة من أقوى المميزات في جافا سكريبت. جافا سكريبت تسمح بتداخل الوظائف وتمنح الدوال الداخلية حق الوصول الكامل إلى كافة المتغيرات والدوال المعرفة داخل الدالة الخارجية (وجميع المتغيرات والدوال الأخرى التي يمكن للدالة الخارجية الوصول إليها). ومع ذالك، الدوال الخارجية لا يمكنها الوصول الى المتغيرات والدوال المعرفة داخل الدوال الداخلية. وهذا يوفر نوعا من الحماية للمتغيرات والدوال الداخلية. وأيضا، لأن الدوال الداخلية لديها حق الوصول إلى نطاق الدالة الخارجية، فالمتغيرات والدوال المعرفة داخل الدالة الخارجية ستدوم اطول من مدة تنفيذ الدالة الخارجىة، اذا تمكنت الدالة الداخلية ان تدوم أطول من الدالة الخارجية. يتم إنشاء الاغلاق عندما تكون الدالة الداخلية بطريقة أو بأخرى في متناول أي نطاق خارج الدالة الخارجية.

- -
var pet = function(name) {   // The outer function defines a paramrter called "name"
-  var getName = function() {
-    return name;             // The inner function has access to the "name" paramrter of the outer function
-  }
-  return getName;            // Return the inner function, thereby exposing it to outer scopes
-},
-myPet = pet("Vivie");
-
-myPet();                     // Returns "Vivie"
-
- -

من الناحية العملية، يمكن أن تكون المسالة أكثر تعقيداً من التعليمات البرمجية أعلاه. يمكن إرجاع كائن والذي سيحتوي على وظائف للتعامل مع المتغيرات الداخلية للدالة الخارجية:

- -
var createPet = function(name) {
-  var sex;
-
-  return {
-    setName: function(newName) {
-      name = newName;
-    },
-
-    getName: function() {
-      return name;
-    },
-
-    getSex: function() {
-      return sex;
-    },
-
-    setSex: function(newSex) {
-      if(typeof newSex === "string" && (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")) {
-        sex = newSex;
-      }
-    }
-  }
-}
-
-var pet = createPet("Vivie");
-pet.getName();                  // Vivie
-
-pet.setName("Oliver");
-pet.setSex("male");
-pet.getSex();                   // male
-pet.getName();                  // Oliver
-
- -

في التعليمات البرمجية اعلاه، المتغير name الخاص بالدالة الخارجية يمكن الوصول اليه من الدوال الداخلية. من المعلوم ايضا، انه، ليس هناك طريقة أخرى للوصول إلى المتغيرات الداخلية إلا من خلال الدوال الداخلية. المتغيرات الداخلية الخاصة بالدوال االداخلية هي بمثابة مخازن آمنة بالنسبة للبارامترات و المتغيرات الخارجية. كما انها تتيح امكانية الوصول الى البيانات الداخلية بشكل دقيق وامن. بالنسبة للدوال، ليس من الضروري تعيينها إلى متغير أو حتى تسميتها.

- -
var getCode = (function(){
-  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
-
-  return function () {
-    return secureCode;
-  };
-})();
-
-getCode();    // Returns the secureCode
-
- -

ومع ذلك، يجب الاحتراس جيدا من الوقوع في بعض الفخاخ عند استخدام عمليات الإغلاق. إذا كانت دالة مغلقة تعرف متغير بنفس الاسم، كاسم متغير في النطاق الخارجي، فلا توجد طريقة للإشارة إلى المتغير في النطاق الخارجي مرة أخرى.

- -
var createPet = function(name) {  // Outer function defines a variable called "name"
-  return {
-    setName: function(name) {    // Enclosed function also defines a variable called "name"
-      name = name;               // ??? How do we access the "name" defined by the outer function ???
-    }
-  }
-}
-
- -

الكلمة المحجوزة this (في بعض الاحيان تسمى بالمتغير العجيب)، ينبغي التعامل معها بحذر في حالات الإغلاق. احذر، ف this تشير إلى السياق حيث سيتم استدعاء الدالة وليس إلى المكان حيث تم تعريف الدالة.

- -

استخدام الكائن arguments

- -

يمكنك التعامل مع  arguments الدالة من الداخل، من خلال الكائن (arguments او الحجج). يمكنك معالجة ال  arguments الممررة الى الدالة على النحو التالي:

- -
arguments[i]
-
- -

حيث ان i هو الفهرس الرقمي لل arguments، ويبتدئ من 0، وبالتالي، ال argument الاول الممرر الى الدالة سيكون arguments[0]. لمعرفة عدد ال arguments الممررة نستخدم arguments.length.

- -

باستخدام الكائن arguments، يمكنك استدعاء دالة مع arguments أكثر من التي تم التصريح بها رسميا. وهي مفيذة جدا، خصوصا إذا كنت لا تعرف مسبقاً كم عدد ال  arguments التي ستمرر اثناء استدعاء الدالة. يمكنك استخدام arguments.length لمعرفة عدد البرامترات الممرة الى الدالة، حتى تتمكن بعد ذالك من التعامل معها من خلال الكائن arguments.

- -

على سبيل المثال، يمكننا انشاء دالة تقوم بوصل عدة سلاسل حرفية. ال argument الوحيد المحدد رسميا في الدالة، هو السلسلة الحرفية التي ستفصل بين باقي السلاسل الحرفية التي ستمرر ك arguments بعد ال argument الرسمي للدالة.  كما في المثال التالي:

- -
function myConcat(separator) {
-   var result = "", // initialize list
-       i;
-   // iterate through arguments
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separator;
-   }
-   return result;
-}
-
- -

يمكنك تمرير اي عدد من ال arguments لهذه الدالة، وسترتبط ببعضها البعض من خلال ما سيمرر الى ال argument الرسمي:

- -
// returns "red, orange, blue, "
-myConcat(", ", "red", "orange", "blue");
-
-// returns "elephant; giraffe; lion; cheetah; "
-myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
-
-// returns "sage. basil. oregano. pepper. parsley. "
-myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
-
- -
-

ملاحظة: المتغير arguments هو شبه مصفوفة، ولكنه ليس مصفوفة. وانما يتصرف كالمصفوفة، يستخدم الفهرسة الرقمية، يستخدم الخاصية length، ومع ذالك، لا يمكنه استخدام الوظائف الخاصة بالمصفوفات مثل push او join ...الخ.

-
- -

الفرق بين parameters و arguments

- -

Function parameters او بارامترات الدالة، هي الأسماء المدرجة في تعريف الدالة. فيما Function arguments هي القيم الحقيقية التي تمرر إلى الدالة عند الاستدعاء (راجع التعريف والاستدعاء اعلى الصفحة). انظر المثال التالي:

- -
function foo( param1, param2, ...) // parameters {
-    // Do things
-}
-foo(arg1, arg2, ...); // arguments
-
- -
-

ملاحظة: ال parameter هو متغير باسم معين يمرر الى الدالة. تستخدم الباراميترات لجلب ال arguments داخل الدوال.

-
- -

راجع الكائن {{jsxref("Function")}} في مرجع الجافا سكريبت لمزيد من المعلومات.

- -

بارامترات الدالة

- -

بدأً من ECMAScript 6، أصبح هناك نوعان من البارامترات: البارامترات الإفتراضية وبقية البارامترات.

- -

البارامترات الإفتراضية

- -

في الجافاسكريبت، القيمة الافتراضية لبرامترات الدوال هي undefined. ومع ذالك، في بعض الحالات، قد يكون من المفيد تعيين قيمة افتراضية مختلفة. البارامترات الافتراضية يمكنها تدارك الموقف.

- -

قبل ECMAScript 2015، كانت الاستراتيجية العامة لوضع الافتراضات هي اختبار قيمة البارامتر في جسم الدالة وتعيين قيمة له اذا كانت قيمته undefined. على سبيل المثال، في التعليمة البرمجية التالية، لم يتم تحديد قيمة للبارامتر b في الاستدعاء، وبالتالي قيمتة ستساوي undefined، عند اختبار (a * b) ستعود الدالة multiply ب NaN. لتجنب هذا،  يقوم السطر الثاني في التعليمة البرمجية اسفله بتعيين قيمة افتراضية للبارامتر b:

- -
function multiply(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiply(5); // 5
-
- -

ابتداءا من ECMAScript 2015، اصبح من الممكن عمل اعدادات افتراضية على غرار (php)، والاختبار في جسم الدالة لم يعد ضروريا. الان، ببساطة يمكنك تعيين 1 كقيمة افتراضية للبارامتر b في تعريف الدالة:

- -
function multiply(a, b = 1) {
-  return a*b;
-}
-
-multiply(5); // 5
- -

لمزيد من التفاصيل، راجع  default parameters في مرجع الجافاسكريبت.

- -

بقية البارامترات - rest parameter

- -

الصيغة rest parameter تسمح بتمثيل عدد غير محدود من ال arguments كمصفوفة. في هذا المثال، نستخدم بقية البارامترات لتجميع ال arguments ابتداءا من البرامتر الثاني لغاية النهاية. ثم نقوم بضربها باول بارامتر. هذا المثال يستخدم دالة السهم، والتي سندرسها في القسم التالي.

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(x => multiplier * x);
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

دوال السهم - Arrow functions

- -

تعبيرات دوال السهم تسمح لك باستخدام تعبيرا أكثر إيجازاً من التعبير عن الوظائف الكلاسيكية. والقيمة this يتم ربطها بشكل نحوي. فيما تكون دوال السهم مجهولة الاسم anonymous. راجع ايضا هذه المدونة  ES6 In Depth: Arrow functions.

- -

اثنين من العوامل التي أثرت في مقدمة دوال السهم: الدوال المختصرة و lexical this.

- -

الدوال المختصرة

- -

في بعض الأنماط الوظيفية، الدوال المختصرة هي موضع ترحيب. قارن التعليمات البرمجية التالية:

- -
var a = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryl­lium"
-];
-
-var a2 = a.map(function(s){ return s.length });
-
-var a3 = a.map( s => s.length );
- -

التعليمة Lexical this

- -

قبل وجود وظائف السهم، كانت كل دالة جديدة تعرف قيمة ال this الخاصة بها (كائن جديد في حالة الدالة الإنشائية، undefined في استدعاءات الدوال مع الوضع الصارم، في سياق الكائن قيد التشغيل في حالة الوظيفة، إلخ.). وهذا يمكن أن يسبب بعض المشاكل مع نمط البرمجة الكائنية:

- -
function Person() {
-  // The Person() constructor defines 'this' as itself.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // In nonstrict mode, the growUp() function defines 'this'
-    // as the global object, which is different from the 'this'
-    // defined by the Person() constructor.
-  this.age++;
-  }, 1000);
-}
-var p = new Person();
- -

في ECMAScript 3/5، تم إصلاح هذه المشكلة عن طريق تخزير القيمة this في متغير اخر.

- -
function Person() {
-  var self = this; // Some choose `that` instead of `self`.
-                   // Choose one and be consistent.
-  self.age = 0;
-
-  setInterval(function growUp() {
-    // The callback refers to the `self` variable of which
-    // the value is the expected object.
-    self.age++;
-  }, 1000);
-}
- -

بدلا من ذلك، يمكننا إنشاء دالة ملزمة bound function بحيث تكون "احسن"  قيمة this سيتم تمريرها إلى الدالة ()growUp.

- -

دوال السهم تلتقط القيمة this من السياق المغلق (enclosing context)، لذا ستعمل التعليمة البرمجية التالية كما هو متوقع.

- -
function Person(){
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| properly refers to the person object
-  }, 1000);
-}
-
-var p = new Person();
- -

دوال معرفة مسبقا

- -

جافا سكريبت لديها العديد من الوظائف المدمجة ذات المستوى الاعلى top-level :

- -
-
{{jsxref("Global_Objects/eval", "()eval")}}
-
-

الوظيفة ()eval تستخدم لاختبار شفرة الجافا سكريبت على شكل سلسلة حرفية.

-
-
{{jsxref("Global_Objects/uneval", "()uneval")}} {{non-standard_inline}}
-
-

الوظيفة ()uneval تستخدم لانشاء سلسلة حرفية عبارة عن مصدر كود الكائن {{jsxref("Object")}}.

-
-
{{jsxref("Global_Objects/isFinite", "()isFinite")}}
-
-

الدالة العامة () isFinite تقوم بتحديد ما إذا كانت القيمة التي تم تمريرها عدد محدود. إذا لزم الأمر، يتم تحويل البارامتر إلى رقم.

-
-
{{jsxref("Global_Objects/isNaN", "()isNaN")}}
-
-

تستخدم الدالة()isNaN للتاكد من ان القيمة ليست رقمية {{jsxref("Global_Objects/NaN", "NaN")}}  ملاحظة: يمكننا ايضا استخدام {{jsxref("Number.isNaN()")}}, الجديدة في ECMAScript 6 او استخدام التعليمة typeof. كلها تادي نفس الغرض.

-
-
{{jsxref("Global_Objects/parseFloat", "()parseFloat")}}
-
-

تستخدم الدالة ()parseFloat لتحويل سلسلة حرفية الى عدد كسري.

-
-
{{jsxref("Global_Objects/parseInt", "()parseInt")}}
-
-

تستخدم الدالة ()parseInt لتحويل سلسلة حرفية الى عدد صحيح (البارامتر الثاني خاص بالتعامل مع القاعدة في الأنظمة العددية الرياضية).

-
-
{{jsxref("Global_Objects/decodeURI", "()decodeURI")}}
-
-

تستخدم الدالة ()decodeURI لفك تشفير معرف الموارد الموحد (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او عن طريق نفس الروتين.

-
-
{{jsxref("Global_Objects/decodeURIComponent", "()decodeURIComponent")}}
-
-

تستخدم الوظيفة ()decodeURIComponent لفك تشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} او عن طريق نفس الروتين.

-
-
{{jsxref("Global_Objects/encodeURI", "()encodeURI")}}
-
-

تستخدم الوظيفة ()encodeURI لتشفير معرف الموارد الموحد (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لرموز تتألف من اثنين من الحروف "البديلة").

-
-
{{jsxref("Global_Objects/encodeURIComponent", "()encodeURIComponent")}}
-
-

تستخدم الوظيفة ()encodeURIComponent لتشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لاحرف تتألف من اثنين من الحروف "البديلة").

-
-
{{jsxref("Global_Objects/escape", "()escape")}} {{deprecated_inline}}
-
-

الوظيفة ()escape الغير مرغوب فيها. تحتسب سلسلة جديدة من بعض الأحرف التي يجب استبدلها من قبل hexadecimal escape sequence. استخدم {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او استخدم {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} بدلا عنها.

-
-
{{jsxref("Global_Objects/unescape", "()unescape")}} {{deprecated_inline}}
-
-

الوظيفة()unescape الغير مرغوب فيها. تحتسب سلسلة جديدة بحيث hexadecimal escape sequence. اسبدلت مع الرمز الذي يمثلها. متتالية التهريب يمكن ان تاتى من دالة مثل {{jsxref("Global_Objects/escape", "escape")}}. على العموم استخدم {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} او استخدم {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} بدلا عنها.

-
-
- -

 

-
- -

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git a/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index 65ce0c788a..0000000000 --- a/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: مدخل إلى جافاسكريبت كائنية التوجه -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -tags: - - الأفراد - - البرمجة الكائنية - - التغليف - - الجافاسكريبت - - المتوسط - - المجال - - المشيد - - ب.ك.ت - - كائن -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -
{{jsSidebar("Introductory")}}
- -

كائنية التوجه حتى النخاع، ميزات جافا سكريبت القوية، القدرات المرنة {{Glossary("OOP")}}. يبدأ هذا المقال بمقدمة إلى البرمجة الكائنية التوجه، ثم مراجعات لنموذج كائن جافا سكريبت، و أخيراً يوضح مفاهيم البرمجة الكائنية التوجه في جافا سكريبت. لا يصف هذا المقال البناء اللغوي الجديد للبرمجة الكائنية التوجه في ECMAScript 6.

- -
-

مراجعة جافا سكريبت

- -

إذا كنت لا تشعر بالثقة حول مفاهيم جافا سكريبت مثل المتغيرات والأنواع والوظائف و المجال ، يمكنك ان تقرأ عن هذه المواضيع في مدخل إلى جافا سكريبت. يمكنك أيضا الاطلاع علي دليل جافا سكريبت.

- -

البرمجة الكائنية التوجه (Object-oriented programming)

- -

إن البرمجة الكائنية (OOP) ما هي إلا نمط برمجي يَستخدم التجريد في إنشاء نماذج/نسخ لتجسيد العالم الحقيقي، وتَستخدم البرمجة الكائنية في ذلك أساليب مُتعدّدة من هذا النمط، فهي تستخدم الوحدات module، وتعدديّة الأشكال polymorphism والتغليف encapsulation، وتجدر الإشارة إلى أن معظم لغات البرمجة تدعم مفهوم OOP أمثال اللغات البرمجية: جافا، بايثون، روبي، وطبعًا جافا سكريبت.

- -

يُعالج أو لنقل يَتصور مفهوم البرمجة الكائنية OOP البرنامج كتشكيلة من الأشياء/الكائنات المتعاونة/المترابطة بدلًا من يتصوّره كتشكيلة من الدوال (functions) أو كسرد من الأوامر. ففي مفهوم OOP، كل كائن/شيء له القدرة على استقبال الرسائل، ومعالجة البيانات، وإرسال الرسائل إلى باقي الكائنات، ويُمكن اعتبار أنه لكل كائن object كينونة خاصة به ودور/وظيفة مستقلة عن الكائن الآخر.

- -

تُعزز البرمجة الكائنية القدرة على صيانة الشيفرة البرمجية والمرونة في التطوير، وأثبتت جدارتها على نطاق واسع في هندسة البرمجيات الكبيرة، ولأن البرمجة الكائنية تُشدد على استخدام الوحدات module، فإن الشيفرة/الكود المكتوب بمفهوم البرمجة الكائنية هو أبسط في التطوير وأسهل في الفهم مستقبلًا (عند التنقيح والتعديل)، وكما يعزز مفهوم البرمجة الكائنية التحليل المباشر للشيفرة، وفهم الحالات الشائكة فهمًا أفضل من باقي الأساليب البرمجية الأخرى.

- -

مصطلحات البرمجة الكائنية

- -
-
-

المجال في البرمجة الكائنية Namespace

- -

ما هو إلا عبارة عن حاوي تسمح للمطوّر بتحزيم جميع الوظائف تحت اسم محدد وفريد.

- -

الصنف أو الفئة Class في البرمجة الكائنية

- -

يعتني الصنف بكل ما يتعلّق بميزات وخصائص الكائن، والصنف ما هو إلا قالب template تعريفي بخاصيات properties وبطُرق/وظائف methods الكائن object.

- -

الكائن Object في البرمجة الكائنية

- -

الكائن ما هو إلا حالة/أمثولة instance من صنف class.

- -

الخاصية property في البرمجة الكائنية

- -

ما هي إلا مميزات وخصائص الكائن، كاللون مثلًا.

- -

الطريقة أو الوظيفة Method في البرمجة الكائنية

- -

تعتني الطريقة أو الوظيفة كما يُسميها البعض بقدرات الكائن، مثل قدرة المشي مثلًا، وهي دور أو وظيفة مرتبطة مع صنف class.

- -

المشيد Constructor في البرمجة الكائنية

- -

ما هو إلا طريقة method تُستدعى في لحظة استهلال instantiate الكائن، وعادةً ما يكون له نفس اسم الصنف الذي يحتويه.

- -

الوراثة Inheritance في البرمجة الكائنية

- -

يُمكن للصنف أن يرث مميزات من صنف آخر.

- -

التغليف Encapsulation في البرمجة الكائنية

- -

طريقة في تحزيم البيانات data والطُرق methods التي تستخدم البيانات.

- -

التجريد Abstraction في البرمجة الكائنية

- -

يجب على الاقتران الحاصل من: الوراثة والطُرق methods والخاصيات properties لكائن معقد وشائك التمثيل برمجيًا أن يعكس الواقع المراد محاكاته في البرمجة الكائنية.

- -

تعددية الأشكال Polymorphism في البرمجة الكائنية

- -

تحمل كلمة Poly بحد ذاتها المعنى "متعدد" وتحمل الكلمة morphism المعنى "أشكال، ويُشير المفهوم ككل إلى أن أكثر من صنف قد يُعرّف نفس الطريقة method أو الخاصية property.

-
-
- -

للحصول على وصف أكثر شمولية للبرمجة الكائنية التوجه، أنظر {{interwiki("wikipedia", "البرمجة كائنية التوجه")}} على ويكيبيديا.

- -

البرمجة المعتمدة على النموذج الأولي Prototype

- -

البرمجة المعتمدة على النموذج الأوّلي (Prototype-based programming) ما هي إلا نموذج من البرمجة الكائنية OOP ولكنها لا تستخدم الأصناف classes، بل تقوم أولًا بإعداد سلوك أي صنف class ما ومن ثم تُعيد استخدامه، ويُطلق البعض على هذا النموذج: البرمجة بلا أصناف classless، أو البرمجة المَبْدَئِية المنحى prototype-oriented، أو البرمجة المعتمدة على الأمثولة instance-based).

- -

يعود أصل اللغة المعتمدة على النموذج الأولي إلى لغة Self، والتي طوّرها David Ungar وRandall Smith، ولكن أسلوب البرمجة بدون أصناف class-less توسّع ونال شهرة كبيرة في العقد الأخير، واُعتمد من قبل العديد من اللغات البرمجية أشهرهم جافا سكريبت.

- -

 

- -

البرمجة الكائنية باستخدام جافا سكريبت

- -

المجال Namespace في جافا سكريبت

- -

المجال هو أشبه بمستوعب/بحاوية (container) تسمح للمطوّر في تحزيم وظائف تحت اسم فريد، أو اسم تطبيق محدد، ففي جافا سكريبت المجال هو مجرد كائن object كأي كائن آخر يحتوي على طُرق methods، وخاصيات properties، وحتى كائنات objects.

- -
-

ملاحظة هامة: من المهم جدًا الانتباه إلى أنه في جافا سكريبت، لا يوجد فرق بين الكائنات العادية والمجالات namespaces، وهذا يختلف عن اللغات الكائنية الأخرى، الأمر الذي قد يُربك المبرمجين المبتدئين في جافا سكريبت.

-
- -

إن إنشاء مجال namespace في جافا سكريبت بسيطٌ للغاية، فمن خلال إنشاء كائن عام/مشترك/شامل global، ستصبح جميع المُتغيّرات variables والطرق methods، والدوال functions خاصياتٍ لهذا الكائن، ويٌقلل استخدام المجالات namespaces أيضًا من احتمالية تضارب الأسماء في التطبيق، منذ أن كل كائن من كائنات التطبيق ما هي إلى خاصيات كائن شامل/عام معرّفة على مستوى التطبيق.

- -

سيُنشئ في الخطوة التالية كائنًا عامًا global وبالاسم MYAPP:

- -
// مجال عالمي
-var MYAPP = MYAPP || {};
- -

يُظهر المثال السابق، كيف تم التأكّد أولًا فيما إذا كان MYAPP معرفًا (سواء في نفس الملف أو في آخر)، ففي حال الإيجاب سيُستخدم الكائن العام MYAPP، وفي حال عدم تعريفه مُسبقًا سيُنشئ كائنًا خالٍ وبالاسمMYAPP والذي سيغلّف encapsulate الطرق methods والدوال functions والمتغيرات variables والكائنات objects.

- -

كما يُمكن أيضًا إنشاء مجال فرعي sub-namespaces:

- -
// مجال فرعي
-MYAPP.event = {};
- -

يوضّح المثال التالي الصيغة المستخدمة في إنشاء مجال namespace وإضافة متغيرات ودوال:

- -
// إنشاء حاوي يدعى MYAPP.commonMethod للوظائف و الخصائص الشائعة
-MYAPP.commonMethod = {
-  regExForName: "", // تعريف تعبير نظامي للتحقق من الإسم
-  regExForPhone: "", // تعريف تعبير نظامي للهاتف، لا يوجد تحقق من الصحة
-  validateName: function(name){
-    // إفعل شيئا ما بالإسم، يمكنك الوصول إلى المتغير regExForName
-    // بإستعمال "this.regExForName"
-  },
-
-  validatePhoneNo: function(phoneNo){
-    // إفعل شيئا ما برقم الهاتف
-  }
-}
-
-// تعريفات الكائن مع الزظيفة في نفس الوقت
-MYAPP.event = {
-    addListener: function(el, type, fn) {
-    // بعض الأكواد
-    },
-    removeListener: function(el, type, fn) {
-    // بعض الأكواد
-    },
-    getEvent: function(e) {
-    // بعض اﻷكواد
-    }
-
-    // يمكن إضافة وظائف و خصائص أخرى
-}
-
-// البناء اللغوي لإستعمال وظيفة addListener:
-MYAPP.event.addListener("yourel", "type", callback);
- -

 

- -

الكائنات الأساسية/القياسية المبنية داخل لغة جافا سكريبت (Standard built-in objects)

- -

تتضمن لغة جافا سكريبت العديد من الكائنات في تركيبتها، على سبيل المثال، يوجد كائنات مثل Math،Object، Array، String، ويُظهر المثال التالي كيفيّة استخدام الكائن Math للحصول على رقم عشوائي باستخدام أحد طُرق method هذا الكائن وهي الطريقة ()random.

- -
console.log(Math.random());
-
- -
-

ملاحظة: يَفترض المثال السابق وجميع الأمثلة التالية في المقال وجود دالة function بالاسم()console.log معرّفة تعريفًا عامًا (globally)، مع العلم أن هذه الدالة ليست جزء من اللغة نفسها، ولكنها دالة متوفّرة في العديد من متصفحات الإنترنت لأغراض تشخيص الشيفرة البرمجية debugging.

-
- -

يُمكن العودة إلى مرجع لغة جافا سكريبت: الكائنات الأصلية المعيارية للحصول على قائمة بالكائنات المبينة داخل لغة جافا سكريبت نفسها.

- -

كل كائن في جافا سكريبت هو حالة/أمثولة instance من الكائن Object ويَرث كافة خاصياته properties وطُرقه methods.

- -

 

- -

الكائنات الخاصة
- الصنف (الفئة)

- -

لغة جافا سكريبت لغة من النوع prototype-based ولا تحتوي على العبارة class كما هو حال باقي لغات البرمجة الكائنية، كما في روبي أو بايثون، ويُربك هذا الأمر المبرمجين المعتادين على اللغات التي تعتمد على هذه العبارة أو المفهوم، وتستخدم جافا سكريبت بدلًا من ذلك الدوال functions لمحاكات مفهوم الأصناف classes، وتعريف صنف هو بسهولة تعريف أي دالّة:

- -
var Person = function () {};
-
- -

الكائن (أمثولة الصنف class instance)

- -

يتطلب إنشاء حالة/أمثولة instance جديدة من كائن obj استخدام العبارة new obj، وتعيين النتيجة إلى متغيّر بغرض الوصول إلى فيما بعد.

- -

عُرّف في الشيفرة السابقة صنف class بالاسم Person، وفي الشيفرة التالية، سيُنشئ حالتين/أمثولتين instances من هذا الصنف، الأولى بالاسم person1 والثانية بالاسم person2.

- -
var person1 = new Person();
-var person2 = new Person();
-
- -
فضلا أنظر {{jsxref("Object.create()")}} للحصول على وظيفة الإنشاء الجديدة الإضافية التي تنشأ حالة غير مهيأة
- -

المشيد The constructor

- -

يُستدعى المُشيّد constructor في لحظة الاستهلال instantiation (اللحظة التي يُنشئ فيها الكائن)، والمُشيّد ما هو إلا طريقة method من طُرق الصنف class، وفي جافا سكريبت تعمل الدالة على تشييد الكائن، ولذلك لا داعي إلى تعريف طريقة method من أجل عميلة التشييد، وكل إجراء مصرّح في الصنف class يُنفّذ في لحظة الاستهلال instantiation.

- -

يُستخدم المُشيّد في تعيين خاصيات properties الكائن، أو في استدعاء طُرق methods معينة لتحضير الكائن للاستخدام، وأما إضافة طُرق صنف وتعريفها يحدث باستخدام صيغة syntax مختلفة سنتطرّق إليها فيما بعد خلال المقال.

- -

تُظهر الشيفرة التالية كيف يُسجّل log (يُرسل رسالة نصية إلى طرفية المتصفح console) مُشيّد الصنفPerson رسالة نصية حينما يُستهل instantiated.

- -
var Person = function () {
-  console.log('تم إنشاء حالة');
-};
-
-var person1 = new Person();
-var person2 = new Person();
-
-
- -

الخاصية The property (خاصية الكائن object attribute)

- -

الخاصيات properties ما هي إلا متغيرات محتوات في الصنف class، وكل حالة/أمثولة من الكائن تمتلك هذه الخاصيات، وتُعيّن الخاصيات في دالة مُشيّد الصنف بحيثُ تُنشئ مع كل حالة/أمثولة instance.

- -

إن الكلمة المفتاحية this، والتي تُشير إلى الكائن الحالي، تسمح للمطوّر بالعمل مع الخاصيات من ضمن الصنف، والوصول (قراءةً وكتابةً) إلى الخاصية property من خارج الصنف يكون من خلال الصيغةInstanceName.Property كما هو الأمر في لغة C++ (سي بلس بلس) وJava والعديد من اللغات الأخرى، ومن داخل الصنف تُستخدم الصيغة this.Property للحصول على قيمة الخاصية أو لتعيين قيمتها.

- -

في الشيفرة التالية، عُرّفت الخاصية firstName للصنف Person وفي لحظة الاستهلال instantiation:

- -
var Person = function (firstName) {
-  this.firstName = firstName;
-  console.log('تم إنشاء حالة من Person');
-};
-
-var person1 = new Person('سفيان');
-var person2 = new Person('محمد');
-
-// Show the firstName properties of the objects
-console.log('الشخص1 هو ' + person1.firstName); // النتيجة ==> "الشخص1 هو سفيان"
-console.log('الشخص2 هو ' + person2.firstName); // النتيجة ==> "الشخص2 هو محمد"
-
- -

الطرق The methods

- -

الطرق methods ما هي إلا دوال (وتُعرّف كما تعرّف الدوال functions)، فيما عدا ذلك فهي تُشبه الخاصيات properties، واستدعاء طريقة method مشابه إلى الوصول إلى خاصيّة ما، ولكن مع إضافة () في نهاية اسم الطريقة، وربما مع مُعطيات arguments، ولتعريف طريقة، تُعيّن دالة إلى خاصيّة مُسمّات من خاصيّة الصنف prototype، ويُمكن فيما بعد استدعاء الطريقة على الكائن بنفس الاسم الذي عُيّن للدالة.

- -

في الشيفرة التالية، عُرّفت ومن ثم اُستخدِمت الطريقة ()sayHello للصنف Person.

- -
var Person = function (firstName) {
-  this.firstName = firstName;
-};
-
-Person.prototype.sayHello = function() {
-  console.log("مرحبا، أنا " + this.firstName);
-};
-
-var person1 = new Person("سفيان");
-var person2 = new Person("محمد");
-
-// إستدعاء طريقة Person sayHello.
-person1.sayHello(); // النتيجة ==>"مرحبا، أنا سفيان"
-person2.sayHello(); // النتيجة ==> "مرحبا، أنا محمد"
-
- -

إن الطُرق methods في جافا سكريبت ما هي إلا دالة كائن عادية مرتبطة مع كائن كخاصية property، وهذا يعني أنه يُمكن استدعاء الطُرق خارج السياق، كما في المثال التالي:

- -
var Person = function (firstName) {
-  this.firstName = firstName;
-};
-
-Person.prototype.sayHello = function() {
-  console.log("مرحبا، أنا " + this.firstName);
-};
-
-var person1 = new Person("سفيان");
-var person2 = new Person("محمد");
-var helloFunction = person1.sayHello;
-
-// النتيجة ==> "مرحبا، أنا سفيان"
-person1.sayHello();
-
-// النتيجة ==> "مرحبا، أنا محمد"
-person2.sayHello();
-
-// النتيجة ==> "مرحبا، أنا undefined" (أو أخطاء
-// TypeError في الوضع الصارم)
-helloFunction();
-
-// النتيجة ==> true
-console.log(helloFunction === person1.sayHello);
-
-// النتيجة ==> true
-console.log(helloFunction === Person.prototype.sayHello);
-
-// النتيجة ==> "مرحبا، أنا سفيان"
-helloFunction.call(person1);
- -

كما يُظهر المثال السابق، جميع الإحالات المستخدمة في استدعاء الدالة sayHello تُشير إلى نفس الدالةسواءً الاستدعاء الحاصل مع person1 أو Person.prototype أو حتى في المتغيّر helloFunctionوقيمة this خلال استدعاء الدالة يعتمد على الكيفية التي تُستدعى فيها، حيث تُشير الكلمة المفتاحيةthis إلى الكائن الحالي الذي تُستدعى عليه الطريقة method، بمعنى عندما تم استدعاء الطريقة()sayHello على الكائن person1 فإن this تُشير إلى الكائن person1، وعند استدعاء sayHelloعلى الكائن person2 فإن this تُشير إلى الكائن person2، ولكن إن تم الاستدعاء بطريقة مختلفة، فإنthis ستُعيّن تعينًا مختلفًا، فاستدعاء this من المتغيّر (كما في ()helloFunction) سيُعيّن this إلى الكائن العام global (والذي سيكون window في متصفح الإنترنت)، ومنذ أن هذا الكائن (على الأغلب) لا يملك الخاصّيّة firstName، ستكون النتيجة كما هو الحال في المثال السابق “Hello, I’m undefined”، كما يمكن دائمًا تعيين this صراحةً باستخدام Function#call (أو Function#apply) وهو كما كان في نهاية المثال.

- -
ملاحظة: أنظر المزيد حول this على call و apply
- -

الوراثة

- -

تُستخدم الوراثة في جافا سكريبت في إنشاء صنف class كمثيل مخصص لصنف أو أكثر (تدعم جافا سكريبت وراثة وحيدة فقط single inheritance)، ويُطلق على الصنف المخصص عادةً ابن (child)، ويطلق على الصنف الآخر عادةً  الأب (parent)، وفي جافا سكريبت يتمّ ذلك من خلال إسناد حالة/أمثولة من الصنف الأب إلى الصنف الابن، ومن ثم تخصيصه، وفي متصفحات الإنترنت الحديثة يُمكن استخدامObject.create في تحقيق الوراثة inheritance أيضًا.

- -
-

ملاحظة: لا تتفقد جافا سكريبت مُشيّد صنف الابن prototype.constructor (راجعObject.prototype)، وعليه يجب التصريح عن ذلك يدويًا، لمزيد من التفصيل راجع السؤال التالي علىStackoverflow.

-
- -

عُرّف في الشيفرة التالية الصنف Student كصنف ابن للصنف Person، ومن ثم أُعيد تعريف الطريقة()sayHello وأُضيفت الطريقة ()sayGoodBye علاوة على ذلك.

- -
// تعريف المشيد Person
-var Person = function(firstName) {
-  this.firstName = firstName;
-};
-
-// إضافة زوج من الطرق إلى Person.prototype
-Person.prototype.walk = function(){
-  console.log("أنا أتمشى!");
-};
-
-Person.prototype.sayHello = function(){
-  console.log("مرحبا، أنا " + this.firstName);
-};
-
-// تعريف مشيد Student
-function Student(firstName, subject) {
-  // إستدعاء المشيد اﻷب, التأكد (عن طريق الإستدعاء)
-  // من أن "this" وضعت بشكل صحيح أثناء اﻹستدعاء
-  Person.call(this, firstName);
-
-  // تهيئة خصائص الطالب المحددة
-  this.subject = subject;
-}
-
-// إنشاء كائن Student.prototype الذي يرث من Person.prototype.
-// ملاحظة: خطأ شائع أن يستعمل "new Person()" ﻹنشاء
-// Student.prototype. هذا غير صحيح لعدة أسباب،
-// ليس أقل أننا ليس لدينا أي شيء ﻹعطاء Person إلى المعامل "firstName".
-// الطريقة الصحيحة ﻹستدعاء Person هي في الأعلى حيث
-// إستدعيناه من Student.
-Student.prototype = Object.create(Person.prototype); // See note below
-
-// وضع الخاصية "constructor" للإشارة إلى Student
-Student.prototype.constructor = Student;
-
-// إستبدال الطريقة "sayHello"
-Student.prototype.sayHello = function(){
-  console.log("مرحبا، أنا " + this.firstName + ". أنا أدرس "
-              + this.subject + ".");
-};
-
-// إضافة الطريقة "sayGoodBye"
-Student.prototype.sayGoodBye = function(){
-  console.log("وداعا!");
-};
-
-// إستعمال المثال:
-var student1 = new Student("سفيان", "المناجم");
-student1.sayHello();   // "مرحبا، أنا سفيان. أنا أدرس المناجم."
-student1.walk();       // "أنا أتمشى!"
-student1.sayGoodBye(); // "وداعا!"
-
-// التحقق من أن instanceof يعمل بشكل صحيح
-console.log(student1 instanceof Person);  // true
-console.log(student1 instanceof Student); // true
-
- -

فيما يخص السطر ;(Student.prototype = Object.create(Person.prototype في الإصدارات القديمة من جافا سكريبت والتي لا تدعم Object.create يمكن إما استخدام بعض الحيل في خداع المتصفحات –هذه الخدع معروفة إما بالاسم polyfill أو shim—أو استخدام دالة تحقق نفس النتيجة كما في المثال التالي:

- -
function createObject(proto) {
-    function ctor() { }
-    ctor.prototype = proto;
-    return new ctor();
-}
-
-// الإستعمال:
-Student.prototype = createObject(Person.prototype);
-
- -
ملاحظة: أنظر Object.create للمزيد من المعلومات حول ما يقوم به, و الرقاقات للمحركات القديمة.
- -

التأكّد من أن this تُشير إلى الكائن المطلوب بغض النظر عن كيف للكائن أن يُستهل يمكن أن يكون صعبًا، ومع ذلك يوجد صياغة أبسط من شأنها أن تسهّل الأمر.

- -
var Person = function(firstName) {
-  if (this instanceof Person) {
-    this.firstName = firstName;
-  } else {
-    return new Person(firstName);
-  }
-}
-
- -

التغليف Encapsulation

- -

ليس بالضرورة أن يعلم الصنف Student كيف تمّ تنفيذ/تعريف الطريقة ()walk للصنف Person لكي يستطيع استخدام تلك الطريقة، ولا يحتاج الصنف Student إلى تعريف تلك الطريقة صراحةً إلا إذا كان المطلوب التعديل عليها، ويُطلق على هذا الإجراء مفهوم التغليف encapsulation، والذي فيه يَحزم كل صنف البيانات والطُرق methods داخل وحدة/كينونة وحيدة.

- -

إخفاء المعلومات سمة شائعة في باقي اللغات البرمجية وعادةً ما توجد كخاصيات/كطُرق إما بالاسمprivate أو protected، وعلى الرغم من أنه يُمكن مماثلة/محاكاة ذات الأمر في جافا سكريبت، إلا أن هذا الأمر ليس مطلبًا من متطلبات البرمجة الكائنية.

- -

التجريد Abstraction

- -

التجرير ما هو إلا ميكانيكية تسمح للمطوّر في تجسيد جانب من المشكلة التي يُعمل عليها، إما من خلال الوراثة inheritance (التخصيص specialization) أو التركيب composition، وتُحقق جافا سكريبت التخصيص من خلال الوراثة، والتركيب من خلال السماح لحالات/أمثولات الصنف لتكون قيمًا لخاصيات attributes الكائنات الأخرى.

- -

الصنف Function في جافا سكريبت يرث من الصنف Object (وهذا يوضّح التخصيص في هذا النموذج) والخاصية Function.prototype ما هي إلا حالة/أمثولة من الصنف Object (وهذا يوضّح جزئية التركيب composition).

- -
var foo = function () {};
-
-// النتيجة ==> "foo عبارة عن وظيفة: true"
-console.log('foo عبارة عن وظيفة: ' + (foo instanceof Function));
-
-// النتيجة ==> "foo.prototype عبارة عن كائن: true"
-console.log('foo.prototype عبارة عن كائن: ' + (foo.prototype instanceof Object));
- -

تعددية الأشكال Polymorphism

- -

كما أن جميع الطُرق methods والخاصيات properties معرّفة ضمن الخاصية prototype، فيُمكن لبقية الأصناف أن تُعرِّف طُرقًا methods بنفس الاسم، وستكون الطُرق في نطاق الصنف الذي عُرفت به، إلا إذا كان الصنفان على علاقة من نوع أب وابن parent-child، بمعنى آخر أحد الصنفان يرث من الآخر
-
- هذه المقالة تُرجمة الي العربية بواسطة : محمد أبرص

- -

ملاحظات

- -

هذه ليست الطرق الوحيدة التي يمكنك من خلالها تنفيذ البرمجة الشيئية في جافا سكريبت ، والتي تعد مرنة للغاية في هذا الصدد. وبالمثل ، فإن التقنيات الموضحة هنا لا تستخدم أي لغة خارقة ، ولا تحاكي تطبيقات اللغات الأخرى لنظرية الكائن.

- -

هناك تقنيات أخرى تجعل البرمجة الكائنية التوجه أكثر تقدما لكنها خارج نطاق الهذه المقالة التمهيدية.

-
- -

المراجع

- -
    -
  1. ويكيبيديا - البرمجة الكائنية التوجه
    2. -
  2. ويكيبيديا - البرمجة القائمة على النوذج
    3. -
  3. ويكيبيديا - التغليف (البرمجة الكائنية التوجه)
    4. -
- -

أنظر أيضا

- -
    -
  • {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Function.prototype.apply()")}}
    • -
  • {{jsxref("Object.create()")}}
    • -
  • الوضع الصارم
    • -
diff --git a/files/ar/web/javascript/reference/functions/get/index.html b/files/ar/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..d3789ba7bd --- /dev/null +++ b/files/ar/web/javascript/reference/functions/get/index.html @@ -0,0 +1,165 @@ +--- +title: getter +slug: Web/JavaScript/Reference/الدوال/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +
{{jsSidebar("Functions")}}
+ +

The get صينطاكس طعمنيققbinds an object property to a function that will be called when that property is looked up.

+ +
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+ + + +

Syntax

+ +
{get prop() { ... } }
+{get [expression]() { ... } }
+ +

Parameters

+ +
+
prop
+
rty to bind to the given fun-tion.
+
expression
+
Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.
+
+ +

Description

+ +

احا الشبشب ضاع احا دا كان ةبصباع

+ +

It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.

+ +

Note the following when working with the get syntax:

+ + + +

Examples

+ +

Defining a getter on new objects in object initializers

+ +

This will create a pseudo-property latest for object obj, which will return the last array item in log.

+ +
const obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length === 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test"
+
+ +

Note that attempting to assign a value to latest will not change it.

+ +

Deleting a getter using the delete operator

+ +

If you want to remove the getter, you can just {{jsxref("Operators/delete", "delete")}} it:

+ +
delete obj.latest;
+
+ +

Defining a getter on existing objects using defineProperty

+ +

To append a getter to an existing object later at any time, use {{jsxref("Object.defineProperty()")}}.

+ +
const o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
+ +

Using a computed property name

+ +
const expr = 'foo';
+
+const obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"
+ +

Smart / self-overwriting / lazy getters

+ +

Getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed. If it is never needed, you never pay the cost.

+ +

An additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are smart (or "memoized") getters. The value is calculated the first time the getter is called, and is then cached so subsequent accesses return the cached value without recalculating it. This is useful in the following situations:

+ +
    +
  • If the calculation of a property value is expensive (takes much RAM or CPU time, spawns worker threads, retrieves remote file, etc).
    • +
  • If the value isn't needed just now. It will be used later, or in some case it's not used at all.
    • +
  • If it's used, it will be accessed several times, and there is no need to re-calculate that value will never be changed or shouldn't be re-calculated.
    • +
+ +
+

This means that you shouldn’t write a lazy getter for a property whose value you expect to change, because if the getter is lazy then it will not recalculate the value.

+ +

Note that getters are not “lazy” or “memozied” by nature; you must implement this technique if you desire this behavior.

+
+ +

In the following example, the object has a getter as its own property. On getting the property, the property is removed from the object and re-added, but implicitly as a data property this time. Finally, the value getsreturn this.notifier = document.getElementById('bookmarked-notification-anchor'); },

+ +

For Firefox code, see also the XPCOMUtils.jsm code module, which defines the defineLazyGetter() function.

+ +

get vs. defineProperty

+ +

While using the get keyword and {{jsxref("Object.defineProperty()")}} have similar results, there is a subtle difference between the two when used on {{jsxref("classes")}}.

+ +

When using get the property will be defined on the instance's prototype, while using {{jsxref("Object.defineProperty()")}} the property will be defined on the instance it is applied to.

+ +
class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+
+console.log(
+  Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(obj), 'hello'
+  )
+);
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.functions.get")}}

+ +

See also

+ +
    +
  • setter
    • +
  • {{jsxref("Operators/delete", "delete")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • +
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • +
  • Defining Getters and Setters in JavaScript Guide
    • +
diff --git a/files/ar/web/javascript/reference/functions/index.html b/files/ar/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..368d8af03d --- /dev/null +++ b/files/ar/web/javascript/reference/functions/index.html @@ -0,0 +1,645 @@ +--- +title: الدوال +slug: Web/JavaScript/Reference/الدوال +translation_of: Web/JavaScript/Reference/Functions +--- +
{{jsSidebar("Functions")}}
+ +

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.

+ +

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

+ +

For more examples and explanations, see also the JavaScript guide about functions.

+ +

Description

+ +

Every function in JavaScript is a Function object. See {{jsxref("Function")}} for information on properties and methods of Function objects.

+ +

Functions are not the same as procedures. A function always returns a value, whereas a procedure might not.

+ +

To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its this parameter. For all other functions, the default return value is undefined.

+ +

The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:

+ +
/* Declare the function 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Declare variable 'mycar';
+  * create and initialize a new Object;
+  * assign reference to it to 'mycar'
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Logs 'Honda' */
+ console.log(mycar.brand);
+
+ /* Pass object reference to the function */
+ myFunc(mycar);
+
+ /*
+  * Logs 'Toyota' as the value of the 'brand' property
+  * of the object, as changed to by the function.
+  */
+ console.log(mycar.brand);
+
+ +

The this keyword does not refer to the currently executing function, so you must refer to Function objects by name, even within the function body.

+ +

Defining functions

+ +

There are several ways to define functions:

+ +

The function declaration (function statement)

+ +

There is a special syntax for declaring functions (see function statement for details):

+ +
function name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
+ +
+
statements
+
The statements comprising the body of the function.
+
+ +

The function expression (function expression)

+ +

A function expression is similar to and has the same syntax as a function declaration (see function expression for details):

+ +
function [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
statements
+
The statements comprising the body of the function.
+
+ +

The generator function declaration (function* statement)

+ +
+

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
+ +
+
statements
+
The statements comprising the body of the function.
+
+ +

The generator function expression (function* expression)

+ +
+

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):

+ +
function* [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
statements
+
The statements comprising the body of the function.
+
+ +

The arrow function expression (=>)

+ +
+

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

An arrow function expression has a shorter syntax and lexically binds its this value (see arrow functions for details):

+ +
([param[, param]]) => {
+   statements
+}
+
+param => expression
+
+ +
+
param
+
The name of an argument. Zero arguments need to be indicated with ().  For only one argument, the parentheses are not required. (like foo => 1)
+
statements or expression
+
Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.
+
+ +

The Function constructor

+ +
+

Note: Using the Function constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

+
+ +

As all other objects, {{jsxref("Function")}} objects can be created using the new operator:

+ +
new Function (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.
+
+ +
+
functionBody
+
A string containing the JavaScript statements comprising the function body.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

The GeneratorFunction constructor

+ +
+

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +
+

Note: GeneratorFunction is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).

+
+ +
+

Note: Using the GeneratorFunction constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

+
+ +

As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the new operator:

+ +
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
+
+ +
+
functionBody
+
A string containing the JavaScript statements comprising the function definition.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

Function parameters

+ +
+

Note: Default and rest parameters are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

Default parameters

+ +

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. For more details, see default parameters.

+ +

Rest parameters

+ +

The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see rest parameters.

+ +

The arguments object

+ +

You can refer to a function's arguments within the function by using the arguments object. See arguments.

+ +
    +
  • arguments: An array-like object containing the arguments passed to the currently executing function.
    • +
  • arguments.callee {{Deprecated_inline}}: The currently executing function.
    • +
  • arguments.caller {{Obsolete_inline}} : The function that invoked the currently executing function.
    • +
  • arguments.length: The number of arguments passed to the function.
    • +
+ +

Defining method functions

+ +

Getter and setter functions

+ +

You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

+ +
+
get
+
+

Binds an object property to a function that will be called when that property is looked up.

+
+
set
+
Binds an object property to a function to be called when there is an attempt to set that property.
+
+ +

Method definition syntax

+ +
+

Note: Method definitions are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See method definitions for more information.

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Function constructor vs. function declaration vs. function expression

+ +

Compare the following:

+ +

A function defined with the Function constructor assigned to the variable multiply:

+ +
function multiply(x, y) {
+   return x * y;
+}
+
+ +

A function expression of an anonymous function assigned to the variable multiply:

+ +
var multiply = function(x, y) {
+   return x * y;
+};
+
+ +

A function expression of a function named func_name assigned to the variable multiply:

+ +
var multiply = function func_name(x, y) {
+   return x * y;
+};
+
+ +

Differences

+ +

All do approximately the same thing, with a few subtle differences:

+ +

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or undefined if the function name was previously declared via a var statement). For example:

+ +
var y = function x() {};
+alert(x); // throws an error
+
+ +

The function name also appears when the function is serialized via Function's toString method.

+ +

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.

+ +

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:

+ +

A function defined by 'new Function' does not have a function name. However, in the SpiderMonkey JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, alert(new Function()) outputs:

+ +
function anonymous() {
+}
+
+ +

Since the function actually does not have a name, anonymous is not a variable that can be accessed within the function. For example, the following would result in an error:

+ +
var foo = new Function("alert(anonymous);");
+foo();
+
+ +

Unlike functions defined by function expressions or by the Function constructor, a function defined by a function declaration can be used before the function declaration itself. For example:

+ +
foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+
+ +

A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a Function constructor does not inherit any scope other than the global scope (which all functions inherit).

+ +

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should generally be avoided whenever possible.

+ +

It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a Function constructor 's string aren't parsed repeatedly. For example:

+ +
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
+ +

A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:

+ +
    +
  • becomes part of an expression
    • +
  • is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:
    • +
+ +
var x = 0;               // source element
+if (x == 0) {            // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y == 10) {     // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+
+ +

Examples

+ +
// function declaration
+function foo() {}
+
+// function expression
+(function bar() {})
+
+// function expression
+x = function hello() {}
+
+
+if (x) {
+   // function expression
+   function world() {}
+}
+
+
+// function declaration
+function a() {
+   // function declaration
+   function b() {}
+   if (0) {
+      // function expression
+      function c() {}
+   }
+}
+
+ +

Block-level functions

+ +

In strict mode, starting with ES2015 (ES6), functions inside blocks are now scoped to that block. Prior to ES6, block-level functions were forbidden in strict mode.

+ +
'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 in non-strict mode
+
+ +

Block-level functions in non-strict code

+ +

In a word: Don't.

+ +

In non-strict code, function declarations inside blocks behave strangely. For example:

+ +
if (shouldDefineZero) {
+   function zero() {     // DANGER: compatibility risk
+      console.log("This is zero.");
+   }
+}
+
+ +

ES2015 says that if shouldDefineZero is false, then zero should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define zero whether the block executed or not.

+ +

In strict mode, all browsers that support ES2015 handle this the same way: zero is defined only if shouldDefineZero is true, and only in the scope of the if-block.

+ +

A safer way to define functions conditionally is to assign a function expression to a variable:

+ +
var zero;
+if (0) {
+   zero = function() {
+      console.log("This is zero.");
+   };
+}
+
+ +

Examples

+ +

Returning a formatted number

+ +

The following function returns a string containing the formatted representation of a number padded with leading zeros.

+ +
// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i <= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+
+ +

The following statements call the padZeros function.

+ +
var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+
+ +

Determining whether a function exists

+ +

You can determine whether a function exists by using the typeof operator. In the following example, a test is peformed to determine if the window object has a property called noFunc that is a function. If so, it is used; otherwise some other action is taken.

+ +
 if ('function' == typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+
+ +

Note that in the if test, a reference to noFunc is used—there are no brackets "()" after the function name so the actual function is not called.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}New: Arrow functions, Generator functions, default parameters, rest parameters.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatGeckoDesktop("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatGeckoDesktop("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions{{CompatUnknown}}39{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ +
    +
  • {{jsxref("Statements/function", "function statement")}}
    • +
  • {{jsxref("Operators/function", "function expression")}}
    • +
  • {{jsxref("Statements/function*", "function* statement")}}
    • +
  • {{jsxref("Operators/function*", "function* expression")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • +
  • {{jsxref("Functions/Default_parameters", "Default parameters")}}
    • +
  • {{jsxref("Functions/rest_parameters", "Rest parameters")}}
    • +
  • {{jsxref("Functions/arguments", "Arguments object")}}
    • +
  • {{jsxref("Functions/get", "getter")}}
    • +
  • {{jsxref("Functions/set", "setter")}}
    • +
  • {{jsxref("Functions/Method_definitions", "Method definitions")}}
    • +
  • Functions and function scope
    • +
diff --git a/files/ar/web/javascript/reference/global_objects/number/index.html b/files/ar/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..cb667fd3d8 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,12 @@ +--- +title: الارقام في الجافا سكربت +slug: Web/JavaScript/Reference/Global_Objects/الارقام +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +

 وهو كائن غلاف يستخدم لتمثيل ومعالجة الأرقام مثل  37  او 9.25 Numberمنشئ يحتوي على الثوابت وطرق للعمل مع الأرقام. يمكن تحويل قيم الأنواع الأخرى إلى أرقام باستخدام Number()الوظيفة.

+ +

جافا سكريبت رقم نوع عبارة عن قيمة مزدوجة الدقة بتنسيق IEEE 754 تنسيق ثنائي 64 بت ذات ، كما هو الحال doubleفي Java أو C #. هذا يعني أنه يمكن أن يمثل قيمًا كسرية ، ولكن هناك بعض الحدود لما يمكن تخزينه. يحتفظ فقط بحوالي   17 رقم  منزلاً عشريًا من الدقة ؛ الحساب يخضع للتقريب . أكبر قيمة يمكن أن يحملها رقم هي حوالي 1.8 × 10 308 . يتم استبدال الأعداد التي تتجاوز ذلك بثابت الرقم الخاص Infinity.

+ +

الرقم الحرفي مثل 37كود JavaScript هو قيمة فاصلة عائمة ، وليس عددًا صحيحًا. لا يوجد نوع عدد صحيح منفصل في الاستخدام اليومي الشائع. (يحتوي JavaScript الآن على BigIntنوع ، لكنه لم يتم تصميمه ليحل محل Number للاستخدامات اليومية. 37لا يزال رقمًا ، وليس BigInt.)

+ +

يمكن أيضًا التعبير عن الرقم بأشكال حرفية مثل 0b101، 0o13، 0x0A. تعرف على المزيد حول العددي قواعد المعجم هنا .

diff --git "a/files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" "b/files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" deleted file mode 100644 index cb667fd3d8..0000000000 --- "a/files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: الارقام في الجافا سكربت -slug: Web/JavaScript/Reference/Global_Objects/الارقام -translation_of: Web/JavaScript/Reference/Global_Objects/Number ---- -

 وهو كائن غلاف يستخدم لتمثيل ومعالجة الأرقام مثل  37  او 9.25 Numberمنشئ يحتوي على الثوابت وطرق للعمل مع الأرقام. يمكن تحويل قيم الأنواع الأخرى إلى أرقام باستخدام Number()الوظيفة.

- -

جافا سكريبت رقم نوع عبارة عن قيمة مزدوجة الدقة بتنسيق IEEE 754 تنسيق ثنائي 64 بت ذات ، كما هو الحال doubleفي Java أو C #. هذا يعني أنه يمكن أن يمثل قيمًا كسرية ، ولكن هناك بعض الحدود لما يمكن تخزينه. يحتفظ فقط بحوالي   17 رقم  منزلاً عشريًا من الدقة ؛ الحساب يخضع للتقريب . أكبر قيمة يمكن أن يحملها رقم هي حوالي 1.8 × 10 308 . يتم استبدال الأعداد التي تتجاوز ذلك بثابت الرقم الخاص Infinity.

- -

الرقم الحرفي مثل 37كود JavaScript هو قيمة فاصلة عائمة ، وليس عددًا صحيحًا. لا يوجد نوع عدد صحيح منفصل في الاستخدام اليومي الشائع. (يحتوي JavaScript الآن على BigIntنوع ، لكنه لم يتم تصميمه ليحل محل Number للاستخدامات اليومية. 37لا يزال رقمًا ، وليس BigInt.)

- -

يمكن أيضًا التعبير عن الرقم بأشكال حرفية مثل 0b101، 0o13، 0x0A. تعرف على المزيد حول العددي قواعد المعجم هنا .

diff --git "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" "b/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" deleted file mode 100644 index d3789ba7bd..0000000000 --- "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: getter -slug: Web/JavaScript/Reference/الدوال/get -translation_of: Web/JavaScript/Reference/Functions/get ---- -
{{jsSidebar("Functions")}}
- -

The get صينطاكس طعمنيققbinds an object property to a function that will be called when that property is looked up.

- -
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
- - - -

Syntax

- -
{get prop() { ... } }
-{get [expression]() { ... } }
- -

Parameters

- -
-
prop
-
rty to bind to the given fun-tion.
-
expression
-
Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.
-
- -

Description

- -

احا الشبشب ضاع احا دا كان ةبصباع

- -

It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.

- -

Note the following when working with the get syntax:

- - - -

Examples

- -

Defining a getter on new objects in object initializers

- -

This will create a pseudo-property latest for object obj, which will return the last array item in log.

- -
const obj = {
-  log: ['example','test'],
-  get latest() {
-    if (this.log.length === 0) return undefined;
-    return this.log[this.log.length - 1];
-  }
-}
-console.log(obj.latest); // "test"
-
- -

Note that attempting to assign a value to latest will not change it.

- -

Deleting a getter using the delete operator

- -

If you want to remove the getter, you can just {{jsxref("Operators/delete", "delete")}} it:

- -
delete obj.latest;
-
- -

Defining a getter on existing objects using defineProperty

- -

To append a getter to an existing object later at any time, use {{jsxref("Object.defineProperty()")}}.

- -
const o = {a: 0};
-
-Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
-
-console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
- -

Using a computed property name

- -
const expr = 'foo';
-
-const obj = {
-  get [expr]() { return 'bar'; }
-};
-
-console.log(obj.foo); // "bar"
- -

Smart / self-overwriting / lazy getters

- -

Getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed. If it is never needed, you never pay the cost.

- -

An additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are smart (or "memoized") getters. The value is calculated the first time the getter is called, and is then cached so subsequent accesses return the cached value without recalculating it. This is useful in the following situations:

- -
    -
  • If the calculation of a property value is expensive (takes much RAM or CPU time, spawns worker threads, retrieves remote file, etc).
    • -
  • If the value isn't needed just now. It will be used later, or in some case it's not used at all.
    • -
  • If it's used, it will be accessed several times, and there is no need to re-calculate that value will never be changed or shouldn't be re-calculated.
    • -
- -
-

This means that you shouldn’t write a lazy getter for a property whose value you expect to change, because if the getter is lazy then it will not recalculate the value.

- -

Note that getters are not “lazy” or “memozied” by nature; you must implement this technique if you desire this behavior.

-
- -

In the following example, the object has a getter as its own property. On getting the property, the property is removed from the object and re-added, but implicitly as a data property this time. Finally, the value getsreturn this.notifier = document.getElementById('bookmarked-notification-anchor'); },

- -

For Firefox code, see also the XPCOMUtils.jsm code module, which defines the defineLazyGetter() function.

- -

get vs. defineProperty

- -

While using the get keyword and {{jsxref("Object.defineProperty()")}} have similar results, there is a subtle difference between the two when used on {{jsxref("classes")}}.

- -

When using get the property will be defined on the instance's prototype, while using {{jsxref("Object.defineProperty()")}} the property will be defined on the instance it is applied to.

- -
class Example {
-  get hello() {
-    return 'world';
-  }
-}
-
-const obj = new Example();
-console.log(obj.hello);
-// "world"
-
-console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
-// undefined
-
-console.log(
-  Object.getOwnPropertyDescriptor(
-    Object.getPrototypeOf(obj), 'hello'
-  )
-);
-// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }
- -

Specifications

- - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.functions.get")}}

- -

See also

- -
    -
  • setter
    • -
  • {{jsxref("Operators/delete", "delete")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • -
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • -
  • Defining Getters and Setters in JavaScript Guide
    • -
diff --git "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" "b/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" deleted file mode 100644 index 368d8af03d..0000000000 --- "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" +++ /dev/null @@ -1,645 +0,0 @@ ---- -title: الدوال -slug: Web/JavaScript/Reference/الدوال -translation_of: Web/JavaScript/Reference/Functions ---- -
{{jsSidebar("Functions")}}
- -

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.

- -

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

- -

For more examples and explanations, see also the JavaScript guide about functions.

- -

Description

- -

Every function in JavaScript is a Function object. See {{jsxref("Function")}} for information on properties and methods of Function objects.

- -

Functions are not the same as procedures. A function always returns a value, whereas a procedure might not.

- -

To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its this parameter. For all other functions, the default return value is undefined.

- -

The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:

- -
/* Declare the function 'myFunc' */
-function myFunc(theObject) {
-   theObject.brand = "Toyota";
- }
-
- /*
-  * Declare variable 'mycar';
-  * create and initialize a new Object;
-  * assign reference to it to 'mycar'
-  */
- var mycar = {
-   brand: "Honda",
-   model: "Accord",
-   year: 1998
- };
-
- /* Logs 'Honda' */
- console.log(mycar.brand);
-
- /* Pass object reference to the function */
- myFunc(mycar);
-
- /*
-  * Logs 'Toyota' as the value of the 'brand' property
-  * of the object, as changed to by the function.
-  */
- console.log(mycar.brand);
-
- -

The this keyword does not refer to the currently executing function, so you must refer to Function objects by name, even within the function body.

- -

Defining functions

- -

There are several ways to define functions:

- -

The function declaration (function statement)

- -

There is a special syntax for declaring functions (see function statement for details):

- -
function name([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
- -
-
statements
-
The statements comprising the body of the function.
-
- -

The function expression (function expression)

- -

A function expression is similar to and has the same syntax as a function declaration (see function expression for details):

- -
function [name]([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
statements
-
The statements comprising the body of the function.
-
- -

The generator function declaration (function* statement)

- -
-

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):

- -
function* name([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
- -
-
statements
-
The statements comprising the body of the function.
-
- -

The generator function expression (function* expression)

- -
-

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):

- -
function* [name]([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
statements
-
The statements comprising the body of the function.
-
- -

The arrow function expression (=>)

- -
-

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

An arrow function expression has a shorter syntax and lexically binds its this value (see arrow functions for details):

- -
([param[, param]]) => {
-   statements
-}
-
-param => expression
-
- -
-
param
-
The name of an argument. Zero arguments need to be indicated with ().  For only one argument, the parentheses are not required. (like foo => 1)
-
statements or expression
-
Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.
-
- -

The Function constructor

- -
-

Note: Using the Function constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

-
- -

As all other objects, {{jsxref("Function")}} objects can be created using the new operator:

- -
new Function (arg1, arg2, ... argN, functionBody)
-
- -
-
arg1, arg2, ... argN
-
Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.
-
- -
-
functionBody
-
A string containing the JavaScript statements comprising the function body.
-
- -

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

- -

The GeneratorFunction constructor

- -
-

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -
-

Note: GeneratorFunction is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).

-
- -
-

Note: Using the GeneratorFunction constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

-
- -

As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the new operator:

- -
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
-
- -
-
arg1, arg2, ... argN
-
Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
-
- -
-
functionBody
-
A string containing the JavaScript statements comprising the function definition.
-
- -

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

- -

Function parameters

- -
-

Note: Default and rest parameters are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

Default parameters

- -

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. For more details, see default parameters.

- -

Rest parameters

- -

The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see rest parameters.

- -

The arguments object

- -

You can refer to a function's arguments within the function by using the arguments object. See arguments.

- -
    -
  • arguments: An array-like object containing the arguments passed to the currently executing function.
    • -
  • arguments.callee {{Deprecated_inline}}: The currently executing function.
    • -
  • arguments.caller {{Obsolete_inline}} : The function that invoked the currently executing function.
    • -
  • arguments.length: The number of arguments passed to the function.
    • -
- -

Defining method functions

- -

Getter and setter functions

- -

You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

- -
-
get
-
-

Binds an object property to a function that will be called when that property is looked up.

-
-
set
-
Binds an object property to a function to be called when there is an attempt to set that property.
-
- -

Method definition syntax

- -
-

Note: Method definitions are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See method definitions for more information.

- -
var obj = {
-  foo() {},
-  bar() {}
-};
- -

Function constructor vs. function declaration vs. function expression

- -

Compare the following:

- -

A function defined with the Function constructor assigned to the variable multiply:

- -
function multiply(x, y) {
-   return x * y;
-}
-
- -

A function expression of an anonymous function assigned to the variable multiply:

- -
var multiply = function(x, y) {
-   return x * y;
-};
-
- -

A function expression of a function named func_name assigned to the variable multiply:

- -
var multiply = function func_name(x, y) {
-   return x * y;
-};
-
- -

Differences

- -

All do approximately the same thing, with a few subtle differences:

- -

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or undefined if the function name was previously declared via a var statement). For example:

- -
var y = function x() {};
-alert(x); // throws an error
-
- -

The function name also appears when the function is serialized via Function's toString method.

- -

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.

- -

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:

- -

A function defined by 'new Function' does not have a function name. However, in the SpiderMonkey JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, alert(new Function()) outputs:

- -
function anonymous() {
-}
-
- -

Since the function actually does not have a name, anonymous is not a variable that can be accessed within the function. For example, the following would result in an error:

- -
var foo = new Function("alert(anonymous);");
-foo();
-
- -

Unlike functions defined by function expressions or by the Function constructor, a function defined by a function declaration can be used before the function declaration itself. For example:

- -
foo(); // alerts FOO!
-function foo() {
-   alert('FOO!');
-}
-
- -

A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a Function constructor does not inherit any scope other than the global scope (which all functions inherit).

- -

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should generally be avoided whenever possible.

- -

It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a Function constructor 's string aren't parsed repeatedly. For example:

- -
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
-foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
- -

A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:

- -
    -
  • becomes part of an expression
    • -
  • is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:
    • -
- -
var x = 0;               // source element
-if (x == 0) {            // source element
-   x = 10;               // not a source element
-   function boo() {}     // not a source element
-}
-function foo() {         // source element
-   var y = 20;           // source element
-   function bar() {}     // source element
-   while (y == 10) {     // source element
-      function blah() {} // not a source element
-      y++;               // not a source element
-   }
-}
-
- -

Examples

- -
// function declaration
-function foo() {}
-
-// function expression
-(function bar() {})
-
-// function expression
-x = function hello() {}
-
-
-if (x) {
-   // function expression
-   function world() {}
-}
-
-
-// function declaration
-function a() {
-   // function declaration
-   function b() {}
-   if (0) {
-      // function expression
-      function c() {}
-   }
-}
-
- -

Block-level functions

- -

In strict mode, starting with ES2015 (ES6), functions inside blocks are now scoped to that block. Prior to ES6, block-level functions were forbidden in strict mode.

- -
'use strict';
-
-function f() {
-  return 1;
-}
-
-{
-  function f() {
-    return 2;
-  }
-}
-
-f() === 1; // true
-
-// f() === 2 in non-strict mode
-
- -

Block-level functions in non-strict code

- -

In a word: Don't.

- -

In non-strict code, function declarations inside blocks behave strangely. For example:

- -
if (shouldDefineZero) {
-   function zero() {     // DANGER: compatibility risk
-      console.log("This is zero.");
-   }
-}
-
- -

ES2015 says that if shouldDefineZero is false, then zero should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define zero whether the block executed or not.

- -

In strict mode, all browsers that support ES2015 handle this the same way: zero is defined only if shouldDefineZero is true, and only in the scope of the if-block.

- -

A safer way to define functions conditionally is to assign a function expression to a variable:

- -
var zero;
-if (0) {
-   zero = function() {
-      console.log("This is zero.");
-   };
-}
-
- -

Examples

- -

Returning a formatted number

- -

The following function returns a string containing the formatted representation of a number padded with leading zeros.

- -
// This function returns a string padded with leading zeros
-function padZeros(num, totalLen) {
-   var numStr = num.toString();             // Initialize return value as string
-   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
-   for (var i = 1; i <= numZeros; i++) {
-      numStr = "0" + numStr;
-   }
-   return numStr;
-}
-
- -

The following statements call the padZeros function.

- -
var result;
-result = padZeros(42,4); // returns "0042"
-result = padZeros(42,2); // returns "42"
-result = padZeros(5,4);  // returns "0005"
-
- -

Determining whether a function exists

- -

You can determine whether a function exists by using the typeof operator. In the following example, a test is peformed to determine if the window object has a property called noFunc that is a function. If so, it is used; otherwise some other action is taken.

- -
 if ('function' == typeof window.noFunc) {
-   // use noFunc()
- } else {
-   // do something else
- }
-
- -

Note that in the if test, a reference to noFunc is used—there are no brackets "()" after the function name so the actual function is not called.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}New: Arrow functions, Generator functions, default parameters, rest parameters.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatGeckoDesktop("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatGeckoDesktop("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions{{CompatUnknown}}39{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

See also

- -
    -
  • {{jsxref("Statements/function", "function statement")}}
    • -
  • {{jsxref("Operators/function", "function expression")}}
    • -
  • {{jsxref("Statements/function*", "function* statement")}}
    • -
  • {{jsxref("Operators/function*", "function* expression")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • -
  • {{jsxref("Functions/Default_parameters", "Default parameters")}}
    • -
  • {{jsxref("Functions/rest_parameters", "Rest parameters")}}
    • -
  • {{jsxref("Functions/arguments", "Arguments object")}}
    • -
  • {{jsxref("Functions/get", "getter")}}
    • -
  • {{jsxref("Functions/set", "setter")}}
    • -
  • {{jsxref("Functions/Method_definitions", "Method definitions")}}
    • -
  • Functions and function scope
    • -
diff --git a/files/ar/web/reference/index.html b/files/ar/web/reference/index.html new file mode 100644 index 0000000000..fc7fd86cda --- /dev/null +++ b/files/ar/web/reference/index.html @@ -0,0 +1,42 @@ +--- +title: مرجع تكنولوجيا الويب. +slug: Web/مرجع. +tags: + - مراجع +translation_of: Web/Reference +--- +

تم بناء الويب المفتوح باستخدام عدد من التقنيات.أدناه سوف تجد روابط لمراجعنا  التي توضح كل تقنية.

+ +
+
+

تقنيات الويب الأساسية

+ +

{{ Page ("Web", "Web technologies") }}

+
+ +

تعتمد شبكة الويب المفتوحة على عدد من التقنيات التي يمكن استخدامها معًا لإنشاء كل شيء بدءًا من المواقع البسيطة وحتى تطبيقات الويب القوية. ستجد أدناه روابط لمجموعة مختارة من الوثائق الرئيسية لكل منها.

+ +
+

إذا كنت جديدًا في مجال تطوير الويب ، ففكر في البدء بمنطقة التعلم المليئة بالبرامج التعليمية خطوة بخطوة من شأنها أن ترشدك من مبتدئ webdev إلى شبه محترف على الأقل!

+ +
+
HTML - هيكلة الويب تُستخدم
+
HyperText Markup Language لتعريف ووصف محتوى صفحة الويب ( ) لصفحة الويب بتنسيق جيد التنظيم. يوفر HTML وسيلة لإنشاء مستندات منظمة مكونة من كتل تسمى عناصر HTML المحددة بواسطة العلامات ، مكتوبة باستخدام أقواس معقوفة. يقدم البعض المحتوى في الصفحة مباشرةً ، بينما يوفر البعض الآخر معلومات حول نص المستند وقد يتضمن علامات أخرى كعناصر فرعية. من الواضح أن المتصفحات لا تعرضها ، حيث يتم استخدامها لتفسير محتوى الصفحة.
+
+ مقدمة إلى HTML | تعلم HTML | HTML5 | دليل المطور | مرجع العنصر | المرجع
+
CSS - تصميم الويب تستخدم
+
أوراق الأنماط المتتالية لوصف مظهر محتوى الويب.
+
+ مقدمة إلى CSS | بدء استخدام CSS | تعلم CSS | أسئلة CSS الشائعة | المرجع
+
JavaScript - برمجة نصية ديناميكية من جانب العميل
+
تُستخدم لغة البرمجة JavaScript لإضافة التفاعل والميزات الديناميكية الأخرى إلى مواقع الويب.
+
تعلم JavaScript | دليل المطور | المرجع
+
+ +
+

{{draft()}}

+ +

هذه الصفحة معنية لأن تكون  الصفحة المرجعية لمنصة الويب.هذه الصفحة سوف توفر روابطاً للصفحة الأساسية التي تحتوي كل منها واحدة من تطبيقات الواجهة البرمجية التي يمكن إستعمالها على منصة الويب (و لكن هذه الصفحات لن تحتوي صفحات فرعية).

+
+
+
diff --git a/files/ar/web/security/index.html b/files/ar/web/security/index.html new file mode 100644 index 0000000000..c9c30e8ca4 --- /dev/null +++ b/files/ar/web/security/index.html @@ -0,0 +1,16 @@ +--- +title: حماية الويب +slug: Web/حماية +tags: + - Landing + - Security + - Web +translation_of: Web/Security +--- +
+

من الضروري ضمان أن موقع الويب أو تطبيق الويب المفتوح آمن. حتى الأخطاء البسيطة في التعليمات البرمجية الخاصة بك يمكن أن تؤدي إلى تسرب المعلومات الخاصة ، والأشخاص السيئين يحاولون إيجاد طرق لسرقة البيانات. توفر المقالات الموجهة لأمان الويب الواردة هنا معلومات قد تساعدك في تأمين موقعك ورمزه من الهجمات وسرقة البيانات.

+
+ +

{{LandingPageListSubpages}}{{QuickLinksWithSubpages}}

+ +
diff --git "a/files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" "b/files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" deleted file mode 100644 index c9c30e8ca4..0000000000 --- "a/files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: حماية الويب -slug: Web/حماية -tags: - - Landing - - Security - - Web -translation_of: Web/Security ---- -
-

من الضروري ضمان أن موقع الويب أو تطبيق الويب المفتوح آمن. حتى الأخطاء البسيطة في التعليمات البرمجية الخاصة بك يمكن أن تؤدي إلى تسرب المعلومات الخاصة ، والأشخاص السيئين يحاولون إيجاد طرق لسرقة البيانات. توفر المقالات الموجهة لأمان الويب الواردة هنا معلومات قد تساعدك في تأمين موقعك ورمزه من الهجمات وسرقة البيانات.

-
- -

{{LandingPageListSubpages}}{{QuickLinksWithSubpages}}

- -
diff --git "a/files/ar/web/\331\205\330\261\330\254\330\271/index.html" "b/files/ar/web/\331\205\330\261\330\254\330\271/index.html" deleted file mode 100644 index fc7fd86cda..0000000000 --- "a/files/ar/web/\331\205\330\261\330\254\330\271/index.html" +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: مرجع تكنولوجيا الويب. -slug: Web/مرجع. -tags: - - مراجع -translation_of: Web/Reference ---- -

تم بناء الويب المفتوح باستخدام عدد من التقنيات.أدناه سوف تجد روابط لمراجعنا  التي توضح كل تقنية.

- -
-
-

تقنيات الويب الأساسية

- -

{{ Page ("Web", "Web technologies") }}

-
- -

تعتمد شبكة الويب المفتوحة على عدد من التقنيات التي يمكن استخدامها معًا لإنشاء كل شيء بدءًا من المواقع البسيطة وحتى تطبيقات الويب القوية. ستجد أدناه روابط لمجموعة مختارة من الوثائق الرئيسية لكل منها.

- -
-

إذا كنت جديدًا في مجال تطوير الويب ، ففكر في البدء بمنطقة التعلم المليئة بالبرامج التعليمية خطوة بخطوة من شأنها أن ترشدك من مبتدئ webdev إلى شبه محترف على الأقل!

- -
-
HTML - هيكلة الويب تُستخدم
-
HyperText Markup Language لتعريف ووصف محتوى صفحة الويب ( ) لصفحة الويب بتنسيق جيد التنظيم. يوفر HTML وسيلة لإنشاء مستندات منظمة مكونة من كتل تسمى عناصر HTML المحددة بواسطة العلامات ، مكتوبة باستخدام أقواس معقوفة. يقدم البعض المحتوى في الصفحة مباشرةً ، بينما يوفر البعض الآخر معلومات حول نص المستند وقد يتضمن علامات أخرى كعناصر فرعية. من الواضح أن المتصفحات لا تعرضها ، حيث يتم استخدامها لتفسير محتوى الصفحة.
-
- مقدمة إلى HTML | تعلم HTML | HTML5 | دليل المطور | مرجع العنصر | المرجع
-
CSS - تصميم الويب تستخدم
-
أوراق الأنماط المتتالية لوصف مظهر محتوى الويب.
-
- مقدمة إلى CSS | بدء استخدام CSS | تعلم CSS | أسئلة CSS الشائعة | المرجع
-
JavaScript - برمجة نصية ديناميكية من جانب العميل
-
تُستخدم لغة البرمجة JavaScript لإضافة التفاعل والميزات الديناميكية الأخرى إلى مواقع الويب.
-
تعلم JavaScript | دليل المطور | المرجع
-
- -
-

{{draft()}}

- -

هذه الصفحة معنية لأن تكون  الصفحة المرجعية لمنصة الويب.هذه الصفحة سوف توفر روابطاً للصفحة الأساسية التي تحتوي كل منها واحدة من تطبيقات الواجهة البرمجية التي يمكن إستعمالها على منصة الويب (و لكن هذه الصفحات لن تحتوي صفحات فرعية).

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