JavaScript is a programming language that\u2019s used to create dynamic content on websites.<\/p>\n\n\n\n
Take a moment to think about the web features you use every day. Think about how new content loads when you keep scrolling on Twitter, or how YouTube updates when you click on the When you\u2019re developing a website, there are three main web technologies you\u2019ll use: And that\u2019s not all JavaScript can do. If you want to build more than a static web page, you\u2019ll want to use JS. But JavaScript can also be used in back-end web development, or to develop games, or to create mobile applications. <\/p>\n\n\n\n In this guide, we are going to break down some of the most common operations you may encounter as you learn JavaScript. We\u2019ll discuss JavaScript fundamentals, including substrings, testing your code with If you have just started to learn JavaScript<\/a> and are looking for an introductory tutorial, look no further than this guide! We have provided a list of some of the best online JavaScript courses<\/a> to help you. Let\u2019s start exploring some of the most common operations in JavaScript.<\/p>\n\n\n\n When you\u2019re working with an array in JavaScript, you may want to filter your objects or run a calculation on items within the array. That\u2019s where the The The Check out our full guide on these functions to learn more about how they work, and how you can use them in your code.<\/p>\n\n\n\n Strings are used in programming to display and work with text. When you\u2019re working with a string, you may want to check whether or not that string contains a certain value. For example, you may want to check whether or not someone\u2019s name contains You can use the built-in Often, you may have a string that you want to split up into a substring or an array. To do this, you can use the The The The JavaScript Here\u2019s an example of The Here\u2019s an example of substring being used to remove the first two characters from a string:<\/p>\n\n\n\n Every developer makes mistakes when they are coding, and it\u2019s very important to make sure that if an error appears, it\u2019s handled appropriately. Try\/catch blocks are used in JavaScript to handle errors.<\/p>\n\n\n\n When a try\/catch block is used, your code will be run and will return a custom response if an error is encountered in your code. Here is an example of a try\/catch procedure in action:<\/p>\n\n\n\n Conditional statements are used when you want code to run only when a certain set of criteria are met. For example, you may want your program to print out a user\u2019s name if they have entered a valid name and return a message to the user in the web browser if their name is invalid.<\/p>\n\n\n\n The The JavaScript Here\u2019s an example of how you can use When you\u2019re creating a webpage, you may want an element to do something when a user clicks on it. For example, you may want a user to receive a message if they click on a button, or for an image to enlarge it\u2019s clicked. That\u2019s where the The When you\u2019re working with an array, you may decide that you want to order the array in a particular way. For example, you may want to order a list of names in alphabetical order, or a list of grades in ascending order.<\/p>\n\n\n\n The JavaScript The JavaScript ternary operators are Ternary operators are often used in place of simple Here\u2019s the syntax for a ternary operator in JavaScript:<\/p>\n\n\n\n When you\u2019re programming in JavaScript, you may want to loop through all the items within a list. For example, you may have a list of supplier names that you want to print out to the user. You can use the A Functions, which are part of most major programming languages, allow you to write code once for common processes and use that code multiple times within your program.<\/p>\n\n\n\n For example, if you have a block of code that checks if a form field is valid, you may want to make it a function, so you don\u2019t have to repeat a block of code for every form field on a web page.<\/p>\n\n\n\n Here\u2019s an example of a function in JavaScript:<\/p>\n\n\n\nlike<\/code> button. This is JavaScript at work. JavaScript can be used to create interactive forms, animate images, create responsive elements, and more depending on your needs.<\/p>\n\n\n\nHTML<\/code>, CSS<\/code>, and JavaScript<\/code>. You will use HTML<\/code> to determine the structure of a webpage, and CSS<\/code> to control how a web page appears. JavaScript<\/code> is the third element of web development that you can use to make your site dynamic.<\/p>\n\n\n\ntry...catch<\/code> blocks, using if statements, and more. After we\u2019ve covered the basics, we\u2019ll also go onto explore some more advanced JavaScript functions.<\/p>\n\n\n\nJavaScript Filter and Reduce<\/h2>\n\n\n\n
filter()<\/code> and reduce()<\/code> functions come in, respectively.<\/p>\n\n\n\nfilter()<\/code> function can be used to get values that meet particular criteria from an array. Here\u2019s an example of a filter function that returns all students in First Grade<\/code>:<\/p>\n\n\n\nvar firstGradeStudents = students.filter(function (student) {\n\treturn student.class === \u201cFirst Grade\u201d;\n});<\/pre><\/div>\n\n\n\nreduce()<\/code> method can be used to reduce an array down to a single value. For example, if we want to get the total age of students in a class, we could use this code:<\/p>\n\n\n\nvar firstGradeStudents = students.filter(function (student) {\n\treturn student.class === \u201cFirst Grade\u201d;\n});<\/pre><\/div>\n\n\n\nJavaScript String Contains<\/a><\/h2>\n\n\n\n
Jones<\/code>.<\/p>\n\n\n\nincludes()<\/code> method in JavaScript to check whether a string contains a substring. Here\u2019s an example of the includes()<\/code> method being used to check if a string contains a substring:<\/p>\n\n\n\nlet str = \u201cExample String!\u201d;\nlet ourSubstring = \u201cExample\u201d;\nstr.includes(ourSubstring);<\/pre><\/div>\n\n\n\n
JavaScript Split and Slice<\/h2>\n\n\n\n
split()<\/code> and slice()<\/code> JavaScript functions.<\/p>\n\n\n\nsplit()<\/code> function allows you to split a string into an array. For example, if you wanted to convert a user\u2019s full name into an array of strings, you could use the split()<\/code> function. Here\u2019s an example of split()<\/code> in action:<\/p>\n\n\n\nvar fullName = \u201cForename Surname\u201d;\nvar fullNameSplit = fullName.split(\u201c \u201c);\nconsole.log(fullNameSplit);<\/pre><\/div>\n\n\n\n
slice()<\/code> method returns all characters between two index numbers in a string, allowing you to create a substring. Here\u2019s an example of slice in action:<\/p>\n\n\n\n\"John Appleseed\".slice(5, 10);<\/pre><\/div>\n\n\n\n
JavaScript Splice<\/a><\/h2>\n\n\n\n
splice()<\/code> method can be used to add or remove an item from any place within an array. For example, if you have a list of employee names and you want to remove the second one on the list, you could use splice()<\/code>.<\/p>\n\n\n\nsplice()<\/code> being used to remove the name Paul<\/code>, which has the index value 3<\/code>, from an array:<\/p>\n\n\n\nvar students = [\u201cAlex\u201d, \u201cFred\u201d, \u201cMolly\u201d, \u201cPaul\u201d]\nstudents.splice(3, 1);\nconsole.log(students);<\/pre><\/div>\n\n\n\n
JavaScript Substring<\/h2>\n\n\n\n
substring()<\/code> JavaScript method allows you to extract parts of a string and create a substring out of those parts. For example, if you wanted to get the last two characters in someone\u2019s surname, you could use the substring()<\/code> method.<\/p>\n\n\n\nconst catName = \u201cPickles\u201d;\nconst newCatName = catName.substring(2);\nconsole.log(newCatName);<\/pre><\/div>\n\n\n\n
JavaScript Try Catch<\/a><\/h2>\n\n\n\n
try {\n\/\/ Your code here\n\tconsole.log(\"The code works!\");\n} catch (e) {\n\tconsole.log(\"There is a problem in my code!\");\n}<\/pre><\/div>\n\n\n\nJavaScript If Else<\/a><\/h2>\n\n\n\n
if\/else<\/code> statement can be used to run certain code if a statement is true, and run a different block of code if a statement is false. Here\u2019s the syntax of an if\/else<\/code> statement:<\/p>\n\n\n\nif (ourCondition) {\n\t\/\/ Code will execute if the condition is true\n} else {\n\t\/\/ Code will execute if the condition is false\n}<\/pre><\/div>\n\n\n\nJavaScript String Replace<\/h2>\n\n\n\n
replace()<\/code> function can be used to replace certain characters\u2014or sequences of characters\u2014in a string of text. For example, you could use replace()<\/code> to change every occurrence of a user\u2019s email address in a string if the user has changed their email.<\/p>\n\n\n\nreplace()<\/code> in JavaScript to replace text:<\/p>\n\n\n\nvar ourInterestingString = \"This string is interesting.\";\nvar ourIntriguingString = ourInterestingString.replace(\"interesting\", \"intriguing\");\nconsole.log(ourIntriguingString);<\/pre><\/div>\n\n\n\n
JavaScript Onclick<\/a><\/h2>\n\n\n\n
onclick()<\/code> function comes in.<\/p>\n\n\n\nonclick()<\/code> event allows you to make a web page interactive so that if a user clicks on an element, something will happen. Read our guide on the onclick()<\/code> event to learn more about how it works and how you can use it in your code.<\/p>\n\n\n\nJavaScript Sort Array<\/a><\/h2>\n\n\n\n
sort()<\/code> function can be used to arrange an array in a particular way. Here\u2019s an example of the sort()<\/code> function being used to arrange an array of student names in alphabetical order:<\/p>\n\n\n\nvar students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];\nvar sorted_students = students.sort();\nconsole.log(sorted_students);<\/pre><\/div>\n\n\n\n
sort()<\/code> function can also be used to perform advanced sorts if you define a custom function within the sort.<\/p>\n\n\n\nJavaScript Ternary Operator<\/h2>\n\n\n\n
if...else<\/code> statements that check if a condition is met, and run a block of code. For example, if you want to check a user\u2019s age and return true<\/code> if they are over 18 and false<\/code> if they are under 18, you could use a ternary operator.<\/p>\n\n\n\nif...else<\/code> statements because they are compact and fit on one line.<\/p>\n\n\n\n(condition) ? if true, then run : if false, then run<\/pre><\/div>\n\n\n\n
JavaScript forEach<\/a><\/h2>\n\n\n\n
forEach<\/code> loop to build this function.<\/p>\n\n\n\nforEach<\/code> loop is a form of for<\/code> loop that executes a function once on each item in an array. Here\u2019s the syntax for a forEach<\/code> statement that loops through a list of companies and prints each one out on a new line:<\/p>\n\n\n\nconst companies = ['Apple', 'Google', 'Facebook'];\ncompanies.forEach(company => {\n\tconsole.log(company);\n});<\/pre><\/div>\n\n\n\nJavaScript Functions<\/a><\/h2>\n\n\n\n