Week 6
Hi all! We're starting on Javascript this week. I'm pretty excited about it actually. Javascript adds a lot of programming-style elements to website development. Variables can be used and items can be programmed to add functionality to your website. For one of the other weeks, we had our slideshow project and the code I borrowed for that relied on some javascript. Here's a sample from that:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 6000); // Change image every 6 seconds
}
</script>
Sourced from:
https://www.w3schools.com/howto/howto_js_slideshow.asp
So what we have in this case is several pictures indexed as slides. There's a for loop changing between one slide and the next through the length of included slides. A length of time is set for changing the images (increments of 1000=1 second each) and once that time has passed, the previous slide is replaced with a new one.
I'm looking forward to seeing what else we can do with Javascript. It strikes me as being the most dynamic and game-changing between HTML, CSS, and itself. We'll see what we're making after this week is up. Good luck, everybody!
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 6000); // Change image every 6 seconds
}
</script>
Sourced from:
https://www.w3schools.com/howto/howto_js_slideshow.asp
So what we have in this case is several pictures indexed as slides. There's a for loop changing between one slide and the next through the length of included slides. A length of time is set for changing the images (increments of 1000=1 second each) and once that time has passed, the previous slide is replaced with a new one.
I'm looking forward to seeing what else we can do with Javascript. It strikes me as being the most dynamic and game-changing between HTML, CSS, and itself. We'll see what we're making after this week is up. Good luck, everybody!
Thank you for including some code in your post. I am not very familiar with Javascript, so seeing some examples is very helpful. It seems similar to some other programming languages I have used, but it is always the little nuances of the language that can trip people up. I am still trying to decide how I am going to actually incorporate the Javascript elements. It seems like having some experience with it may really help you out this week. Good luck!
ReplyDeleteI like your inclusion of your javascript for the previous lab. I completed mine using CSS animations and keyframes so seeing it done in javascript is a nice comparison to have. I am finding it a bit difficult to fully utilize javascript and dynamic content due to some browsers interpreting the script differently. For example one problem I am having is Internet Explorer does not support reading innerHTML while all other browsers do. My approach for this has been to kindly inform the user that their browser does not support this content.
ReplyDelete