JavaScript: Introduction to ScriptingJavaScript: مقدمة في البرمجة النصية
مقدمة الفصل
ماذا ستتعلم في هذا الفصل
- Write simple JavaScript programs.
- Use input and output statements.
- Learn basic memory concepts.
- Use arithmetic operators.
- Learn the precedence of arithmetic operators.
- Write decision-making statements to choose among alternative courses of action.
- Use relational and equality operators to compare data items.
أقسام الفصل
- 1Client-side vs. server-side scripting and JavaScriptالبرمجة في جهة العميل والخادم و JavaScript
- 2The Browser Object Model and the Document Object Modelنموذج كائنات المتصفح ونموذج كائنات المستند
- 3Your first script: the script elementأول سكربت: العنصر script
- 4The document object, methods, writeln and writeالكائن document والطريقتان writeln و write
- 5Concatenation, alert dialogs and escape sequencesالضم ومربع التنبيه وتسلسلات الهروب
- 6prompt dialogs, variables and parseIntمربع prompt والمتغيرات و parseInt
- 7Arithmetic and operator precedenceالعمليات الحسابية وأسبقيتها
- 8Decision making: if, equality and relational operators, Dateاتخاذ القرار: if وعمليات المساواة والعلاقة و Date
تلميح: استخدم أسهم لوحة المفاتيح للتنقل بين الشرائح.
Client-side and server-side scriptingالعميل والخادم
Client-side vs. server-side scripting and JavaScript
Client sideجهة العميل
- Runs in the web browser used to view the pages
- Executed on local computers after the pages are loaded
- JavaScript
Server sideجهة الخادم
- Runs on the server that hosts the website
- The browser cannot understand PHP — only JavaScript, HTML (the structure of the page) and CSS.
- JavaScript is a scripting language used to enhance the functionality and appearance of web pages; it interacts with the page through events (e.g., calculators).
- Scripts can be embedded in web pages or kept in a separate file.
سؤال سريع
Client-side vs. server-side scripting and JavaScript
BOM and DOMBOM و DOM
The Browser Object Model and the Document Object Model
Used to interact with the browser; its properties and methods let JavaScript interact with the web browser.
Important BOM objects
- document
- location
- history
- navigator
- screen
- frames
Deals with the document — the HTML elements themselves — organized in a tree structure (DOM tree). Every element is an object (tree node) with properties and methods; the browser creates the DOM tree when the page is loaded.
Document
Root element: <HTML>
Element: <HEAD>
Element: <TITLE>
Text: "Your Title"
Element: <SCRIPT>
Attribute: "SRC"
Element: <BODY>
Element: <DIV>
Text: "Your Div Text"
Element: <P>
Text: "Your Para Text"
سؤال سريع
The Browser Object Model and the Document Object Model
Your first scriptأول سكربت
- All major web browsers contain JavaScript interpreters.
- JavaScripts often appear in the <head> section — the browser interprets the head first.
- The <script> tag indicates that the text which follows is part of a script; type gives the MIME type and language (e.g., text/javascript) and may be omitted in HTML5.
- Text between double quotation marks is a string literal.
Objects, writeln and writeالكائنات و writeln و write
The document object, methods, writeln and write
Resides in memory and contains information used by the script: attributes (data) and behaviors (methods). The document object represents the HTML5 document being displayed.
- The parentheses after a method name contain its arguments.
- Every statement should end with a semicolon (statement terminator), although none is required.
- JavaScript is case sensitive — wrong case is a syntax error.
- JavaScript is typically placed in a separate file to make it more reusable.
writeln
- Writes a line of HTML5 text in the document
write
- Displays a string like writeln
- Does not move the output cursor to the beginning of the next line
سؤال سريع
The document object, methods, writeln and write
Concatenation, alert and escape sequencesالضم و alert والهروب
Concatenation, alert dialogs and escape sequences
Joins two strings together.
Displays an alert dialog that pops up to grab the user's attention; its argument is the string to display.
A backslash (\) combined with the next character in a string; \n is the newline character.
| Escape sequenceالتسلسل | Description (Fig. 6.4)الوصف |
|---|---|
| \n | New line — position the cursor at the beginning of the next line |
| \t | Horizontal tab — move the cursor to the next tab stop |
| \\ | Backslash — represent a backslash character in a string |
| \" | Double quote — a double-quote character in a string contained in double quotes |
| \' | Single quote — a single-quote character in a string |
سؤال سريع
Concatenation, alert dialogs and escape sequences
prompt and variablesprompt والمتغيرات
prompt dialogs, variables and parseInt
Scripting generates page content when it is shown — such pages are dynamic, as opposed to static.
Displays a dialog into which the user can type a value. First argument: the message; optional second argument: the default string in the text field.
A location in memory where a value can be stored. It has a name, type and value and should be declared with var.
Letters, digits, underscores (_) and dollar signs ($); does not begin with a digit; not a reserved keyword.
// single-line; /* … */ multiline. Ignored by the interpreter.
سؤال سريع
prompt dialogs, variables and parseInt
Assignment, null and parseIntالإسناد و null و parseInt
prompt dialogs, variables and parseInt
Assigns a value to a variable. It is a binary operator (two operands).
Signifies that a variable has no value. It is not a string literal; writing it to the document displays the word "null".
Converts its string argument to an integer.
سؤال سريع
prompt dialogs, variables and parseInt
Arithmeticالعمليات الحسابية
- +, -, *, / and % are binary operators.
- The remainder operator % yields the remainder after division.
- Arithmetic expressions are written in straight-line form; parentheses group expressions.
| Operator(s)العامل | Operation(s)العملية | Order of evaluation (Fig. 6.12)ترتيب التقييم |
|---|---|---|
| *, / or % | Multiplication, Division, Remainder |
|
| + or - | Addition, Subtraction |
|
سؤال سريع
Arithmetic and operator precedence
Decision making with ifجملة if
Decision making: if, equality and relational operators, Date
Makes a decision based on the truth or falsity of a condition: if true, the body executes; if false, it does not.
| Algebraicجبري | JavaScriptJavaScript | Sampleمثال | Meaningالمعنى |
|---|---|---|---|
| = | == | x == y | x is equal to y |
| ≠ | != | x != y | x is not equal to y |
| > | > | x > y | x is greater than y |
| < | < | x < y | x is less than y |
| ≥ | >= | x >= y | x is greater than or equal to y |
| ≤ | <= | x <= y | x is less than or equal to y |
- Equality operators have the same precedence, lower than the relational operators; they associate left to right.
- The Date object acquires the current local time: new Date().
سؤال سريع
Decision making: if, equality and relational operators, Date
الخلاصة
أنهيت الدرس
الخطوة التالية: ثبّت المعلومات بالبطاقات، ثم اختبر نفسك بالأسئلة.
ما راجعته في هذا الدرس
- Client-side vs. server-side scripting and JavaScriptالبرمجة في جهة العميل والخادم و JavaScript
- The Browser Object Model and the Document Object Modelنموذج كائنات المتصفح ونموذج كائنات المستند
- Your first script: the script elementأول سكربت: العنصر script
- The document object, methods, writeln and writeالكائن document والطريقتان writeln و write
- Concatenation, alert dialogs and escape sequencesالضم ومربع التنبيه وتسلسلات الهروب
- prompt dialogs, variables and parseIntمربع prompt والمتغيرات و parseInt
- Arithmetic and operator precedenceالعمليات الحسابية وأسبقيتها
- Decision making: if, equality and relational operators, Dateاتخاذ القرار: if وعمليات المساواة والعلاقة و Date