I edited this post to present it with better clarity of what I'm actually asking.
My confusion was and to some extent still is not being clear on the components that make up a slideshow in javascript.
To the best of my understanding the slideshow has these basic components that makes it work: 1) The array, 2) the preload declaration, 3) the counter, which is the for loop, and 4) the next image function. And of course the onclick button to execute the event. The onclick button calls the next image function. I redid the code. Although, it is not quite working I have no errors and no warnings. Everything looks similar to the tutorials I've been looking at. Any suggestions before I submit my homework. Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>slideshow</title>
<script type="text/javascript">
//create array of image objects
var myPic=new Array("photos/picture0.jpg",
"photos/picture1.jpg",
"photos/picture2.jpg",
"photos/picture3.jpg",
"photos/picture4.jpg")
var num=0; //I believe this is my index
//I don't understand why I'm creating a new array here.
//I saw it in two different tutorials
var preLoad=new Array(5)
//Here I'm initializing the counter and preloading the images.
for(i=0;i<myPic.length;i++)
{
preLoad[i]=new Image()//Don't understand this part yet or the next line.
//I saw it in a tutorial
preLoad[i].src=myPic[i]
}
//this is to load the next image, reset the counter and end the loop.
function nextImg()
{
if(num<preLoad.length-1){
num=num+1;
document.getElementById("myImg").src=preLoad[num].src
}
else{
num=0
document.getElementById("myImg").src=preLoad[num].src
}
}
</script>
<!--So far no errors, no warnings.-->
</head>
<body>
<img id="myImg" src="photos/picture0.jpg" width="225" height="225" alt="firt picture" border="3"/>
<input type="button" value="show next picture" onclick="nextImg)" />
</body>
`enter code here`</html>
what's this...?
<form name="show" align: center; />
that looks like style information but it's sitting there naked, and you don't need style on a form anyway, since it's not a displayed thing.
also, you have a bunch of mistakes here, but your biggest one is that you're not understanding how arrays work. Your code isn't doing what you *think it's doing. you're incrementing myPic which isn't an integer, it's an array. What you need to be incrementing is an index IN the array...
myPic = new Array('a','b','c');
myIndex = 0;
var currentLetter = myPic[ index ] ;//currentLetter is now 'a'
index++;
currentLetter = myPic[ index ]; // currentLetter is now 'b'
I'm not sure what you mean by i==[0]... I suspect you mean i == 0? or you're again confusing how looping through arrays works.
Related
I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});
Im new to Javascript and this site. Below are 2 codes (only HTML, normal i work with external js files) which deliver a button what you can click for a date. I was wondering which code has the preference amongst the developers and is there any advantage from 1 another? The way i see it is that adding a function is overkill.
Code 1
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
Code 2
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">The time is?</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
The second one is way better, you are separating the js from the html.
If you have two buttons with the same function, it will be easier to avoid duplicated code and to maintain with the second version!
For example if you want to change the behaviour of your buttons, you won't have to modify your html and be able to change the beviour every where at once.
In my opinion the correct answer here is neither of both.
To write maintainable and readable code, the best practice is to have a complete separation between HTML, CSS and JavaScript. Making the assumption that "it's only one line", is pretty dangerous, as one line quickly becomes two and so on. It's better to always use the same rules instead of making exceptions for one-liners.
Personally, I would write HTML like this:
<button class="time-button"></button>
<p id="demo"></p>
<script src="script.js"></script>
In script.js, you can then attach an event listener like this:
// Note that querySelector might not be supported in really old browsers
var timeButton = document.querySelector('.time-button');
var demoParagraph = document.getElementById('demo');
// Or attachEvent for IE < 11
timeButton.addEventListener('click', timeFunction);
/**
* Here you can write some beautiful comments about the function
*/
function timeFunction (eventData) {
demoParagraph.innerHTML = new Date().toISOString();
}
In case you write it like that you can start listening (addEventListener) and stop listening (removeEventListener) whenever you want to.
It's recommended to put the elements in a variable, since looking up an element is pretty slow.
I'd say :
Both are correct depending on what you want to do with it.
First way : OK if the function is short and not complex, no re-use purpose.
Second way : OK if the function is complex, need to be maintained and plus : you can re-use it and avoid code duplication.
Now another approach is to extract javascript methods in another .js file.
Below example is to get rows or column names. I want to hide column names by indexing only and not by column name.Is it possible to get column name by indexing using table element? I also want to hide rows based on indexing.
Please provide solution?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Viewer Page</title>
</head>
<body onload="init()">
<script type="text/javascript" language="JavaScript" src="http://localhost:8700/iportal/jsapi"></script>
<script type="text/javascript" language="JavaScript">
function init() {
actuate.load("viewer");
actuate.load("dialog");
actuate.initialize("http://localhost:8700/iportal", null, "administrator", null, runReport);
}
function runReport() {
var viewer = new actuate.Viewer("viewerpane");
var manUIOptions = new actuate.viewer.UIOptions();
manUIOptions.enableToolBar(false);
manUIOptions.enableFilter(true);
viewer.setUIOptions(manUIOptions);
viewer.setReportName("/Resources/xyz.rptdesign");
viewer.submit(getColumnAndHide);
}
callBackError = function(exception) {
window.alert('ERROR: ' + exception);
};
function getColumnAndHide(viewer) {
var myTable = viewer.getCurrentPageContent().getTableByBookmark("detail");
//var myColumn=myTable.getColumnName(2);
//myTable.getRow(2);
myTable.submit();
}
</script>
<div id="viewerpane"></div>
</body>
</html>
Here's an overview for you. First I would "configure" all inside the birt report, which shall be hidden or not. It's a bad design in my opinion, if the report is manipulated while using it. It could lead to serious race conditions, wrong outcomes and difficult debugging problems.
The basics of creating a birt report are pretty much wrapped up here:
Vogel, "Reporting with Eclipse BIRT and Java Objects (POJO’s) - Tutorial"
Then, when you have a Dataset or let's say a kind of data container like a variable you can put the content into your Template (*.rptdesign file).
The workflow is as follows:
Put a Grid into the page
put a label or datacell or whatever can contain variable text into the grid
Select the element via point-and-click™
In the "Property Editor", there is a Visibility-Tab to click.
Enter the correct expression (e.g. JS), Save and Run a Test.
If you like I made a simple example to show you how to hide an element, if a requirement is met. You can download it.
BIRT Report Design Example
It's free GNUv2 whatever... Hope this helps you a bit. AFAIK
I am beyond new to JavaScript. Having only just differentiated it from Java as a programming language, I have decided to take it up, and want to try out some practical projects. But I have no idea what I'm doing wrong in terms of why my code is just screwing up.
The Idea
At work, I have a system where by simply opening a URL in my browser I can execute a script to reset a batch of ribbon screens. I don't know how the code works, but it does, and I'm happy. But I rather want to have a webpage I can go to that batch opens every webpage. It can be messy; at this point I only want the job done. So from what I understand, I've managed to cobble together some code.
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ribbon screen batch Reset</title>
<script>
var txt="Success!";
function open()
{
try
{
window.open("test.html");
document.write("<p>",txt,"</p><br />");
}
catch(err)
{
document.write("Something went wrong here.");
document.write("Error description: " + err.message + "\n\n");
alert("Interrupted due to errors. See webpage for details");
}
}
</script>
</head>
<body>
<img src="http://placehold.it/500x150" />
<h1>Ribbon screen batch reset Type 1 </h1>
<p>Version 1.0.3</p>
<button type="button" onclick="open()">Run code</button>
</body>
</html>
I promise you I can't see a problem, I have another document in the same folder called test.html, it's just when I click the button on index.html the button disappears, and I'm left with just a blank page. Help is much appreciated!
Two simple fixes:
1) open is a reserved word; call your function something else.
2) You must name the window, then use that name to manipulate it.
Code:
<html>
<head>
<script type="text/javascript">
var txt="Success!";
function openit()
{
try
{
testwin = window.open("test.html");
testwin.document.write("<p>",txt,"</p><br />");
}
catch(err)
{
document.write("Something went wrong here.");
document.write("Error description: " + err.message + "\n\n");
alert("Interrupted due to errors. See webpage for details");
}
}
</script>
</head>
<body>
<img src="http://placehold.it/500x150" />
<h1>Ribbon screen batch reset Type 1 </h1>
<p>Version 1.0.3</p>
<button type="button" onclick="openit()">Run code</button>
</body>
</html>
Rename your function to something else, like openMyPage. Using onclick="open()" will call document.open
I have no idea what the "ribbon screen" is but your code has a lot of problems.
First, being if you are using document.write() in <header> the outcome is not going to be visible and it's overall bad practice.
Second problem is this is completely wrong document.write("<p>",txt,"</p><br />");
the correct code would be document.write("<p>"+txt+"</p><br />");
Third, is you can write this whole thing as just one short line:
<button type="button" onclick="window.open("test.html")">Run code</button>
Hope this helps,
Cheers
How can I do a script to catch strings as input and open them on a Firefox document? Each link would go to a different window or tab. Any ideas would be much appreciated.
I just want to be able to take some links and open them. For example I have 50 Links. And copying and parsing those 50 Links take a really long time and also a lot of work. If I can just write a script to read those links and let the computer do the work, it will be very helpful for me. I just don't know how to write that or where because it does not sound too hard (just gotta know how to). Thanks for any suggestions.
if i got you right, i guess you could do something like this. This will open the four urls listed but it will probably be blocked by the popup blocker.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
<!--
var dir = new Array();
dir[0] = "http://www.creativecorner.cl/";
dir[1] = "http://www.sourcing.cl/";
dir[2] = "http://www.feeds.cl/";
dir[3] = "http://www.neonomade.com/";
for(i = 0 ; i < dir.length ; i++){
window.open(dir[i],'autowindow' + i,'width=1024,height=768');
}
-->
</script>
</body>
</html>
Write this to a file names "links.html" on your hard disk:
<html>
<head><title>Your links</title></head>
<body>
Your links:<br />
XXX<br />
</body>
</html>
Replace the two "XXX" with one link and emit one "link" (a) line per link. You should be able to do that in most text editors with a little search'n'replace. After you're done, save the file and open it in your browser.
Another option is to look at the bookmark file of your browser and to duplicate the format. You can usually ignore things like "last visited", etc. Just add the links.
If you want to do this in JavaScript, you will need to use a form with a textarea. Create a small HTML document with a form, the JavaScript, the textarea and a div for the result.
Add a button which calls a JavaScript function which takes the text from the textarea, split it into lines and create the HTML above (only the link-lines) as a String. Now assign this string to the attribute innerHTML of the div to make the links clickable.