前置き

今回の解説は友人に聞かれて説明した時に自分でもしっかり説明しきれなかったので、自分の中で整理することも含めて書いています。
(間違いがあればご指摘お願いします！)

プログラミング言語とは

「どんなプログラムを実行したいかという命令を伝える言葉」です。

言語処理系とは

「プログラミング言語で書かれたコードの内容をコンピュータが理解して実行するためのソフトウェア」です。
(※以下、言語処理系を処理系と略します)

JavaScriptで例える

JavaScriptでは、まず皆さんがやるようにコードを書きます。

main.js

function example() {
    //ここに処理を書く
}

example(); /*処理を実行*/

↑のコードを書くだけで関数が実行されるはず...と思いますよね？
ただ、テキストエディタでいくらコードを書いてもそれだけでは何も起きません。
なぜか？　そう、処理系でプログラムを処理していないからです。

JavaScriptの処理系はどこにある？

結論から言うと「ブラウザ」にあります。
ブラウザとはchromeとかFirefoxとかIEのことです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="main.js"></script>  <!-- この1行!!! -->
</body>
</html>

↑の<script></script>でJSファイルをhtml内に読み込み、それをブラウザ上で処理することで初めてプログラムが実行されます。
それが可能なのは、ブラウザの中に処理系が組み込まれているからです。

結論

プログラムは、

1. プログラミング言語でコードを書く
2. コードを言語処理系で処理して実行する

↑の流れで行われている！

おまけ(ここからは読みたい人だけ)

ブラウザ上でのJavaScriptの処理系は「JSエンジン」と呼びます。
そのJSエンジンの仕様はブラウザ毎に多少変わってきます。
例えば、chromeのJSエンジンはV8、firefoxはspider monkeyという処理系が組み込まれていますが、
JSエンジンが違えば当然処理の仕方も異なるため、同じコードでも実行結果が微妙に異なります。
また、このブラウザではこの関数は使えるけどこっちのブラウザでは使えないというのも処理系が異なるため起きることです。