javascript functionality with <script> and without <script> - javascript

This is the button event of html and it works when the button click
<!DOCTYPE html>
<html>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
Source of code 1
and this one work too but this time its function is written in script
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Source code 2
Both codes are giving the same result. Can we call both the codes are using javascript ? or codes are functional by using javascript functionality ? or javascript code is the only code in html page which is written inside script

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes says it all:
Every HTML element has a set of attributes that allow for the
execution of JavaScript when certain events happen. These attributes
are called event attributes and are the name of the event prefixed by
"on".
here's a list of events: https://developer.mozilla.org/en-US/docs/Web/Events
Each of this onprefixed events are collected by the HTML4 DOM event interface and used by javascript in the window scope.
Avoid such attributes.
in short: keep your programmatic logic away from your template.
Use other methods to attach event listeners to your elements.

No , i am saying only code which we write in blocks are called javascript or we can use it directly without writing it in script , or is it compulsory to use script
It is not compulsory to write script, but it is a convention that is followed because you normally do not want your logic (Javascript) inside of your view (HTML).
If you look here you'll see that onclick is a javascript handler for the click event.
onclick
The onclick property returns the click event handler code on the current element.
So both are javascript. The onclick tag specifies a way to write javascript without a script tag basically. Normally, however, you typically only put in a function call like in your first answer because of the reason above of separating logic and template.

In my opinion both of the your approaches are using javascript. I prefer the second option and include the js from different file, but doesn't bother me if it's small project like this.

Related

How do I change the title of a web page using javascript?

I know this is a duplicate question, but I've tried a few approaches and I'm not able to get the solution I need.
I need to change the title of a web page, and I thought Javascript would be a good candidate. I've read many disapproving comments already, talking about how changing the title will negatively affect SEO-I'm not worried about that just now.
I'm able to change the title by reassigning a value in an inline script:
<input type="button" value="Click me." onclick="document.title = 'Some new title';" />
But using an inline script in this case is out of the question. I tried loading an embedded script tag above & below the body of the script, no go. This is what I settled on, and it didn't work initially (keep reading):
<script>
document.addEventListener("load", function changeTitle(){
document.title = "FUBAR";
}, true);
</script>
I've tried adding/removing the 'true' value at the end of the parameter list and that doesn't change anything. I avoided naming the function, then named it, and that didn't change anything. What DID work was changing "load" to "click". I need the title to change right after the document is finished loading...is there something else I can use, like "ready", or "onload"? Using "load" yielded no results, but I swear I've seen it used before.
Thanks!
Try using
window.addEventListener rather than document.addEventListener
See
https://developer.mozilla.org/en-US/docs/Web/Events/load
Note: More reliable is to add event listener on
"window.addEventListener".
No need to wait for the load event. Just set the title:
<html>
<head></head>
<body>
<script>document.title = "foobar"</script>
<!-- rest of document -->

javascript function gets called twice

I am trying to call a javascript function on clicking a link. Actually i want to submit a form on clicking a link using post method so i am trying to do the below-
<a href="javascript:submitCategory(this)" >Handicrafts</a>
and in javascript
function submitCategory(varthis)
{
alert(varthis.value);
}
I have few important questions:
1>When i click on the link the function submitCategory gets called twice. After much analysis found that i had two js files included and removing one of them made the function getting called only once.
meaning
when i have included
<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="cWed.js"></script>
submitCategory function gets called twice
and when i remove one of them and include
<script type ="text/javascript" src="jquery.js"></script>
submitCategory function gets called only once.
Why is it like this?
2> alert(thisvar.value) should return Handicrafts but it returns undefined. why could this be?
3>what exactly is the meaning of href="javascript:submitCategory(this)"? i have not come across this in any tutorial. and including this here should refer to the element "a" right?
1. You do not need to use the qualifier 'javascript:'
2. when you hook the event in html, always try to do it like event_handler(event). Note : event is the event object. and not some random variable here. You can read more about it in numerous places on the web. In your case varthis is the event object. to access this element use varthis.target and then to get its inner html you can use varthis.target.innerHTML
3. when the function is called you have to either explicitly get the html content of the calling element via the event tag, or just use jquery. You cannot pass variables in the way you think you are passing right now.
4. if you are actually trying to submit a form, I would recommend hooking the onSubmit event in script rather than HTML and put your custom form submit code there. If you do not need to do anything custom in form submission, you can just put the url of the target server function in the action attribute of the form.
Sample code :
<form>
Submit Category
</form>
<script type="text/javascript">
$('#submitCategoryLink').on('click', function (e) {
alert(e.target.innerHTML)
});
</script>
Since you haven't posted the contents of cWed.js it's difficult to know why you're getting a double submission, but my guess is that it contains a click handler of its own, which is duplicating the default handler.
The reason varthis.value doesn't work is because .value is only used for <input> and <select> elements, it contains the value that the user entered or selected from the menu. To get the text content of an element you should use .innerHTML.
A URI that begins with javascript: means that instead of fetching a page from a network location, the browser should execute the Javascript code after that prefix. It's not an officially recognized URI scheme (there was an Internet-Draft RFC, but it expired 2 years ago) , but all browsers support it.
When code is executing from a javascript: URI, this is the window, not the element that was clicked on. You need to use an onclick handler to get this set to the element.
The following works:
<a href="javascript:void(0)" onclick="submitCategory(this); return false;" >Handicrafts</a>
function submitCategory(varthis)
{
alert(varthis.innerHTML);
}
FIDDLE

javascript that produces functioning javascript

can you write javascript that produces/writes/etc. functioning javascript?
for example, have a link that has a function tied to it that when clicked produces a functioning javascipt snippet? The snippet could deal with a completely other elements.
For example
Link #1(has the javascript function that produces javascript) Link #2(does absolutely nothing for now)
Click on link #1(produces javascript snipped that says "when link #2 is clicked document.write('hello')"
Clicking on link #2 now produces "hello" whereas it previously did nothing. Is that possible?
Yes, you can dynamically assign event handlers described in text.
However, dynamic code generation is far more difficult than it sounds unless you're just following basic patters and replacing certain variables. Writing programs that write programs has long been a fascination of the computer industry, and this gave way to functional programming, which can be done in javascript.
Create the input/delete keys on the onClick handler for the datepicker, you can attach date information (or other data) when the input(s) are created. Now, you should look into $.delegate() for how to bind handlers to those inputs created. $.delegate can bind handlers to elements that are not created yet, so when they are created they will fire a handler. By storing date relevant information in the inputs via $.data() or data- attributes you will have context aware handlers for dealing with things.
If I understand your question correctly, you could do what you want with the code below.
Not sure why you'd want to do this, though.
can you write javascript that produces/writes/etc. functioning javascript?
You can do this the way I did it, or by using eval -- though, as many coders have pointed out, eval is evil!
<html>
<head>
<script type="text/javascript">
function initLinks(){
document.getElementById("link1").addEventListener("click", function(){
document.getElementById("link2").addEventListener("click", function(){
document.write("hello");
}, false);
}, false);
}
</script>
</head>
<body onload="initLinks()">
<a id="link1">Link 1</a>
<a id="link2">Link 2</a>
</body>
</html>

what are the "for" and "event" attributes of the script tag (Javascript,HTML)

In a web application I've inherited at work which was written about 10 years ago I've noticed the following code snippets repeatedly used:
<script language="JavaScript" for="FG1" event="Mousedown(Button, Shift, x, y)">
{
// some code here that uses the variables Button, Shift, x and y
}
</script>
I've never really seen anything like this before. FG1 is an active x object so are these some special things for it specifically or are they just another way of handling any regular javascript event...could the ID reference an input (e.g. a button) and the event be onclick?
ideally, i'd re write it as (if my thinking is correct...I'm not actually going to change the code in the web app as it works, i just want to understand what it means!)
<script type="text/javascript">
var fg1 = document.getElementById("FG1");
fg1.onMouseDown = function(Button, Shift, x, y) {
// do stuff here...
}
</script>
Those are Microsoft-specific (Internet Explorer-only) extensions to the script tag, and your impulse to rewrite the example without them is a good one.
According to MSDN, the:
for attribute:
Sets or retrieves the object that is bound to the event script.
event attribute:
Sets or retrieves the event for which the script is written.
Therefore, I presume as you have that you can drop the non-standard attributes and use the lines you added to get the element, and handle the mousedown event.
for attribute is for the element name in for attribute like for="element1" and event attribute is for event handling like even onclick, onmouseover etc for that elements.
For example if you add Onclick event then onclick event works on element which name you entered in for attribute.
I have seen this kind of code snippet in a classic ASP project, where it uses a simple vbscript form validation method. `
<input name="button1" type="button" id="button1" value="Submit">
<script language="VBScript" for="button1" event="onClick">
Menu_Validate()
</script>
This onclick event will call the Menu_Validate() method and do form validation.

Calling VBScript from Javascript

I've seen the related post on this, but it only covers using inline VBScript for onmouseover events, while calling a Javascript Function for the onClick.
Is there a way to call a VBScript Sub for the onClick event from a button that uses Javascript onmouseover and onmouseout events?
Currently when I try I get an error that the object does not support the property or method.
It is possible, but you will need to prefix all your script calls in HTML with the appropriate language.
onmouseover="javascript: vbfunction();"
If there are script calls that are not prefixed, you may get errors on the page as the parser doesn't know what scripting language is being used.
Put your code in the Head Tags: <head> </head>
Add your VBScript between these brackets:
<script type="text/vbscript">
</script>
Function myVBFunction()
' here comes your vbscript code
End Function
// From a hardcoded link, don't write a semicolon a the end:
link
You can read more about it here.
Make sure that the name of the sub you're calling doesn't match the ID of any other object in the script.

Categories

Resources