From 82a56fd6086071926378ba51d62f6beb417878b1 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:18 +0100 Subject: unslug he: move --- files/he/learn/forms/index.html | 72 ++ files/he/learn/html/howto/index.html | 141 ++++ .../he/learn/html/introduction_to_html/index.html | 55 ++ files/he/learn/html/tables/index.html | 34 + .../index.html" | 34 - .../index.html" | 72 -- .../index.html" | 55 -- .../index.html" | 141 ---- .../building_blocks/conditionals/index.html | 789 +++++++++++++++++++++ .../index.html" | 789 --------------------- 10 files changed, 1091 insertions(+), 1091 deletions(-) create mode 100644 files/he/learn/forms/index.html create mode 100644 files/he/learn/html/howto/index.html create mode 100644 files/he/learn/html/introduction_to_html/index.html create mode 100644 files/he/learn/html/tables/index.html delete mode 100644 "files/he/learn/html/\327\230\327\221\327\234\327\220\327\225\327\252/index.html" delete mode 100644 "files/he/learn/html/\327\230\327\244\327\241\327\231\327\235/index.html" delete mode 100644 "files/he/learn/html/\327\236\327\221\327\225\327\220_\327\234\327\251\327\244\327\252_html/index.html" delete mode 100644 "files/he/learn/html/\327\244\327\252\327\250\327\225\327\237_\327\221\327\242\327\231\327\225\327\252/index.html" create mode 100644 files/he/learn/javascript/building_blocks/conditionals/index.html delete mode 100644 "files/he/learn/javascript/building_blocks/\327\252\327\240\327\220\327\231\327\235/index.html" (limited to 'files/he/learn') diff --git a/files/he/learn/forms/index.html b/files/he/learn/forms/index.html new file mode 100644 index 0000000000..87fe398bc4 --- /dev/null +++ b/files/he/learn/forms/index.html @@ -0,0 +1,72 @@ +--- +title: טפסי HTML +slug: Learn/HTML/טפסים +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.

+ +

Prerequisites

+ +

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our Native form widgets guide.

+ +

The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript first.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Basic guides

+ +
+
Your first HTML form
+
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
+
How to structure an HTML form
+
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
+
+ +

What form widgets are available?

+ +
+
The native form widgets
+
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
+
+ +

Validating and submitting form data

+ +
+
Sending form data
+
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
+
Form data validation
+
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
+
+ +

Advanced guides

+ +
+
How to build custom form widgets
+
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
+
Sending forms through JavaScript
+
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
+
HTML forms in legacy browsers
+
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
+
+ +

Form styling guides

+ +
+
Styling HTML forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced styling for HTML forms
+
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
+
Property compatibility table for form widgets
+
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
+
+ +

See also

+ + diff --git a/files/he/learn/html/howto/index.html b/files/he/learn/html/howto/index.html new file mode 100644 index 0000000000..d136f6d552 --- /dev/null +++ b/files/he/learn/html/howto/index.html @@ -0,0 +1,141 @@ +--- +title: השתמש ב-HTML כדי לפתור בעיות נפוצות +slug: Learn/HTML/פתרון_בעיות +translation_of: Learn/HTML/Howto +--- +
{{LearnSidebar}}
+ +

The following links point to solutions to common everyday problems you'll need to solve with HTML.

+ +
+
+

Basic structure

+ +

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

+ + + +

Basic text-level semantics

+ +

HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.

+ + +
+ +
+ + +

One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

+ + + +

Images & multimedia

+ + + +

Scripting & styling

+ +

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

+ + + +

Embedded content

+ + +
+
+ +

Uncommon or advanced problems

+ +

Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:

+ +
+
+

Forms

+ +

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

+ + + +

Tabular information

+ +

Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:

+ + + +

Data representation

+ + +
+ +
+

Advanced text semantics

+ + + +

Advanced images & multimedia

+ + + +

Internationalization

+ +

HTML is not monolingual. It provides tools to handle common internationalization issues.

+ + + +

Performance

+ + +
+
+ +

     

diff --git a/files/he/learn/html/introduction_to_html/index.html b/files/he/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..4af3b86da6 --- /dev/null +++ b/files/he/learn/html/introduction_to_html/index.html @@ -0,0 +1,55 @@ +--- +title: מבוא לשפת HTML +slug: Learn/HTML/מבוא_לשפת_HTML +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

At its heart, {{glossary("HTML")}} is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these, and introduce fundamental concepts and syntax you need to know to understand HTML.

+ +

Prerequisites

+ +

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner's module.

+ +
+

Note: If you are working on a computer/tablet/other device that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Guides

+ +

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

+ +
+
Getting started with HTML
+
Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!
+
What’s in the head? Metadata in HTML
+
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).
+
HTML text fundamentals
+
One of HTML's main jobs is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
+
Creating hyperlinks
+
Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link, and discusses best practices for links.
+
Advanced text formatting
+
There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements in here are less well-known, but still useful to know about. In this article you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
+
Document and website structure
+
As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.
+
Debugging HTML
+
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.
+
+ +

Assessments

+ +

The following assessments will test your understanding of the HTML basics covered in the guides above.

+ +
+
Marking up a letter
+
We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment you'll be given a letter to mark up.
+
Structuring a page of content
+
This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.
+
+ +

See also

+ +
+
Web literacy basics 1
+
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to HTML module. Learners get familiar with reading, writing, and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.
+
diff --git a/files/he/learn/html/tables/index.html b/files/he/learn/html/tables/index.html new file mode 100644 index 0000000000..8882fff3a0 --- /dev/null +++ b/files/he/learn/html/tables/index.html @@ -0,0 +1,34 @@ +--- +title: טבלאות HTML +slug: Learn/HTML/טבלאות +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

+ +

Prerequisites

+ +

Before starting this module, you should already have covered the basics of HTML — see Introduction to HTML.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Guides

+ +

This module contains the following articles:

+ +
+
HTML table basics
+
This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
+
HTML table advanced features and accessibility
+
In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
+
+ +

Assessments

+ +
+
Structuring planet data
+
In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.
+
diff --git "a/files/he/learn/html/\327\230\327\221\327\234\327\220\327\225\327\252/index.html" "b/files/he/learn/html/\327\230\327\221\327\234\327\220\327\225\327\252/index.html" deleted file mode 100644 index 8882fff3a0..0000000000 --- "a/files/he/learn/html/\327\230\327\221\327\234\327\220\327\225\327\252/index.html" +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: טבלאות HTML -slug: Learn/HTML/טבלאות -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

- -

Prerequisites

- -

Before starting this module, you should already have covered the basics of HTML — see Introduction to HTML.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

-
- -

Guides

- -

This module contains the following articles:

- -
-
HTML table basics
-
This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
-
HTML table advanced features and accessibility
-
In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
-
- -

Assessments

- -
-
Structuring planet data
-
In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.
-
diff --git "a/files/he/learn/html/\327\230\327\244\327\241\327\231\327\235/index.html" "b/files/he/learn/html/\327\230\327\244\327\241\327\231\327\235/index.html" deleted file mode 100644 index 87fe398bc4..0000000000 --- "a/files/he/learn/html/\327\230\327\244\327\241\327\231\327\235/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: טפסי HTML -slug: Learn/HTML/טפסים -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.

- -

Prerequisites

- -

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our Native form widgets guide.

- -

The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript first.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

-
- -

Basic guides

- -
-
Your first HTML form
-
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
-
How to structure an HTML form
-
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
-
- -

What form widgets are available?

- -
-
The native form widgets
-
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
-
- -

Validating and submitting form data

- -
-
Sending form data
-
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
-
Form data validation
-
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
-
- -

Advanced guides

- -
-
How to build custom form widgets
-
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
-
Sending forms through JavaScript
-
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
-
HTML forms in legacy browsers
-
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
-
- -

Form styling guides

- -
-
Styling HTML forms
-
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
-
Advanced styling for HTML forms
-
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
-
Property compatibility table for form widgets
-
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
-
- -

See also

- - diff --git "a/files/he/learn/html/\327\236\327\221\327\225\327\220_\327\234\327\251\327\244\327\252_html/index.html" "b/files/he/learn/html/\327\236\327\221\327\225\327\220_\327\234\327\251\327\244\327\252_html/index.html" deleted file mode 100644 index 4af3b86da6..0000000000 --- "a/files/he/learn/html/\327\236\327\221\327\225\327\220_\327\234\327\251\327\244\327\252_html/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: מבוא לשפת HTML -slug: Learn/HTML/מבוא_לשפת_HTML -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

At its heart, {{glossary("HTML")}} is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these, and introduce fundamental concepts and syntax you need to know to understand HTML.

- -

Prerequisites

- -

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner's module.

- -
-

Note: If you are working on a computer/tablet/other device that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Thimble.

-
- -

Guides

- -

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

- -
-
Getting started with HTML
-
Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!
-
What’s in the head? Metadata in HTML
-
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).
-
HTML text fundamentals
-
One of HTML's main jobs is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
-
Creating hyperlinks
-
Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link, and discusses best practices for links.
-
Advanced text formatting
-
There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements in here are less well-known, but still useful to know about. In this article you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
-
Document and website structure
-
As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.
-
Debugging HTML
-
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.
-
- -

Assessments

- -

The following assessments will test your understanding of the HTML basics covered in the guides above.

- -
-
Marking up a letter
-
We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment you'll be given a letter to mark up.
-
Structuring a page of content
-
This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.
-
- -

See also

- -
-
Web literacy basics 1
-
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to HTML module. Learners get familiar with reading, writing, and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.
-
diff --git "a/files/he/learn/html/\327\244\327\252\327\250\327\225\327\237_\327\221\327\242\327\231\327\225\327\252/index.html" "b/files/he/learn/html/\327\244\327\252\327\250\327\225\327\237_\327\221\327\242\327\231\327\225\327\252/index.html" deleted file mode 100644 index d136f6d552..0000000000 --- "a/files/he/learn/html/\327\244\327\252\327\250\327\225\327\237_\327\221\327\242\327\231\327\225\327\252/index.html" +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: השתמש ב-HTML כדי לפתור בעיות נפוצות -slug: Learn/HTML/פתרון_בעיות -translation_of: Learn/HTML/Howto ---- -
{{LearnSidebar}}
- -

The following links point to solutions to common everyday problems you'll need to solve with HTML.

- -
-
-

Basic structure

- -

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

- - - -

Basic text-level semantics

- -

HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.

- - -
- -
- - -

One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

- - - -

Images & multimedia

- - - -

Scripting & styling

- -

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

- - - -

Embedded content

- - -
-
- -

Uncommon or advanced problems

- -

Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:

- -
-
-

Forms

- -

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

- - - -

Tabular information

- -

Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:

- - - -

Data representation

- - -
- -
-

Advanced text semantics

- - - -

Advanced images & multimedia

- - - -

Internationalization

- -

HTML is not monolingual. It provides tools to handle common internationalization issues.

- - - -

Performance

- - -
-
- -

     

diff --git a/files/he/learn/javascript/building_blocks/conditionals/index.html b/files/he/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..4c5c5dcc54 --- /dev/null +++ b/files/he/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,789 @@ +--- +title: משפטי תנאי - קבלת החלטות בקוד שלנו +slug: Learn/JavaScript/Building_blocks/תנאים +tags: + - Conditionals + - Switch + - else if + - if ... else + - ternary + - אופרטור טרנארי + - משפטי אם...אחר + - משפטי תנאי + - תנאים +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
+ +

כמו בכל שפת תכנות, הקוד שלנו צריך ״לקבל החלטות״ בעצמו ולבצע פעולות מסויימות בהתאם למקרים שונים. לדוגמא - במשחק, אם מספר הנסיונות המותרים של השחקן עבר את מספר הנסיונות המקסימלי שהוגדר, המשמעות היא שהמשחק הסתיים. דוגמא נוספת היא יישום אינטרנט של מזג אוויר אשר יציג למשתמש עיצוב מסויים של מזג האוויר בהתאם לשעה הנוכחית ביום, כך שבשעות היום יוצג עיצוב בהיר ובשעות הערב יוצג עיצוב כהה. במאמר זה אנחנו נחקור את המבנה של משפטי תנאי ב-JavaScript וכיצד הם עובדים.

+ + + + + + + + + + + + +
ידע מוקדם:הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של מודול צעדים ראשונים ב-JavaScript.
מטרה:להבין כיצד להשתמש במשפטי תנאי ב-JavaScript.
+ +

תנאים והתניות בחיים האמיתיים

+ +

בני האדם מקבלים החלטות שמשפיעות על החיים שלהם באופן קבוע, מהחלטה קטנה האם לאכול שתי עוגיות או אחת עד להחלטות מורכבות האם לעזוב את העבודה או האם ללכת ללמוד אסטרונומיה במקום סוציולוגיה.

+ +

משפטי תנאי ב-JavaScript אפשרים לנו לייצג בקוד שלנו את התהליך של קבלת ההחלטה, החל מהחלטות שנהיה חייבים לקבל ועד החלטות שנקבל רק אם ניתקל במקרה מסויים.

+ +

+ +

if ... else - משפטי אם ... אחרת

+ +

נסתכל על הסוג הנפוץ ביותר של משפטי תנאי ב-JavaScript - משפט התנאי if ... else.

+ +

הסינטקס הבסיסי של משפטי if ... else

+ +

אם ננסה להמחיש את הסינטקס הבסיסי של if...else בצורה מופשטת של {{glossary("pseudocode")}}, הוא ייראה כך:

+ +
if (condition - תנאי) {
+  code to run if condition is true - הקוד שירוץ אם התנאי נכון
+} else {
+  run some other code instead  - הקוד שירוץ אם התנאי לא נכון
+}
+ +

מה שיש לנו כאן זה:

+ +
    +
  1. המילה השמורה if ולאחרי סוגריים רגילות ().
    2. +
  2. לאחר מכן - התנאי שנבדוק האם הוא מתקיים נמצא בתוך ה- () (כמו: ״האם הערך הזה גדול מערך אחר״ או ״הערך הזה קיים״). תנאי זה יעשה שימוש באופרטורים שדבירנו עליהם במודול הקודם - comparison operators אופרטורים להשוואה ויחזיר לנו ערך של אמת - true או ערך של שקר - false.
    3. +
  3. לאחר מכן  - סוגריים מסולסלות - {} - שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי התקיים, כלומר החזיר תוצאת אמת - true.
    4. +
  4. לאחר מכן - מילה שמורה נוספת שהיא else. אשר באה לבטא מה יקרה, אם בכלל, כאשר התנאי לא יחזיר תוצאת true. 
    5. +
  5. ולבסוף - סוגריים מסולסלות נוספות{}- שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי עצמו לא התקיים, כלומר החזיר תוצאת שקר - false.
    6. +
+ +

קוד זה דיי קריא ומובן על ידי בני אדם - הוא אומר בעצם ש-"אם ה- condition (התנאי) מתקיים - כלומר מחזיר ערך של אמת - true, תריץ את קוד A, אחרת - תריץ את קוד B"

+ +

שימו לב שאנחנו לא חייבים את לכלול את ה- else ואת הסוגריים המסולסלות השניות. כך לדוגמא, התנאי הבא הוא חוקי לחלוטין:

+ +
if (condition) {
+  code to run if condition is true
+}
+
+run some other code
+ +

יחד עם זאת, אנחנו צריכים לזכור שבמקרה כזה, הקוד השני שאינו חלק ממשפט התנאי, לא נשלט על ידיו ולא כפוף למשפט התנאי - מה שאומר שהוא ירוץ תמיד לא משנה אם התנאי החזיר ערך true או false. זה לאו דווקא משהו רע, אבל חשוב לדעת זאת.

+ +

לפעמים אנחנו גם נראה משפטי- if...else ללא סוגריים מסולסלות כלל, בקיצור אשר נראה כך:

+ +
if (condition) code to run if condition is true
+else run some other code instead
+ +

זהו קוד תקין לחלוטין, אך אינו מומלץ לשימוש -  הרבה יותר קל לקרוא קוד ולהבין מה קורה, אם אנחנו משתמשים בסוגריים מסולסולת לתחום את הקוד, וכן משתמשים במס׳ שורות ורווחים על מנת להפוך את הקוד לקריא ומובן יותר.

+ +

דוגמא לתרגול

+ +

על מנת להבין את הסינטקס טוב יותר, בוא ננסה דוגמא קטנה לתרגול. דמיינו ילד אשר התבקש לעזור לאימו בביצוע הקניות. אם הוא ישלים את המשימה, הוא יקבל דמי כיס גבוהים יותר מהרגיל:

+ +
var shoppingDone = false;
+
+if (shoppingDone === true) {
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}
+ +

עם זאת, קוד זה תמיד יגרום לכך שהילד יקבל דמי כיס מופחתים שכן בתחילת הקוד המשתנה shoppingDone קיבל את הערך של false. אנחנו צריכים למצוא דרך להפוך את הערך של המשתנה shoppingDone - true אם הילד השלים את הקניות.

+ +
+

תשומת לב: ניתן לראות את הפתרון לתרגול זה ב- GitHub (וכן ניתן לראות אותו כדף אינטרנט.)

+
+ +

else if - משפטי התניה משורשרים

+ +

הדוגמא הקודמת נתנה לנו שתי אפשרויות אך מה אם נצטרך יותר משתי אפשרויות?

+ +

ישנה דרך לשרשר אפשרויות נוספות לתוך משפט if...else שלנו באמצעות שימוש ב- else if. כל בחירה נוספות דורשת בלוק נוסף של קוד שייכנס בין{ ... }() if לבין { ... }else — ראו את הדוגמאות הבאות, שהן בעצם חלק מיישום פשוט לתחזית מזג אוויר:

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  var choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+
+
+ +

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. כאן יש לנו אלמנט {{htmlelement("select")}} המאפשר לנו לבחור אפשרויות שונות, וכן פסקה פשוטה.
    2. +
  2. ב-JavaScript, אנחו מאחסנים הפניות לאלמנט {{htmlelement("select")}} ולאלמנט- {{htmlelement("p")}} על ידי שמירתם במשתנים ומוסיפים ל-{{htmlelement("select")}} ״מאזין אירוע״ - event listener לאלמנט {{htmlelement("select")}} כך שכאשר הערך שלו ישתנה, הפונקציה ()setWeatherתופעל.
    3. +
  3. כאשר הפונקציה הזו רצה, אנחנו מגדירים תחילה משתנה בשם choice ומשימים לו את הערך הרלוונטי שהמשתמש בחר באלמנט <select>. לאחר מכן, אנחנו משתמשים במשפטי תנאי על מנת לתת כיתוב שונה בטקסט של הפסקאות, בהתאם לערך שיקבל <select> בכל פעם. שימו לב שכל התנאים נבדקים בבלוקי קוד של משפט תנאי {...}()else if, למעט האפשרות הראשונה, אשר נבדק בבלוק של המשפט התנאי {...}()if.
    4. +
  4. האפשרות האחרונה הנמצאת בבלוק של {...}else היא בעצם ברירת המחדל, או האופציה האחרונה. הקוד בבלוק שלה ירוץ רק אם אף אחד מהתנאים לא החזירו true. במקרה הזה, זה ישמש לרוקן את הטקסט מהפסקה ומידה ושום אופציה לא נבחרה.
    5. +
+ +
+

לתשומת לב: אתם גם יכולים למצוא את הדוגמא הזו ב- GitHub או להריץ אותה.

+
+ +

תשומת לב לאופרטורים להשוואה

+ +

אופרטורים להשוואה משמשים לבדוק את התנאים בתוך משפטי התנאי שלנו. עברנו עליהם במאמר מתמטיקה בסיסית ב-JavaScript — מספרים ואופרטורים שלנו. האפשרויות שלנו הן:

+ + + +
+

לתשומת לבכם: חיזרו על החומר אם אינכם זוכרים אותם. 

+
+ +

כאשנו מדברים על תוצאות ההשוואה, אנחנו רוצים לשים תשומת לב לערכים הבוליאנים שנקבל - הלא הם (true/false) ומהו המקור שלהם וכן לשים לב להתנהגות מסויימת שאנחנו ניתקל בה שוב ושוב.

+ +

כל ערך שהוא לא false, undefined, null, 0, NaN, או מחרוזת ריקה - (''), יחזיר לנו אמת - true כאשר הוא נבדק כתנאי במשפט תנאי. ולכן, אנחנו יכולים להשתמש רק בשם של המשתנה בלבד על מנת לבדוק האם הוא אמת או אפילו לבדוק האם הוא קיים - כלומר הוא לא undefined לדוגמא:

+ +
var cheese = 'Cheddar';
+
+if (cheese) {
+  console.log('Yay! Cheese available for making cheese on toast.');
+} else {
+  console.log('No cheese on toast for you today.');
+}
+ +

ואם נחזור לדוגמא הקודמת שלנו עם הילד והמטלה, נוכל לרשום זאת כך:

+ +
var shoppingDone = false;
+
+if (shoppingDone) { // don't need to explicitly specify '=== true'
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}
+ +

שרשור של if ... else

+ +

זה בסדר גמור לשים משפט if...else אחד בתוך השני - כלומר לשרשר אותם. לדוגמא, אנחנו יכולים לעדכן את היישום מזג אוויר שלנו להראות רשימה נוספת של אפשרויות בהתבסס על הטמפרטורה:

+ +
if (choice === 'sunny') {
+  if (temperature < 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+  } else if (temperature >= 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+  }
+}
+ +

למרות שכל הקוד עובד יחד, כל משפט if...else עובד לחלוטין באופן עצמאי מהאחר.

+ +

AND, OR או NOT :אופרטוריים לוגיים - Logical operators

+ +

אם נרצה לבדוק מספר תנאים מבלי לשרשר משפטי if...else שונים, logical operators אופרטוריים לוגיים - יכולים לעזור לנו. כשנעשה בהם שימוש בתנאים, השניים ראשונים עושים את הדברים הבאים:

+ + + +

 ניתן היה לרשום את הקוד הקודם באמצעות שימוש באופרטור הלוגי AND בצורה הבאה:

+ +
if (choice === 'sunny' && temperature < 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+} else if (choice === 'sunny' && temperature >= 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+}
+ +

בדוגמא זו, הבלוק קוד הראשון ירוץ רק אם 'choice === 'sunny וגם temperature < 86 יחזיר true.

+ +

דוגמא לשימוש באופרטור הלוגי OR:

+ +
if (iceCreamVanOutside || houseStatus === 'on fire') {
+  console.log('You should leave the house quickly.');
+} else {
+  console.log('Probably should just stay in then.');
+}
+ +

הסוג האחרון של אופרטור לוגי - NOT, מבוטא על ידי האופרטור ! וניתן לשימוש על מנת לשלול ביטוי מסויים. נראה אותו בדוגמא הבאה:

+ +
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+  console.log('Probably should just stay in then.');
+} else {
+  console.log('You should leave the house quickly.');
+}
+ +

בקוד זה אם ביטוי של OR מסויים מחזיר true, אז האופרטור NOT יהפוך אותו לשלילי על מנת שכל הביטוי יחזור false.

+ +

אנחנו יכולים לאחד כמה משפטי התנייה ואופרטורים לוגיים כמה שנרצה, בכל מבנה שנרצה. הדוגמאות הבאות מריצות קוד בפנים רק אם שני משפטי ה-OR מחזירים ערך של אמת. 

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+  // run the code
+}
+ +

טעות נפוצה שעושים כאשר משתמשים באופרטור הלוגי OR במשפט תנאי היא לציין את המשתנה שאנחנו נרצה לבדוק את הערך שלו ואז לתת מס׳ ערכים לבדיקה מופרדים על ידי האופרטור|| (OR) , זה עלול להחזיר לנו ערך של אמת. לדוגמא:

+ +
if (x === 5 || 7 || 10 || 20) {
+  // run my code
+}
+ +

במקרה זה, התנאי בתוך הסוגריים () יחזיר לנו תמיד true, כי המספר 7 או כל מספר שאינו 0, תמיד יחזיר ערך של true כי כל ערך שהוא לא false, undefined, null, 0, NaN, או מחרוזת ריקה - (''), יחזיר לנו אמת - true כאשר הוא נבדק כתנאי במשפט תנאי. 

+ +

על מנת שקוד זה יעבוד לוגית כפי שרצינו, אנחנו צריכים להשתמש אופרטור OR על כל אחד מהם:

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // run my code
+}
+ +

משפטי switch

+ +

משפטי if...else עוזרים לנו לממש קוד מותנה שירוץ בהתאם לתנאים שנגדיר לו, אבל לא בלי החסרונות שלהם. הם לרוב יהיו טובים כאשר יש לנו שתי אפשרויות וכל מהן דורשת כמויות הגיונית של קוד, או כאשר התנאים שלנו מורכבים יחסית. למקרים שבה אנחנו נרצה הרבה מקרים לבדיקה, הקוד עלול להיות קצת מעצבן וארוך. 

+ +

בשביל זה נועדו משפטי switch. משפטים אלו מקבלים ביטוי/ערך בתוך פרמטר ואז בודקים התקיימותו בין מספר אפשרויות שמוגדרות להם. אם הם מוצאים אחת מהאפשרויות שמתאימה לביטוי/ערך שהם קיבלו כפרמטר, הן יריצו את הקוד המתאים. כך זה קורה מבחינה רעיונית:

+ +
switch (expression) {
+  case choice1:
+    run this code
+    break;
+
+  case choice2:
+    run this code instead
+    break;
+
+  // include as many cases as you like
+
+  default:
+    actually, just run this code
+}
+ +

הסבר:

+ +
    +
  1. המילה השמורה switch, ולאחריה סט של סוגריים רגילות ().
    2. +
  2. ביטוי או ערך בתוך הסוגריים.
    3. +
  3. המילה השמורה case, ולאחריה מקרה אפשרי שהביטוי או הערך יכול להיות, לאחריו :.
    4. +
  4. קוד שירוץ אם המקרה מתאים לביטוי/ערך.
    5. +
  5. המילי השמורה break, ולאחריה ; אם האפשרות הקודמת תואמת לערך/ביטוי, הדפדפן יפסיק להריץ את הקוד במשפט ה-switch וימשיך לקוד שמתחת למשפט ה-switch.
    6. +
  6. ניתן להוסיף case כמה שרק נרצה. 
    7. +
  7. לבסוף, המילה השמורה default, ולאחריה : וקוד שירוץ. default תרוץ אם הערך/ביטוי שהוכנס לא תואם לאף אחד מאפשרויות ה-case שרשמנו. במקרה של default - אין צורך להתשמש במילה השמורה break, מכיוון שאין מה להפסיק/לעצור לאחר התקיימותו של מקרה זה. 
    8. +
+ +
+

לתשומת לב:  החלק של default הוא אופציונלי - אנחנו יכולים להשמיט אותו אם אין סיכוי כשהביטוי יחזיר לנו ערך לא ידוע או לא תואם לאף אחד מהמקרים. אם יש סיכוי  כזה - אנחנו צריכים לכלול default במשפט ה-switch על מנת להתמודד עם אותם מקרים לא ידועים. 

+
+ +

דוגמא למשפט switch

+ +

נסתכל על דוגמא אמיתית - נכתוב את יישום מזג האוויר שלנו מחדש באמצעות שימוש במשפט switch:

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  var choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
+

לתשומת לבכם: אפשר למצוא את הדוגמא ב-​​​​​GitHub או להריץ אותה פה.

+
+ +

 Ternary operator - אופרטור טרנארי

+ +

סינטקס נוסף שנרצה להציג בפניכם לפני שנמשיך הוא אופרטור טרנארי. 

+ +

אופרטור טרנארי הוא סינטקס קצר אשר בודק התקיימותו של תנאי מסויים ומבצע פעולה מסויימת אם התנאי מתקיים - true, ופעולה אחרת אם התנאי לא מתקיים - false. אופרטור זה שימושי בסיטואציות מסוימות ויכול לקחת הרבה פחות קוד מאשר if...else, במידה ויש שתי אפשרויות, אשר נבחרות לפי מבחן/תנאי true/false.

+ +

על מנת להפשיט את הנושא, הקוד בצורה רעיונית נראה כך:

+ +
( condition ) ? run this code : run this code instead
+ +

נסתכל על דוגמא פשוטה:

+ +
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
+ +

יש לנו פה משתנה בשם isBirthday - אם הוא true, אנחנו נתן הודעת יומולדת שמח, ואם הוא false, אנחנו נתן ברכה רגילה.

+ +

דוגמא לאופרטור טרנארי

+ +

שימו לב כי אנחנו לא חייבים לקבוע ערכים בפרמטרים של האופרטור הטרנארי - אנחנו יכולים גם לתת לו כפרמטרים שורות קוד או פונקציות - כל דבר שנרצה. הדוגמא הבאה מראה לנו אפשרות לבחירת עיצוב לאתר על בסיס אופרטור טרנארי.

+ +
<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
+
+<h1>This is my website</h1>
+ +
var select = document.querySelector('select');
+var html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+
+ +

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

כאן יש לנו אלמנט {{htmlelement('select')}} המאפשר לנו לבחור את הסגנון (שחור או לבן) ובנוסף כותרת פשוטה של {{htmlelement('h1')}} על מנת להציג את הכותרת של האתר. לאחר מכן יש לנו פונקציה שנקראת ()update שמקבלת שני צבעים כארגומנטים. הרקע של האתר נקבע על ידי הצבע הראשון שאנחנו בוחרים, והצבע של הטקסט ניתן כפרמטר השני.

+ +

לבסוף ישלנו ״מאזין אירוע״ - event listener בשם onchange. מאזין אירוע זה מכיל ״מטפל אירוע״ - event handler מסוג מסוג אופרטור טרנארי. הוא מתחיל עם מבחן התנאי - select.value === 'black'. אם התנאי מחזיר true, אנחנו נריץ את פונקציית true עם האפרמטרי ׳black׳ ו-׳white׳ - כלומר אנחנו נקבל רקע שחור עם כיתוב טקסט לבן. אם זה תוצאת התקיימות התנאי היא false - פונקציית ()update תרוץ עם פרמטרים לבן ושחור, כלומר הצבעים יהיו הפוכים.

+ +
+

לתשומת לבכם:  אירועים אלו בעצם פעולות או התרחשויות אשר קורים במערכת, אשר אנחנו יכולים ״להאזין״ להם באמצעות ״מאזין אירוע״ - event listener כך שנוכל להגיב בדרך מסויימת, ברגע שהם יתרחשו באמצעות ״מטפל אירוע״ - event handler. אנו נגע בהם בהמשך.

+
+ +
+

לתשומת לב: ראו גם דוגמא זו ב- GitHub או בדוגמא כדף אינטרנט. 

+
+ +

למידה עצמאית: לוח שנה פשוט

+ +

בדוגמא הבאה, אנחנו הולכים לכתוב דוגמא ללוח שנה. בקוד שלנו יש:

+ + + +

אנחנו צריכים משפט תנאי בתוך ה-event handler שלנו - כלומר בתוך פונקציית onchange שלנו, מתחת להערה ADD CONDITIONAL HERE //. משפט תנאי זה אמור:

+ +
    +
  1. להסתכל על החודש שנבחר ואוכסן במשתנה choice. זה יהיה הערך של האלמנט <select> לאחר שהערך שלו השתנה. בדוגמא שלנו זה יהיה January.
    2. +
  2. להגדיר משתנה בשם days שיהיה שווה למספר הימים בחודש הנבחר. על מנת לעשות זאת אנחנו נצטרך להסתכל על מספר הימים בכל חודש בשנה. אנחנו יכולים להתעלם משנים מעוברות לצרכי דוגמא זו.
    3. +
+ +

רמזים:

+ + + +

אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

למידה עצמאית: יותר אפשרויות צבעים!

+ +

בתרגול זה, אנחנו הולכים לקחת את האופרטור הטרנארי שראינו קודם, ולהפוך אותו למשפט switch שיאפשר לנו לבחור מבין אפשרות אחת מבין אפשרויות רבות יותר עבור האתר הפשוט שלנו. הסתכלו על {{htmlelement("select")}} - הפעם אתם תראו שיש לו חמש אופציות ולא שתיים. אתם נדרשים להוסיף משפט switch ישר מתחת להערת ADD SWITCH STATEMENT //אשר יבצע את הפעולות הבאות:

+ + + +

אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

+ +

לסיכום

+ +

אלו הדברם העיקריים והמרכזיים שאנחנו צריכים לדעת על משפטי תנאי ומבניהם ב-JavaScript. אם לא הבנתם את הרעיונות שעברנו עליהם בתרגולים למעלה, חזרו על השיעור שוב. ואם משהו לא ברור, צרו עמנו קשר לשם קבלת עזרה.

+ +

ראו גם

+ + + +

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

+ +

במודול זה

+ + diff --git "a/files/he/learn/javascript/building_blocks/\327\252\327\240\327\220\327\231\327\235/index.html" "b/files/he/learn/javascript/building_blocks/\327\252\327\240\327\220\327\231\327\235/index.html" deleted file mode 100644 index 4c5c5dcc54..0000000000 --- "a/files/he/learn/javascript/building_blocks/\327\252\327\240\327\220\327\231\327\235/index.html" +++ /dev/null @@ -1,789 +0,0 @@ ---- -title: משפטי תנאי - קבלת החלטות בקוד שלנו -slug: Learn/JavaScript/Building_blocks/תנאים -tags: - - Conditionals - - Switch - - else if - - if ... else - - ternary - - אופרטור טרנארי - - משפטי אם...אחר - - משפטי תנאי - - תנאים -translation_of: Learn/JavaScript/Building_blocks/conditionals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
- -

כמו בכל שפת תכנות, הקוד שלנו צריך ״לקבל החלטות״ בעצמו ולבצע פעולות מסויימות בהתאם למקרים שונים. לדוגמא - במשחק, אם מספר הנסיונות המותרים של השחקן עבר את מספר הנסיונות המקסימלי שהוגדר, המשמעות היא שהמשחק הסתיים. דוגמא נוספת היא יישום אינטרנט של מזג אוויר אשר יציג למשתמש עיצוב מסויים של מזג האוויר בהתאם לשעה הנוכחית ביום, כך שבשעות היום יוצג עיצוב בהיר ובשעות הערב יוצג עיצוב כהה. במאמר זה אנחנו נחקור את המבנה של משפטי תנאי ב-JavaScript וכיצד הם עובדים.

- - - - - - - - - - - - -
ידע מוקדם:הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של מודול צעדים ראשונים ב-JavaScript.
מטרה:להבין כיצד להשתמש במשפטי תנאי ב-JavaScript.
- -

תנאים והתניות בחיים האמיתיים

- -

בני האדם מקבלים החלטות שמשפיעות על החיים שלהם באופן קבוע, מהחלטה קטנה האם לאכול שתי עוגיות או אחת עד להחלטות מורכבות האם לעזוב את העבודה או האם ללכת ללמוד אסטרונומיה במקום סוציולוגיה.

- -

משפטי תנאי ב-JavaScript אפשרים לנו לייצג בקוד שלנו את התהליך של קבלת ההחלטה, החל מהחלטות שנהיה חייבים לקבל ועד החלטות שנקבל רק אם ניתקל במקרה מסויים.

- -

- -

if ... else - משפטי אם ... אחרת

- -

נסתכל על הסוג הנפוץ ביותר של משפטי תנאי ב-JavaScript - משפט התנאי if ... else.

- -

הסינטקס הבסיסי של משפטי if ... else

- -

אם ננסה להמחיש את הסינטקס הבסיסי של if...else בצורה מופשטת של {{glossary("pseudocode")}}, הוא ייראה כך:

- -
if (condition - תנאי) {
-  code to run if condition is true - הקוד שירוץ אם התנאי נכון
-} else {
-  run some other code instead  - הקוד שירוץ אם התנאי לא נכון
-}
- -

מה שיש לנו כאן זה:

- -
    -
  1. המילה השמורה if ולאחרי סוגריים רגילות ().
    2. -
  2. לאחר מכן - התנאי שנבדוק האם הוא מתקיים נמצא בתוך ה- () (כמו: ״האם הערך הזה גדול מערך אחר״ או ״הערך הזה קיים״). תנאי זה יעשה שימוש באופרטורים שדבירנו עליהם במודול הקודם - comparison operators אופרטורים להשוואה ויחזיר לנו ערך של אמת - true או ערך של שקר - false.
    3. -
  3. לאחר מכן  - סוגריים מסולסלות - {} - שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי התקיים, כלומר החזיר תוצאת אמת - true.
    4. -
  4. לאחר מכן - מילה שמורה נוספת שהיא else. אשר באה לבטא מה יקרה, אם בכלל, כאשר התנאי לא יחזיר תוצאת true. 
    5. -
  5. ולבסוף - סוגריים מסולסלות נוספות{}- שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי עצמו לא התקיים, כלומר החזיר תוצאת שקר - false.
    6. -
- -

קוד זה דיי קריא ומובן על ידי בני אדם - הוא אומר בעצם ש-"אם ה- condition (התנאי) מתקיים - כלומר מחזיר ערך של אמת - true, תריץ את קוד A, אחרת - תריץ את קוד B"

- -

שימו לב שאנחנו לא חייבים את לכלול את ה- else ואת הסוגריים המסולסלות השניות. כך לדוגמא, התנאי הבא הוא חוקי לחלוטין:

- -
if (condition) {
-  code to run if condition is true
-}
-
-run some other code
- -

יחד עם זאת, אנחנו צריכים לזכור שבמקרה כזה, הקוד השני שאינו חלק ממשפט התנאי, לא נשלט על ידיו ולא כפוף למשפט התנאי - מה שאומר שהוא ירוץ תמיד לא משנה אם התנאי החזיר ערך true או false. זה לאו דווקא משהו רע, אבל חשוב לדעת זאת.

- -

לפעמים אנחנו גם נראה משפטי- if...else ללא סוגריים מסולסלות כלל, בקיצור אשר נראה כך:

- -
if (condition) code to run if condition is true
-else run some other code instead
- -

זהו קוד תקין לחלוטין, אך אינו מומלץ לשימוש -  הרבה יותר קל לקרוא קוד ולהבין מה קורה, אם אנחנו משתמשים בסוגריים מסולסולת לתחום את הקוד, וכן משתמשים במס׳ שורות ורווחים על מנת להפוך את הקוד לקריא ומובן יותר.

- -

דוגמא לתרגול

- -

על מנת להבין את הסינטקס טוב יותר, בוא ננסה דוגמא קטנה לתרגול. דמיינו ילד אשר התבקש לעזור לאימו בביצוע הקניות. אם הוא ישלים את המשימה, הוא יקבל דמי כיס גבוהים יותר מהרגיל:

- -
var shoppingDone = false;
-
-if (shoppingDone === true) {
-  var childsAllowance = 10;
-} else {
-  var childsAllowance = 5;
-}
- -

עם זאת, קוד זה תמיד יגרום לכך שהילד יקבל דמי כיס מופחתים שכן בתחילת הקוד המשתנה shoppingDone קיבל את הערך של false. אנחנו צריכים למצוא דרך להפוך את הערך של המשתנה shoppingDone - true אם הילד השלים את הקניות.

- -
-

תשומת לב: ניתן לראות את הפתרון לתרגול זה ב- GitHub (וכן ניתן לראות אותו כדף אינטרנט.)

-
- -

else if - משפטי התניה משורשרים

- -

הדוגמא הקודמת נתנה לנו שתי אפשרויות אך מה אם נצטרך יותר משתי אפשרויות?

- -

ישנה דרך לשרשר אפשרויות נוספות לתוך משפט if...else שלנו באמצעות שימוש ב- else if. כל בחירה נוספות דורשת בלוק נוסף של קוד שייכנס בין{ ... }() if לבין { ... }else — ראו את הדוגמאות הבאות, שהן בעצם חלק מיישום פשוט לתחזית מזג אוויר:

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
var select = document.querySelector('select');
-var para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-function setWeather() {
-  var choice = select.value;
-
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-  } else {
-    para.textContent = '';
-  }
-}
-
-
- -

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
    -
  1. כאן יש לנו אלמנט {{htmlelement("select")}} המאפשר לנו לבחור אפשרויות שונות, וכן פסקה פשוטה.
    2. -
  2. ב-JavaScript, אנחו מאחסנים הפניות לאלמנט {{htmlelement("select")}} ולאלמנט- {{htmlelement("p")}} על ידי שמירתם במשתנים ומוסיפים ל-{{htmlelement("select")}} ״מאזין אירוע״ - event listener לאלמנט {{htmlelement("select")}} כך שכאשר הערך שלו ישתנה, הפונקציה ()setWeatherתופעל.
    3. -
  3. כאשר הפונקציה הזו רצה, אנחנו מגדירים תחילה משתנה בשם choice ומשימים לו את הערך הרלוונטי שהמשתמש בחר באלמנט <select>. לאחר מכן, אנחנו משתמשים במשפטי תנאי על מנת לתת כיתוב שונה בטקסט של הפסקאות, בהתאם לערך שיקבל <select> בכל פעם. שימו לב שכל התנאים נבדקים בבלוקי קוד של משפט תנאי {...}()else if, למעט האפשרות הראשונה, אשר נבדק בבלוק של המשפט התנאי {...}()if.
    4. -
  4. האפשרות האחרונה הנמצאת בבלוק של {...}else היא בעצם ברירת המחדל, או האופציה האחרונה. הקוד בבלוק שלה ירוץ רק אם אף אחד מהתנאים לא החזירו true. במקרה הזה, זה ישמש לרוקן את הטקסט מהפסקה ומידה ושום אופציה לא נבחרה.
    5. -
- -
-

לתשומת לב: אתם גם יכולים למצוא את הדוגמא הזו ב- GitHub או להריץ אותה.

-
- -

תשומת לב לאופרטורים להשוואה

- -

אופרטורים להשוואה משמשים לבדוק את התנאים בתוך משפטי התנאי שלנו. עברנו עליהם במאמר מתמטיקה בסיסית ב-JavaScript — מספרים ואופרטורים שלנו. האפשרויות שלנו הן:

- - - -
-

לתשומת לבכם: חיזרו על החומר אם אינכם זוכרים אותם. 

-
- -

כאשנו מדברים על תוצאות ההשוואה, אנחנו רוצים לשים תשומת לב לערכים הבוליאנים שנקבל - הלא הם (true/false) ומהו המקור שלהם וכן לשים לב להתנהגות מסויימת שאנחנו ניתקל בה שוב ושוב.

- -

כל ערך שהוא לא false, undefined, null, 0, NaN, או מחרוזת ריקה - (''), יחזיר לנו אמת - true כאשר הוא נבדק כתנאי במשפט תנאי. ולכן, אנחנו יכולים להשתמש רק בשם של המשתנה בלבד על מנת לבדוק האם הוא אמת או אפילו לבדוק האם הוא קיים - כלומר הוא לא undefined לדוגמא:

- -
var cheese = 'Cheddar';
-
-if (cheese) {
-  console.log('Yay! Cheese available for making cheese on toast.');
-} else {
-  console.log('No cheese on toast for you today.');
-}
- -

ואם נחזור לדוגמא הקודמת שלנו עם הילד והמטלה, נוכל לרשום זאת כך:

- -
var shoppingDone = false;
-
-if (shoppingDone) { // don't need to explicitly specify '=== true'
-  var childsAllowance = 10;
-} else {
-  var childsAllowance = 5;
-}
- -

שרשור של if ... else

- -

זה בסדר גמור לשים משפט if...else אחד בתוך השני - כלומר לשרשר אותם. לדוגמא, אנחנו יכולים לעדכן את היישום מזג אוויר שלנו להראות רשימה נוספת של אפשרויות בהתבסס על הטמפרטורה:

- -
if (choice === 'sunny') {
-  if (temperature < 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
-  } else if (temperature >= 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-  }
-}
- -

למרות שכל הקוד עובד יחד, כל משפט if...else עובד לחלוטין באופן עצמאי מהאחר.

- -

AND, OR או NOT :אופרטוריים לוגיים - Logical operators

- -

אם נרצה לבדוק מספר תנאים מבלי לשרשר משפטי if...else שונים, logical operators אופרטוריים לוגיים - יכולים לעזור לנו. כשנעשה בהם שימוש בתנאים, השניים ראשונים עושים את הדברים הבאים:

- - - -

 ניתן היה לרשום את הקוד הקודם באמצעות שימוש באופרטור הלוגי AND בצורה הבאה:

- -
if (choice === 'sunny' && temperature < 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
-} else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-}
- -

בדוגמא זו, הבלוק קוד הראשון ירוץ רק אם 'choice === 'sunny וגם temperature < 86 יחזיר true.

- -

דוגמא לשימוש באופרטור הלוגי OR:

- -
if (iceCreamVanOutside || houseStatus === 'on fire') {
-  console.log('You should leave the house quickly.');
-} else {
-  console.log('Probably should just stay in then.');
-}
- -

הסוג האחרון של אופרטור לוגי - NOT, מבוטא על ידי האופרטור ! וניתן לשימוש על מנת לשלול ביטוי מסויים. נראה אותו בדוגמא הבאה:

- -
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
-  console.log('Probably should just stay in then.');
-} else {
-  console.log('You should leave the house quickly.');
-}
- -

בקוד זה אם ביטוי של OR מסויים מחזיר true, אז האופרטור NOT יהפוך אותו לשלילי על מנת שכל הביטוי יחזור false.

- -

אנחנו יכולים לאחד כמה משפטי התנייה ואופרטורים לוגיים כמה שנרצה, בכל מבנה שנרצה. הדוגמאות הבאות מריצות קוד בפנים רק אם שני משפטי ה-OR מחזירים ערך של אמת. 

- -
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
-  // run the code
-}
- -

טעות נפוצה שעושים כאשר משתמשים באופרטור הלוגי OR במשפט תנאי היא לציין את המשתנה שאנחנו נרצה לבדוק את הערך שלו ואז לתת מס׳ ערכים לבדיקה מופרדים על ידי האופרטור|| (OR) , זה עלול להחזיר לנו ערך של אמת. לדוגמא:

- -
if (x === 5 || 7 || 10 || 20) {
-  // run my code
-}
- -

במקרה זה, התנאי בתוך הסוגריים () יחזיר לנו תמיד true, כי המספר 7 או כל מספר שאינו 0, תמיד יחזיר ערך של true כי כל ערך שהוא לא false, undefined, null, 0, NaN, או מחרוזת ריקה - (''), יחזיר לנו אמת - true כאשר הוא נבדק כתנאי במשפט תנאי. 

- -

על מנת שקוד זה יעבוד לוגית כפי שרצינו, אנחנו צריכים להשתמש אופרטור OR על כל אחד מהם:

- -
if (x === 5 || x === 7 || x === 10 ||x === 20) {
-  // run my code
-}
- -

משפטי switch

- -

משפטי if...else עוזרים לנו לממש קוד מותנה שירוץ בהתאם לתנאים שנגדיר לו, אבל לא בלי החסרונות שלהם. הם לרוב יהיו טובים כאשר יש לנו שתי אפשרויות וכל מהן דורשת כמויות הגיונית של קוד, או כאשר התנאים שלנו מורכבים יחסית. למקרים שבה אנחנו נרצה הרבה מקרים לבדיקה, הקוד עלול להיות קצת מעצבן וארוך. 

- -

בשביל זה נועדו משפטי switch. משפטים אלו מקבלים ביטוי/ערך בתוך פרמטר ואז בודקים התקיימותו בין מספר אפשרויות שמוגדרות להם. אם הם מוצאים אחת מהאפשרויות שמתאימה לביטוי/ערך שהם קיבלו כפרמטר, הן יריצו את הקוד המתאים. כך זה קורה מבחינה רעיונית:

- -
switch (expression) {
-  case choice1:
-    run this code
-    break;
-
-  case choice2:
-    run this code instead
-    break;
-
-  // include as many cases as you like
-
-  default:
-    actually, just run this code
-}
- -

הסבר:

- -
    -
  1. המילה השמורה switch, ולאחריה סט של סוגריים רגילות ().
    2. -
  2. ביטוי או ערך בתוך הסוגריים.
    3. -
  3. המילה השמורה case, ולאחריה מקרה אפשרי שהביטוי או הערך יכול להיות, לאחריו :.
    4. -
  4. קוד שירוץ אם המקרה מתאים לביטוי/ערך.
    5. -
  5. המילי השמורה break, ולאחריה ; אם האפשרות הקודמת תואמת לערך/ביטוי, הדפדפן יפסיק להריץ את הקוד במשפט ה-switch וימשיך לקוד שמתחת למשפט ה-switch.
    6. -
  6. ניתן להוסיף case כמה שרק נרצה. 
    7. -
  7. לבסוף, המילה השמורה default, ולאחריה : וקוד שירוץ. default תרוץ אם הערך/ביטוי שהוכנס לא תואם לאף אחד מאפשרויות ה-case שרשמנו. במקרה של default - אין צורך להתשמש במילה השמורה break, מכיוון שאין מה להפסיק/לעצור לאחר התקיימותו של מקרה זה. 
    8. -
- -
-

לתשומת לב:  החלק של default הוא אופציונלי - אנחנו יכולים להשמיט אותו אם אין סיכוי כשהביטוי יחזיר לנו ערך לא ידוע או לא תואם לאף אחד מהמקרים. אם יש סיכוי  כזה - אנחנו צריכים לכלול default במשפט ה-switch על מנת להתמודד עם אותם מקרים לא ידועים. 

-
- -

דוגמא למשפט switch

- -

נסתכל על דוגמא אמיתית - נכתוב את יישום מזג האוויר שלנו מחדש באמצעות שימוש במשפט switch:

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
var select = document.querySelector('select');
-var para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-
-function setWeather() {
-  var choice = select.value;
-
-  switch (choice) {
-    case 'sunny':
-      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-      break;
-    case 'rainy':
-      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-      break;
-    case 'snowing':
-      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-      break;
-    case 'overcast':
-      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-      break;
-    default:
-      para.textContent = '';
-  }
-}
- -

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
-

לתשומת לבכם: אפשר למצוא את הדוגמא ב-​​​​​GitHub או להריץ אותה פה.

-
- -

 Ternary operator - אופרטור טרנארי

- -

סינטקס נוסף שנרצה להציג בפניכם לפני שנמשיך הוא אופרטור טרנארי. 

- -

אופרטור טרנארי הוא סינטקס קצר אשר בודק התקיימותו של תנאי מסויים ומבצע פעולה מסויימת אם התנאי מתקיים - true, ופעולה אחרת אם התנאי לא מתקיים - false. אופרטור זה שימושי בסיטואציות מסוימות ויכול לקחת הרבה פחות קוד מאשר if...else, במידה ויש שתי אפשרויות, אשר נבחרות לפי מבחן/תנאי true/false.

- -

על מנת להפשיט את הנושא, הקוד בצורה רעיונית נראה כך:

- -
( condition ) ? run this code : run this code instead
- -

נסתכל על דוגמא פשוטה:

- -
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
- -

יש לנו פה משתנה בשם isBirthday - אם הוא true, אנחנו נתן הודעת יומולדת שמח, ואם הוא false, אנחנו נתן ברכה רגילה.

- -

דוגמא לאופרטור טרנארי

- -

שימו לב כי אנחנו לא חייבים לקבוע ערכים בפרמטרים של האופרטור הטרנארי - אנחנו יכולים גם לתת לו כפרמטרים שורות קוד או פונקציות - כל דבר שנרצה. הדוגמא הבאה מראה לנו אפשרות לבחירת עיצוב לאתר על בסיס אופרטור טרנארי.

- -
<label for="theme">Select theme: </label>
-<select id="theme">
-  <option value="white">White</option>
-  <option value="black">Black</option>
-</select>
-
-<h1>This is my website</h1>
- -
var select = document.querySelector('select');
-var html = document.querySelector('html');
-document.body.style.padding = '10px';
-
-function update(bgColor, textColor) {
-  html.style.backgroundColor = bgColor;
-  html.style.color = textColor;
-}
-
-select.onchange = function() {
-  ( select.value === 'black' ) ? update('black','white') : update('white','black');
-}
-
- -

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -

כאן יש לנו אלמנט {{htmlelement('select')}} המאפשר לנו לבחור את הסגנון (שחור או לבן) ובנוסף כותרת פשוטה של {{htmlelement('h1')}} על מנת להציג את הכותרת של האתר. לאחר מכן יש לנו פונקציה שנקראת ()update שמקבלת שני צבעים כארגומנטים. הרקע של האתר נקבע על ידי הצבע הראשון שאנחנו בוחרים, והצבע של הטקסט ניתן כפרמטר השני.

- -

לבסוף ישלנו ״מאזין אירוע״ - event listener בשם onchange. מאזין אירוע זה מכיל ״מטפל אירוע״ - event handler מסוג מסוג אופרטור טרנארי. הוא מתחיל עם מבחן התנאי - select.value === 'black'. אם התנאי מחזיר true, אנחנו נריץ את פונקציית true עם האפרמטרי ׳black׳ ו-׳white׳ - כלומר אנחנו נקבל רקע שחור עם כיתוב טקסט לבן. אם זה תוצאת התקיימות התנאי היא false - פונקציית ()update תרוץ עם פרמטרים לבן ושחור, כלומר הצבעים יהיו הפוכים.

- -
-

לתשומת לבכם:  אירועים אלו בעצם פעולות או התרחשויות אשר קורים במערכת, אשר אנחנו יכולים ״להאזין״ להם באמצעות ״מאזין אירוע״ - event listener כך שנוכל להגיב בדרך מסויימת, ברגע שהם יתרחשו באמצעות ״מטפל אירוע״ - event handler. אנו נגע בהם בהמשך.

-
- -
-

לתשומת לב: ראו גם דוגמא זו ב- GitHub או בדוגמא כדף אינטרנט. 

-
- -

למידה עצמאית: לוח שנה פשוט

- -

בדוגמא הבאה, אנחנו הולכים לכתוב דוגמא ללוח שנה. בקוד שלנו יש:

- - - -

אנחנו צריכים משפט תנאי בתוך ה-event handler שלנו - כלומר בתוך פונקציית onchange שלנו, מתחת להערה ADD CONDITIONAL HERE //. משפט תנאי זה אמור:

- -
    -
  1. להסתכל על החודש שנבחר ואוכסן במשתנה choice. זה יהיה הערך של האלמנט <select> לאחר שהערך שלו השתנה. בדוגמא שלנו זה יהיה January.
    2. -
  2. להגדיר משתנה בשם days שיהיה שווה למספר הימים בחודש הנבחר. על מנת לעשות זאת אנחנו נצטרך להסתכל על מספר הימים בכל חודש בשנה. אנחנו יכולים להתעלם משנים מעוברות לצרכי דוגמא זו.
    3. -
- -

רמזים:

- - - -

אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.

- - - -

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

- -

למידה עצמאית: יותר אפשרויות צבעים!

- -

בתרגול זה, אנחנו הולכים לקחת את האופרטור הטרנארי שראינו קודם, ולהפוך אותו למשפט switch שיאפשר לנו לבחור מבין אפשרות אחת מבין אפשרויות רבות יותר עבור האתר הפשוט שלנו. הסתכלו על {{htmlelement("select")}} - הפעם אתם תראו שיש לו חמש אופציות ולא שתיים. אתם נדרשים להוסיף משפט switch ישר מתחת להערת ADD SWITCH STATEMENT //אשר יבצע את הפעולות הבאות:

- - - -

אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.

- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

- -

לסיכום

- -

אלו הדברם העיקריים והמרכזיים שאנחנו צריכים לדעת על משפטי תנאי ומבניהם ב-JavaScript. אם לא הבנתם את הרעיונות שעברנו עליהם בתרגולים למעלה, חזרו על השיעור שוב. ואם משהו לא ברור, צרו עמנו קשר לשם קבלת עזרה.

- -

ראו גם

- - - -

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

- -

במודול זה

- - -- cgit v1.2.3-54-g00ecf From 6bd552fe3cdd9d1187547c94664e4bdffe54074c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:18 +0100 Subject: unslug he: modify --- files/he/_redirects.txt | 17 ++ files/he/_wikihistory.json | 178 ++++++++++----------- files/he/conflicting/web/guide/index.html | 3 +- files/he/glossary/array/index.html | 3 +- files/he/learn/forms/index.html | 3 +- files/he/learn/html/howto/index.html | 3 +- .../he/learn/html/introduction_to_html/index.html | 3 +- files/he/learn/html/tables/index.html | 3 +- .../building_blocks/conditionals/index.html | 3 +- .../manifest.json/permissions/index.html | 3 +- .../mozilla/add-ons/webextensions/tips/index.html | 3 +- files/he/orphaned/he/index.html | 3 +- files/he/orphaned/hebrew_localization/index.html | 3 +- files/he/orphaned/mdn/community/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../web/hypertext_markup_language/index.html | 3 +- .../index.html" | 3 +- files/he/web/api/document_object_model/index.html | 3 +- files/he/web/api/geolocation_api/index.html | 3 +- 19 files changed, 140 insertions(+), 106 deletions(-) (limited to 'files/he/learn') diff --git a/files/he/_redirects.txt b/files/he/_redirects.txt index a9e1f0ea97..e5458ad700 100644 --- a/files/he/_redirects.txt +++ b/files/he/_redirects.txt @@ -1,4 +1,6 @@ # FROM-URL TO-URL +/he/docs/DOM /he/docs/Web/API/Document_Object_Model +/he/docs/Glossary/מערך /he/docs/Glossary/array /he/docs/HTML /he/docs/Web/HTML /he/docs/HTML/Element /he/docs/Web/HTML/Element /he/docs/HTML/Element/Heading_Elements /he/docs/Web/HTML/Element/Heading_Elements @@ -34,9 +36,24 @@ /he/docs/HTML/Element/table /he/docs/Web/HTML/Element/table /he/docs/HTML/Element/time /he/docs/Web/HTML/Element/time /he/docs/HTML/Element/title /he/docs/Web/HTML/Element/title +/he/docs/Hebrew_Localization /he/docs/orphaned/Hebrew_Localization /he/docs/JavaScript /he/docs/Web/JavaScript +/he/docs/Learn/HTML/טבלאות /he/docs/Learn/HTML/Tables +/he/docs/Learn/HTML/טפסים /he/docs/Learn/Forms +/he/docs/Learn/HTML/מבוא_לשפת_HTML /he/docs/Learn/HTML/Introduction_to_HTML +/he/docs/Learn/HTML/פתרון_בעיות /he/docs/Learn/HTML/Howto +/he/docs/Learn/JavaScript/Building_blocks/תנאים /he/docs/Learn/JavaScript/Building_blocks/conditionals +/he/docs/MDN/Community /he/docs/orphaned/MDN/Community +/he/docs/MDN/Contribute/Howto/Create_an_MDN_account /he/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account /he/docs/MDN/Getting_started /he/docs/MDN/Contribute/Getting_started +/he/docs/Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות /he/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions +/he/docs/Mozilla/Add-ons/WebExtensions/טיפום /he/docs/Mozilla/Add-ons/WebExtensions/Tips /he/docs/Mozilla_MathML_Project/Start-redirect-1 /he/docs/Mozilla_MathML_Project/Start +/he/docs/Web/API/Geolocation/ממשק_שירותי_מיקום /he/docs/Web/API/Geolocation_API /he/docs/Web/Guide/HTML /he/docs/Learn/HTML +/he/docs/Web/Hypertext_Markup_Language /he/docs/orphaned/Web/Hypertext_Markup_Language /he/docs/Web/JavaScript/Reference/Methods_Index /he/docs/Web/JavaScript/Reference +/he/docs/Web_Development /he/docs/conflicting/Web/Guide /he/docs/en /en-US/ +/he/docs/he /he/docs/orphaned/he +/he/docs/מושגים /he/docs/orphaned/מושגים diff --git a/files/he/_wikihistory.json b/files/he/_wikihistory.json index 9bed4c25af..39d0314950 100644 --- a/files/he/_wikihistory.json +++ b/files/he/_wikihistory.json @@ -1,10 +1,4 @@ { - "DOM": { - "modified": "2019-01-16T14:20:09.020Z", - "contributors": [ - "ziv" - ] - }, "Glossary": { "modified": "2020-10-07T11:09:57.316Z", "contributors": [ @@ -27,18 +21,6 @@ "chv" ] }, - "Glossary/מערך": { - "modified": "2019-04-14T20:37:05.958Z", - "contributors": [ - "MeirOverferst" - ] - }, - "Hebrew_Localization": { - "modified": "2019-01-16T14:19:44.573Z", - "contributors": [ - "ziv" - ] - }, "Learn": { "modified": "2020-07-16T22:43:41.705Z", "contributors": [ @@ -68,30 +50,6 @@ "RafeyIqbalRahman" ] }, - "Learn/HTML/טבלאות": { - "modified": "2020-07-16T22:25:11.770Z", - "contributors": [ - "fabio.rahamim" - ] - }, - "Learn/HTML/טפסים": { - "modified": "2020-07-16T22:20:57.218Z", - "contributors": [ - "fabio.rahamim" - ] - }, - "Learn/HTML/מבוא_לשפת_HTML": { - "modified": "2020-07-16T22:22:47.567Z", - "contributors": [ - "fabio.rahamim" - ] - }, - "Learn/HTML/פתרון_בעיות": { - "modified": "2020-07-16T22:22:28.745Z", - "contributors": [ - "fabio.rahamim" - ] - }, "Learn/JavaScript": { "modified": "2020-07-16T22:29:39.084Z", "contributors": [ @@ -169,12 +127,6 @@ "ItzikDabush" ] }, - "Learn/JavaScript/Building_blocks/תנאים": { - "modified": "2020-07-16T22:31:13.828Z", - "contributors": [ - "ItzikDabush" - ] - }, "Learn/JavaScript/First_steps": { "modified": "2020-07-16T22:29:50.868Z", "contributors": [ @@ -308,13 +260,6 @@ "eternalStudent" ] }, - "MDN/Community": { - "modified": "2019-09-11T08:02:56.848Z", - "contributors": [ - "SphinxKnight", - "dafbyte" - ] - }, "MDN/Contribute": { "modified": "2019-03-23T22:50:52.644Z", "contributors": [ @@ -339,12 +284,6 @@ "ExE-Boss" ] }, - "MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-03-18T21:21:11.313Z", - "contributors": [ - "dafbyte" - ] - }, "Mozilla": { "modified": "2019-03-23T23:27:26.144Z", "contributors": [ @@ -443,12 +382,6 @@ "AmitYaron" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות": { - "modified": "2020-10-15T22:24:49.961Z", - "contributors": [ - "AmitYaron" - ] - }, "Mozilla/Add-ons/WebExtensions/user_interface": { "modified": "2020-06-25T06:33:52.755Z", "contributors": [ @@ -461,12 +394,6 @@ "AmitYaron" ] }, - "Mozilla/Add-ons/WebExtensions/טיפום": { - "modified": "2019-08-30T04:55:04.968Z", - "contributors": [ - "AmitYaron" - ] - }, "Web": { "modified": "2019-03-23T23:14:11.445Z", "contributors": [ @@ -527,12 +454,6 @@ "teoli" ] }, - "Web/API/Geolocation/ממשק_שירותי_מיקום": { - "modified": "2019-03-23T23:11:11.069Z", - "contributors": [ - "omeriko" - ] - }, "Web/API/IndexedDB_API": { "modified": "2019-11-29T09:18:23.722Z", "contributors": [ @@ -935,12 +856,6 @@ "chv" ] }, - "Web/Hypertext_Markup_Language": { - "modified": "2019-09-09T08:06:46.920Z", - "contributors": [ - "fabio.rahamim" - ] - }, "Web/JavaScript": { "modified": "2020-03-12T19:36:23.440Z", "contributors": [ @@ -1103,19 +1018,104 @@ "fabio.rahamim" ] }, - "Web_Development": { - "modified": "2019-01-16T14:20:09.744Z", + "Web/API/Document_Object_Model": { + "modified": "2019-01-16T14:20:09.020Z", "contributors": [ "ziv" ] }, - "he": { + "Glossary/array": { + "modified": "2019-04-14T20:37:05.958Z", + "contributors": [ + "MeirOverferst" + ] + }, + "orphaned/he": { "modified": "2019-03-24T00:06:58.385Z", "contributors": [ "ziv" ] }, - "מושגים": { + "orphaned/Hebrew_Localization": { + "modified": "2019-01-16T14:19:44.573Z", + "contributors": [ + "ziv" + ] + }, + "Learn/HTML/Tables": { + "modified": "2020-07-16T22:25:11.770Z", + "contributors": [ + "fabio.rahamim" + ] + }, + "Learn/Forms": { + "modified": "2020-07-16T22:20:57.218Z", + "contributors": [ + "fabio.rahamim" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:47.567Z", + "contributors": [ + "fabio.rahamim" + ] + }, + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:28.745Z", + "contributors": [ + "fabio.rahamim" + ] + }, + "Learn/JavaScript/Building_blocks/conditionals": { + "modified": "2020-07-16T22:31:13.828Z", + "contributors": [ + "ItzikDabush" + ] + }, + "orphaned/MDN/Community": { + "modified": "2019-09-11T08:02:56.848Z", + "contributors": [ + "SphinxKnight", + "dafbyte" + ] + }, + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-03-18T21:21:11.313Z", + "contributors": [ + "dafbyte" + ] + }, + "Mozilla/Add-ons/WebExtensions/manifest.json/permissions": { + "modified": "2020-10-15T22:24:49.961Z", + "contributors": [ + "AmitYaron" + ] + }, + "Mozilla/Add-ons/WebExtensions/Tips": { + "modified": "2019-08-30T04:55:04.968Z", + "contributors": [ + "AmitYaron" + ] + }, + "conflicting/Web/Guide": { + "modified": "2019-01-16T14:20:09.744Z", + "contributors": [ + "ziv" + ] + }, + "Web/API/Geolocation_API": { + "modified": "2019-03-23T23:11:11.069Z", + "contributors": [ + "omeriko" + ] + }, + "orphaned/Web/Hypertext_Markup_Language": { + "modified": "2019-09-09T08:06:46.920Z", + "contributors": [ + "fabio.rahamim" + ] + }, + "orphaned/מושגים": { "modified": "2019-03-24T00:07:06.819Z", "contributors": [ "ziv" diff --git a/files/he/conflicting/web/guide/index.html b/files/he/conflicting/web/guide/index.html index addfa95a5f..f7277680cb 100644 --- a/files/he/conflicting/web/guide/index.html +++ b/files/he/conflicting/web/guide/index.html @@ -1,6 +1,7 @@ --- title: פיתוח לאינטרנט -slug: Web_Development +slug: conflicting/Web/Guide +original_slug: Web_Development ---

נושא זה מכיל את כל האספקטים הנוגעים לפיתוח אתרי אינטרנט ואפליקציות אינטרנט.

diff --git a/files/he/glossary/array/index.html b/files/he/glossary/array/index.html index 5dc44022de..ac367d5154 100644 --- a/files/he/glossary/array/index.html +++ b/files/he/glossary/array/index.html @@ -1,7 +1,8 @@ --- title: מערך -slug: Glossary/מערך +slug: Glossary/array translation_of: Glossary/array +original_slug: Glossary/מערך ---

 

diff --git a/files/he/learn/forms/index.html b/files/he/learn/forms/index.html index 87fe398bc4..6287ec1814 100644 --- a/files/he/learn/forms/index.html +++ b/files/he/learn/forms/index.html @@ -1,7 +1,8 @@ --- title: טפסי HTML -slug: Learn/HTML/טפסים +slug: Learn/Forms translation_of: Learn/Forms +original_slug: Learn/HTML/טפסים ---
{{LearnSidebar}}
diff --git a/files/he/learn/html/howto/index.html b/files/he/learn/html/howto/index.html index d136f6d552..496b8e18c4 100644 --- a/files/he/learn/html/howto/index.html +++ b/files/he/learn/html/howto/index.html @@ -1,7 +1,8 @@ --- title: השתמש ב-HTML כדי לפתור בעיות נפוצות -slug: Learn/HTML/פתרון_בעיות +slug: Learn/HTML/Howto translation_of: Learn/HTML/Howto +original_slug: Learn/HTML/פתרון_בעיות ---
{{LearnSidebar}}
diff --git a/files/he/learn/html/introduction_to_html/index.html b/files/he/learn/html/introduction_to_html/index.html index 4af3b86da6..d81e82b56b 100644 --- a/files/he/learn/html/introduction_to_html/index.html +++ b/files/he/learn/html/introduction_to_html/index.html @@ -1,7 +1,8 @@ --- title: מבוא לשפת HTML -slug: Learn/HTML/מבוא_לשפת_HTML +slug: Learn/HTML/Introduction_to_HTML translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Learn/HTML/מבוא_לשפת_HTML ---
{{LearnSidebar}}
diff --git a/files/he/learn/html/tables/index.html b/files/he/learn/html/tables/index.html index 8882fff3a0..a3e36d0d44 100644 --- a/files/he/learn/html/tables/index.html +++ b/files/he/learn/html/tables/index.html @@ -1,7 +1,8 @@ --- title: טבלאות HTML -slug: Learn/HTML/טבלאות +slug: Learn/HTML/Tables translation_of: Learn/HTML/Tables +original_slug: Learn/HTML/טבלאות ---
{{LearnSidebar}}
diff --git a/files/he/learn/javascript/building_blocks/conditionals/index.html b/files/he/learn/javascript/building_blocks/conditionals/index.html index 4c5c5dcc54..e76c9c16cb 100644 --- a/files/he/learn/javascript/building_blocks/conditionals/index.html +++ b/files/he/learn/javascript/building_blocks/conditionals/index.html @@ -1,6 +1,6 @@ --- title: משפטי תנאי - קבלת החלטות בקוד שלנו -slug: Learn/JavaScript/Building_blocks/תנאים +slug: Learn/JavaScript/Building_blocks/conditionals tags: - Conditionals - Switch @@ -12,6 +12,7 @@ tags: - משפטי תנאי - תנאים translation_of: Learn/JavaScript/Building_blocks/conditionals +original_slug: Learn/JavaScript/Building_blocks/תנאים ---
{{LearnSidebar}}
diff --git a/files/he/mozilla/add-ons/webextensions/manifest.json/permissions/index.html b/files/he/mozilla/add-ons/webextensions/manifest.json/permissions/index.html index 9221f0cf8c..b5ad7321b4 100644 --- a/files/he/mozilla/add-ons/webextensions/manifest.json/permissions/index.html +++ b/files/he/mozilla/add-ons/webextensions/manifest.json/permissions/index.html @@ -1,6 +1,6 @@ --- title: הרשאות -slug: Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות +slug: Mozilla/Add-ons/WebExtensions/manifest.json/permissions tags: - manifest.json - הפניה @@ -9,6 +9,7 @@ tags: - הרשאות - תוספים translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions +original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות ---

{{AddonSidebar}}

diff --git a/files/he/mozilla/add-ons/webextensions/tips/index.html b/files/he/mozilla/add-ons/webextensions/tips/index.html index 57e18c26fa..35b36bd5ae 100644 --- a/files/he/mozilla/add-ons/webextensions/tips/index.html +++ b/files/he/mozilla/add-ons/webextensions/tips/index.html @@ -1,6 +1,6 @@ --- title: טיפים וטריקים -slug: Mozilla/Add-ons/WebExtensions/טיפום +slug: Mozilla/Add-ons/WebExtensions/Tips tags: - ECMAScript - אקמהסקריפט @@ -9,6 +9,7 @@ tags: - טיפים וטריקים - טריקים translation_of: Mozilla/Add-ons/WebExtensions/Tips +original_slug: Mozilla/Add-ons/WebExtensions/טיפום ---

{{AddonSidebar}}

diff --git a/files/he/orphaned/he/index.html b/files/he/orphaned/he/index.html index 8445c2fdfe..1fd6247132 100644 --- a/files/he/orphaned/he/index.html +++ b/files/he/orphaned/he/index.html @@ -1,6 +1,7 @@ --- title: MDN -slug: he +slug: orphaned/he +original_slug: he ---

ברוכים הבאים לרשת המפתחים של מוזילה

diff --git a/files/he/orphaned/hebrew_localization/index.html b/files/he/orphaned/hebrew_localization/index.html index 6b20079e38..958841b982 100644 --- a/files/he/orphaned/hebrew_localization/index.html +++ b/files/he/orphaned/hebrew_localization/index.html @@ -1,6 +1,7 @@ --- title: Hebrew Localization -slug: Hebrew_Localization +slug: orphaned/Hebrew_Localization +original_slug: Hebrew_Localization ---

Special Hebrew Templates

Instead of jsOverrides, use HEjsOverrides

diff --git a/files/he/orphaned/mdn/community/index.html b/files/he/orphaned/mdn/community/index.html index dce5bcd87b..944e09e5ff 100644 --- a/files/he/orphaned/mdn/community/index.html +++ b/files/he/orphaned/mdn/community/index.html @@ -1,11 +1,12 @@ --- title: הצטרפות לקהילת מסמכי הרשת של MDN -slug: MDN/Community +slug: orphaned/MDN/Community tags: - מדריך - נחיתה - קהילה translation_of: MDN/Community +original_slug: MDN/Community ---
{{MDNSidebar}}
diff --git a/files/he/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/he/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html index 926b8e8d02..d07381e39e 100644 --- a/files/he/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ b/files/he/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -1,11 +1,12 @@ --- title: איך ליצור חשבון MDN -slug: MDN/Contribute/Howto/Create_an_MDN_account +slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account tags: - למתחילים - מדריך - תיעוד translation_of: MDN/Contribute/Howto/Create_an_MDN_account +original_slug: MDN/Contribute/Howto/Create_an_MDN_account ---
{{MDNSidebar}}
diff --git a/files/he/orphaned/web/hypertext_markup_language/index.html b/files/he/orphaned/web/hypertext_markup_language/index.html index 13d1acabd9..f9a9393a9e 100644 --- a/files/he/orphaned/web/hypertext_markup_language/index.html +++ b/files/he/orphaned/web/hypertext_markup_language/index.html @@ -1,6 +1,7 @@ --- title: Hypertext Markup Language -slug: Web/Hypertext_Markup_Language +slug: orphaned/Web/Hypertext_Markup_Language +original_slug: Web/Hypertext_Markup_Language ---

HTML5_Logo_128.png

diff --git "a/files/he/orphaned/\327\236\327\225\327\251\327\222\327\231\327\235/index.html" "b/files/he/orphaned/\327\236\327\225\327\251\327\222\327\231\327\235/index.html" index a93c4d7a41..665c8b31bc 100644 --- "a/files/he/orphaned/\327\236\327\225\327\251\327\222\327\231\327\235/index.html" +++ "b/files/he/orphaned/\327\236\327\225\327\251\327\222\327\231\327\235/index.html" @@ -1,6 +1,7 @@ --- title: מושגים -slug: מושגים +slug: orphaned/מושגים +original_slug: מושגים ---

רשימת מושגים והתרגומים שנבחרו עבורם. דיון בנוגע לתרגומים מתנהל באזור ה"שיחה".

diff --git a/files/he/web/api/document_object_model/index.html b/files/he/web/api/document_object_model/index.html index 136335eb20..80e3102138 100644 --- a/files/he/web/api/document_object_model/index.html +++ b/files/he/web/api/document_object_model/index.html @@ -1,6 +1,7 @@ --- title: DOM -slug: DOM +slug: Web/API/Document_Object_Model +original_slug: DOM ---

 

diff --git a/files/he/web/api/geolocation_api/index.html b/files/he/web/api/geolocation_api/index.html index f87dbb0f0b..68994fa141 100644 --- a/files/he/web/api/geolocation_api/index.html +++ b/files/he/web/api/geolocation_api/index.html @@ -1,7 +1,8 @@ --- title: ממשק שירותי מיקום -slug: Web/API/Geolocation/ממשק_שירותי_מיקום +slug: Web/API/Geolocation_API translation_of: Web/API/Geolocation_API +original_slug: Web/API/Geolocation/ממשק_שירותי_מיקום ---

ממשק שירותי המיקום, geolocation API, מאפשר למשתמש לשתף את המיקום שלו עם אפליקציות ברשת. כדי להגן על הפרטיות, המשתמש נדרש להסכים לשתף את שירותי המיקום שלו.

אובייקט ה- geolocation 

-- cgit v1.2.3-54-g00ecf