entranceWeb design with javascript. Video tutorial: Learning JavaScript
V modern web design Javascript is just an essential component. In addition to its functionality, Javascript can dramatically improve the overall user experience by creating various transition effects such as smooth transitions and slide animations. Thanks to the open architecture of Javascript, we no longer have to write separate scripts from scratch. Here are 47 Javascript plugins that you can use to improve your website user experience and functionality. Be sure to check out sample sites that show you how you can use these plugins.
The two most popular Javascript frameworks
The two most used Javascript frameworks today are jQuery and MooTools. Take a look at the survey below:
Pop-up images and zoom
You are probably familiar with Lightbox - simple Javascript used to overlay images on the current page. The original Lightbox was released in 2005. Since then, many scripts have been released with similar functionality, but using different approaches and Javascript libraries.
This plugin is similar to Lightbox JS, only written in the jQuery library.
Thickbox is jQuery plugin which is very similar to Lightbox, except with more features. It allows you to display: single or multiple images, inline content, content in a floating frame, or content passed via AJAX in a hybrid model.
Note: The Web Designer Wall uses Thickbox to display its image galleries and demo tutorials.
Highslide JS serves the same purpose as Thickbox, but also has a zoom effect that allows you to drag the overlay image.
FancyBox is a jQuery plugin that was designed to replace the overused Lightbox. It has similar features but prettier transition effects (Mac-style design).
jQZoom allows you to display enlarged thumbnail images. This technique is commonly used on websites. ecommerce(see the Gap site for an example).
Galleries and Slideshow
Slideshow 2! This is a javascript class for Mootools 1.2 for animating the presentation of images on your site.
Using mootools v1.11, this slideshow and javascript gallery system allows you to create simple and smooth (smooth transition technique) image galleries, slideshows, posters and many other cool gadgets for your website.
Galleria is a javascript image gallery written in jQuery. It loads images one by one from an unsorted list and displays thumbnails when each image is loaded. It can create different icons if you select, scaled or unscaled, centered or cropped to fit the icon margin defined in CSS.
NoobSlide is a MooTools class that allows you to create slideshows and sliders synchronized with a timer. Check out this site for a demo.
Here is a demo of a slider widget from the jQuery UI library used to create a product slider like the one on the Apple - Mac site.
Carousel
jCarousel is a jQuery plugin that allows you to control a list of items horizontally or vertically. Items, which can be static content in HTML or loaded with (or without) AJAX, can be scrolled forward and backward (with or without animation).
The flipping component manages the list of contents ( HTML elements LI inside UL tag), which can be displayed vertically or horizontally. Content can be scrolled up and down with or without animation. The content can refer to static HTML content, or the item list can be generated dynamically on the fly (with or without using AJAX).
Carousel Slideshow is a well-known DHTML script for displaying images on your website. It displays images in 3D, like a carousel.
iCarousel is a free open source javascript tool for creating carousel-style widgets. You can also use iCarousel as a news ticker / scroller or as an image gallery.
Panel slider
Coda Slider is a jQuery plugin that mimics the slide effect of panels, similar to the Coda website.
Sliding Tabs is a mootools 1.11 plugin with very nice effects. This is a clone of something used by Panic Software's Coda site, which in turn is very similar to a widget used by the iTunes Music Store site.
Tabs
jQuery Tabs is a powerful and flexible jQuery plugin that allows you to create fully customizable tabbed navigation (highly recommended).
Another great tutorial from jQueryForDesigners.com shows you how to create basic tabbed navigation using jQuery.
MooTabs is a tiny (3kb) class for MooTools. As the name suggests, its main purpose is to help you create simple navigation tabs.
A very flexible jQuery plugin that allows you to animate when scrolling to any position on a web page with customizable erase and scroll speed options.
A simple MooTools script that can create smooth scrolling to an anchor on a web page.
A configurable jQuery plugin that displays tooltip tooltips - either with static HTML or AJAX content.
Another good tooltip plugin.
A very simple jQuery script that displays a tooltip string and an image preview (I use it at Best Web Gallery).
Accordion menu
This plugin creates accordion menus. It works with nested lists, definition lists, or just nested divs.
The Accordion plugin can perfectly highlight and show the content that you need.
Image Menu is a MooTools plugin that can create horizontal accordion menus with images.
Replacing Flash Text and Image
sIFR can replace short snippets of plain browser text with the rendered font of your choice, regardless of whether it is installed on your users' systems. It accomplishes its task using a combination of javascript, CSS, and Flash.
A jQuery plugin that will execute the sIFR functions for you.
Facelift Image Replacement is an image replacement script that dynamically generates a representation of text in an image on your web page in fonts that might otherwise not be available to your visitors. The generated image is automatically inserted into your web page via Javascript and is visible in all modern browsers
Users, visiting all kinds of web resources, often come across interesting non-standard solutions on them and want to do the same on their sites. Most often, such solutions are tied to the use of JavaScript.
In this article, I'll walk you through JavaScript, a scripting language for creating interactive web pages, and what you can do with JS. We'll look at examples of JavaScript usage and see how it can help us.
What can you do using JavaScript?
Change the page, write text on it, add and remove tags, change element styles.
React to events: the script can wait for something to happen (click / hover, the page has finished loading) and react to it by executing a function.
For example, by hovering the mouse over a link or picture, you can show a tooltip. By clicking the mouse, you can switch the contents of the block. After the page has finished loading, show an advertising pop-up window. You can change the appearance of the page depending on the time of day.
JavaScript. Fast start
Execute requests to the server and load data without reloading the page.
For example, if a user left a comment on the site or in the guestbook, then this comment will be immediately displayed without reloading the page. You can also upload files to the server, while showing the progress of the download as a percentage.
Set and read cookies, validate data, display messages and much more.
For example, on the first visit to the site, the user is shown a pop-up window and a cookie is set. And on subsequent visits to this resource, the pop-up window is not shown, because the cookie has already been set.
You can also check the correctness of the entered e-mail, check the entered phone number for compliance with the required format and immediately display a message about the correctness or incorrectness of the entered data.
JavaScript Usage Examples
The use of JavaScript is so wide and varied that there are thousands of examples of use, and still the list will not be complete, because new scripts are written every day. I am sure that you have seen many of the examples below on various sites. And all of this is implemented using JavaScript.
Of course, the gallery presented in the example is not the only one. Such galleries, like everything else, could be imagined in hundreds. And I, in order not to inflate the list indefinitely, gave one example from the most popular groups of scripts.
What does it give us?
1. Convenient multi-level navigation
Using JavaScript allows you to make compact multi-level menus, multi-level navigation in side-bars. Menu sub-items are opened either by clicking or by hovering the mouse.
Many online stores have side dropdown navigation. Consider shop.by as an example. Imagine how much it would stretch downward if the sub-items did not drop out on hover or click, but were all visible at once!
2. Using galleries and sliders allows us to show photographs, pictures of additional types of goods, conveniently and compactly arrange the photographer's portfolio.
JavaScript. Fast start
Learn JavaScript basics at practical example on creating a web application
Galleries are especially relevant for detailed viewing of goods in online stores, when you need to show various types of goods. With their help, we can show the user all the images in a small block at once, providing both small and enlarged images for viewing.
How much space would be needed for the gallery below?
3. Lately, a lot of widgets have been displayed in the side columns of sites. These are widgets for popular social networks, categories, post archives, calendars, recent blog comments, popular posts, and much more.
It should be noted that on many sites, some of the widgets can simply be deleted, because they do not make any sense, but they take up space.
But what if you still need to compactly fit a lot of widgets?
This is where the JavaScript solution with "tabs" comes to the rescue.
With their help, you can fit all the widgets well in the side columns of the site. For better perception, you can group widgets into "tabs".
For example, you can put social media widgets in one "tab", categories and archives in the second, and so on. This will save space and make the site more user-friendly.
4. Using JavaScript, you can also dramatically improve the contact page for your site or your clients' sites.
embed hints into form fields;
check data entered into form fields and display error messages;
submit form data without reloading the page;
place a map with a route.
5. For those who post tabular data on the site, it will be very useful to use sorting of data in the table.
6. Those who post any statistics on the site in the form of graphs and charts will find it very useful to be able to create interactive charts and graphs in JavaScript.
Also, using JavaScript, you can make all sorts of effects on the site - such as smooth sliding of elements, their movement, fade in and out, and everything that is enough for your imagination.
All this can make the site more user-friendly, more interactive, more technological.
Conclusion
As you can see, the scope of JavaScript is very wide. These are galleries, sliders, and tabs, and all kinds of interactive elements, and maps, and graphics, and work with forms and much, much more.
I think that everyone can find useful use of JavaScript for themselves and use it on their sites or the sites of their clients.
I hope you enjoyed the article and learned from it about the new features that can be implemented thanks to JS.
Do you use JavaScript on your sites? What are your main difficulties in using JavaScript?
Let us know in the comments to the article.
JavaScript. Fast start
Learn the basics of JavaScript with a hands-on example of building a web application
Resource Creative Bloq published material in which its authors shared with readers the best, in their opinion, examples of using JavaScript to create sites. The CPU picked the 30 most interesting resources.
1. Portfolio of Mike Coos
Web designer Mike Kus's portfolio is designed in a "clean and discreet manner," write the editors of Creative Bloq. It combines large images with simple user interface elements.
“I think of my work as a brand. There is no need to add to my site extra elements design, ”says Koos.
Kus's portfolio is equally easy to navigate on all types of screens - he notes that this was the most difficult effect to achieve. Each of the designer's projects is represented by an image or photograph - such that the user wants to know more about the work.
2. Hello Monday
The website of the creative agency Hello Monday has undergone significant changes, the authors of the article note. A huge amount of work has been done by the company's developers. They managed to make the interface user-friendly.
Old site of Hello Monday agency
Now the site contains examples of orders already completed by the agency - each project has its own page, which describes its history, which gives the user a deeper understanding of what Hello Monday is doing.
Updated Hello Monday website
“We tried to move away from the boilerplate of what a creative agency website should look like,” says Katie Hertel, project lead for the Hello Monday web page redesign. The authors of the material find the site very attractive and responsive, which is facilitated by the organization of projects on the main page: it is automatically supplemented with new agency work when scrolling down.
3. Multeor
Multeor is a massively multiplayer online game written in JavaScript using the HTML5 canvas element. It was designed by Arjen de Wise and Philidor Weise and designed by Arthur van Hoog. The main task of the user in the game is to control the fall of meteorites, getting points for the destruction left by him.
The game uses a Node.js server to manage communication between desktop and mobile devices using WebSockets.
Weise emphasizes that when developing Multeor, the existing game libraries were not used:
We wrote everything ourselves - it was very exciting, besides, we learned a lot of new things. The fact that we did not depend on specific assemblies and prefabs gave us a certain freedom of action: there was no need to deal with rendering existing graphics, handling collisions, and separately describing the system responsible for explosions.
4. Crime Timeline
Crime Timelime is an aggregator that collects UK crime data using public APIs. It lets users know how things are going in their region.
“We organized the site in such a way that it showed a map of the region and the place where the crimes were committed - for the month selected by the user in the panel below,” says project developer Alex Miller.
The resource uses the Google Maps API, jQuery and jQRangeSlider were used to create a panel with months. When a user interacts with the map - for example, clicks a specific location on it - the site updates the image using JavaScript. The Crime Bubbles were created with CSS and animated with using jQuery.
Here is Today JavaScript is used to create animations. The creator of the resource, designer Luc Twyman, explains his idea this way: “I wanted to create something that would give everyone a sense of the time scale. Here is Today helps to understand how vast the history of the universe is. "
Twyman notes that from the very beginning he decided to abandon the standard measurement units - pixels, and described his own based on the size of the screen. This was done to ensure that the site looks the same on all devices.
This is the second JavaScript project created by the designer, and in it he used elements that he did not use in the previous one. However, Twyman finds in the language many similarities with other high-level programming languages, besides, according to him, JavaScript has rather detailed documentation, and a large number of examples have been disassembled on the Internet (including on thematic forms).
6. Tweetmap
Tweetmap plots countries on the map in proportion to the number of tweets sent from them. Service developer Rob Hawkes lists several technologies used in its creation: TopoJSON, D3.js, Node.js, PhantomJS, and special algorithms for constructing adjacent cartograms in real time.
We chose Node.js because we already had experience with it and because it is a simple, fast and flexible platform. To animate the map (in TopoJSON format) we use D3, a fantastic library for data visualization. In particular, we widely use the geo module, which allows us to do complex geographic calculations and transformations.
To avoid problems with the presentation of maps in the client's browser, the system generates maps on the server using D3, launches and renders them using the PhantomJS engine, and only then transfers them to the user - this avoids creating "holes" when displaying maps.
7. The Trip
The Trip is an interactive movie made with JavaScript and HTML5 (no Flash). Otto Nascarella, the creator of the project, believes that the task of development similar service turned out to be very difficult:
Most of the difficulties we faced were due to the fact that HTML5 at the time of writing the site did not have the means for cross-browser development. Then we decided that we would recommend that customers use Chrome.
The JavaScript site code uses jQuery for almost everything. The developers also used TextBlur and TextDrop to blur and animate text.
8.Si Digital
This page, written in JavaScript, is the new portfolio and blog of design and marketing agency Si Digital. Project lead developer Alex Kruk explains the animation on the home page as follows: "The fluid moving through the pipes guides users through our portfolio - it activates image animation at each stage of the client's site exploration."
To achieve a similar effect, Crook used the jQuery.animate () method. In addition, he adds, it was necessary to choose the correct rate of filling the pipes with liquid - after all, everyone reads at different rates.
An interactive graph on the page describing completed projects and the agency's team, implemented using jQuery. The timeline, according to Krook, is generated dynamically - based on information from the database, using Ajax technology.
9. Jean Halfstein's website
Jean Halfstein is a web designer. In his portfolio, the authors of the article attracted the most home page- and animation on it. “I had a really good time tinkering with the various effects. I really like to use new technologies, so I decided to make the main page of my site a kind of sandbox - there I have fun with Three.js and the HTML5 canvas element, ”says Halfstein.
The idea of the designer was to create a portfolio following the current trends - it had to be minimalistic, and at the same time bring something fresh to the website design. So he decided to use mouse and drag controls for animations rather than navigation keys.
10. Nick Jones Portfolio
According to Jones, when he was developing the site, he had more experience with Flash than with JavaScript, but he wanted to try something new - to understand what he was capable of. “I knew right away that the JavaScript syntax was almost the same as the ActionScript syntax — so I quickly got used to it,” Jones describes the coding process.
Jones recalls that Flash did not give him access to working with mouse movements - it was a new experience that he really enjoyed. The developer wanted to achieve a responsive site that he could not achieve using class transitions in CSS. Jones is pleased with the result:
If you're going to switch from ActionScript to JavaScript, don't hesitate a second. While building my website, I wanted to understand if JavaScript is capable of what Flash is capable of. And I am very impressed.
11. MapsTD
MapsTD is an online game based on the defense of a fortress. The fortress is the user's own home, which he must protect from the villains who tirelessly roam the streets of the area.
Project creator Duncan Barclay explains how it works: “We used the Google Maps API, MooTools and JavaScript. The hardest part is finding the route that the user's enemies will follow. Once the player has chosen the starting point, the service searches for longitude and latitude, and calculates possible paths using Google. "
As the game progresses, more and more opponents appear on the screen. Barclay says that developers had to "struggle" with the timing of browsers - the fact is that most of them over time reduce the frequency of checking for updates on the page, and it was necessary to make sure that this did not happen.
Another problem was that as the game progressed, the number of enemies increased and productivity decreased. As a result, the developers decided to increase the level of the villains' skills, not their number.
12. Glimpse Catalogs
The Glimpse resource was developed jointly by the Windows IE team and the TheFind project, and combines the search engine TheFind and the application of the same developers for online shopping on Facebook. As part of Glimpse, programmers have released their own framework based on Turn.js.
The team's goal from the beginning was to make Glimpse a web application, not a regular website. The developers used the model-view-behavior paradigm, which separates the data model into three separate components, user interface and interaction with the client. The service uses Thrift client-side model rendering templates or JSON depending on computing power client.
The Turn.js library has also been used in the development of directories. With the help of CSS and JavaScript, the models presented on the site are given volume - by overlaying shadows on the image.
13. Red Bull Music Academy Radio
RBMA Radio uses the Modernizr tool, which allows cross-browser development in HTML5 and CSS. Modernizr is constantly updated so that site creators can improve the code as new features are introduced.
In addition, when implementing the service, the Backbone.js library was used - with the help of it, tiles are loaded to create the effect of an endless page.
14. Nouvelle Vague
Nouvelle Vague is a site from the French design agency Ultranoir. The service allows you to "track" tweets by a given hashtag. It is implemented using JavaScript, WebGL and HTML5. HTML5, however, is only responsible for the teaser when opening a resource.
One of the developers of the agency said that it took four months to create the site, and three people worked on it. “It was really exciting for us to try working with WebGL,” he explains.
The main goal of the project was to recreate the atmosphere from the video screensaver using 3D images. The team has immersed themselves in the new technologies HTML5, CSS3 and JavaScript, and believes that these languages may become the standard for working with 3D in the future - due to high-quality rendering, rich interoperability and responsiveness.
15. The Convergence
The Convergence is a browser game reminiscent of Super Mario Bros. It showcases the amazing power of JavaScript and HTML5 and proves that HTML5 can do its job just as well as Flash.
The developers promise to add audio and new levels to the game in the future, as well as support for the Mozilla Gamepad API.
16. Kindle Cloud Reader
This web app makes the words “buy once, read on all devices” a reality. It uses HTML5 technologies, JavaScript APIs, jQuery and jQuery UI libraries, and several jQuery plugins, including jScrollPane for page scrolling and jQuery Templates. In addition, the development team used WebSQL to support offline mode.
17. Les Enfants Terrible
The site launched by WeFail studio, according to the authors of the note, looks scary, but still very cool. The resource is made in a rather sharp style. JavaScript is used to animate user-system interactions. To make scrolling only for individual interface elements, the command used the jQuery ScrollTo plugin. To make the video appear not in pop-up windows, but directly on the site, the Shadowbox.js library was used.
In addition, the jQuery Cycle plugin is used in the Les Enfants code - it is responsible for displaying pictures and examples of the agency's work.
“We launched Les Enfants to understand the performance capabilities of JavaScript. It turned out that in combination with СSS Transform you can achieve excellent results"Says developer Martin Hugh.
Not long ago, Hugh notes, this kind of thing could only be done with Flash, but now it has a viable alternative, JavaScript.
18. Pinterest
Pinterest is a prime example of using JavaScript to create an endless page effect. To create the site, you needed jQuery tools, jQuery UI and the PageLess plugin.
According to the authors of the note, PageLess is vital to Pinterest, because endless scrolling and loading of new pins is much more effective at helping to keep a user's attention than social functions such as commenting on posts.
19. Love Bomb Builder
Love Bobm Builder helps users express their love or gratitude to someone. It is a neat and simple site that lets you create and send a bomb message.
The resource uses the Modernizr tool to update JavaScript and HTML5 code in a timely manner.
20. Michelberger Booze
When a user enters the site, the first thing he sees is the so-called "preloader" - it may seem that it is made using Flash, but it is not. HTML5 and JavaScript are responsible for filling the glass with beer as it loads.
The resource uses the partial scrolling function - only for certain interface elements, and allows the user to interact interactively with images.
By clicking on the animal masks, the client is sent to other scenes - all animation effects in which are performed using jQuery.animate ().
21. Trello
Trello is a collaborative or one-to-one scheduling app where users can create lists of completed and outstanding tasks and share progress in real time. The site is developed using Node.js, MongoDB and Backbone.js.
Trello co-founder Daniel Le Cerminan explains that using only one language when writing a website helps new team members get into the development process faster.
Communication between users is implemented using Web Sockets - Le Cerminan notes that this is enough new technology, so there were some difficulties in setting it up.
22. BrowserQuest
This retro-style game by Little Workshop is designed to showcase the power of HTML5, JavaScript, and especially Web Sockets. It can support interaction between thousands of users at the same time.
“Making a multiplayer game is a great way to demonstrate how such technologies can work together. BrowserQuest relies on Node.js servers, each of which can run multiple instances of the game world, ”says studio developer Guillaume Lecolné.
23. JS1k
JS1k is an annual competition whose task is to create a page in JavaScript on a given topic (most often, animated images). Its weight should not exceed 1 KB.
This year's theme is "Here be dragons".
Work-winner of the competition in 2012. Author - Philip Buchanan, theme - "Love"
The 2012 winner's work initially weighed 8 KB - but in a day Philip was able to reduce its size to the required 1 KB by optimizing the tree generation algorithm:
My tactic was to "honestly cheat" the compiler. For example, using the "a? b: c "instead of" if (a) b else c "saves 8 bytes.
24. Timeline
The service helps users create timelines and is very easy to use. The interactive timeline can include tweets, videos, photos, and audio recordings. Your timeline can be described using JSON or Google docs- as it is more convenient for the client himself.
25. Draw a Stickman
The main idea of the service is to provide the user with the opportunity to have a little fun by taking part in an interactive story - helping the drawn man overcome various obstacles. Sketches on the site are made using the mouse.
JQuery and a library for working with vector graphics Raphal.js. Implementing the project with Raphal helped developers avoid performance issues on most devices and all browsers.
Now that we've discussed approaches to learning HTML and CSS, it's time to turn our attention to JavaScript, the third key skill of a web designer. JavaScript is a scripting language. This means that its syntax is slightly more complex than HTML and CSS syntax. There is a lot more to learn before you can write JavaScript code fluently. I mean, most people take a little longer to learn JavaScript than learning HTML and CSS. There are many opinions about the best approach to learning JavaScript, and not all of these opinions are the same as mine.
However, I am actually opposed to using one specific way to learn JavaScript. My JavaScript learning went wrong. Basically, I was just picking bits of information about the language either from tutorials or snippets of code, which created large gaps in my JavaScript knowledge that I subsequently had to fill. Therefore, I recommend that you take a slightly longer route, which I hope will lead you to a better result. First, you need to understand what JavaScript does exactly. JavaScript is a client-side programming language. The phrase "client-side" means that the code does not run on the server, but in the browser.
The language was created to work with HTML and CSS, so it has many built-in functions to make it easier to control site behavior. JavaScript complements the static nature of HTML by allowing you to create interactive elements, render elements based on specific conditions, animate elements, or perform any number of scripting tasks. Finding out what JavaScript is good for is very important because it helps you understand when to use it and what to look out for while learning JavaScript.
As I mentioned before, try not to learn JavaScript from snippets of code. Most people use this approach, including myself. With this approach, you find a piece of code that performs the task you need, insert it into one of your projects, edit and run it. As you know, this approach will allow you to master some JavaScript skills over time, but most importantly, in this case, you are missing the reason why this particular language should be used. As a result, you will not fully understand this programming language.
In addition, I recommend that you first learn the basics of JavaScript, and then start learning about libraries such as jQuery. Using jQuery is a pretty tempting idea because it's a powerful tool and a lot of people use it. You will instantly find hundreds of tutorials on how to use jQuery for your site. But learning jQuery before you even learn JavaScript is a big mistake. As you can imagine, using the jQuery library is not always the right decision. And if you only know how to use a particular library, you will not be able to understand when to use JavaScript and when not.
This approach assumes that you should at least in a structured and focused manner learn the basics of JavaScript through, for example, a specific course or book. While many tutorials teach you how to perform very specific tasks with JavaScript, you really need to have a clear understanding of its concepts and syntax in order to understand what is behind any of your actions. Of course, not all web designers need to be JavaScript proficient. Those designers who, for example, want to do frontend development, must be fluent in JavaScript.
And for those more interested in UX design or visual design, just the basics should be enough. Regardless of how deep your knowledge of JavaScript must be, you need to master the most important concepts in order to have a practical understanding of the language. The main thing is to be patient. It takes a long time to learn JavaScript, and if you give up learning it too quickly, you won't be able to remember what you learned if you need it for a project. I highly recommend that you start with Simon Allardyce's JavaScript Essential Training course, which can be found in the online training library at lynda.com.
It looks at JavaScript from a beginner's point of view, and it really describes the basics of JavaScript in the most straightforward way. Also, I recommend ... sorry if I mispronounce ... Marijn Haverbeke's book. By the way, this is a great guy. Anyway, I recommend that you read his book "Eloquent JavaScript", also called "Modern Introduction to Programming". This book is really written in a language accessible to beginners. There are many books written on JavaScript, but this book is written by a programmer and for programmers. The book "Eloquent JavaScript" was written in such a way that it is a kind of introduction to the language for beginners.
Most surprisingly, you can buy a printed version of the book, but ... Let's click on this link ... There is also an electronic version of this book. It covers everything JavaScript is about, and provides some workable examples that you can experiment with to see how it all works. This is a really cool little site. As with HTML and CSS, docs.webplatform.org has a JavaScript section. You will find it very useful as it has some tutorials, functions, objects, events - all those basic things you need to know when learning JavaScript.
I cannot underestimate the importance of stackoverflow.com. If you have never encountered it before, then it is worth noting that this site allows you to create your account and subsequently post questions to members of this site about those things that confuse you when you work on your own projects, or ask questions about those concepts. that are difficult for you to learn. Oftentimes, people give a lot of different advice, with good answers getting additional votes, and bad advice being deprived of votes. Therefore, after a while, thanks to the feedback from the community members, you will be able to understand which answer is the best. You can not only post questions, but also search for them on the site. Chances are that someone has already asked the question you are interested in. Therefore, stackoverflow.com is a very useful resource indeed. As with HTML and CSS, the Mozilla developer network also has a JavaScript section. It contains a lot of different information. In addition, on the right side of the site there is a section that lists the resources where you can get more detailed information on a particular topic. Some of this information is completely technical. But basically any JavaScript newbie can take advantage of most of this information at the very beginning of learning this programming language. If, after mastering the basics of JavaScript, you have a desire to study this language in more detail, then you can use another, quite useful, in my opinion, book - "Professional JavaScript for Web Developers", the author of which is Nicholas Zakas.
I will not deceive you and claim that I understood everything that is written in this book, but I use it as a reference material, because after learning the basics of JavaScript, situations may arise when you seem to get stuck and do not know what to do next. This great book allows you to better understand JavaScript syntax, learn how to write more efficient code, and apply not only basic JavaScript concepts, but also more advanced features. Of course, if you go back to lynda.com again, you'll find a whole section of great JavaScript courses there, including Simon's. Therefore, carefully analyze what courses are in our library.
JavaScript is one of those languages that can only be understood by putting it into practice. Therefore, the approach you choose to study it should imply the implementation of many practical examples.
jFBL, CHEV-UVTBOYGB TSYCHЈF. chSh OBTYUPCHBMY LBTFYOLY, RPDZPFPCHYMY FELUF, UDEMBMY CHUЈ, UFP IPFEMPUSH, Y ... ABULHYUBMY. rPUENH? dB IPFS VSH RPFPNKH, UFP CHSCHUFTBDBOOBS CHBNY UVTBOYYULB OYLBL OE PFLMYLBEFUS ABOUT DEKUFFCHYS CHMBDEMSHGB, TsBDOP YBTSEZP RP OEK LKHTUPTPN. FSHZHH, RPYUFY OERTYMYUOP RPMHYUIMPUSH ... HAIRDRYER OE NEOOEE, VHDEN MEUUIFSH.
DP FPZP, LBL OBYUBFSH TBUULB P CHUSLIYI FEIOYUEULYI ZHPLKHUBI ABOUT RPFEIKH RPUEFYFEMSN Y UEVE, MAVINSCHN, OBDP RTEDUFBCHYFSH, YUPP CHPPVEYT NSCH.
sshl HTML UFBFYUEO. dMS FPZP, YUFPVSH OBKHYUIFSH UVTBOYGKH "TSYFSH", PFLMYLBFSHUS ABOUT DEKUFCHYS RPMSHSPCHBFEMS, OKHTSOP OBKFY URPUPV Ybrtpztbnnnytpchbfcheo FP EMPEO. HNOSCHE MADI - OE YUEFB OBN U CHBNY - TEYBAF LFKH RTPVMENH, CHUFBCHMS CH ZYRETFELUF LHULY RTPZTBNNOPZP LPDB, LPFPTSCHE OBSCHCHBAF ultyrfbny. chPVEE ZPCHPTS, ULTIRF - RTPUFP NBMEOSHLBS RTPZTBNNLB, UTBVBFSCHCHBAEBS FPZDB, LPZDB EK ULBTSKHF, Y OBRYUBOB POB NPTSEF VSCHFSHY OBRYUBOB POB NPTSEF VSCHFSHY OBPDBMPN nSCH U CHBNY VKHDEN ZPCHPTYFSH FPMSHLP PV PDOPN Y'OYI - JavaScript. UYOFBLUYU JavaScript CHSF YY VPMSHYPZP Y UETSHЈBOPZP SJSHLB Java, ABOUT LPFPTPN RTPZTBNNYTHAF UVTBYOSCH VPTPDBFSHE DSDY DECHEMPRETSCH, RPMHYUBS JB
OBYE U CHBNY DUMP NBMEOSHLPE, OBN OBDP RTPUFP OBKHYUIFSHUS RYIBFSH LFY UBNSHE ULTYRFSH LKHDB RPRBMP, YUFPVSCHUЈ NYZBMP, LTKHFIPZBMEBMEZHT nd FPZDB LPZP-OYVKHSH RMPIPZP PF OBYEK UVTBOYGSCH FPYUOP ICHBFIF LPODTBFYK, B OBYUIF, NSCH U CHBNY IPTPYE. b EUMY LPODTBFYK ICHBFIF LPZP-OYVHDSH IPTPYEZP? oEFHYLY! ьFINY ЪBDBYUBNY ЪBOYNBAFUS UREGBMYUFSCH RP NBTLEFYOSKH Y TELMBNE, POI JOBAF, UFP FBLPE Gemechbs zthrb, J PFZPOSF CHUEI IPTPYUPYUPY PF oh, UFP-FP S PRSFSH ъBRKHFBMUS: LCS LPZP Ts NSCh FPZDB CHPPVEE FTHDYNUS?
uOHCHB LPOFEKOETSCH
YUFPVSCH CHUFBCHYFSH LHUPL LPDB ABOUT JAVING JavaScript CH FEMP HTML -UFTBOYGSCH, OBN U CHBNY PRSFSH RPOBDPVYFUS LPOFEKOET. chPF FBLPK:
EDYOUFCHOOSCHK RBTBNEFT, LPFPTSCHK DEKUFCHYFEMSHOP UVPIF YURPMSHCHBCHBFSH, OBSCHCHBEFUS language. ON PRTEDEMSEF, ABOUT LBLPN SSCHLE OBRYUBOP CHUЈ FP, UFP OBIPDYFUS CHOHFTY LPOFEKOETB. dche DPRPMOYFEMSHOSHE UFTPULY CHOHFTY ZPCHPTSF UFBTPNKH VTBKHETKH, LPFPTSCHK OILBLYI ULTIRFPCH OE RPOINBEF, UFP CHUЈ, OBIPDSEEEUS NECDKH- LPNNEOFBTYK, LPFPTSCHK OBDP RTPUFP PUFBCHYFSH CH RPLPE Y OYUEZP U OYN OE DEMBFSH. fBLYN PVTBSPN, EUMY LFP-FP PFLTPEF UVTBOYGKH U RPNPESHA LFPZP UBNPZP UFBTPZP VTBKHETB, PO RPMKHYUIF FPMSHLP YUUFSCHK HTML -LPDLTCH, B CHUEFT EUMY JOBLY LPNNEOFBTYS PFUHFUFCHHAF, B CHOHFTY ULTYRFB OBIPDYFUS UFP-FP FBLPE, UEZP VTBKHET OE RPOINBEF, RPUEFYFEYFYUVLEV UPMEYUPHEYUPHEYFEYUFYUVLEY RPMEJ pOP OBN U CHBNY OBDP?
FERETSH P FPN, ZDE UVPIF RPNEEBFSH ULTYRFSH. h RTYOGYRE, POI NPZHF OBIPDYFSHUS ZDE HZPDOP, OP MHYUYE RPNEBFSH JavaScript-LPD CH LPOFEKOETE HEAD. eUMY TBNEUFIFSH LPD CH TBEDEME
..., PO PVSBFESHOP YURPMOIFUS CH FPF NPNEOF, LPZDB VTBKHET DPKDЈF DP OESP RP NETE BZTKHLY UVTBOYGSCH. h OELPFPTSCHI UMHYUBSI FP FPTSE OEPVIPDYNP, OP IPTPYYN FPOPN SCHMSEFUS PZHPTNMEOYE ULTYRFPCH B CHYDE zhholgyk, LPFPTSCHE NPTSOP RTY OEPVIPDYNPUFY CHSCHCHBFSH dv MAVPZP NEUFB UFTBOYGSCH J LPFPTSCHE OE VHDHF CHSCHRPMOSFSHUS DP FEI RPT, RPLB NShch have CHBNY FPZP OE BIPFYN.Roll-over
FEIOUEEULPE ABDBOYE
rPUFBOPCHLB ЪBDBYUI OPNET PDIO.
about UVTBOYGE EUFSH LOPRLB, CHCHRPMOEOOBS CHYDE Y'PVTBCEOIS CH ZhPTNBFE GIF. oKhTsOP, YuFPVShch POB LBLYN-FP PVTBPN NEOSMBUSH RTY OBCHEDOYY ABOUT OEЈ LKHTUPTB.
ьFPF ÜZHZHELF RP-BOZMYKULI OBSCHCHBEFUS roll-over TH CH TEKFYOSE RPRHMSTOPUFY ÜZHELFPCH JBOYNBEF, UCHETOPE, RETCHPE NEUFP. jFBL, RTYUFHRINE.
TEBMYBGYS
RTECDE CHUEZP OBN RPOBDPVSFUS dche LOPRLY: YUIPDOSCHK CHBTYBOF RMAU FPF, LPFPTSCHK DPMTSEO RPDUFBCHMSFSHUS CHNEUFP OEZP RTY DCHEYTSETOYCHEY NKHTUPSCH LKHTUPYP. PVE LBTFYOLY DPMTSOSCH YNEFSH PDYO Y FPF TSE TBNET. UNSCHUM CHUEEI DBMSHOEKYYI NBOYRKHMSGYK UPUFPIF CH FPN, YUFPVSH ЪBNEOIFSH PODOP Y'PVTBTSEOYE DTHZYN, B RPFPN CHETOHFSH YUIPDOPE ABOUT NUFP.
CHUFBCHMSEN RETCHHA LOPRLH H HTML. LPD VKHDEF CHSCHZMSDEFSH RTYNETOP FBL:
FEZ IMG YURPMSH'KHEFUS DMS TBNEEEOYS ZTBZHYLY ABOUT HTML -UFTBOYG. RBTBNEFTSCH name, src, width І height ЬBDBAF UPPFCHEFUFCHOOOP YNS CHUFTFEOOOPZP CH HTML PVYAELFB DMS DBMSHOEKYI UUSCHMPL ABOUT OEZP, YNS ZTBZHYUEULPHYUFYUPHYBYUFYT CHYBKMBYT
FERETSH TBNEUFYN CH TBDEME HEAD UMEDHAEYK VMPL:
FERETSH DPVBCHYN EEЈ DCHB RBTBNEFTB CH FES IMG:
Onmouseover = "ImgOn ();" onmouseout = "ImgOff ();"
OPRPNOA, UFP SNSCHL JavaScript YUHCHUFCHAYFEMEO L TEZYUFTKH, RPFPNKH, EUMY CHPPN NEUFE OBRYYEFE imgon, B CH DTHZPN ImgOn, FY PRYUBOIS OEFNSHDHT
pUFBMPUSH UDEMBFSH RPUMEDOEE: DPVBCHYFSH PDYO RBTBNEFT CH FES BODY:
Onload = "ImgPreload ();"
at LPDPN RPLPOYEOP. with OBNETEOOOP OE DBA DEFBMSHOSHI YOUFTKHLGYK: TBKHNEEFUS, YY UPPVTBTSEOYK MЈZLPZP UBDYUNB. OP P FPN, LBL LFP CHUЈ TBVPFBEF, TBUULBTSKH RPDTPPVOP.
PYASUOOEOS
h BZPMPCHLE UVTBOYGSCH - B YNEOOOP CH UELGY HEAD - NSC UPDBMY ULTIRF, CHLMAYUBAEYK CH UEVS FTY ZhHOLGY: ImgPreload, ImgOn Y ImgOff. lMAYUECHPE UMPCHP function CH VPMSHYOUFCHE SSCHLPCH PRTEDEMSEF LHUPL LPDB, LPFPTSCHK NPTSEF VSHFSH NOPZPLTBFOP CHSCHBO YY TBMYUOSCHI NEUF RTPZTBNSCH. pWAYK UMHYUBK UYOFBLUYUB CHCHZMSDIF FBL:
Function func_name (par1, par2, par3) (...)
TBYYZHTPCHSCHBEFUS CHUЈ LFP UMEDHAEYN PVTBPN: ZhHOLGYS U YNEOEN func_name, CH LPFPTKHA RETEDBAFUS RBTBNEFTSCH U YNEOBNY par1, par2 Y parShch3, LPPFP OTP. ZHYZKHTOSCHE ULPVLY PVTBNMSAF FKH YUBUFSH, LPFPTBS, UPVUFCHEOOOP, Y VKHDEF CHCHRPMOSFSHUS, EUMY NSCH LFKH ZhHOLGYA CHSCHUPCHEN, F. E. UPYMЈNUS OBJNEOYPK LPKH
YBYUEN OKHTSOSCH RBTBNEFTSCH, FEN VPMEE, UFP CH FEI FTI JHOLGYSI, LPFPTSCHE NSCH YURPMSHKHEN CH OBDBYUE OBDBYUE, YI OEF? b PPF JBYUEN. rTEDUFFBCHSHFE UEVE, UFP ABOUT UVTBOYULE EUFSH oeulpmshlp LOPRPL, DMS LBTSDPK Y'LPFPTSCHI NSCH IPFINE UDEMBFSH UCHPK UPVUFCHEOOSCHK roll-over. SFP TSE, RYUBFSH PFDEMSHOKHA ZhHOLGYA ABOUT LBTSDKHA LOPRLKH? b EUMY YI DEUSFPL? ZMHRPUFY LBLEY.
Hm OBRYYEN edyoufcheooha ZHHOLGYA LCA LBTSDPK PRETBGYY, J have RPNPESHA RBTBNEFTPCH RETEDBDYN EC yns FPK LBTFYOLY HBS LPFPTPK B DBOOSCHK NPNEOF RTPIPDYF LHTUPT NSCHY J LPFPTBS, UPPFCHEFUFCHEOOP, DPMTSOB HYUBUFCHPCHBFSH B UPDBOYY OHTSOPZP OPL ZHZHELFB. chPF Y CHUЈ.
CHETOЈNUS L OVYENKH LPDH.
zhHOLGYS ImgPreload UMKHTSIF DMS RTEDCHBTYFEMSHOPK ЬBZTHKHLJ CH RBNSFSH LPNRSHAFETB FPZP Y'PVTBCEOIS, LPFPTPPE DPMTSOP VSCHFSH RPDUFDUFBCHPMEOPU OBJECT. POB ABRHULBEFUS FPZDB, LPZDB CHUS UVTBOYGB ABZTHYMBUSH: ABRYUSH onload = "ImgPreload ();" CH FEZE BODY POBUBEF, UFP RP UPVSHFYA onload (PLPOYUBOYA ABZTHALY PFPVTBTSBENPK YUBUFY UVTBOYGSCH VTBKHYETPN) VHDEF CHCHRPMOEOB ZhHOLGYS.
ъBYUEN OKHTSOB FB ZhHOLGYS? DEMP CH FPN, UFP YBZTHALB LBTSDPZP YPVTBCEOIS U UETCHETB FTEVHEF CHTENEYOI, PUPVEOP RTY OE PYUEOSH IPTPYEK UCHSYY. eUMY NShch VHDEN FBEYFSH CHFPTHA LBTFYOLH have UETCHETB, OP LHTUPT HKDЈF have LOPRLY TBOSHYE, Yuen NShch HCHYDYN LBLPK-OP ZHZHELF, FL ZTBZHYYUEULYK ZHBKM LBLYN R ™ £ NBMEOSHLYN FOR OE OE VSCHM RTPUFP HUREEF BZTHYFSHUS. dTHZPE DAMP, LPZDB FTEVKHENBS LBTFYOLB HTSE OBIPDYFUS CH RBNSFY: ABZTKHLB RTPY'PKDЈF NZOPCHEOOP.
FERETSH P UBNPK ZhHOLGY. ъBRYUSH pic2 = new Image (); UP'DBЈF OCHSCHK PVYaELF FIRB Image, ABOUT LPFPTSCHK U LFPPZP NPNEOF NSCH NPTSEN UUSCHMBFSHUS, B UMEDKHAEBS UVTPYULB pic2.src = button1b.gif; ZPCHPTYF P FPN, LBLPK ZTBZHYUEULYK ZhBKM UPPFCHEFUFCHHEF LFPNKH PVYAELFKH. FERETSH, ЪBRTPUYCH YЪ MAVPZP NEUFB LPDB ЪOBYUEOYE pic2.src, NSCh FHF TSE RPMKHUYN button1b.gif, UFP OBN Y FTEVKHEFUS.
pVTBFYFE CHOINBOYE ABOUT FP, LBLYE RBTBNEFTSCH NSCh DPVBCHYMY CH FES IMG. ъBRYUSH onmouseover = "ImgOn ();" P'OBYUBEF, UFP RP UPVSHFYA onmouseover (LKHTUPT CHYAEIBM ABOUT LBTFYOLKH) DPMTSOSCH VSCHFSH CHSCHCHBOB ZhHOLGYS ImgOn, B BRYUSH onmouseout = "ImgOff;" POBUBYUBEF, UFP LKHTUPT HYЈM U LOPRLY, Y FERETSH OKHTSOP ABKHUFIFSH ZhHOLGYA ImgOff. lBL RPOSFOP Y OBUCHBOYS, LFY DCHE ZhHOLGY PFCHEYUBAF ЪB RPDNEOH LBTFYOLY (ImgOn) Y CHUCHTBF EЈ CH YUIPDOPE UPUFFPSOYE (ImgOff). FERETSH RPUNPFTINE, LBL LFY ZhHOLGY TBVPFBAF.
h ZHHOLGY ImgOn RETCHBS UVTPLB (temp = mybutton.src;) RETEDBЈF RETENEOOPK temp YNS FPZP ZTBZHYUEULPZP ZHBKMB, LPFPTSCHK UPPFCHEFUEFCHKHEFKHUPUPUPUPDUP UPYUP hFPTBS UFTPLB (mybutton.src = pic2.src;) RETEDBЈF LOPRLE YNS ChFPTPZP ZhBKMB, LPFPTSCHK NSC RPDUFBCHMSEN. LBL FPMSHLP LFP RTPYSPYMP, CHNEUFP RETCHPOBYUBMSHOPK LBTFYOLY ABOUT NEUFE LOPRLY CHOYLBEF LBTFYOLB button1b.gif, Y OBYB BDBYUB TAMPUMP. OPRPMPCHYOKH, RPFPNKH UFP OBN EEЈ RTDUFFPIF CHETOHFSH LOPRLKH CH YUIPDOPE UPUFFPSOYE RPUME FPZP, LBL LHTUPT NSCHY HVETЈFUS CHPUCHPSUY.
ьFYN Y ЪBOYNBEFUS ZHHOLGYS ImgOff. eЈ EDYOUFCHEOOBS UFTPULB (mybutton.src = temp;) ChPUCHTBEBEF LOPRLE FPF ZhBKM, LPFPTSCHK UPPFCHEFUFCHPCHBM EK CH UBNPN OBYUBME. chuЈ!
dMS RTYNETB RPUNPFTYFE, LBL PTZBOY'PCHBOSCH roll-overs ABOUT ZMBCHOPK (YMY MAVPK DTHZPK) UVTBOYGE NPEZP UBKFB. ьFP FBLYE NBMEOSHLYE UYOYE FPYUY, CHOOILBAEYE CHOKHFTY NBMEOSHLYI VESCHI LTKHTSPYULPCH, LPZDB CHSCH CHPYFE NSCHYLPK RP RHOLFBN NEOA. rTBCHDB, FBN CHUЈ UDEMBOP YUHFSH-YUHFSH YOBYUE. ;-)
Openwin
TBUUNPFTYN ABDBYUH OPNET DCHB.
FEIOUEEULPE ABDBOYE
jFBL, OBN OKHTSOP, UFPVShch
RTY EEMULE NSCHYSHA ABOUT UUSCHMLE PFLTSCHCHBMPUSH DPRPMOYFESHOP PLOP VTBKHETB, UCHPKUFCHB LPFPTPZP NPTSOP VSCHMP VSCH PRTEDEMYFSH VBTBOYEE. OERMPIP, EUMY LFP PLOP NPTSOP VKHDEF YBLTSCHFSH EEMULPN RP TBURPMPTSEOOPK CH ON TCE UUSCHMLE.
pZPCHPTLB
ьFKH ЪBDBYULH NPTSOP TEYYFSH Y UTEDUFCHBNY UBNPZP HTML, RTBCHDB, ЪBDBFSh uchpkufchb OPCHPZP PLOB CHUЈ-FBLY OE HDBUFUS, DB Y ЪBLTSCHYFSHYEBOSCH CHURPNOIN UOBUBMB, UFP FBLPE UUSCHMLB.
ChPF FHF X OBU U CHBNY UUSCHMLB.
chFPTPK CHBTYBOF:
oE FBLBS HC VPMSHYBS TBOOYGB, LBLBS YUBUFSH LPOFEOFB CHCHRPMOEOB CH CHYDE UUSCHMLY: FES RTYUHFUFCHHEF CH MAVPN UMKHYUBE, B PO-FP OBN Y OKHTSEO.
fBL CPF, YBDBYUH NPTSOP TEYYFSH DPVBCHMEOYEN RBTBNEFTB target CH FES (target = "zzz"). chNEUFP zzz NPTSOP RPDUFBCHMSFSH PDOP YJ FTЈI ABTEETCHYTPCHBOSCHI JOBYOOIK:
Self _top _blank
ъОБЮЕОЕ _self YURPMSHHHEFUS CH FPN UMKHYUBE, EUMY OCHSCHK DPLHNEOF DPMTSEO VSCHFSH PFLTSCHF CH FPN TCE PLOE (ZHTEKNE), UFP YYUIPDOSCHK; OBYUEOYE _top ZPCHPTYF P FPN, YUFP OPCHSCHK DPLHNEOF VHDEF PFLTSCHF B FELHEEN PLOE VTBHETB, CHSCHFEUOYCH dv OEZP Chueh ZHTEKNSCH, EUMY FBLYE OBMYYUEUFCHHAF, B OBYUEOYE _blank LBL TB PRTEDEMSEF, YUFP OPCHSCHK DPLHNEOF VHDEF PFLTSCHF B OPCHPN PLOE, LPFPTPE PFLTPEFUS UREGYBMSHOP LCA FPK GEMY. OP - LBL S HTSE ZPCHPTYM - HRTBCHMSFSH RBTBNEFTBNY LFPZP PLOB NSCH OE UNPTSEN.
LUFBFY, URYUPL ABTEETCHYTPCHBOOSHI JOBYUEOYK OE YUYUETRSCHBEFUS FTENS PRYUBOSCHNY YDEUSH RTYNETBNY, OP ЪB F FIN - L FETBRECH LHPPH E.
DEUSh OHTSOP DPVBCHYFSH, YUFP, PE-RETCHSCHI, LTPNE BTEETCHYTPCHBOOSCHI RBTBNEFTPCH B LBYUEUFCHE target NPTSEF VSCHFSH RPDUFBCHMEOP YNS HTSE UHEEUFCHHAEEZP PLOB, B EUMY FBLPZP RFU VTBHET B VPMSHYYOUFCHE UMHYUBECH RPUFBTBEFUS PFLTSCHFSH OPCHPE Plop J BZTHYFSH DPLHNEOF FHDB. chP-CHFPTSHI, WITH KhRPNYOBM ZHTEKNSCH, P LPFPTSCHI OBN U CHBNY RPLB YUFP OYUEZP OE YCHEUFOP. about OB DBOOCHK NPNEOF PVPKDЈNUS FEN, UFP ZHTEKNSCH - LFP PLOB OEBCHYUYNSHI DPLHNEOPPCH, LPFPTSCHE CH MAVPN LPMYUEUFCHE NPZKHF OBIPDIFSHUS PYEBYET PVEBYT CHLOEEN DMS. rПДТПВОЕ ПЛФПН НЩ РПЗПЧПТЙН ОЕУЛПМШЛП РПЪЦЕ. h FTEFSHYI, YURPMSHPCHBOYE UUSCHMPL LCA PFLTSCHFYS OPCHPZP PLOB CHSCHCHBOP FPMSHLP DRYER, DE CH YUFP Netscape UPUFPSOYY RPOSFSH UPVSCHFYE onclick (EEMYUPL NSCHYSHA) EUMY EPP RTPYUIPDYF OE UUSCHMLPK UE. Internet Explorer DEMBEF ЬFP U MЈZLPUFSHA, OP OBN PF ЬFPZP OE MEZUE: ULTYRFSH DPMTSOSCH TBVPFBFSH CH MAVPN VTBHATE.
TEBMYBGYS
rPDZPFPCHYN ZHBKM newfile.htm, UPDETTSBEYK UMEDHAEYK LPD:
YUFPVSH YBLTSCHFSH PLOP, EMLOYFE YDEUSH.
pVTBFIFE CHOINBOYE, UFP UFTPLB U FESPN
TBPTCHBOB: OYUESP UVTBYOPZP, HTML FBLYE CHEEI RETEOPUIF URPLPKOP. uFTBOOPE OBYUEOE RBTBNEFTB href - "#" - OETEDLP YURPMSHKHEFUS FPZDB, LPZDB UUSCHMLB LBL FBLPCHBS OHTSOB, B RETEIPD RP OEKHEKOEKU DBMTSO
dBMEE. h FPN ZhBKME, YB LPFPTPZP CHSCH IPFIFE PFLTSCHFSH OPCHPE PLOP, OHTSOP UDEMBFSH DCHE CHUFBCHLY. RETCHBS - CH WELGY HEAD.
hFPTBS - ZDE-OYVHDSH CH FEME UVTBOYGSCH:
YUFPVSH PFLTSCHFSH OPCHPE PLOP, EMLOYFE YDEUSH.
FERETSH RPUNPFTYN, UFP X OBU U CHBNY RPMKHYUIMPUSH. lTPNE FPZP, NPTSOP EЈMLOKHFSH.
LOOFBFY, JNECFE CH CHYDKH: ЪBLTSCHFSH PLOP FBLYN PVTBYPN CHCH UNPTSFE FPMSHLP CH FPN UMKHYUBE, EUMY POP VSCHMP PFLTSCHFP RTY RPNPEY JavaScript.
n FPN, LBLYE EEЈ RBTBNEFTSCH NPTSOP ABRYIBFSH PE CHUFTFEOOKHA ZhHOLGYA window.open, CHCH RTPYUIFBEFE CH THLPCHPDUFCHE RP JavaScript PF W3C. ;-)
PYASUOOEOS
jHOLGYS OpenWin UPDETTSIF UVBODBTFOSCHK NEFPD JavaScript window.open, YURPMSHHAEYKUS DMS PFLTSCHFYS OCHPZP PLOB. h LBYUEUFCHE RBTBNEFTPCH NSCh RETEDBЈN LFPNKH NEFPDKH (YMY ZhHOLGYY, SFP RPYUFE FP TSE UBNPE):
1. "newfile.htm" - YNS DPLKHNEOFB, LPFPTSCHK DPMTSEO PFLTSCHFSHUS CH OPCHPN PLOE.
2. "mywindow" - YNS LFPZP PLOB DMS DBMSHOOEKYY UUSCHMPL ABOUT OESP. xLBSCHBFSH OE PVSBFESHOP, OP RBTH RHUFSHI LBCHSCHYUEL ("") CHUЈ TBCHOP RTYDЈFUS RPUFBCHYFSH, F.L.
3. "width = 300, height = 250, toolbar = no"- OBVPT UFBODBTFOSHI RBTBNEFTPCH UP YOBYUEOYSNY. h DBOOPN UMKHYUBE - MYOEKOSCHE TBNETSCH PLOB Y YOZHPTNBGYA P FPN, UFP POP OE DPMTSOP YNEFSH RBOEMY YOUFTKHNEOPCH. BNEFSHFE, UFP JOBYUEOIS RBTBNEFTPCH S RYYKH VE LBCHSCHYUEL.
uMEDHAEBS YUBUFSH LPDB ( Edeush) RTEDRYUSCHCHBEF VTBKHETKH YURPMOYFSH ZHHOLGYA (NEFPD) OpenWin RTY EEMULE ABOUT UMPCH YDEUSH, PZHPTNMEOOPN LBL RHUFBS UUSCHMLB (href = "#").
fPYUOP FBLKHA TSE ZHPTNKH ABRYUY YURPMSHHEF ULTIRF, TBNEEЈOSCHK CH DPLHNEOFE, LPFPTSCHK PFLTSCHCHBEFUS CH OPCHPN PLOE. uFBODBTFOSCHK NEFPD window.close ЬBLTSCHCHBEF FELHEE PLOP, EUMY POP VSCHMP PFLTSCHFP U RPNPESHA JavaScript. eUMI NSCH IPFEMY VSCH ЪBLTSCHFSH DTHZPE PLOP, RTYYMPUSH VSH OBRYUBFSH mywin.close (), ZDE mywin - YNS PLOB, LPFPTPPE ULTYRFKH RTDUFFPIF BLTSCHFSH.
chSCHOPU ULTIRFPCH CH PFDEMSHOSCHK ZhBKM
eUFSH EEЈ PDYO CHBTYBOF ЪBRYUY LPOFEKOETB SCRIPT.
ьFP POBUBEF, UFP CHUE CHBY ULTYRFSH NPZHF ITBOYFSHUS CH PFDEMSHOPN ZHBKME U TBUYYTEOYEN. js. eUFEUFChEOOP, B FPN UMHYUBE OE OHTSOP RYUBFSH LMAYUECHPE UMPCHP SCRIPT H UBNPN ZHBKME: RTPUFP RPNEUFYFE RTYCHEDЈOOHA CHSCHYE UFTPLH B TBDEME HEAD, NY MAVBS ZHHOLGYS VHDEF DPUFHROB FPYUOP FBL CE, LBL EUMY R ™ £ EЈ FELUF OBIPDYMUS RTSNP ON UFTBOYGE. ьFP HDPVOP EEЈ Y RPFPNKH, UFP RTY CHP'NPTSOPN YUNEOOOY ULTYRFB CHBN OE RTYDЈFUS YUNEOSFSH CHUE HTML -ZHBKMSCH, LPFPTSCHE ABOUT OEZP USUSCHMBAF.
ъБЛМАЮЕОЕЙЕ
rPOSFOP, UFP RPLB EEЈ OYUESP OE RPOSFOP. uPVUFCHEOOP, S OE DBCHBM PVEF HYUIFSH CHBU SISHLH CH RPMOPN PVYAЈNE: DMS LFPZP EUFSH NBUUB KHNOSCHI Y RPMEOSHI LOIZ. rTPVMENB CH FPN, YUPP PYUEOSH YUBUFP X MADEK, RTPYUIFBCHYI FBLYE LOYZY, CHPOBOILBEF NBUUB CHRTPUPCH YNEOP CHTENS RETCHPK RPRSCHFLY TEBMSCHEYUPCHBFSHT y ChPF FHF, S OBDEAUSH, NPЈ NBMEOSHLPE THLPCHPDUFCHP PLBTSEFUS RPMEHOSCHN.
with TBUUNPFTEM CHBTYBOFSH TEYEOYS DCHKHI YBDBYU, LPFPTSCHE YUBEE CHUEZP CHUFTEYUBAFUS RTY RPUFTPEOY CHEV-UVTBOYG. LPOEUOP TSE, CHBN OKHTSOP BOBFSH VPMSHIE P JavaScript: CHP'NPTSOP, YNEOOOP HZMHVMEOYEN OBOYK NSCH Y ABKNЈNUS ABOUT UMEDHAEN HTPLE. b UEKYUBU - OBRPUMEDPL - OEULPMSHLP RTBCHYM, LPFPTSCHE OEPVIPDYNP RPNOFSH PE CHTENS RTPZTBNNYTPCHBOYS ABOUT JavaScript.
1. accepted JavaScript YUHCHUFCHAYFEMEO L TEZYUFTH.
lBL HTSE ZPCHPTYMPUSH TBOSHYE, RETENEOOSCHE temp J Temp DMS SJSHLB JavaScript OE PDOP Y FP CHE: X OYI VHDHF TBOBOOCHE BOBYUEOIS, RPFPNKH VHDSHFE CHOINBFEYPE.
2. LBTSDSCHK PRTBFPT DPMTSEO PLBOYUYCHBFSHUS FPULPK U BRSFPK.
FEPTEFYUEULY RPUMEDOIK PRTBFPT VMPLB (...) NPTSOP RYUBFSH Y VE'FULY U ЪBRSFPK, OP MKHYUYE EЈ CHUЈ-FBLY UVBCHYFSH… LTPNE UREGIBMSHCHETKHYUBBUCHPCHPN
3. ОЕ ЬВЩЧБКФЕ PVTBNMSFSH ULTYRFSH UYNCHPMBNY LPNNEOFBTYS.