jquery error

/* index.html */
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Javascript Book</title>
    <link rel="stylesheet" href="main.css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
    <h1>My first application</h1>
    <p>Welcome to <i>Learning Javascript, 3rd edition</i>.</p>


    <script src="main.js"></script>
</body>
</html>

/* main.js */
$(document).ready(function() {
    'use strict';
    console.log('main.js loaded');
});