writing javascript in html page - javascript

I found JavaScript I like to use but I need It to be written in the html page and not as a separate file ... Here is a JS fiddle
Here is how I tried to write it:
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script>
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
</script>
</body>
I know that I can wrap the numbers with <span> tag but
in my actual page I have numbers dozens of times during the text and this is way I rather use the script...
What do I need to change in the script to make it work?

Two things, use <script type='text/javascript'></script>. And add a reference to jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
and put your scripts inside $(document).ready().

I think you really should take a look at this
Update
As you're using jquery you will need to add the scripts to your page, and all your jquery code must be inside $(document).ready(function(){ }), it will look like this.
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
})
</script>
</body>

Related

ACE Syntax highlighter for live code editor not working

So i am trying to build a code editor which shows output of html in iframe. but there is some trouble. i used codemirror before now i am using ACE but something goes wrong here as it keeps showing me "xxxxxx" and numbers. what is the correct way to use it?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<style>
#jsEditor{height:300px;}
</style>
</head>
<body>
<div id="jsEditor"></div>
<iframe id="frame"></iframe>
<button onclick="refresh()">Click</button>
<script type="text/javascript">
var e=ace.edit("jsEditor");
e.getSession().setMode("ace/mode/html");
e.setTheme("ace/theme/xcode");
e.getSession().setTabSize(2);
e.renderer.setShowGutter(false);
function refresh(){
var textval=document.getElementById('jsEditor').textContent;
document.getElementById('frame').srcdoc=textval;
}
</script>
</body>
</html>
[This is the output i get ][2]
https://jsfiddle.net/fc0cjo9z/
Ace renders to dom only the visible portion of the text, and adds some nodes that do not correspond to any text.
So instead of document.getElementById('jsEditor').textContent you need to call the getValue() method of the editor. in your example change the line with textContent to
var textval=e.getValue();

Create a Script by bringing the URL from a link

Open JavaScript:- this code isn't editable as it is locked by the Host! So also I can't add any selector inside it!
But I can add another code outside of it. Like:- <ex ex="ex">Open JavaScript</ex>
So, I want to create a <script src="/javascript.js"></script> by fetching the URL from Open JavaScript.
They also didn't allow PHP there, otherwise I could do it myself. There is only one way to do it via JavaScript.
And I don't want to add the script inside <head> tags! It should be in the footer (<div class="body-footer"> Here </div>). There are not only one JavaScript link in the page, there are so many JavaScript links. So also I can't use $("a[href$='.js']");. Its became more tougher for me.
So how can I do this using JavaScript or jQuery?
Here is my implementation, where <script> tag is added before <a> with value of href.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var hrefValue = $("div#test a").attr("href");
$("div#test a").before("<script src='"+hrefValue+"'><\/script>");
console.log($("#test").html());
});
});
</script>
</style>
</head>
<body>
<div id="test">
Open JavaScript
</div>
</br></br>
<button>CLICK it, to add href value of anchor tag to newly created sibling element</button>
</body>
</html>

How to replace custom HTML tag with another tag, using the same content?

Is it possible to create your own text contents (text between the HTML tags) of my custom HTML tags?
I used this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("eg").replaceWith("<h2>Put the text content of eg here</h2>");
});
</script>
</head>
<body>
<eg>My text</eg>
</body>
</html>
Between the <h2> tags (don’t think I should only use <h2> tags without JS) in my JavaScript code, any text can be placed that I like to have.
Example: <eg>I can type any text here but it’ll be still in h2 tag settings</eg>.
What should I write between <eg></eg> in JS to have any <h2> text content that will be written in my HTML code?
If you want to replace the <eg>Test</eg> with <h2>Test</h2> then you can just do this: $("eg").replaceWith("<h2>" + $("eg").html() + "</h2>");.
Here is an example: http://plnkr.co/edit/urd69pJSXQngGIsYYSjq
If I'm understanding correctly, you just want to append an element to the DOM, so you can just use the html method as follows:
$("eg").html("<h2>Any text can be placed here</h2>");
Have a look at the docs if you need more info.
Note: You closed but didn't open your body tag.
Replace:
</body>
With something like:
<body> <eg> Your custom content is between body tags now </eg> </body>
And you also have two HTML tags, remove the second
<html>
No. It wouldn't be HTML anymore.
However, if you wrote xHTML (which is a form of XML), then you could extend the DOM with your own elements. But that would be XML, not HTML.
And if you tried adding custom elements to a page, browsers wouldn't know what to do with them. Even if some browsers might display them, it's a very bad idea. Use a class name instead.
Creating and using custom tags is a bad idea. It should be avoided.
You are probably looking for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#my_h2").html("<h2>Any text can be placed here</h2>");
});
</script>
</head>
<h2 id="my_h2"></h2>
</body>
</html>
For more, read-up on CSS selectors. (They are the same as jQuery selectors.)
Hope this helps.

Execute JS on page load without using jQuery

So I know that if you use jQuery you can use $(document).load(function(){}); so that any code you write into the function gets executed after the whole page has loaded, but is there a way of doing something similar if you don't use jQuery and just use JS?
For example...
<html>
<head>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999;
margin:20px;"></div>
</body>
</html>
If I use this method the alert just says null. So is there a way of making the js code run once the page has loaded?
I use:
<script type="text/javascript">
window.onload = function(){
//do stuff here
};
</script>
This way you don't have to use any onload tags in your html.
The easiest way is to simply put your script at the end of the document, typically just before the closing body tag:
<html>
<head>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</body>
</html>
You can use a variety of methods to accomplish this.
The simplest, easiest method would be to simply add the script tag at the end of your body tag:
<html>
<head>
<title> Example </title>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script type="text/javascript">
// Do stuff here
</script>
</body>
</html>
The way jQuery does it is something similar to:
window.onload = function() {
// Do stuff here
}
I usually just do it the second way, just in case.
To ensure cross-browser compatibility, crawl through the source of jQuery and find what they use.
You can use onload in your body tag.
<head>
<script type="text/javascript">
function doSomething() {
//your code here
}
</script>
</head>
<body onload="doSomething()">

Replace HTML page with contents retrieved via AJAX

I have an HTML page with a typical structure:
<html>
<head>
<script src="..." ></script>
<style>...</style>
</head>
<body>
content
</body>
<script>
var success_callback = function(data) {
// REPLACE PAGE CONTENT & STRUCTURE WITH "data"
}
ajax(url, params, success_callback);
</script>
</html>
Do you think it is possible ? I've already tried to give the html tag an id and doing $(id).replace(data); with no success.
Don't ask me why, but that is what I need (I'm working with a special "mashup builder" site... it is a long story).
EDIT : I forgot to say that scripts in the received content have to be executed, even external scripts included using <script src="...">.
The simplest way is to set the new HTML content using:
document.open();
document.write(newContent);
document.close();
try this with jQuery:
$('body').load( url,[data],[callback] );
Read more at docs.jquery.com / Ajax / load
Here's how to do it in Prototype: $(id).update(data)
And jQuery: $('#id').replaceWith(data)
But document.getElementById(id).innerHTML=data should work too.
EDIT: Prototype and jQuery automatically evaluate scripts for you.
You could try doing
document.getElementById(id).innerHTML = ajax_response
the simplest way is
$("body").html(data);
Can't you just try to replace the body content with the document.body handler?
if your page is this:
<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>
Just use the document.body to replace the body.
This works for me. All the content of the BODY tag is replaced by the innerHTML you specify.
If you need to even change the html tag and all childs you should check out which tags of the 'document.' are capable of doing so.
An example with javascript scripting inside it:
<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>
This way you can do javascript scripting inside the new content. Don't forget to escape all double and single quotes though, or it won't work. escaping in javascript can be done by traversing your code and putting a backslash in front of all singe and double quotes.
Bare in mind that server side scripting like php doesn't work this way. Since PHP is server-side scripting it has to be processed before a page is loaded. Javascript is a language which works on client-side and thus can not activate the re-processing of php code.
I'm assuming you are using jQuery or something similar. If you are using jQuery, then the following should work:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
content
</body>
<script type="text/javascript">
$("body").load(url);
</script>
</html>

Categories

Resources