How would a site, like w3schools, run many languages locally? - javascript

I'm working on a portfolio website, and I thought it would be cool to be able to run my scripts in python, java, js, rust, etc locally in the browser
Here's an example of this from w3schools
I'm guessing they have a translation layer to javascript, but in the event that they're actually running C++ here, does anyone know how this might be done or generalized?

They do not translate those languages to JavaScript and then run it on the client - that would be a herculean task to get right, especially for multiple languages. Rather, they (and the many similar sites like try it online) take the source code text from the client's browser, and run it on the server, and respond to the client with the result from the server.
To achieve something like this, you'd need
A backend (in any language)
Compilers/interpreters/etc for all languages you want to support
A way for the backend to programatically call them with the user's input (which is often pretty easy)
For proof that w3schools takes the result from a server, rather than running it locally, examine the network tab of your browser, and you'll see it:

Related

Navigate between pages without changing the link

This question might have been asked in the past but I cannot seem to find the answer. I would like to navigate between pages without avec to redirect to a brand new xxx.html file. Basically, I want to keep only one html file being the index.html
In order to understand what I mean, here is a small preview of this functionality I want to achieve.
Preview
As you can see, the piece of clothing is not its individual html file. What method is used to achieve this?
What you are seeing is called a Single-Page-Application. There are a lot of frameworks with which you can create a page like this. If you are going for plain HTML/CSS/JavaScript it will be a lot harder to do correctly.
What you're seeing here is a dynamic webpage that is taking advantage of client-side technology to create this effect. To help further explain, let's quickly go over some web development terminology:
Client-Side: Code that is executed on the user's computer (in this case in their web browser).
Server-Side: Code that is executed on a server, then a response of some sort is sent to the client.
With server-side code, the value cannot change unless a new call is made to the server to get a new response. This is because the code isn't actually running on the computer the user is running, it's running on some other computer probably thousands of miles away. However, with client-side code, dynamic changes could be made in real-time because the code is actually running on the user's computer.
When it comes to server-side code, we as developers have a myriad of options. Any language that can send an HTTP response to a web browser could theoretically be used as a server side language. In 2018, that's basically every major language in existence! That being said, some popular options today include Python, Ruby, Java, and Javascript (Node JS).
When it comes to client-side code, however, we're limited by what can run in a user's web browser. In general, modern web browsers only understand Javascript. However, while the language has gotten better over the years, writing code in pure JavaScript can sometimes be cumbersome, so there are libraries that help make writing Javascript easier (such as jQuery) and there are even languages that compile down to Javascript to add new syntax and functionality (such as Typescript and Coffeescript).
If you'd like to start writing dynamic web applications, a good place to start would be to learn the basics of JavaScript. Then, maybe start learning jQuery, or front-end libraries such as Angular or React. Good luck!
You will have to use javascript for this. Either you can load all content at once and just show/hide the content you need, or you could ajax to fetch the content and then render it without page reload.

Programming language of a website

If I program a website in a language, say JavaScript. Then I make this website public like an usual website. Will people who use my website be able to tell what language it is programmed in?
Code running in a browser is always discoverable by a visitor. Code running on a server may not be discoverable.
If you mean using JavaScript only on the server via NodeJS or similar solution, then no, there is not anything that will inherently expose the fact that you're using JavaScript on the server. Some languages whose filenames typically end in a known extension, (e.g. .php, .asp) may reveal the server-side language. But it's also easy for you (as the developer) spoof this if you wanted to for some reason.
However, any code running client-side can easily be explored by most browsers' developer tools. They even typically offer reformatting of minified HTML and JS.

GWT server with get() and post() built on client end

This is more of a curiosity really, to see if some one has done anything similar, or if at all it is possible.
I'm working on a project that will get notification through external notifications. Now I could go about doing this by having notifications coming to my server and have a comet setup between my client and server.
BUT
I was wondering if I could write server logic into my client and listen out for notifications from external sources. Immediately one issue I see is, external sources would need callback URL etc, which I dont know if you could do from client side (unless one could use the IP address in that way).
As you can see it is more ideas and discussions if such a thing was possible, this is somewhat inspired by P2P models whereby you wouldn't be mediating things through your central server.
Thanks in advance!
GWT compiles (nearly) Java source into JavaScript, so compiled GWT apps can't do anything that traditional JavaScript running in the browser cannot do. The major advantage of bringing Java into the picture isn't automatic access to any/all JVM classes, but the ability to not only maintain Java sources, which tend to be easier to refactor and test as well as keep consistent with the server, and to compile that statically defined code into JavaScript, performing all kinds of optimizations at compile time that aren't possible for normal JavaScript.
So no, while you can have some code shared by the client (in a browser) and the server (running in a JVM), you can't run Tomcat/Jetty/etc in the browser just by using GWT to compile the java code into JS.
As you point out, even if this was possible, it would be difficult to get different clients to talk back and forth, without also requiring that the browsers can see and connect at will to one another. BitTorrent and Skype have different ways for facilitating this, and currently browsers do not allow anything like this - they are designed to make connections to other servers, not to allow connections to be made to them.
Push notifications from the web server to the browser are probably the best way forward, either through wrapping comet or the like, or through an existing GWT library like Atmosphere (see https://github.com/Atmosphere/atmosphere/tree/master/samples/gwt-demo for a demo).

Images, OCR and greasemonkey

I have a webpage on which I'm doing tons of cool stuff using greasemonkey. I'm actually pretty terrible at greasemonkey/javascript but I'm learning quick. Every once in a while I get a really terrible CAPTCHA validation which I want to automate. I have a command-line utility that can do this with local and remote files, but not with the file in question because It's behind a session..
tim#g2sv ocr-thingy my-image.png
135189
Works like a charm. I'm looking for a way to pass the image from the website (running the script) to the utility. I don't care how complicated it has to be, but at the moment I'm clueless. I've been thinking about providing the utility as some type of REST-like API for greasemonkey to interface with but I don't know how to supply an image to an API other than by passing the URL which doesn't work (as stated before). Greasemonkey (luckly) doesn't allow you to download a file an run software on my PC so the most straightforward option is out.
I'm open to all suggestions it's a fun side-project for me so the crazier the better ;) I would prefer an option that silently runs in the background (doesn't take or require focus like mouse and keyboard controlling software, java robot).
Maybe you're interested to know I'm not trying to brake any laws or anything, the owner of the website knows I'm doing this and was interested to see if I was able to do it!
"I don't care how complicated it has to be, but at the moment I'm clueless."
Well, it's possible, but it is an "involved" process. Here's the high level steps:
Approach 1:
Forget about Greasemonkey; write a Firefox add-on. Add-ons can interact with the file system and probably can get the image data without having to use Flash or Canvas.
Approach 2:
Use Greasemonkey and JS to send the image data to your server (using GM_xmlhttpRequest()). This is not simple, search around for how to do that.
Your server can be your own local machine running something like XAMPP or any one of the free web-application servers.
Your server uses PHP (or Coldfusion, or C#, or Python, etc.) to run your OCR program and do whatever you want with the results, including AJAXing them back to the GM script.

Emulate javascript _dopostback in python, web scraping

Here LINK it is suggested that it is possible to "Figure out what the JavaScript is doing and emulate it in your Python code: " This is what I would like help doing ie my question. How do I emulate javascript:__doPostBack ?
Code from a website (full page source here LINK:
<a style="color: Black;" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvSearchResults','Page$2')">2</a>
Of course I have basically know idea where to go from here.
Thanks in advance for your help and ideas
Ok there are lots of posts asking how to CLICK a javascript button when web scraping with python libraries mechanize, beautifulsoup....,similar. I see a lot of "that is not supported" responses use THIS non python solution. I think a python solution to this problem would be of great benefit to many. In that light I am not looking for answers like use x,y or z which are not python code or require interacting with a browser.
The mechanize page is not suggesting that you can emulate JavaScript in Python. It is saying that you can change a hidden field in a form, thus tricking the web server that a human1 has selected the field. You still need to analyse the target yourself.
There will be no Python-based solution to this problem, unless you wish to create a JavaScript interpreter in Python.
My thoughts on this problem have led me to three possible solutions:
create an XULRunner application
browser automation
attempt to interpret the client-side code
Of those three, I've only really seen discussion of 2. I've seen something
close to 1 in a commercial scraping application, where you basically create
scripts by browsing on sites and selecting things on the pages that you
would like the script to extract in the future.
1 could possibly made to work with a Python script by accepting a
serialisation (JSON ?) of wsgi Request objects, getting the app to fetch the
URL, then sending the processed page as a wsgi Response object. You could
possibly wrap some middleware around urllib2 to achieve this. Overkill
probably, but kind of fun to think about.
2 is usually achieved via Selenium RC (Remote Control), a testing-centric
tool. It provides a few methods like getHtmlSource but most people that I've
heard using it get don't like its API.
3 I have no idea about. node.js is very hot right now, but I haven't
touched it. I've never been able to build spidermonkey on my Ubuntu
machine, so I haven't touched that either. My hunch is that in order to do
this, you would provide the HTML source and your details to a JS
interpreter, that would need to fake being your User-Agent etc in case the
JavaScript wanted to reconnect with the server.
1 well, more technically, a JavaScript compliant User-Agent, which is almost always a web browser used by a human

Categories

Resources