강의

멘토링

로드맵

Programming

/

Web Publishing

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)

The JS Core Theory and Practical Example Textbook and Completed Version for Web Publishers is a lecture textbook produced in PDF format. This textbook helps web publishers to fully acquire the basics of JavaScript and jQuery that they must know. A feature of this textbook is that it allows you to strengthen your theory through small missions connected to the theory. In particular, this textbook is also fully prepared with practical examples that utilize all the theories learned. The entire PDF page contains more than 320 pages of pure JavaScript (Vanilla JavaScript) and jQuery, with sufficient explanations added so that Coding Works can be easily understood. In particular, publishers can learn practical examples of jQuery interactions that are essential for creating websites.

(4.6) 11 reviews

188 learners

  • codingworks
전자책 제공
웹퍼블리셔
미션
이론 실습 모두
JavaScript
jQuery
HTML/CSS

Reviews from Early Learners

What you will learn!

  • JavaScript Essential Theory and Practical Application Examples

  • Essential jQuery Theory and Practical Application Examples

  • JavaScript & jQuery HTML+CSS+JS Completed

<JS Core Theory and Practical Examples Textbook and Complete Version for Web Publishers>

A core JS basic textbook carefully created by Coding Works.
Descriptions and small missions specifically for web designers, web publishers, and web developers.
And realistic and fun practical examples for your work,
Feel confident with JavaScript and jQuery!!

In particular, for publishers to create websites
You will learn practical examples of essential jQuery interactions.

'Learning JS, a burdensome language for web designers and web publishers, made easy to understand!'

This is a JS core theory and practical example PDF textbook that Coding Works has painstakingly created. Unlike general books, Coding Works is a must-have for web designers and publishers who find JavaScript and jQuery burdensome! It contains sufficient explanations so that students can easily understand the necessary content. While creating this textbook, I worked hard while thinking , 'How can I explain this so that students can understand it more easily?'

'Learn the theory step by step and then apply it to small missions!'

Existing JavaScript and jQuery textbooks extensively explain even content that is not immediately necessary, but lack distinction and explanation of core content. It is difficult for readers to know what, how, and what to focus on and learn. In particular, there are few realistic examples of theories. There are examples, but they are often difficult to see as realistic examples. However, <JS Core Theory and Practical Example Textbook and Complete Version for Web Publishers> created by Coding Works organizes only the core content that can be used immediately in practice. In addition , when studying a new theory, it is structured so that you can definitely do an example that utilizes the theory, that is, a small mission.

'I was wondering where this could be used... Ah~ So this is when I can use the theory I studied!'

Create a practical example using all the theories you have learned. When studying theories, you may think, "Where can I use this?" However, as you create several small missions and practical examples in the last part, you will think, "Ah, this is when I can use the theories I have learned!" This will help you remember the theories more firmly. In particular, as you create realistic practical examples, you will realize that JavaScript and jQuery are not just difficult and burdensome things that developers think about , which will motivate you to study JavaScript and jQuery more enjoyably in the future.

'It's great because it's a PDF textbook so I can check it anytime, anywhere, and the completed file is also very helpful!'

In the past, I used to buy books from bookstores to study publishing or programming. I did that too. However, when you need to read a book, you always have to have it with you, and it is hard to carry it around, so most of the time you just leave it at home. That is why e-books are good because you can read them whenever and wherever you want.

By the way, learning publishing and web development without textbooks is not a very good habit. You search and get knowledge from many people through YouTube or blogs, but in the end, you often end up with fragmented knowledge. Whether it is a general book or an e-book, you must have a reference book in any form to improve your skills.

All the small missions and practical example files explained in the textbook can be downloaded in HTML+CSS+JS file format. So before coding the contents in the textbook, you can first open the file as a preview and practice through the textbook, and you can check the parts you missed in the textbook through the completed file.


📖 PDF textbook contents (JavaScript, 212 pages)

01. Basic JavaScript Grammar

  • JavaScript language linking
  • Add a comment
  • Data Output
  • Data Type
  • Arithmetic operators and comparison operators

02. JavaScript Variables

  • Variable declaration, assignment, initialization, browser output
  • Variable naming rules
  • Data type stored in variable
  • Redeclaration of variables
  • Reasons for using variables
  • Creating a program using variables and functions (calculating the average)
  • ES2015 backticks (`) and template strings

03. JavaScript conditional statement if, switch statement

  • Basic if else conditional statement
  • Multiple if conditional statements
  • Logical Operators
  • Nested if conditional statements
  • switch statement
  • Ternary operator
  • Conditional processing using if and '?'

04. JavaScript loops - while loop, do while loop, for loop

  • Compound assignment operator
  • Increment/decrement operator
  • while loop
  • do while loop
  • for loop
  • Nested for loop

05. JavaScript array and for in statement

  • Array
  • Arrays and for loops
  • for in door
  • break keyword
  • continue keyword

06. JavaScript function

  • Function declaration and call
  • Parameters and return keywords
  • Declaration of variable function
  • Built-in functions
  • Immediately executed function
  • Function expression, arrow function

07. JavaScript Objects and Constructor Functions

  • Type of object
  • Declaring and calling objects
  • Comparison of variable, array, and object concepts
  • this keyword
  • Constructor functions and prototypes

08. JavaScript Basic Built-in Objects

  • String string
  • Number & Math
  • Array properties and methods
  • Date Date
  • Getter and Setter Methods of Date Object

09. BOM(Browser Object Model): Browser Object

  • BOM(Browser Object Model)
  • window object properties and methods

10. DOM(Document Object Model): Document Object

  • What is a DOM Document Object?
  • Method to get DOM document object
  • DOM document object preparation syntax method (onload)
  • Properties and methods of the document object
  • Properties and methods of the event object
  • Properties and Methods of Mouse & Keyboard Event Objects

11. HTML DOM Node

  • What is an HTML DOM Node?
  • Navigating between HTML DOM Nodes

12. JavaScript - Document Object Properties

  • Document Object - Form
  • Document Object - Class Properties
  • Document Object - Area Properties
  • Document Object - dataset property

13. JavaScript Practical Examples

  • Move smoothly by clicking the mouse
  • Making a digital clock (method 1)
  • Making a digital clock (method 2)
  • Floating Modal (1)
  • Floating Modal (2)
  • Create a StopWatch (minutes:seconds:milliseconds)
  • Create a StopWatch (hour:minute:second)
  • Create a Rock Paper Scissors Game
  • Creating a Calculator with Grid (Inline JavaScript)
  • Creating a calculator with Grid (calling function parameters)

📖 PDF textbook contents (jQuery, 112 pages)

01. jQuery connection and basic grammar

  • jQuery Linking - Link after Download
  • jQuery Linking - CDN Linking Method
  • jQuery Basic Grammar - Script Writing Location/Comments

02. jQuery Essential Methods Part 1

  • CSS style change method
  • Find Element Method
  • Creating mouse event functions & jQuery variables
  • Add/Remove Class Methods
  • Effect method
  • Text related methods
  • Attribute related methods
  • Dynamically insert/remove html elements
  • Methods related to width and height
  • Location related methods
  • Scroll position method of an element
  • Methods related to copy and wrap
  • Event types (mouse events, keyboard events, form-related events)

03. jQuery Essential Methods Part 2

  • Animation effect animate()
  • The load() method to load individual documents into the desired location on the page.

04. JQuery Practical Examples

  • Creating 3 Type Image Slider jQuery Tab Menu Content
  • jquery accordion content
  • Footer Family Site Custom Select Box
  • Change background color using input color
  • When you move your mouse down, CSS changes and it smoothly goes to the top
  • Navigate to each section with smooth scrolling
  • Create a font size increase/decrease bar
  • Create a button to increase or decrease font size
  • Switch between light mode and dark mode
  • Creating a file upload form
  • Create a profile picture upload form
  • Make invisible input fields visible when checkbox is checked
  • Click the See More button to load hidden content
  • Photo gallery where you can see a larger image by clicking on the thumbnail image
  • Show/Hide Password Input Value with Font Icon
  • Check the number of characters in a text input box (textarea)
  • Create a magnifying glass that follows the mouse pointer
  • Parallax Effect according to mouse scroll
  • Create a navigation bar with icon tabs at the bottom of the mobile
  • Create a To Do List
  • Slider (Previous Next Buttons, Autoplay Control Buttons)
  • Slider (Autoplay, stops when mouse is over and resumes when mouse is removed)
  • Animation of text going up when clicking on form input field
  • Creating an image hover effect with jquery animate
  • Open hidden content with sidebar navigation
  • Creating a Photo Gallery Lightbox
  • Responsive animated modal launch
  • Front Back Transition Screen Change

05. How to use jQuery plugin

  • How to use jQuery slider plugin Slick Slider
  • How to use jQuery typing plugin Typed.js
  • How to use jQuery Lightbox plugin featherlight.js
  • jQuery Countdown Timer Plugin The Final Countdown

※ This jQuery textbook does not cover how to use Ajax.


🚩 PDF textbook preview screenshot ( JavaScript)

🚩 PDF textbook preview screenshot ( jQuery)



⚡ Preview of the complete JavaScript practical example

Slider (Previous Next Button, Autoplay Control Button)

Slider (automatic Autoplay, stops when the mouse is over and starts again when it is removed)


▲ Move smoothly by clicking the mouse (JavaScript method)


[Minutes, seconds, milliseconds] Creating a Stop Watch


Creating a Rock Paper Scissors game


Making a calculator with Grid


Change background color with mouse events


Floating Modal (Method 2)

Preview of the complete jQuery practical example

▲ Move smoothly by clicking the mouse (jQuery method)


Create a To Do List


Create a tab bar navigation icon at the bottom of the mobile screen (Tab Bar navigation)


Creating a magnifying glass function that follows the mouse pointer


Switch between light mode and dark mode


Create a bar to increase or decrease font size


Check the number of characters in the text input box (textarea)


▲ Show/Hide password input value with font icon


▲ Create a profile photo upload form


▲ Animation of text going up when clicking on form input field


▲ Creating a photo gallery lightbox


▲ Creating an image hover effect with jQuery animate


▲ Open hidden content with sidebar navigation


▲ Front Back Transition screen change


▲ How to use the jQuery slider plugin Slick Slider


▲ How to use jQuery typing plugin Typed.js


▲ How to use jQuery plugin Featherlight


▲ How to use the jQuery countdown timer plugin The Final Countdown


🌈 Preview the complete JavaScript & jQuery file


Things to note before taking the class 📢

This textbook is for those who are preparing for employment as a web publisher or are currently working as a web publisher. It is not a lecture with the depth that front-end developers or back-end developers want. However, it does not cover the core theories of JavaScript and jQuery in a poor manner. It covers the essential content throughout. The depth of JS lectures that front-end developers or back-end developers want is suitable for intermediate-level JavaScript textbooks on the market.

🟢 Before taking this course, it would be a good idea to read the Coding Works blog post below.
Why Web Designers and Web Publishers Should Know JQuery Better Than JavaScript: https://www.inflearn.com/blogs/3527

Player Knowledge and Notes

  • Since this is a JS learning textbook that is not focused on publishing, basic HTML+CSS skills are sufficient.

Introducing the knowledge sharer ✒️

Current) National Publishing & Front-end Instructor
Currently a freelance front-end publisher
Currently, I run the HTML+CSS+JQUERY publishing YouTube channel 'Coding Works'
Green Computer Academy Web Publishing Instructor
Jo Eun Computer Academy Web Publishing Instructor
Now a Computer Academy Web Publishing Instructor
Front-end publisher, front-end publishing specialist
UI/UX Web Design Portfolio Course
Web Design Technician Practical Certification Course
Easy & Edu Frontend UI/UX Design and Publishing

🌏Coding Works Inflearn Lecture List - https://www.inflearn.com/users/@codingworks

🌏Inflearn Coding Works Lecture Learning Order (Learning Roadmap) - https://www.inflearn.com/blogs/2351

🌏Coding Works Inflearn Publishing Blog - https://www.inflearn.com/users/@codingworks/blogs

🌏Coding Works Publishing YouTube Channel - https://www.youtube.com/codingworks

Recommended for
these people

Who is this course right for?

  • Those who want to see the core content of JavaScript & jQuery in a PDF textbook

  • Web designers, web publishers, and web developers who need to improve their JavaScript & jQuery skills

Need to know before starting?

  • Since this is a JS learning textbook that is not focused on publishing, you only need basic HTML+CSS skills.

Hello
This is

12,637

Learners

745

Reviews

2,114

Answers

4.9

Rating

23

Courses

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

Curriculum

All

5 lectures

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

11 reviews

4.6

11 reviews

  • 잼원님의 프로필 이미지
    잼원

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    돈이 아깝지 않을 정도로 알찹니다

    • 코딩웍스(Coding Works)
      Instructor

      수강평 감사드립니다~^^

  • 고창우님의 프로필 이미지
    고창우

    Reviews 10

    Average Rating 5.0

    5

    100% enrolled

    최종 프로젝트 때 많은 도움이 되었습니다. 정말 감사드립니다.

  • 한우진님의 프로필 이미지
    한우진

    Reviews 1

    Average Rating 5.0

    5

    80% enrolled

    이론과 정말 다양한 실무 예제들이 담겨있어서 따라해 보면서 금방 실력이 늘 수 있을 것 같아요! 인터넷 강의가 아닌 전자책이라서 언제든지 확인하기 쉽고 정해진 강의 시간이 있는 것이 아니라 제 속도에 맞게 공부 할 수 있다는 점도 정말 좋은 것 같아요 열심히 공부해 보겠습니다!

  • 재롱이님의 프로필 이미지
    재롱이

    Reviews 32

    Average Rating 5.0

    5

    100% enrolled

    정리 엄청 잘되어있어서 만족입니다!

  • wjdals992님의 프로필 이미지
    wjdals992

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    그동안 유튜브나 무료강의등으로 자바스크립트를 공부했지만 실속은 없는 이론들뿐이었는데 이 강의를 구매하여 보고선 자바스크립트에 대해 좀 더 깊이 이해할 수 있게 되었습니다.

$26.40

codingworks's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!