What is JavaScript? JavaScript is a powerful
programming language that developers can use to to create interactive applications and websites. Javascript is popular among web developers, because it is easy to learn quick to write code and works with most browsers. What are the applications of JavaScript? We use
JavaScript to make the website more dynamic. JavaScript can refer to html elements and make them more dynamic by animating them or reacting to an event that the user occurs. How to use i
t? To use JavaScript we make a file with extension.js and include that at the bottom of our body
section with syntax that shows, where our file is. Optionally, we can include a script section in our body and in this section we can write javascript code. In conclusion, JavaScript is a versatile programming language that can be used for a variety of purposes. It is simple to learn for beginners and there are numerous resources available to assist you in getting started. JavaScript is an excelle
nt choice for a programming
language that is powerful and simple to use. First, we need to prepare html file with base structure and plain js file. So where should we put our Javascript code? It's good practice to put your Javascript code at
the end of body section, both plain code and links. Remember to put your libraries first. We can include JavaScript in two ways: by embedding it in an html file or by including a link to our JS script. jQuery is a library that allows you to manipulate
the
DOM and handle events. It is written in JavaScript and has gained popularity among web developers since its initial release in 2006. jQuery includes many other features, such as CSS
selectors, animations, Ajax interactions and DOM manipulation manipulation and event handling capabilities. How to use jquery? If you paste one line in the header that links to the official jQuery site, you can use it, however, it is preferable to download it locally and include it similarly. Why? In the event of si
te maintenance or a problem the list of available versions can be found at https releases.jquery.com In addition, there is an example of a link to the most recent query version on the screen. In conclusion, jQuery is an extremely powerful tool that can assist you in creating dynamic and interactive websites. It is simple to learn and use making it an excellent choice for new and experienced developers. If you're looking for a way to spice up your website, jQuery is worth examining. Remember that
jQuery is only a tool for JavaScript, so everything you use in jQuery can also be used in JavaScript. However, many commands in jQuery are shorter and easier to remember; use comparison on the website httpvanilladashjs.com We will show you some popular jquery
short syntax later in this video. NPM or Node.js Package Manager is a popular
node.js package management system that allows users to install and manage packages from the command line or within a node.js application. NPM makes it simple f
or developers to find install
and remove packages from their systems. Furthermore, it enables developers to manage package dependencies and share code across disparate projects with little to no effort. NPM can help you manage all the packages you need, such as jQuery, jsTree and jQueryUI, but how do you know all versions will be compatible? Package manager can help with this and separate extended libraries from your code, which is useful as your application grows. More libraries and code could
become a mess, if not properly managed. To install NPM, first: download and install node.js from the website https://nodejs.org; then follow the instructions for your operating system. All dependencies are managed in the package.json file and installing them can be done with the command "NPM install". We can also add extra packages for example, NPM Install jQuery, so managing this package is simple; however, all computers must install node.js. Good practice states that you should not send to th
e repository node package folder, because all information about versions and dependencies
is already in package.json, so it is unnecessary. Let's install jQuery by NPM and check what happens. Four ways to declare a JavaScript variable: using
var, using let, using const; all JavaScript variables must be identified with unique names these unique names are called identifiers. From 1995 to 2015 the var keyword was used in all JavaScript code, in 2015 the lead and const keywords were added to Jav
aScript. If you want your code to run in an older browser, you must use var. A general rule is always to declare variables with const, these are constant values that cannot be changed. If you believe the variable's value may change, use
"let"; it's a good programming practice to declare all variables at the beginning of a script. We can debug variables by using the command console.log. Variable: to check the variable type and value in the browser console. JavaScript objects are one of the most
important features of the language; they allow you to create custom operations and data structures on the fly without writing code every time explicitly. This makes programming in JavaScript much more
intuitive and efficient than in other languages. Each object can have variable properties and can have many functions that delegate logic to create. Each object can be initialized used with selected properties and later used as needed. JavaScript objects are a versatile and powerful tool that can
help you organize and simplify your code. They provide a convenient way to store data and perform operations on the data. By understanding how to use objects you can write more efficient and concise code that is easier to read and maintain. We can define a method in the JavaScript object, but before defining the method we need to add a property in the function with the same name as the method. An example of defining a method in an object is given below. Let's check, how variables work: object ha
s
different structure, object can contain functions. JavaScript Arrays are a powerful data structure that allows you to store multiple pieces of information in one place, they are ideal for storing lists of items, storing elements of larger data structures and quickly processing large amounts of data. Like other data structures in JavaScript, Arrays can be created using the Array constructor or assigned to a variable using the var keyword. In addition, you can access individual elements in an A
rray, using square brackets notation, as in 1, or use the index number preceded by a colon. In JavaScript we declare Array: 1. Using an array literal; the easiest way to create an array is by using an Array literal, for example:... 2. Using the new keyword; you can also create an array using JavaScript's new keyword. You can also store arrays functions and other objects inside an array for example. In JavaScript we can check each element by loop for. However, in jQuery we can use declaration eac
h, which is faster and more descriptive; also each jQuery selector has a method that allows interacting with each object within the selector example. The arrays are an important part of the JavaScript language. They allow you to store and manipulate data in a simple, organized way. With arrays you can create sophisticated
applications with relative ease. Document as an object of your website
html and its element in structure:... Array can contain number, text or an object. #id versus .class ve
rsus [attribute]: Class is primarily used to define style in CSS, so it's best to use it that way, however, there are some exceptions, particularly, when we want to use some visual effects, which could also be classified as an extension of animation in CSS. ID is a unique string that defines a specific element in the html structure. When we say attribute, we mean all elements marked
in element proprieties, which includes item class; however, we frequently mark the custom attributes
as a data s
ome parameter to ensure that all marked elements and assigned values are not used by some
libraries or someone else in the team. The selector in jQuery is easy to use and universal; we use a simple syntax; also we can define combinations:... Examine the elements attributes, such as
name, value or any custom made attributes. Based on predefined pattern examples, we have
several options for determining our value. As you can see, we can select many variants of possible selections using the query
sector. Keep in mind that whenever you use a selector in jQuery, you are selecting all elements, so that any manipulation will affect all elements. When we have a single element, we can easily predict, what we will get ,when we read data from that
element. That is also why, when we want to count elements that take everything into account, we should use ID as a selector or custom attribute. Let's check searching for the element. What are events in JavaScript? The event mechanisms in JavaScript m
ake it easy for objects to communicate. When certain conditions are met, events are triggered and can be used to trigger actions in other objects. This video explains, how events work and demonstrate some typical applications. There are many types of events, but let's check
the most often used. Resize: it fires, when we resize the browser window, but browsers repeatedly fire this event, so avoid using this event to trigger complicated code, it might make the page less responsive. Scroll: this e
vent fires, when the user scrolls up down on the browser window; it can relate to the entire page or a specific element on the page. Focus: this event fires for a specific dom node, when an element gains focus. Click: this event fires, when the user clicks on the
primary mouse button, usually the left button; this event also fires, if the user presses the enter
key on the keyboard when an element has focus; this event fires, when the user clicks the primary mouse button in quick succession twi
ce. Dblclick: this event fires, when the user clicks the primary mouse button in quick succession twice. Mousedown: it fires, when the user clicks down on any mouse button. Mouseup: it fires, when the user releases a mouse button. Mouseover: it fires, when the user moves the cursor outside an element before inside the element. We can say that it fires, when we move the cursor over the element. Mouseout: it fires, when the user moves the cursor
inside an element before or outside the element. We
can say that it fires, when the cursor moves off the element. Change: it fires, when the status of various form elements changes; this is a better option than using the click event, because clicking is not the only way users interact with the form. Submit: this event fires on the node representing
the element, when a user submits a form. Key up: the key up event fires, when the user releases a key on the keyboard. We can also define your own, for example, after
retrieving data from an externa
l website you must emit with your own name. Let's look at the slide code for JavaScript and query and here's how to use it in jQuery. In jQuery we use a simple function on declaration on the element, on which we want to rely, such as the screen. We can define any function that should be called, when an event occurs. In conclusion, you can improve the interactivity and user experience of your website or application by using JavaScript events. Events allow you to respond to user actions, such as c
licking a button or loading a page. They also allow you to perform actions in response to events like loading a new page or submitting a form. You can improve the responsiveness and usability of your website or application by using events. Why not give it a try? You will be surprised at how easy it is to add events to your pages and how much of a difference they make. We can use html to set the entire html and add or remove classes and we can manipulate any attribute that begins with "data", usi
ng function data () and the rest of the attributes can be manipulated using function attr (). Still remember that data is a common standard for custom attributes that JavaScript reads. Rreading is especially useful, when you want to provide more data from the back-end, such as validation, denial or an alert related to the field. It is also very useful for a more generic and
systematic solution, for example, your script will look for elements with a data-alert -title and provide an extra functio
n for all of these elements. Alert on click with the title specified in the data-alert-title. The same function can also be used to get data by simply assigning the result to a variable and leaving the argument empty. What is AJAX? We will be discussing the use of the popular jQuery AJAX library. Then, we'll go over some fundamental concepts and examples and by the end you should have a good understanding of how to use jQuery AJAX to improve the performance of your web application . How to use A
JAX and jQuery? We can quickly get data from any other website, using AJAX, but the most common use is to get information from
the end to the front end. Data can be manipulated, but jSon is the preferred format for JavaScript. The jSon format is simple to parse in JavaScript. We can parse data and manipulate it, for example, we can create a list of comments based on data from the backend. If it is a sun, we use the result as an object or array. Of course, there are also possibilities to create
data on XML or another format. However, jSon is often the most supported by JavaScript format. In jQuery you can also use some shortcuts AJAX
allows us to manage data on the server side. We can also manage data in various types of html
blocks this can be a list another div or a table debugging JavaScript code is quite simple the
console frequently displays errors if any occur and browser sensors have profilers and other useful debugging tools We created a JSON file example to show you, how
to
communicate between applications in jQuery. We cannot declare an array in this way, we must declare key separately. We can only declare new instances, when we have a class. Sadly, we can't use ajax on local without server. To be able to use it, we need to have a server. Let's check, if our json is valid. And now just correct logic to display comments. We forget that we use ID and we close div element instead of ul element. Let's check, if everything works. What we were missing, was a key, when
we
extracted each element from the array. Now let's see what happens, if we modify the listener logic. Tell us in the comment section below: Where do you think javascript is most effective? Don't forget to leave us a like and subscribe to this channel and see you in the next video!
Comments
👌👌👌👏👏👏