Week 2.1 —JavaScript, Yet Convenient
Learning to Use jQuery for Complex Actions within a Website
--
Throughout this post, we will explore how to set up, practice, and apply a tool called jQuery within the HTML of a website.
1. What is jQuery?
Simply put, jQuery is to JavaScript as CSS/Bootstrap is to HTML; it is a library of pre-built JavaScript codes that control certain components of HTML. While Javascript itself is capable of processing every function (ex. changing the font of a button), it is not practical because such will make the code not only long and complex but also (possibly) incompatible for certain browsers. Therefore, “importing” jQuery can make programming more convenient as shown below:
document.getElementById("element").style.display = "none";The Javascript code above can be re-written with jQuery as follows:
$('#element').hide();Much easier, right?
2. Setting Up jQuery
In order to add jQuery, one can either download the jQuery library from jQuery.com or include jQuery from a CDN (Content Delivery Network) such as Google. For downloading and hosting jQuery might be cumbersome, one may prefer including it from a CDN that hosts jQuery.
The jQuery Google CDN is the following as referenced from w3schools:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>If you recall one of my previous exercises, My Article Memo, the same code can be found in the Head section, as it was imported along with the bootstrap template. Therefore, this step of copying and pasting is not necessary if importing a bootstrap from the beginning.
3. Practicing jQuery
In order to use jQuery, a certain code/variable has to be “specified” or “pointed at” in the function. For CSS, we used class = “label” to specify the object. For jQuery, however, we use an ID value to specify a certain button, input box, div, etc. Let us practice this using the inspection tool.
A. Importing a value within an input box
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">Article URL</label>
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Brief Comment</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">Save</button>
</div>// locate the id "post-url" and import the value with val()
$('#post-url').val();B. Revealing and hiding a div
<div class="posting-box" id="post-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>// locate the component with the id "post-box" and hide it with hide(); change the display value in css to "none"
$('#post-box').hide();// reveal it with show() and change the display value to "block"
$('#post-box').show();
C. Importing a value from CSS
$('#post-box').hide();
$('#post-box').css('display'); $('#post-box').show();
$('#post-box').css('display');D. Inserting a text within a tag
For an input box:
$('#post-url').val('insert your text here!');For others (ex. changing the text within a button):
// bestow an id upon the button in question
<button id="btn-posting-box" type="button" class="btn btn-primary">Open Posting Box</button>$('#btn-posting-box').text('Close Posting Box');E. Inserting an HTML within a tag
To insert an HTMK within <div> ~ </div> (ex. add a card upon posting)
// bestow an id upon the html that the new item will be attached to
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="<https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg>" alt="Card image cap">
<div class="card-body">
<a href="<https://naver.com/>" class="card-title">Article Title</a>
<p class="card-text">Your title goes here</p>
<p class="card-text comment">Comments</p>
</div>
</div>
</div>i. Inserting a button:
let temp_html = '<button>Button to be added</button>';
$('#cards-box').append(temp_html);ii. Inserting a card instead of a button:
// Caution: enclose the html with backticks (``)
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = '<https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg>';
let link_url = '<https://naver.com/>';
let title = 'Your title goes here';
let desc = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua';
let comment = 'Comments';let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);4. Application — My Article Memo Project (Week 2)
Using the skills learned, I tried adding a couple of functions to the “My Article Memo” project. The update can be found in the story below:
Well, I think that should summarize this week’s blog. If you happen to be someone that is not me, thank you for checking this story out, and I hope you’ve been enjoying my blogs so far. Then, see you next week!
Fin.