We Keep Coding

how to write special characters in an html file?

i'm having troubles writing special characters in javascript from a python code. I explain.
I wanted to have a graphic interface for a python script. I dont have a lot of experience in graphic interfaces with python so I chose to write it in HTML/CSS. To make sure it works in every situations I created a code that writes the html code after processing some informations found in a text file. To put it in a nutshell my code takes already-wrote block of HTML, modifies it, assembles them together, and then writes that new HTML code into a .html file that I can open on my web browser.
Everything works perfectly fine. The problem is that im french and due to this I need to handle special characters like é,è or à. Furthermore in the HTML code I told you about, there's some javascript that use .innerHTML to modify the webpage without any loading time. My problem is that when the innerHTML code is triggered, the resulting text is this "s�ance" when it should be this "séance" I do think that it's an encoding problem but this happens only in javascript when I use innerHTML : if I write it in HTML the same string is fine.
This is what happens exactly to a string in my code:
I read it from a file:
file = file.read()
Then I write it into an html file:
interface = open(r'interface.html','w')
my_text = 'séance'
interface.write("var text = " + my_text + ";")
I obviously use then id_of_an_element.innerHTML(text)
And so, as explained earlier, when I open the HTML file into a web browser, 'séance' becomes 's�ance'.

Add this <meta> tag in your HTML file (To encoding UTF-8):
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

How to correctly include a javascript file into html

I am trying to run a script through HTML but I am having some problems. I searched online and found how to do so, however the issue is that even if I correctly type the path of the .js file, it seems to add some strange characters before it.
This is in index.html
<script type="text/javascript" src="fractalTest/fractalTest.js"></script>
I expected this to work but when I open index.html in google chrome and inspect then look under the elements tab, this "â©fractalTest/fractalTest.js" is replacing "fractalTest/fractalTest.js" in the path of the file. I believe this is whats causing the error but I do not know how to fix it!

...it seems to add some strange characters before it.
That usually means that the file is saved with a byte-order mark (BOM) of some kind, but isn't being sent with the correct charset for that byte-order mark.
Be sure that the server is configured to serve the files with a specific encoding (UTF-8 is a good choice), and that you save the files using that encoding (in your text editor, etc.). It's also usually best not to include a BOM on UTF-8 files (although it's valid, some tools don't handle it well).
Side note: No need for the type attribute. The default is JavaScript.

How do I print roman languages (e.g. Spanish) /special characters in Javascript?

I've done some research and turns out that to encode special characters we use encodeURI(component) and decodeURI.
However when I try do something like:
var my_special_char = 'ñ';
my_div.innerHTML = decodeURI(encodeURI(my_special_char))
A "question mark" is printed.
I found this (non-complete) table about special characters: http://www.javascripter.net/faq/accentedcharacters.htm
Effectively when I do
decodeURI("%C3%B1"); // ñ
it prints ñ.
But if I try with:
decodeURI(encodeURI('ñ'))
I still get a "question mark".
How does character enconding work in JS? And where can I find a really comprehensive special characters' in encodeURI format (ready out-of-the-box to be decoded via decodeURI)?
EDIT:
in my (the application is an AngularJS application) I have meta charset=utf-8 (written in the right HTML syntax as proposed in the answer, it actually comes from AngularJS' starter project)
I'm using WebStorm IDE: I checked out the settings and the enconding used is UTF-8
I'm serving the page locally in Apache (XAMPP)
EDIT 2:
as advised in the answers, I created a .htaccess file in /htdocs whose content is:
AddDefaultCharset UTF-8
as well as renaming both index.html and the view's file by adding .utf8 before .html file extension.
then I restarted Apache (from XAMPP console).
But the issue is not gone. Any clue?
EDIT 3: I finally even tried to open the file in Sublime Text 3 and save as UTF-8 file, nothing changes

You don't have to do any special encoding in your JS strings (apart for the special case of strings which may be seen as script element closing).
If your JS file encoding matches the HTTP header (most commonly UTF-8), it's decoded if you just do
var my_special_char = 'ñ';
my_div.innerHTML = my_special_char;
To help the browser, and assuming you're correctly serving the files with the relevant HTTP header (the way it's set up highly depends on your server), you should have this meta tag in you HTML header:
<meta charset='utf-8'>
If your script is in a separate file, you should also declare the encoding in the script element:
<script charset="UTF-8" src="yourFile.js"></script>

You should add <meta charset="utf-8" /> inside your head tag. In this way the browser knows which charset to use and no more question marks will appear :)

in classic notepad it solved by clicking
file > Save As > in Encoding dropdown menu > UTF-8
in notepad++ by click
Encoding > Encode in UTF-8
or by adding charset attribute into metatag charset='utf-8'
<meta charset='utf-8'>

How to add javascript to php page

I see a lot of script adding Javascript to their webpages in different ways and am trying to figure out the correct way to do it. For example, in the header of one of the php scripts I use it has this:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript">
var stuff = "file.php";
var ip_add = '32.42.42.442';
</script>
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file. For example, why not move the javascript mentioned about into it's own file and just just use this in your header:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript" src="/javascriptfile2.js"></script>
Are there certain times you should have the full javascript displayed in the page source instead of just linking to it in its own javascript file?

What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file.
It costs you caching. This is a long term penalty. The impact of that depends on how often the script will be used by the browser
It saves you an HTTP request. This is a short term bonus. It saves you a bit of time when loading the script in the first place.
This has nothing to do with PHP though. It applies to any HTML document.

Some of this is "legacy". At one point, you HAD to put <script> tags in the <head> portion of your markup, and so this is where most examples put it.
If you add a src reference to an external file, you can reuse the script as a resource on other pages that call for this. If you are using the same script all over the place, put it in a "js" directory and the browser won't fetch a new copy each time. This helps with bandwidth.
If, however, you add the raw script to your page, the whole page (minus images and other "embedded" content) will arrive in one thread. This helps with load times.
Unless you're expecting 10,000+ pageviews in a short space of time, I wouldn't worry too much either way.
Oh, and one other thing to consider: http://developer.yahoo.com/performance/rules.html#js_bottom -- why you should put your scripts at the bottom of your document.

I totally agree with #Quentin. Additionally I would suggest putting your scripts in seperate .js files and include them - for reasons of structuring - not only in large projects.
One thing that could lead you to put the JS code into a .php file however could be if you need to generate code using PHP or if you want to use information that is e.g. pulled from a database directly like this:
<?php
$foo = getSomeInformation();
?>
<script type="text/javascript">
var someVar = <?=$foo?>;
</script>

JavaScript Character Issue When Filling Dropdown With jQuery From External JS File

I'm running into a character encoding issue when I load a dropdown using jQuery from an external js file. This only seems to happen when the JavaScript object is not within the page.
For example the below is the JavaScript object.
var langs = [
{value:'zh-CN', text:'中文 (简体) Chinese Simplified'},
{value:'en', text:'English'},
{value:'eo', text:'EsperAnt'},
{value:'es', text:'Español'},
{value:'ja', text:'日本語 (Japanese)'},
{value:'pt-PT', text:'Português'},
{value:'ru', text:'Русский (Russian)'},
];
If this is in my page with the proper meta tags <meta http-equiv="content-type" content="text/html; charset=utf-8" /> the below code works.
$(document).ready(function() {
// Fill language select
$.each(langs, function(i, j){
$('#LangSelect').append($("<option></option>").attr("value",j.value).text(j.text));
});
But, since I need languages on more then one page I've moved the langs object to an external js file and reference it. After doing this, I run into encoding issues such as russian characters become РуÑÑкий (Russian).
This encoding issues seems to still appear even when the reference to the external js file is set as below:
<script type="text/javascript" charset="UTF-8" src="externalJS.js"></script>
Is there anyway to force the JavaScript object to be loaded with the proper encoding from an external file?
Please note I am experiencing these issues when viewing content on the iPhone Mobile Safari browser. Additionally these pages are simply html and JavaScript without any server side components.
Thanks in advance,
Ben

Is there anyway to force the JavaScript object to be loaded with the proper encoding from an external file?
Yes, the script charset attribute as you quoted. However it historically didn't work everywhere and was best not relied on. Where this is not supported, the browser will always use the charset of the main page as the charset in the script. So as long as you include the UTF-8 charset parameter in the main page you should be fine either way.
I am surprised if a modern browser like Mobile Safari doesn't understand it, though.
Is it possible your server might be serving .js files with a bad Content-Type header containing a wrong charset? A combination of unset mime-types for JS plus AddDefaultCharset in Apache could leave you with:
Content-Type: text/plain;charset=iso-8859-1
Which might maybe have the effect of mucking it up.

Make sure you save the javascript file using UTF-8 encoding. If you open the file in Notepad++, then you can click Format>Encode in UTF-8 (If you try Format>Convert to UTF-8, then have a look at the page using a hex editor. Sometimes you end up with some strange characters at the beginning of the file).