Navigation responsive javascript

Bonsoir,
je debutte avec javascript et je suis entrain de realiser une navigation responsive pour les appareils mobile et j'ai suivi ce tutoriel

http://toddmotto.com/building-an-htm...es-javascript/
mon probléme et que j'aimerai bien séparé le script dans un fichier externe au lieu de le mettre dans une balise <script></script> et puis je fais l'appel de ce dernier dans ma page html comme suit
<script type="text/javascript" src="script.js"></script>
mais rien ne ce passe lors de l'execution malgré ça marche bien si je met le script au niveau de ma page html.voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
	<link href="css/main.css" rel="stylesheet">
	<link href="css/demo.css" rel="stylesheet">
</head>
<body>
	<!-- Nav -->
	<nav class="nav">
		<ul class="nav-list">
			<li class="nav-item"><a href="#">Home</a></li>
			<li class="nav-item"><a href="#">About</a></li>
			<li class="nav-item"><a href="#">Services</a></li>
			<li class="nav-item"><a href="#">Portfolio</a></li>
			<li class="nav-item"><a href="#">Testimonials</a></li>
			<li class="nav-item"><a href="#">Contact</a></li>
		</ul>
	</nav>
	<!-- /Nav -->
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
(function () {
	// Create mobile element
	var mobile = document.createElement('div');
	mobile.className = 'nav-mobile';
	document.querySelector('.nav').appendChild(mobile);
	// hasClass
	function hasClass(elem, className) {
		return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
	}
	// toggleClass
	function toggleClass(elem, className) {
		var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
		if (hasClass(elem, className)) {
		    while (newClass.indexOf(' ' + className + ' ') >= 0) {
		        newClass = newClass.replace(' ' + className + ' ', ' ');
		    }
		    elem.className = newClass.replace(/^\s+|\s+$/g, '');
		} else {
		    elem.className += ' ' + className;
		}
	}
	// Mobile nav function
	var mobileNav = document.querySelector('.nav-mobile');
	var toggle = document.querySelector('.nav-list');
	mobileNav.onclick = function () {
		toggleClass(this, 'nav-mobile-open');
		toggleClass(toggle, 'nav-active');
	};
})();

Tu as bien laissé la balise script au même endroit, après ton HTML ?

j'ai mis la balise script dans la section head

Il ne faut pas.
Si tu sais à quoi correspond la syntaxe (function () {...})(); (IIFE), tu sais alors que le code sera immédiatement exécuté, donc avant que le DOM ne soit créé. C'est pourquoi Sylvain t'indiquais de mettre la balise après le HTML.

Tu peux la laisser dans la HEAD, à condition de changer ton code de cette manière :

remplacer
Code:

1 2 3 (function () { ... })();
par :
Code:

1 2 3 document.addEventListener('DOMContentLoaded', function() { ... });
De cette manière, la fonction ne sera plus immédiatement invoquée mais attendra que le DOM est chargé. Mais le mieux reste de mettre tes scripts juste avant la fin de la balise </body>.