Web design- week 4
JavaScript and jQuery
Html
Old JavaScript webpages used to use links such as:
<ahref=”/more-info.html”>Moreinfo</a>
A pure menu html is:
<ui>
<li><ahref=”index.html”>home</a></li>
<li><ahref=”more-info>moreinfo</a></li>
</ul>
This will only load a new URL, no styling.
JavaScript is the most popular programming language in the world.
Using JavaScript you can:
- Change HTML context
- Change HTML attributes
- Change HTML styles
- Validate data
JavaScript needs to go inside of a <script> </script>
<head>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</head>
An element can be identified by type, class and ID.
- Having an ID helps JavaScript to find the specific element that you want them to.
You add a 10 with:
<p id=”demo”><p/>
You replace “demo” with anything you want it to.
You can then command JS to find that ID with:
document.getelementbyld
(“demo”)
External:
<!DOCTYPE html>
<html>
<head>
<head>
<script src="js/myScript.js"></script>
</head>
</head>
<body>
</body>
</body>
</html>
JS files can be cached and compressed, which allows a page to load faster.
Using JS in external files can:
- Separate HTML and code
- Make HTML and JavaScript easier to read and maintain
- Cached JavaScript files can speed up page loading
Console log
In the script section you can put a hidden message and hide it under a button, so when you press a button you can have the hidden message pop up and then when you press it again the message would disappear.
The code is:
Console.log(“iamhere”);
“iamhere” is the message and can be exchanged for anything!
Functions
A function can contains several tasks.
function doThis() {
console.log("do This...");
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
document.getElementById("myDIV").innerHTML = "How are you?";
}
<div id="demo"></div>
<div id=myDIV"></div>
jQuery
jQuery is a JavaScript library. It makes elements like HTML document transversal and manipulation, event handling, animation, and ajax easier to use. It is an API, that works across multiple different browsers.
Add the code link from jQuery in the header of the HTML file. You can find the newest version of jQuery code by googling it.
A jQuery command looks like this:
$("#some-div").toggle();
Find all the jQuery api commands at: http//api.jquery.com/
Click actions
Most elements can have a click action. To add one, you add
onclick=”…”
in the attribute section of an element.
Function example:
function click_helper(id){
$('.col-sm-3').hide();
$('#'+id).show();
}
<a onclick="click_helper('col-1')">menu 1</a>
<a onclick="click_helper('col-2')">menu 2</a>
Sometimes you need to add a event listener to an element to a page. The ‘ready’ state is used like this:
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
Comments
Post a Comment