unslug tr: move

5 files changed, 1027 insertions, 0 deletions

diff --git a/files/tr/learn/javascript/first_steps/a_first_splash/index.html b/files/tr/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..8cab0bbcf2
--- /dev/null
+++ b/files/tr/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,600 @@
+---
+title: Javascript'e ilk giriş
+slug: Öğren/JavaScript/First_steps/Javascripte_giris
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Artık JavaScript teorisi ve onunla neler yapabileceğiniz hakkında bir şeyler öğrendiniz, tamamen pratik bir öğretici aracılığıyla size JavaScript'in temel özellikleri hakkında hızlandırılmış bir kurs vereceğiz. Burada adım adım basit bir "Sayıyı tahmin et" oyunu oluşturacaksınız.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To have a first bit of experience at writing some JavaScript, and gain at least a basic understanding of what writing a JavaScript program involves.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You won't be expected to understand all of the code in detail immediately — we just want to introduce you to the high-level concepts for now, and give you an idea of how JavaScript (and other programming languages) work. In subsequent articles, you'll revisit all these features in a lot more detail!</p>
+
+<div class="note">
+<p>Note: Many of the code features you'll see in JavaScript are the same as in other programming languages — functions, loops, etc. The code syntax looks different, but the concepts are still largely the same.</p>
+</div>
+
+<h2 id="Thinking_like_a_programmer">Thinking like a programmer</h2>
+
+<p>One of the hardest things to learn in programming is not the syntax you need to learn, but how to apply it to solve real world problems. You need to start thinking like a programmer — this generally involves looking at descriptions of what your program needs to do, working out what code features are needed to achieve those things, and how to make them work together.</p>
+
+<p>This requires a mixture of hard work, experience with the programming syntax, and practice — plus a bit of creativity. The more you code, the better you'll get at it. We can't promise that you'll develop "programmer brain" in five minutes, but we will give you plenty of opportunity to practice thinking like a programmer throughout the course.</p>
+
+<p>With that in mind, let's look at the example we'll be building up in this article, and review the general process of dissecting it into tangible tasks.</p>
+
+<h2 id="Example_—_Guess_the_number_game">Example — Guess the number game</h2>
+
+<p>In this article we'll show you how to build up the simple game you can see below:</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Number guessing game&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Number guessing game&lt;/h1&gt;
+    &lt;p&gt;We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Submit guess" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;script&gt;
+    // Your JavaScript goes here
+    let randomNumber = Math.floor(Math.random() * 100) + 1;
+    const guesses = document.querySelector('.guesses');
+    const lastResult = document.querySelector('.lastResult');
+    const lowOrHi = document.querySelector('.lowOrHi');
+    const guessSubmit = document.querySelector('.guessSubmit');
+    const guessField = document.querySelector('.guessField');
+    let guessCount = 1;
+    let resetButton;
+
+    function checkGuess() {
+      let userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = 'Previous guesses: ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = 'Congratulations! You got it right!';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!!GAME OVER!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = 'Wrong!';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent = 'Last guess was too low!' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = 'Last guess was too high!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = 'Start new game';
+      document.body.append(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      const resetParas = document.querySelectorAll('.resultParas p');
+      for(let i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent = '';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value = '';
+      guessField.focus();
+      lastResult.style.backgroundColor = 'white';
+      randomNumber = Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Have a go at playing it — familiarize yourself with the game before you move on.</p>
+
+<p>Let's imagine your boss has given you the following brief for creating this game:</p>
+
+<blockquote>
+<p>I want you to create a simple guess the number type game. It should choose a random number between 1 and 100, then challenge the player to guess the number in 10 turns. After each turn the player should be told if they are right or wrong, and if they are wrong, whether the guess was too low or too high. It should also tell the player what numbers they previously guessed. The game will end once the player guesses correctly, or once they run out of turns. When the game ends, the player should be given an option to start playing again.</p>
+</blockquote>
+
+<p>Upon looking at this brief, the first thing we can do is to start breaking it down into simple actionable tasks, in as much of a programmer mindset as possible:</p>
+
+<ol>
+ <li>Generate a random number between 1 and 100.</li>
+ <li>Record the turn number the player is on. Start it on 1.</li>
+ <li>Provide the player with a way to guess what the number is.</li>
+ <li>Once a guess has been submitted first record it somewhere so the user can see their previous guesses.</li>
+ <li>Next, check whether it is the correct number.</li>
+ <li>If it is correct:
+  <ol>
+   <li>Display congratulations message.</li>
+   <li>Stop the player from being able to enter more guesses (this would mess the game up).</li>
+   <li>Display control allowing the player to restart the game.</li>
+  </ol>
+ </li>
+ <li>If it is wrong and the player has turns left:
+  <ol>
+   <li>Tell the player they are wrong.</li>
+   <li>Allow them to enter another guess.</li>
+   <li>Increment the turn number by 1.</li>
+  </ol>
+ </li>
+ <li>If it is wrong and the player has no turns left:
+  <ol>
+   <li>Tell the player it is game over.</li>
+   <li>Stop the player from being able to enter more guesses (this would mess the game up).</li>
+   <li>Display control allowing the player to restart the game.</li>
+  </ol>
+ </li>
+ <li>Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.</li>
+</ol>
+
+<p>Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.</p>
+
+<h3 id="Initial_setup">Initial setup</h3>
+
+<p>To begin this tutorial, we'd like you to make a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> file (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>). Open it in both your text editor and your web browser. At the moment you'll see a simple heading, paragraph of instructions and form for entering a guess, but the form won't currently do anything.</p>
+
+<p>The place where we'll be adding all our code is inside the {{htmlelement("script")}} element at the bottom of the HTML:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+
+  // Your JavaScript goes here
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="Adding_variables_to_store_our_data">Adding variables to store our data</h3>
+
+<p>Let's get started. First of all, add the following lines inside your {{htmlelement("script")}} element:</p>
+
+<pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+const guesses = document.querySelector('.guesses');
+const lastResult = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+
+const guessSubmit = document.querySelector('.guessSubmit');
+const guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;</pre>
+
+<p>This section of the code sets up the variables and constants we need to store the data our program will use. Variables are basically containers for values (such as numbers, or strings of text). You create a variable with the keyword <code>let</code> (or <code>var</code>) followed by a name for your variable (you'll read more about the difference between the keywords in a <a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">future article</a>). Constants are used to store values that are immutable or can't be changed and are created with the keyword <code>const</code>. In this case, we are using constants to store references to parts of our user interface; the text inside some of them might change, but the HTML elements referenced stay the same.</p>
+
+<p>You can assign a value to your variable or constant with an equals sign (<code>=</code>) followed by the value you want to give it.</p>
+
+<p>In our example:</p>
+
+<ul>
+ <li>The first variable — <code>randomNumber</code> — is assigned a random number between 1 and 100, calculated using a mathematical algorithm.</li>
+ <li>The first three constants are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code (note how they are inside a <code>&lt;div&gt;</code> element, which is itself used to select all three later on for resetting, when we restart the game):
+  <pre class="brush: html notranslate">&lt;div class="resultParas"&gt;
+  &lt;p class="guesses"&gt;&lt;/p&gt;
+  &lt;p class="lastResult"&gt;&lt;/p&gt;
+  &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+ </li>
+ <li>The next two constants store references to the form text input and submit button and are used to control submitting the guess later on.
+  <pre class="brush: html notranslate">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You'll learn a lot more about variables/constants later on in the course, starting with the <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">next article</a>.</p>
+</div>
+
+<h3 id="Functions">Functions</h3>
+
+<p>Next, add the following below your previous JavaScript:</p>
+
+<pre class="brush: js notranslate">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p>Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword <code>function</code>, followed by a name, with parentheses put after it. After that we put two curly braces (<code>{ }</code>). Inside the curly braces goes all the code that we want to run whenever we call the function.</p>
+
+<p>When we want to run the code, we type the name of the function followed by the parentheses.</p>
+
+<p>Let's try that now. Save your code and refresh the page in your browser. Then go into the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, and enter the following line:</p>
+
+<pre class="brush: js notranslate">checkGuess();</pre>
+
+<p>After pressing <kbd>Return</kbd>/<kbd>Enter</kbd>, you should see an alert come up that says "<samp>I am a placeholder</samp>"; we have defined a function in our code that creates an alert whenever we call it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You'll learn a lot more about functions <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">later in the course</a>.</p>
+</div>
+
+<h3 id="Operators">Operators</h3>
+
+<p>JavaScript operators allow us to perform tests, do math, join strings together, and other such things.</p>
+
+<p>If you haven't already done so, save your code, refresh the page in your browser, and open the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing <kbd>Return</kbd>/<kbd>Enter</kbd> after each one, and see what results they return.</p>
+
+<p>First let's look at arithmetic operators, for example:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Addition</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Subtraction</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplication</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Division</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can also use the <code>+</code> operator to join text strings together (in programming, this is called <em>concatenation</em>). Try entering the following lines, one at a time:</p>
+
+<pre class="brush: js notranslate">let name = 'Bingo';
+name;
+let hello = ' says hello!';
+hello;
+let greeting = name + hello;
+greeting;</pre>
+
+<p>There are also some shortcut operators available, called augmented <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">assignment operators</a>. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:</p>
+
+<pre class="brush: js notranslate">name += ' says hello!';</pre>
+
+<p>This is equivalent to</p>
+
+<pre class="brush: js notranslate">name = name + ' says hello!';</pre>
+
+<p>When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparison operators</a>. For example:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Strict equality (is it exactly the same?)</td>
+   <td>
+    <pre class="brush: js notranslate">
+5 === 2 + 4 // false
+'Chris' === 'Bob' // false
+5 === 2 + 3 // true
+2 === '2' // false; number versus string
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Non-equality (is it not the same?)</td>
+   <td>
+    <pre class="brush: js notranslate">
+5 !== 2 + 4 // true
+'Chris' !== 'Bob' // true
+5 !== 2 + 3 // false
+2 !== '2' // true; number versus string
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Less than</td>
+   <td>
+    <pre class="brush: js notranslate">
+6 &lt; 10 // true
+20 &lt; 10 // false</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Greater than</td>
+   <td>
+    <pre class="brush: js notranslate">
+6 &gt; 10 // false
+20 &gt; 10  // true</pre>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Conditionals">Conditionals</h3>
+
+<p>Returning to our <code>checkGuess()</code> function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.</p>
+
+<p>At this point, replace your current <code>checkGuess()</code> function with this version instead:</p>
+
+<pre class="brush: js notranslate">function checkGuess() {
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>This is a lot of code — phew! Let's go through each section and explain what it does.</p>
+
+<ul>
+ <li>The first line (line 2 above) declares a variable called <code>userGuess</code> and sets its value to the current value entered inside the text field. We also run this value through the built-in <code>Number()</code> constructor, just to make sure the value is definitely a number.</li>
+ <li>Next, we encounter our first conditional code block (lines 3–5 above). A conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. It looks a bit like a function, but it isn't. The simplest form of conditional block starts with the keyword <code>if</code>, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns <code>true</code>, we run the code inside the curly braces. If not, we don't, and move on to the next bit of code. In this case the test is testing whether the <code>guessCount</code> variable is equal to <code>1</code> (i.e. whether this is the player's first go or not):
+  <pre class="brush: js notranslate">guessCount === 1</pre>
+  If it is, we make the guesses paragraph's text content equal to "<samp>Previous guesses: </samp>". If not, we don't.</li>
+ <li>Line 6 appends the current <code>userGuess</code> value onto the end of the <code>guesses</code> paragraph, plus a blank space so there will be a space between each guess shown.</li>
+ <li>The next block (lines 8–24 above) does a few checks:
+  <ul>
+   <li>The first <code>if(){ }</code> checks whether the user's guess is equal to the <code>randomNumber</code> set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called <code>setGameOver()</code>, which we'll discuss later.</li>
+   <li>Now we've chained another test onto the end of the last one using an <code>else if(){ }</code> structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.</li>
+   <li>The final block chained onto the end of this code (the <code>else { }</code>) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.</li>
+  </ul>
+ </li>
+ <li>The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the <code>guessCount</code> variable so the player uses up their turn (<code>++</code> is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.</li>
+</ul>
+
+<h3 id="Events">Events</h3>
+
+<p>At this point we have a nicely implemented <code>checkGuess()</code> function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an <strong>event</strong>. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p>
+
+<p>Add the following line below your <code>checkGuess()</code> function:</p>
+
+<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p>
+
+<p>Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p>
+
+<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3>
+
+<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p>
+
+<pre class="brush: js notranslate">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.append(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li>
+ <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "Start new game", and add it to the bottom of our existing HTML.</li>
+ <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li>
+</ul>
+
+<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p>
+
+<pre class="brush: js notranslate">function resetGame() {
+  guessCount = 1;
+
+  const resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:</p>
+
+<ul>
+ <li>Puts the <code>guessCount</code> back down to 1.</li>
+ <li>Empties all the text out of the information paragraphs. We select all paragraphs inside <code>&lt;div class="resultParas"&gt;&lt;/div&gt;</code>, then loop through each one, setting their <code>textContent</code> to <code>''</code> (an empty string).</li>
+ <li>Removes the reset button from our code.</li>
+ <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li>
+ <li>Removes the background color from the <code>lastResult</code> paragraph.</li>
+ <li>Generates a new random number so that you are not just guessing the same number again!</li>
+</ul>
+
+<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p>
+
+<p>All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.</p>
+
+<h3 id="Loops">Loops</h3>
+
+<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.</p>
+
+<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p>
+
+<pre class="brush: js notranslate">for (let i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p>
+
+<ol>
+ <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li>
+ <li><strong>A condition</strong>: Here we have specified <code>i &lt; 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li>
+ <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li>
+</ol>
+
+<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p>
+
+<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>This code creates a variable containing a list of all the paragraphs inside <code>&lt;div class="resultParas"&gt;</code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p>
+
+<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3>
+
+<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>let resetButton;</code> line near the top of your JavaScript, then save your file:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.</p>
+
+<p>Let's analyze what's going on here in a bit more detail. In JavaScript, most of the items you will manipulate in your code are objects. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.</p>
+
+<p>In this particular case, we first created a <code>guessField</code> constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:</p>
+
+<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre>
+
+<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p>
+
+<p>Because <code>guessField</code> now contains a reference to an {{htmlelement("input")}} element, it now has access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is <code>focus()</code>, so we can now use this line to focus the text input:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> constant contains a reference to a {{htmlelement("p")}} element, and the <code>guessCount</code> variable contains a number.</p>
+
+<h3 id="Playing_with_browser_objects">Playing with browser objects</h3>
+
+<p>Let's play with some browser objects a bit.</p>
+
+<ol>
+ <li>First of all, open up your program in a browser.</li>
+ <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li>
+ <li>Type <code>guessField</code> into the console and the console shows you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!</li>
+ <li>Now type in the following:
+  <pre class="brush: js notranslate">guessField.value = 'Hello';</pre>
+  The <code>value</code> property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!</li>
+ <li>Now try typing <code>guesses</code> into the console and pressing return. The console shows you that the variable contains a {{htmlelement("p")}} element.</li>
+ <li>Now try entering the following line:
+  <pre class="brush: js notranslate">guesses.value</pre>
+  The browser returns <code>undefined</code>, because paragraphs don't have the <code>value</code> property.</li>
+ <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this:
+  <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>Now for some fun stuff. Try entering the below lines, one by one:
+  <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  Every element on a page has a <code>style</code> property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.</li>
+</ol>
+
+<h2 id="Finished_for_now...">Finished for now...</h2>
+
+<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/tr/learn/javascript/first_steps/index.html b/files/tr/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..cde2569c69
--- /dev/null
+++ b/files/tr/learn/javascript/first_steps/index.html
@@ -0,0 +1,61 @@
+---
+title: JavaScript First Steps
+slug: Öğren/JavaScript/First_steps
+tags:
+  - türkçe
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you don't need any previous JavaScript knowledge, but you should have some familiarity with HTML and CSS. You are advised to work through the following modules before starting on JavaScript:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 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 <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt>
+ <dd>Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt>
+ <dd>Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt>
+ <dd>When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt>
+ <dd>After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt>
+ <dd>At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt>
+ <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt>
+ <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt>
+ <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt>
+ <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
+ <dd>An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.</dd>
+</dl>
diff --git a/files/tr/learn/javascript/index.html b/files/tr/learn/javascript/index.html
new file mode 100644
index 0000000000..665e95cc85
--- /dev/null
+++ b/files/tr/learn/javascript/index.html
@@ -0,0 +1,56 @@
+---
+title: JavaScript
+slug: Öğren/JavaScript
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} web sayfalarında karmaşık şeyler yapmanıza olanak sağlayan bir programlama dilidir. Ne zaman bir web sayfası ekranınızda sabit durup ve size sabit bilgiler sunmanın fazlasını yaptığında, zaman zaman size içerik güncellemeleri, ya da etkileşilimli haritalar, ya da animasyonlu iki ve üç boyutlu grafikler, ya da kayan video müzik kutuları vs. gösterdiğinde, JavaScript'in muhtemelen bu işe dahil olduğundan emin olabilirsiniz.</p>
+
+<h2 id="Öğrenme_yolu">Öğrenme yolu</h2>
+
+<p>JavaScript'i öğrenmek ilgili teknolojiler olan <a href="/tr/docs/Learn/HTML">HTML</a> ve <a href="/tr/docs/Learn/CSS">CSS</a>'e kıyasla daha zor olabilir. JavaScript'i öğrenmeye başlamadan önce, bu iki teknolojiye ve belki diğer benzer teknolojilere aşina olmanız şiddetle önerilir. Aşağıdaki modüllerle işe başlayabilirsiniz:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Web'e Başlangıç</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">HTML'e Giriş</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS'e Giriş</a></li>
+</ul>
+
+<p>Ayrıca diğer programlama dilleriyle önceden edindiğiniz tecrübelerin size yardımı dokunacaktır.</p>
+
+<p>JavaScript'in temellerine aşina olduktan sonra, daha ileri seviyedeki konuları öğrenmeye başlayabilirsiniz, örneğin:</p>
+
+<ul>
+ <li>Derinlemesine JavaScript, bizim <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript kılavuzu</a>muzde öğretildiği gibi.</li>
+ <li><a href="/en-US/docs/Web/API">HTML5 UPAs (Uygulama Programlama Ayayüzleri)</a></li>
+</ul>
+
+<h2 id="Modüller">Modüller</h2>
+
+<p>Bu konu, önerilen çalışma sırasıyla, aşağıdaki modülleri içerir.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript ilk adımlar</a></dt>
+ <dd>İlk JavaScript modülümüzde, sizi ilk JavaScript yazma tecrübesine götürmedeen önce, ilk olarak "JavaScript nedir?", "Neye benzer?", ve "Neler yapabilir?" gibi temel sorulara cevap veriyoruz. Daha sonra, değişkenler, harf dizileri, sayılar ve diziler gibi temel JavaScript özelliklerini detaylı bir şekilde tartışıyoruz.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript yapı taşları</a></dt>
+ <dd>Bu modülde, JavaScript'in tüm temel özelliklerini ele almaya devam ederek dikkatimizi koşullu ifadeler, döngüler, işlevler ve olaylar gibi sık karşılaşılan kod bloğu türlerine çeviriyoruz. Bunları zaten kursta gördünüz, ancak yalnızca yüzeysel - burada hepsini açıkça tartışacağız.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript nesnelerine giriş</a></dt>
+ <dd>JavaScript'te, dizeler ve diziler gibi temel JavaScript özelliklerinden, JavaScript üzerine oluşturulan tarayıcı API'lerine kadar çoğu şey nesnelerdir. İlgili işlevleri ve değişkenleri verimli paketler halinde kapsüllemek için kendi nesnelerinizi bile oluşturabilirsiniz. Dil bilginizle daha ileri gitmek ve daha verimli kod yazmak istiyorsanız JavaScript'in nesne yönelimli doğasını anlamak önemlidir, bu nedenle size yardımcı olmak için bu modülü sağladık. Burada nesne teorisini ve sözdizimini ayrıntılı olarak öğretiyor, kendi nesnelerinizi nasıl yaratacağınıza bakıyoruz ve JSON verilerinin ne olduğunu ve onunla nasıl çalışılacağını açıklıyoruz.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asenkron JavaScript</a></dt>
+ <dd>
+ <p>Bu modülde asenkron JavaScript'e, bunun neden önemli olduğuna ve bir sunucudan kaynakların alınması gibi olası engelleme işlemlerini etkili bir şekilde idare etmek için nasıl kullanılabileceğine bir göz atacağız.</p>
+ </dd>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">İstemci tarafı web API'leri</a></dt>
+ <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt>
+ <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt>
+ <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/tr/learn/javascript/objects/basics/index.html b/files/tr/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..bf6e7892e0
--- /dev/null
+++ b/files/tr/learn/javascript/objects/basics/index.html
@@ -0,0 +1,257 @@
+---
+title: JavaScript object basics
+slug: Öğren/JavaScript/Objeler/Basics
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Bu makalede JavaScript'in nesne sözdizim kurallarını inceleyeceğiz ve daha önceden gördüğümüz diğer özellikleri ziyaret edip bu işlevlerin aslında bir nesne olduğunu tekrar edeceğiz.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Gereksinimler:</th>
+   <td>Temel bilgisayar okuryazarlığı, temel HMTL ve CSS bilgisi ve JavaScript temelleri (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">İlk adımlar </a>ve <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">yapı taşları</a>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>Nesneye yönelik programlama ile ilgili temel teoriyi anlamak ve bunun JavaScript'teki ("Javascript'te birçok şey nesnedir") sözü ile ilişkisini keşfetmek ve JavaScript nesneleri ile çalışmak.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Nesne_temelleri">Nesne temelleri</h2>
+
+<p>Bir nesne birtakım ilişkili veri ve/veya fonksiyonalite (genellikle birden fazla değişken ve fonksiyondan oluşur — ve bunlar nesne içerisinde olduklarında nesnenin niteliği (property) ve fonksiyonları adını alırlar.) Bir örnek üzerinde çalışarak nasıl olduklarını anlayalım.</p>
+
+<p>Başlamak için <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> dosyasını kopyalayın. Bu dosya çok küçük bir içeriğe sahip —  bir {{HTMLElement("script")}} elementi içine kaynak kodumuzu yazacağız. Bunu temel nesne sözdizimini anlamak için baz alacağız. Bu örnek üzerinde çalışırken <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">geliştirici JavaScript konsolunu</a> açık ve komutları yazmaya hazır şekilde tutun.</p>
+
+<p>Nesne oluşturmak, Javascript'te bir çok konuda olduğu gibi bir değişken tanımlamak ile başlar.  Aşağıdaki Javascript kodunu dosyasına kopyalayarak dosyayı kaydedin ve tarayıcınızı yenileyin.</p>
+
+<pre class="brush: js">const person = {};</pre>
+
+<p>Şimdi tarayıcınızın <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">JavaScript konsolunu</a> açın, <code>person</code> yazın, ve <kbd>Enter</kbd>/<kbd>Return </kbd>tuşlarına basın. Aşağıdaki satırlara benzer açıklamalar ile karşılaşacaksınız. </p>
+
+<pre class="brush: js">[object Object]
+Object { }
+{ }
+</pre>
+
+<p>Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:</p>
+
+<pre class="brush: js">const person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:</p>
+
+<pre class="brush: js">person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.</p>
+</div>
+
+<p>So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. <code>name</code> and <code>age</code> above), and a value (e.g. <code>['Bob', 'Smith']</code> and <code>32</code>). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:</p>
+
+<pre class="brush: js">const objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};</pre>
+
+<p>The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's <strong>properties</strong>. The last two items are functions that allow the object to do something with that data, and are referred to as the object's <strong>methods</strong>.</p>
+
+<p>An object like this is referred to as an <strong>object literal</strong> — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.</p>
+
+<p>It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.</p>
+
+<h2 id="Dot_notation">Dot notation</h2>
+
+<p>Above, you accessed the object's properties and methods using <strong>dot notation</strong>. The object name (person) acts as the <strong>namespace</strong> — it must be entered first to access anything <strong>encapsulated</strong> inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Sub-namespaces">Sub-namespaces</h3>
+
+<p>It is even possible to make the value of an object member another object. For example, try changing the name member from</p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>to</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>Here we are effectively creating a <strong>sub-namespace</strong>. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>Important</strong>: At this point you'll also need to go through your method code and change any instances of</p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>to</p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>Otherwise your methods will no longer work.</p>
+
+<h2 id="Bracket_notation">Bracket notation</h2>
+
+<p>There is another way to access object properties — using bracket notation. Instead of using these:</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>You can use</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p>
+
+<h2 id="Setting_object_members">Setting object members</h2>
+
+<p>So far we've only looked at retrieving (or <strong>getting</strong>) object members — you can also <strong>set</strong> (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Try entering the above lines, and then getting the members again to see how they've changed, like so:</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>You can now test out your new members:</p>
+
+<pre class="brush: js">person['eyes']
+person.farewell()</pre>
+
+<p>One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:</p>
+
+<pre class="brush: js">let myDataName = nameInput.value;
+let myDataValue = nameValue.value;</pre>
+
+<p>We could then add this new member name and value to the <code>person</code> object like this:</p>
+
+<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+
+<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p>
+
+<pre class="brush: js">let myDataName = 'height';
+let myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Now try saving and refreshing, and entering the following into your text input:</p>
+
+<pre class="brush: js">person.height</pre>
+
+<p>Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.</p>
+
+<h2 id="What_is_this">What is "this"?</h2>
+
+<p>You may have noticed something slightly strange in our methods. Look at this one for example:</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>You are probably wondering what "this" is. The <code>this</code> keyword refers to the current object the code is being written inside — so in this case <code>this</code> is equivalent to <code>person</code>. So why not just write <code>person</code> instead? As you'll see in the <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> article, when we start creating constructors and so on, <code>this</code> is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different <code>person</code> object instances may have different names, but we want to use their own name when saying their greeting).</p>
+
+<p>Let's illustrate what we mean with a simplified pair of person objects:</p>
+
+<pre class="brush: js">const person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+const person2 = {
+  name: 'Deepti',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>In this case, <code>person1.greeting()</code> outputs "Hi! I'm Chris."; <code>person2.greeting()</code> on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, <code>this</code> is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.</p>
+
+<h2 id="Youve_been_using_objects_all_along">You've been using objects all along</h2>
+
+<p>As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.</p>
+
+<p>So when you used string methods like:</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p>You were using a method available on an instance of the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> class. Every time you create a string in your code, that string is automatically created as an instance of <code>String</code>, and therefore has several common methods and properties available on it.</p>
+
+<p>When you accessed the document object model using lines like this:</p>
+
+<pre class="brush: js">const myDiv = document.createElement('div');
+const myVideo = document.querySelector('video');</pre>
+
+<p>You were using methods available on an instance of the <code><a href="/en-US/docs/Web/API/Document">Document</a></code> class. For each webpage loaded, an instance of <code>Document</code> is created, called <code>document</code>, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.</p>
+
+<p>The same is true of pretty much any other built-in object or API you've been using — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, and so on.</p>
+
+<p>Note that built in objects and APIs don't always create object instances automatically. As an example, the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:</p>
+
+<pre class="brush: js">const myNotification = new Notification('Hello!');</pre>
+
+<p>Again, we'll look at constructors in a later article.</p>
+
+<div class="note">
+<p><strong>Note</strong>: It is useful to think about the way objects communicate as <strong>message passing</strong> — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our <code>person</code> object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.</p>
+
+<p>In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/tr/learn/javascript/objects/index.html b/files/tr/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..d90a7e81a4
--- /dev/null
+++ b/files/tr/learn/javascript/objects/index.html
@@ -0,0 +1,53 @@
+---
+title: Javascript Nesnelerine Giriş
+slug: Öğren/JavaScript/Objeler
+tags:
+  - Başlangıç
+  - Değerlendirme
+  - JavaScript
+  - Kılavuz
+  - Makale
+  - Nesneler
+  - Objeler
+  - Rehber
+  - Yeni başlayan
+  - öğren
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">JavaScript'te, JavaScript'in esas özelliklerinden olan karakter katarları ve dizilerden JavaScript'in tepesine inşa edilmiş tarayıcı uygulama geliştirme arayüzlerine ({{Glossary("API", "API")}}) kadar çoğu şey nesnedir. Kendi nesnelerinizi oluşturarak alakalı değişkenleri ve fonksiyonları etkili paketlere kapsülleyebilir ve onlara yararlı veri paketleri gibi davranabilirsiniz. JavaScript'in nesneye dayalı doğası dildeki bilgi birikiminizi arttırmak istiyorsanız önemlidir, bundan dolayı bu modülü size yardım etmek için temin ettik. Burda nesne teorisini ve sözdizimini detaylarıyla öğretiyoruz, sonra kendi nesnelerinizi nasıl oluşturacağınıza bakıyoruz.</p>
+
+<h2 id="Ön_Koşullar">Ön Koşullar</h2>
+
+<p>Bu konuya başlamadan önce HTML ve CSS'ye aşina olmalısınız.  Javascript'e başlamadan önce <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a> ve <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> konularına çalışmanız önerilir.</p>
+
+<p>Javascript nesnelerine ayrıntılı olarak bakmadan önce Javascript Temelleri hakkında da bilgi sahibi olmalısınız. Bu konudan önce <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> ve <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> konularına bakın.</p>
+
+<div class="note">
+<p><strong>Not</strong>: Eğer kendi dosyalarınızı oluşturma özelliği olmayan bir bilgisayar/tablet/diğer cihazda çalışıyorsanız <a href="http://jsbin.com/">JSBin</a> veya <a href="https://thimble.mozilla.org/">Thimble</a> gibi çoğu kod örneğini deneyebileceğiniz online kodlama programlarını deneyebilirsiniz.</p>
+</div>
+
+<h2 id="Rehberler">Rehberler</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">Nesne Temelleri</a></dt>
+ <dd>İlk makalede JavaScript nesnelerine, JavaScript nesne sözdizimi temellerine bakacağız ve kursun başlarında baktığımız bazı JavaScript özelliklerine uğraştığınız birçok özelliğin aslında nesne olduğunu tekrar tekrar hatırlatarak göz atacağız.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Yeni başlayanlar için nesneye dayalı JavaScript</a></dt>
+ <dd>Temeller yolumuzdan çekildiğine göre nesneye dayalı JavaScript'e (OOJS) odaklanabiliriz— bu makale nesneye dayalı programlama teorisinin temelini basitçe tanıtır sonra JavaScript'in yapıcı fonksiyonlarla nesne sınıflarını nasıl taklit ettiğini ve nasıl nesne örnekleri yarattığını araştırır.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Nesne prototipleri</a></dt>
+ <dd>Prototipler JavaScript nesnelerinin birbirinden özellik kalıtım almasının mekanizmasıdır ve diğer nesneye dayalı programlama dillerinden farklı çalışırlar.Bu makalede bu farkı keşfedeceğiz, prototip zincirlerinin nasıl çalıştığını açıklayacağız ve halihazırda var olan yapıcılara prototip özelliğini kullanarak nasıl metod eklenebileceğine göz atacağız.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance">JavaScript'te kalıtım</a></dt>
+ <dd>OOJS'nin neredeyse tüm korkutucu detayları açıklanmış oldu bu makale size "ebeveyn" sınıftan özellikleri kalıtım alan "çocuk" nesne sınıflarını (yapıcılar) nasıl oluşturacağınızı gösterecek.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">JSON verileri ile çalışmak</a></dt>
+ <dd>JavaScript Nesne Notasyonu web sitelerinde veriyi taşımak ve temsil etmek (yani web sayfasının kullanıcıda görüntülenebilmesi için serverdan veri göndermek) için sıkça kullanılan JavaScript nesne sözdizimine dayalı yapısal veriyi temsil etmek için kullanılan metin tabanlı bir standart biçimdir.  Bununla sıkça karşılaşacağınız için bu makalede JavaScript kullanarak JSON ile çalışmanız ve kendi JSON'unuzu yazmanız için gerekli olan JSON ayrıştırması dahil her şeyi size verdik.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Nesne inşa etme uygulaması</a></dt>
+ <dd>Önceki makalelerde sağlam temeller üzerinden gitmek için gerekli olan JavaScript nesne teorisini ve sözdizim örneklerine baktık. Bu makalede ise eğlenceli ve renkli bir şey ortaya çıkarmanızı sağlayacak özel JavaScript nesnelerini inşa etmenize olanak sağlayacak bir uygulama yapacağız.</dd>
+</dl>
+
+<h2 id="Değerlendirmeler">Değerlendirmeler</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Zıplayan toplar demosuna özellikler ekleme</a></dt>
+ <dd>Bu değerlendirmede sizden, önceki makaledeki zıplayan toplar demosunu başlangıç noktası olarak almak ve ona ilginç özellikler eklemeniz bekleniyor.</dd>
+</dl>