need to be pointed in the right direction regarding writing/running JavaScript in Visual Studio, since I got my feet wet into programming using Visual Basic. I'm in the process of applying for a bootcamp in NYC and part of the application process includes an interview in which I may have to demonstrate a tiny bit of JS. I know it is traditionally run in web browsers but if I can also do it within the familiar environment of the IDE i learned in that would be amazing. (I have Visual Studio versions 2015 and 2019.)
Thanks!
If your just writing some simple JavaScript you want to see in a browser, wrap it in html and name the file index.html, use windows explorer to navigate to the folder holding the index.html wrapper and .js, double click on the index.html and it should run in your browser.
open a text editor and save the following as index.html. script.js is the name of your JavaScript file in the same folder as index.html, you can change the title to whatever you want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Console demo</title>
<script src="script.js" defer></script>
</head>
<body></body>
</html>
Inside visual studio 2022 you could do the same html wrapper and open a terminal window, navigate to the folder and run ".\index.html"
Related
I have on one side an existing website, on the other I have an Angular 7 application component.
I'd like to edit my existing someusecase.html and reuse my Angular 7 application like so e.g.
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to import Angular 7 App?</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
What would I need to include in the html for this to work? I'm after e.g. something equivalent to:
<script src="/ui/node_modules/angular/angular.min.js"></script>
<script src="/ui/components/Application.js"></script>
In other words, is it possible to reuse and activate an Angular 7 Application within a <div> scope inside an existing webpage?
1) Run
ng build
2) got into the dist folder
3) Copy & paste all of the files there, to your original app, except for the index.html file.
4) Open the not-copied index.html file
5) Copy all of the <script> tags in this file, into your someusecase.html file, at the same spot.
6) use your app component selector wherever you want your angular application to be displayed.
Note that this is only informational : in real life, this should be automated, because you would have to do this manipulation on every build.
the task is quite simple, I guess. I would like to produce screenshots (png - files) from local html files.
My 'proof of concept' looks like this...
The files are located on a windows 10 machine in a local folder: c:\temp\
This would be a very basic html file - just to make sure that no sophisticated stuff is disturbing (file called: a.html):
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- otherwise format might be broken when opening from local source -->
<title>Savills Charts</title>
</head>
<body>
<h1>HalloBallo</h1>
<p>My baby baby, Balla Balla!</p>
</body>
</html>
The script which calls phantomjs was taken from here: http://www.cameronjtinker.com/post/2011/09/26/Take-Screenshot-of-all-HTML-documents-in-a-folder-using-PhantomJS.aspx
During my work I thought my own script was the problem but it doesn't look like it is.
var page = require('webpage').create();
page.open("file:///c:/temp/a.html", function() {
page.render('C:/temp/screenshot.png');
phantom.exit();
});
phantomjs is producing only black .png files.
If I switch the source from something local to something on the web
page.open("file:///c:/temp/a.html"
to
page.open("http://spon.de"
then everything works fine....
I'm lost...
What can I do?
KR,
Martin
Maybe someday someone stumbles as I did.
Therefore I want to clearify. The problem was, that (in contrast to a web browser) phantomjs does not set any colors by default. So in the website given (see example code) phantomjs simply renders black writing on black background.
If you give the body a backgroundcolor then you will see the black font.
So - it's solved.
Martin
Extreme beginner here guys so please explain as easily as possible.
I've read multiple variations of this and still am unable to figure it out, any help is greatly appreciated.
What I am wanting is a local environment to be able to learn HTML & javascript, but cannot get the script source inside HTML to correctly reference the .js file sitting in the exact same folder as the .html file. I am testing in a Chrome browser just referencing the .html file on my local machine via file:///C:/JavaScript/Index.html.
2 files(index.html and JS.js), both located locally on C:\Javascript
HTML Code:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="C:\JavaScript\JS.js"></script>
</body>
</html>
-Based on what I read, if they are in the same folder I should be able to just reference <Script src="JS.js"> as there is no folder structure to look through, is that correct?
-I've also tried to absolute path via <script src="file:///C:/JavaScript/JS.js"> and related versions of <Script src="C:\Javascript\JS.js"> that do not work either.
In my JS.js file, I have nothing but alert(); to test functionality, as my reasoning for incorrect sourcing.
If I simply write <script>alert();</script> without referencing any outside source, the alert works as planned.
Thank you in advance!
I'd recommend popping open Chrome's Developer Tools to see where the issue may lie (and, if you're new to development, these are tools that are built into Chrome that will make your life so much easier).
Your assumption about not requiring a path should be correct: if you're referencing another file that lives in the same directory, omitting a full path will cause the browser to assume the path is relative (e.g. "right next to") to the current file:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="JS.js"></script>
</body>
</html>
I am very new to using Intel's XDK, I already have a web app that I need to convert to an android app. I have tested the html web app thoroughly and so far, it works perfectly in the browser. The problem is that when I imported it to the XDK, it doesn't seem to work on the emulators. I searched everywhere and no one else seems to have the same problem, so it must be I'm missing something. I know you have to insert an extra javascript (which I already did) but so far, it still doesn't work. Can anybody here point me to the right direction? Thank you in advance.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width target-densitydpi=device-dpi initial- scale=0.1 maximum-scale=0.5 user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>King</title>
<style>
html {
height:100%;
}
body {
background-color: #000000;
margin:0;
height:100%;
}
</style>
<meta name="viewport" content="user-scalable=yes, width=1024" />
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<div style ="margin:auto;width:1024px;height:768px">
<div id="king_hype_container" style="position:relative;overflow:hidden;width:1024px;height:768px;">
<script type="text/javascript" charset="utf-8" src="King.hyperesources/king_hype_generated_script.js?7046"></script>
</div>
</div>
</body>
</html>
Maybe I'm putting the intel xdk in the wrong place in javascript?
Do what #rscohn2 suggests (make that "king" script is local to your project, avoid loading it over the network if at all possible), but also take a look at this "beefier" template which I've provided to people who are trying to turn a web app into a webview app. There are lots of comments and console.log messages to help you figure out what's going on, but, in essence:
wait for the custom "app.Ready" event to kick off your app
consider when you are loading your third-party and custom JS scripts (see the README)
It probably isn't loading the king_hype_generated_script.js. You could see that by popping up the debugger in the emulator. You can do that by clicking on the bug icon in the top left of the screen and then looking at the messages in the console tab. you probably want to make king_hype_generate_script.js a static file and copy into your project, or use an absolute URL pointing back at your server. Copying it into your project will give you better ability to work offline.
I'm having a bizarre situation here where my external site files, both JavaScript and CSS, are being interpretted as somehow corrupt on Safari browsers. The same site looks fine in Internet Explorer, but on Safari the javascript and css are being completely ignored. If I look at the files through the Inspector, I can see that Safari views these files as containing junk characters -- either asian symbols or square boxes. When I navigate directly to the files, however, they appear just fine. See the site below, viewed in Safari 5, for an example:
http://amsoell.com/dch/castlemoore
If I embed the same exact CSS or JavaScript into the HTML itself, it renders perfectly. I don't know if this is a server issue or something in my CSS, but I'm at my wits end here.
I checked your website for validation and it's not valid. But the most interesting thing is that your enconding is utf-16le. You should put your encoding to utf-8. Just put the following line in your <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Include the charset="utf-8" parameter in your <script> and <link> tags:
<script type="text/javascript" charset="utf-8" src="script.js"></script>
<link rel="stylesheet" type="text/css" charset="utf-8" href="style.css">
The problem can be solved by saving the html page in "Windows-1252 Encoding".