Alert box displaying before HTML - javascript

I am a total beginner in Javascript but not in OOP or HTML. I have started the Beginning Javascript book and have run into trouble with the second example. The following code should display p1 in my browser(Chrome) and then and alert box saying "first". However I do not understand why it is happening the other way around --- alert appears before p1.
<html>
<body>
<p>p1</p>
<script type="text/javascript">
alert("first");
</script>
</body>
</html>
EDIT: As an additional solution to problem of manipulating HTML elements with cross-browser compatability, I think jQuery would be an essential next step for web development after learning Javascript.

Please go through the link below to understand the load and execution order of the script.
load and execute order of scripts

The html is being rendered but as the alert is not triggered by any javascript event, it fires as soon as the dom is loaded. You do not have any bug and the behavior of your browser is ok.

Related

How to start script in HTML without <script> tag?

I'm using a low-code development platform called WaveMaker right now, and it gives you the option to customize the "markup" of the page (HTML, but you can't really edit <head>; the whole thing is kind of weird), the Javascript of the page, particularly with events like onpageload, etc., the style of the page (CSS), and the page's variables (JSON). I'm trying to embed Formstack forms, but every time the Markup section encounters a <script> tag, it deletes everything after the end of the tag. This is what the markup page looks like. I contacted support and they seemed to indicate that this was on purpose. Is there any way to make HTML run script included in-line without saying <script>? PS: I would be able to embed using iFrames, but for some reason the iFrames aren't working on the iPhone test program, even though they're working on the simulator.
What you can do is put it inside an HTML event attribute.
<body onload="/*your JS here*/">
</body>
If that does not work, try attaching onload to another HTML element or try one of the other event handlers (though I believe that they should have taken this into account as well)
How about this :
<body onload="javascript:(function(){
// you can place your code here it should run
alert('ok')
})()">
</body>
In Avatao's Senior Web Security Career Path, there is a hacking task, where you need to insert malicious javascript code - but the <script> is tag filtered (other tags aren't). Aenadon's answer gived me one solution:
<body onload="your JS here"> </body>
After submitting that, I checked the official solution, and I found that:
<img src="x" onerror=alert('xss')>

document.write inside script does not perform the script

According to the instructions that I am following these codes below should be able to embed a button that would perform a certain function.
<script>
document.write('<scriptsrc="sourcefile/filename.js">/script>')
</script>
The problem is that the above code displays /script> instead of displaying the button that the js file should display once run. Now when I try to edit it this way
<script>
document.write('<scriptsrc="sourcefile/filename.js"></script>')
</script>
') is displayed which clearly means that the first </script> closes the first <script> tag which should close the second one instead.
sorry cause I find it hard to explain it further.
Looks like you just want to include a javascript file into the current html page.
As described in http://javascript.info/tutorial/document-write
That's convenient, but a bad way, because loading a script may block the rest of page from rendering.
Using DOM is a preferred way, other than the example posted on that page, below is how twitter does it.
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
</script>

Using JQuery 1st Time

I'm referencing it as it says on w3schools and this website
<head>
<script>
src = 'C:\path...\jquery-1.11.3.js';
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
I compile and open on chrome but when I click any of those 3 messages they don't disappear =P
External scripts are loaded with the src attribute, like this
<script src='jquery-1.11.3.js'></script>
The path to the file should be referenced using paths relative to the root of your application, not the map structure of your system.
Put the src tag in the script tag:
<script scr="C:\path...\jquery-1.11.3.js">
P.S. Always use double qoutes!
P.P.S. If you still can't figure it out, go to the console and look for any errors.
Also: prepare to get very familiar with the "Developer" tab in your browser ... particularly the "JavaScript console." When a JS program encounters any sort of error, the browser's usual response is to "simply stop ... silently." And, if there's any sort of syntax-error, to "silently" issue a warning or error message to the JavaScript console (which ordinary users never see).
Any of these things can produce the result that you now see, namely: "nothing happens."
It can be quite frustrating, really . . .
The problem was in the path, not sure if any of the answers above because what I did was copy paste what they had and tried it without my messy code, and it worked. Then I linked the online Jquery library as oppose to linking what I had in the folder and it worked, then I fixed the path I had. Maybe it was the quotes, not sure now. Thanks anyways. (I wasn't getting errors below in the debugger box =P)

How to execute custom js after jQuery Mobile has created a new page div?

So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.
Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.

Window.onload and body.onload in IE

When I'm trying to run the following code in IE:-
<html>
<head>
<script language="javascript">
window.onload=function(){
alert("Window.onload is working");
}
</script>
</head>
<body onload="alert('body.onload is working')">
</body>
</html>
It seems that the body.onload overrides window.onload. I want both of them because I have a page and When I press a button, I get a second file and put it inside a div in the first page. So, I need to use window.onload in the first page and when I get the second one, I use body.onload of the second one.
I don't have this problem in FF,Opera,Chrome and Safari.
I hope my problem is clear. Thanks for any help.
Why not put a JavaScript command at the end of the content that's being subsequently loaded into the div? Hence, when the content is loaded the last line is a JavaScript triggering the call to your function. That's pretty much the simple way of making sure that: (1) content is loaded and (2) you create this function with full cross-browser efficiency.
If you see the following page regarding https://stackoverflow.com/questions/191157/window-onload-vs-body-onload, you'll find that they're the same thing. In other words, you're merely redefining what happens when the load event is fired.
If you "get [the] second file" using AJAX you should be able to use the response callback to perform any "onload" actions.
If you're using an iframe you should be able to bind to the onload event of the iframe's contentWindow.

Categories