Commands
Every program is a set of commands. In JavaScript, the commands are separated by a semicolon, ;
The program is executed sequentially, from top to bottom, command after command.
The code inside the comments is not executed. Examples of comments:
// This line of code will not be executed. Single-line comment.
/*
These lines of code will not be executed.
This is a multi-line comment.
*/
The console.log() command can be used anywhere in the program. It can return numbers, strings (they must be expressed in quotes), results of some operations.
Variables
A variable is a name for data that is understandable to people.
You can create a variable with the var command followed by the name of the variable. You can write the name using the camelCase style:
var myNumber;
var userName;
or snake_case:
var my_number;
var my_name;
Variable names in JavaScript are case sensitive: myname and myName are two different variables.
The variable name must begin with a Latin letter and can only contain Latin letters and numbers.
You cannot use special keywords such as var or if as the name of the variable. Here is the Full List of these keywords.
The var command is used only once to create each variable. We then access the variable by its name, without var.
To assign a value to the variable, use the equal sign =.
After the variable is created, it can be used in other commands, for example, it can be logged in the console.
If a new value is assigned to the declared variable with a value, it will override the old value. This is called overriding the value of a variable.
var milkInGrams = 20;
console.log(milkInGrams);
// Logs 20
milkInGrams = 100;
console.log(milkInGrams);
// Logs 100
Operations
Examples of operations: addition (+), subtraction (-), multiplication (*), division (/).
Variables can be part of the operations:
milkInGrams * 0.5;
You can use parentheses to change the priority of operations
var firstNumber = 100 + 50 / 2;
var secondNumber = (100 + 50) / 2;
If a string is involved in the addition operation, the result will be presented as a string:
console.log('Milk, g: ' + 50);
// Logs 'Milk, g: 50'
Addition of strings is concatenation.
Continue
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/profile.v236.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course.v246.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-light.v20.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-en.v2.css"><script src="https://assets.htmlacademy.org/js/sentry.js" data-sentry="3774884cc81746ed84c0ba7c5cd4ac7b" data-project="26" data-version="2"></script><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Summary of “Getting to know JavaScript” — Introduction to programming — HTML Academy</title><meta name="csrf-token" content="1564caf322823086fca37a7326b9bd2a54"><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/htmlacademy.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://htmlacademy.org/courses/javascript-programming/intro/summary"><meta name="theme-color" content="#2f358f"></head><body class="course-interface course-interface--light course-interface--full" data-base="/assets/courses/1/"><header class="page-header page-header--course"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/" aria-label="HTML Academy Home"><img src="https://assets.htmlacademy.org/img/logo--small.svg?cs=1218aec0be4a5f23db79ad29a14e30f7f9fb9a25" width="24" height="36" alt="HTML Academy"></a><nav class="main-nav main-nav--mini" role="navigation"><div class="main-nav__course-nav"><a class="main-nav__course-item main-nav__course-button main-nav__course-button--prev" href="/courses/javascript-programming/intro/brekkie-meter-2">Release of Brekkie-meter v0.1, part 2</a><div class="main-nav__course-item main-nav__course-list main-nav__course-list--collapsed"><b class="main-nav__course-title">Introduction to programming</b><span class="main-nav__course-stat">14/15</span><div class="main-nav__course-contents"><a class="main-nav__course-contents-link" href="/courses/javascript-programming/intro">Back to the list of tasks</a><ul class="main-nav__course-contents-list"><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/start-programming">1. Career start</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/calculations">2. Making the program a bit more complicated</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/console-log">3. Console log</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/data-types">4. Data types</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/complex-data-types">5. Complex data types</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/unknown-data">6. Unknown data</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/variables">7. Variables</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/declaring-assigning">8. Declaring and assigning variables</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/operations">9. Operations</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/operations-order">10. Operations order</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/more-operations">11. A few more operations</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/brekkie-meter-1">12. Release of Brekkie-meter v0.1, part 1</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/brekkie-meter-2">13. Release of Brekkie-meter v0.1, part 2</a></li><li class="main-nav__course-contents-item main-nav__course-contents-item--current"><a href="/courses/javascript-programming/intro/summary">14. Summary of “Getting to know JavaScript”</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/intro/muffit">15. First program: MufFit v0.1</a></li></ul></div></div><a class="main-nav__course-item main-nav__course-button main-nav__course-button--next" href="/courses/javascript-programming/intro/muffit">First program: MufFit v0.1</a></div><ul class="main-nav__list main-nav__list--user main-nav__list--user-guest"><li class="main-nav__item" itemprop="name"><a class="main-nav__link" href="/signup?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-nav__item main-nav__item--login" itemprop="name"><a class="main-nav__link" href="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></nav></div></div></header><main class="course-container"><div class="course-theory"><div class="course-theory__inner"><section class="course-theory__content"><h1 class="course-theory__content-heading course-theory__content-heading--synopsis">Summary of “Getting to know JavaScript”</h1><div class="course-theory__content-text"><h2>Commands</h2><p>Every program is a set of commands. In JavaScript, the commands are separated by a semicolon, <code>;</code></p><p>The program is executed sequentially, from top to bottom, command after command.</p><p>The code inside the comments is not executed. Examples of comments:</p><pre><code>// This line of code will not be executed. Single-line comment.
/*
These lines of code will not be executed.
This is a multi-line comment.
*/</code></pre><p>The <code>console.log()</code> command can be used anywhere in the program. It can return numbers, strings (they must be expressed in quotes), results of some operations.</p><h2>Variables</h2><p>A variable is a name for data that is understandable to people.</p><p>You can create a variable with the <code>var</code> command followed by the name of the variable. You can write the name using the <code>camelCase</code> style:</p><pre><code>var myNumber;
var userName;</code></pre><p>or <code>snake_case</code>:</p><pre><code>var my_number;
var my_name;</code></pre><p>Variable names in JavaScript are case sensitive: <code>myname</code> and <code>myName</code> are two different variables.</p><p>The variable name must begin with a Latin letter and can only contain Latin letters and numbers.</p><p>You cannot use special keywords such as <code>var</code> or <code>if</code> as the name of the variable. Here is the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Full List </a> of these keywords.</p><p>The <code>var</code> command is used only once to create each variable. We then access the variable by its name, without <code>var</code>.</p><p>To assign a value to the variable, use the equal sign <code>=</code>.</p><p>After the variable is created, it can be used in other commands, for example, it can be logged in the console.</p><p>If a new value is assigned to the declared variable with a value, it will override the old value. This is called overriding the value of a variable.
<pre><code>var milkInGrams = 20;
console.log(milkInGrams);
// Logs 20
milkInGrams = 100;
console.log(milkInGrams);
// Logs 100</code></pre><h2>Operations</h2><p>Examples of operations: addition (+), subtraction (-), multiplication (*), division (/).</p><p>Variables can be part of the operations:</p><pre><code>milkInGrams * 0.5;</code></pre><p>You can use parentheses to change the priority of operations</p><pre><code>var firstNumber = 100 + 50 / 2;
var secondNumber = (100 + 50) / 2;</code></pre><p>If a string is involved in the addition operation, the result will be presented as a string:</p><pre><code>console.log('Milk, g: ' + 50);
// Logs 'Milk, g: 50'</code></pre><p>Addition of strings is concatenation.</p><br><a class="button button--green button--large button--wide button--icon" href="/courses/javascript-programming/intro/muffit"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#icon-check-bold"></use></svg>
Continue
</a></div></section></div></div><script
src="https://assets.htmlacademy.org/scripts/courses-spa/htmlacademy-task.v43.js"
data-assets-path="https://assets.htmlacademy.org/scripts/courses-spa/"
data-task-type="theory"
data-lang="en"
></script><script>HtmlacademyTask.setup(function(){});</script></main><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea79a155ee"><input type="hidden" name="csrf_value" value="2602a37210c1a8af5d59a083dc77a709"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aea79a155ee"><input type="hidden" name="csrf_value" value="2602a37210c1a8af5d59a083dc77a709"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fintro%2Fsummary" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea79a155ee"><input type="hidden" name="csrf_value" value="2602a37210c1a8af5d59a083dc77a709"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="toggle,navigation-courses,modal,form,nav"></script></body></html>