How to Create a Proper Starter Custom JavaScript Document with jQuery | Learn JavaScript
We link several different jQuery libraries in HTML. We use CSS files are in head section. At the end of document, we have jQuery at the top, then other jQuery libraries or plugins and then our custom.js file at the end. custom.js has defer attribute so that it may load at the end after everything is loaded at the page. I initialize plugins in custom.js. Also our custom scripts are in custom.js file. To start with, I have some useful functions in my custom.js file.
First of all I have document ready function. It initializes when DOM is ready. In this function I am calling screenCheck function. I will come back to screenCheck later. In document ready you can call functions, initialize sliders and more.
Then I have debounce function to delay some actions. It is being used on window resize function. I am calling same screenCheck function on window resize with debounce. I am checking screen resize in 'document ready' and in 'window resize'. Because 'window resize' can fire multiple times when you resize browser window. So I am delaying function calls inside 'window resize' by using debounce.
Then we have 'window scroll' function. If I need to fire a function of perform some DOM manipulation when window is being scrolled. I can use those inside this area. You can also use debounce with 'window scroll'.
When everything gets loaded, then 'window on load' gets fired once,
If I need any function or action to fire after everything is loaded at page, then I can use here.
Then I have screenCheck function that is being fired in 'document ready' and on 'window resize' event. In this function I am checking if window screen size or device size is less than or equal to 1024 or more. If its less or equal to 1024, i am applying a class named as 'is-mobile' at body tag and removing class 'not-mobile' if present. In other case I remove that class and apply another class named as 'not-mobile'. Also I am unbinding event listeners and removing attributes if need be, by calling another function.
Next I have a function to apply classes if need be. I can call this function in 'document ready' above.
Then I have few more functions and functionality is commented in those
If i need these functions i can call these in 'document ready' or 'screenCheck' function.
These functions are menuHoverToggle, slideToggleElement, toggleSlide, justToggle, showCurrentYear and moveToTop. Their names are self explanatory, right? And functionality is there and I can call these functions as needed. Functions are being registered but not called.
Then I have code form 'jQuery easing' plugin. This is to use transitions in javascript if needed - like i have used 'easeInOutExpo' in moveToTop function.
Then I have device js plugin code that detects device screen and adds relevant classes in body tag. Helper classes in body help me to target DOM element with respect to device that is being used to visit the site. By using these classes, i can style elements according to device.
You can use these two libraries or skip these. So this is my custom.js file and I have shown you how I prepare useful function and event listeners to use according to my need. Also notice how function names are self explanatory and I am using camel case. And I do not create this file every time. I use visual code snippets and i have snippet for it. So that's that. I hope this tutorial will help you to create helping function for you to make your work easier.
✅ How To Hide / Protect JavaScript Code - Techniques and Tools
• How To Hide / Protect JavaScript Code...
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
• React JS UNDEFINED Solution | Reactjs...
✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method
• Calculate Sum or Total from Values in...
✅ Get URL Parameters in JavaScript | URLSearchParams
• Get URL Parameters in JavaScript | UR...
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)
• DIV to PDF, Iframe to PDF using JavaS...
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
• How To UnMinify JavaScript Minified F...
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
• Toggle Class in Vanilla JavaScript | ...
✅ How to Execute a JavaScript File by using NPM
• How to Execute a JavaScript File by u...
✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript
• Get User's Location (Country, State, ...
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
• Replace jQuery with Vanilla JavaScrip...
Thank You!
Channel Support
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: https://www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
Instagram: / webstylepress
LinkedIn: / webstylepress
GitHub: https://github.com/webstylepress
#js #javascript #jquery #webdevelopment #tutorials #webstylepress
Смотрите видео How to Create a Proper Starter Custom JavaScript Document with jQuery | Learn JavaScript онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь WebStylePress 10 Май 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 91 раз и оно понравилось 4 людям.