Я просто не понимаю Я искал и искал, но для этого я просто не могу понять, что «правильно».

Есть три примера.

1)Скрипка 1.0 Здесь мы имеемhtml с участиемonlick="function" иjavascript функция тут же, которая отлично работает

 <span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>

 <script type="text/javascript">
    function someFunction(obj,nr) {
        var string = $(obj).attr('class');
        $('.result').text( string );
    }
</script>

2)Скрипка 2.0 Затем, когда я перемещаю функцию в секцию скрипта (вид ее перемещения в файл .js), я получаю сообщение об ошибке «ReferenceError: someFunction не определена»

ЭТО ГДЕ НАЧИНАЕТСЯ ВОПРОС

3)Скрипка 3 Итак, теперь у меня есть функция в документе, готовая к вызову с помощью .on (щелчок, который всегда работает нормально. Эта функция вызывает другую функцию, которая находится вне docuemnt.ready (), а также работает нормально.

Итак, вопрос. Когда я должен определить функции, где И ПОЧЕМУ, так что это всегда работает?

Спасибо!

Весь код из примера 3) выглядит так:

<div class="result">result</div>

    <span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>
    <span class="classic two"   onclick="someFunction(this,'two')">CLICK HERE</span>
    <span class="classic three" onclick="someFunction(this,'three')">CLICK HERE</span>
    <span class="classic four"  onclick="someFunction(this,'four')">CLICK HERE</span>

<div class="ready">ready</div>


<span class="callOtherFunction">Call other function</span>


<script type="text/javascript">
    $(document).ready(function(){
        $('.ready').text( 'dom is ready' );

        function someFunction(obj,nr) {
                var string = $(obj).attr('class');
                $('.result').text( string );
            }

         $( "span.callOtherFunction" ).on({
            click: function() {
                $(this).css("color","red");
                $(this).addClass("xyz");
                otherFunctionCallingFunction($(this));
            }
        });

    });

    function otherFunctionCallingFunction($me) {
        $('.callOtherFunction').append( ' --> ' + $me.attr('class') );
    }
</script>