2015-07-20 2 views
3

Я новичок в JavaScript. Начал учиться несколько дней назад. Пожалуйста, поправьте меня, если я где-то ошибаюсь. Я прошел через три представления JavaScripts: «Inline», «Embedded» и «External».Как браузер идентифицирует встроенные Java-скрипты?

У меня есть два вопроса относительно этого:

1. Пример ниже: Здесь мы не упоминая <script type="text/javascript">, но до сих пор она работает нормально, и браузер идентифицирует его. Как это происходит?

<html> 
    <head> 
    <title></title> 
    </head> 
    <body> 
    <input type="Button" value="Click me" onclick="alert('Welcome');"/> 
    </body> 
</html> 

2. Когда использовать встроенные и когда использовать встроенные? Я понимаю, что все должно быть внешним, потому что, если код является отдельным, его можно более легко кэшировать браузерами (от this answer). Но я не использовал использование встроенных и встроенных.

Мой вопрос может звучать немного просто, но я не могу найти ответы на них через поиск. Пожалуйста, помогите мне лучше понять эти основы.

+0

может посмотреть по адресу: http://stackoverflow.com/questions/10607847/how-does -inline-Javascript -in-html-work – panepeter

+0

[inline vs external javascript?] (http://stackoverflow.com/questions/138884/when-should-i-use-inline-vs-external-javascript) [как встроенный javascript работа?] (http://stackoverflow.com/questions/10607847/how-does-inline-javascript-in-html-work) –

+0

@GauravMahawar: '[Текст] (Ссылка)' – Cerbrus

ответ

0

Здесь мы не упоминая, но до сих пор она работает отлично и идентифицирует браузер Это. Как это происходит?

Поскольку HTML спецификация определяет, какие атрибуты внутреннее событие, как onclick среднего, так же, как он определяет, какие <script> средства.

Когда использовать встроенные и когда использовать встроенные?

В общем:

  • Не использовать внутренние атрибуты событий (например, onclick="..."), связывают обработчики событий с помощью JavaScript (например addEventListener).
  • Для большинства сценариев используйте внешние скриптовые элементы (например, <script src="..."></script>), особенно если они большие или многократно используются между страницами.
  • Рассмотрим встроенные элементы сценариев (например, <script>...</script>), если:
    • сценарий коротка и применим только к одной странице (вы можете получить легкие преимущества в производительности или легкости обслуживания)
    • скрипт предназначен для того, чтобы данные доступно для JavaScript (например, если он определяет переменный, содержащие часто обновляемые данные и генерируется из базы данных)
+0

Спасибо. Но все-таки я не понял ясности встроенного javascript? Также вы можете дать короткую заметку об атрибутах встроенных событий, потому что, как я уже сказал, я в самом начале изучения Javascript.Если он не relavent, пожалуйста, проигнорируйте его. – Crazy2crack

+0

Вам нужно быть более конкретным, чем «я не получил ясности». Что ты не понимаешь? «короткая заметка об атрибутах внутренних признаков». В ответе есть одно. – Quentin

+0

Я не знаю, когда использовать встроенные javascripts ?.и здесь то, что означает u из-за внутренних атрибутов события. это что-то связано со встроенным javascript? – Crazy2crack

0

Ну, вы можете иметь внешний. Это Javascript загружается через extrnal файл

<Script type="text/javascript" src="path/to/javascript.js"></script> 

Тогда вы вложенной

<script type="text/javascript"> 
     function foo() { 
      alert('bar'); 
     } 
     foo(); 
</script> 

Тогда у вас есть встроенный. Imho (imho = In my скромное мнение) Inline поставляется в двух вариантах. встроенные функции или обработчики onclick, как вы показали. Однако существует большая консенсус в том, что встроенные функции заключаются в том, что HTML-код смешивается с javascript, как в примере ниже.

<input type="button" onclick="foo()"> 

или встраиваемая функция, как я и несколько других developpers увидеть. Обратите внимание, что это моя интерпретация значения inline. Эта интерпретация: переменная, которой вы назначаете функцию.

Обратите внимание, что это интерпретация, но значение inline очень нечетко, но не указано где-то. Когда вы привыкли к программированию языков программирования более высокого уровня, таких как java или c, inline имеет целый смысл и значения, которые могут размываться от одного языка до другого. Вот почему я думаю, что это также встроенная функция, так как вы можете использовать его в функции действительно определяют контекстную функцию в закрытии, или назначить его onlcick обработчиков в DOM элемента, и т.д ...

 var foo = function() { 
       alert('bar'); 
      } 
     foo(); 

Чтобы ответить на ваш второй вопрос:

не используйте встроенный. Он действителен для использования, но это означает копирование по всему javascript между отдельными html-файлами.

Если вы сделаете его абстрактным, чтобы получить доступ ко всем идентификаторам по идентификатору и использовать представления javascript, он будет работать намного более гладко, и его будет легче поддерживать.

document.getElementById('someobjectname') 

дает вам объект, который вы хотите, в файле js. Если вы прикрепляете некоторые обработчики нагрузки к элементу document, вы можете запустить свой javascript, когда документ закончит загрузку в браузер, а затем выполните свою магию на нем.

+2

Можете ли вы предоставить любую ссылку для вызова функция внутри функции «встроенная»? –

+0

[В чем разница между анонимными и встроенными функциями в JavaScript?] (Http://stackoverflow.com/questions/19159703/what-is-the-difference-between-anonymous-and-inline-functions-in-javascript) принятый ответ, и технически он присваивает его параметру, я обновляю свой ответ, чтобы представить это ... Я всегда работаю в рамках областей, поэтому я как бы объединил это в своей голове как понимание ... Я изменю свой ответ чтобы представить его правильно. – Tschallacka

+2

Атрибут 'type' не требуется, начиная с HTML5 –

0
  1. Когда браузер читает html, он создает DOM. каждый элемент является объектом в DOM и имеет его свойства, события, функции. поэтому, когда браузер анализирует html, это события привязки, вызывающие функции во время выполнения. это все о поведении браузера. посмотрите на: http://arvindr21.github.io/howBrowserWorks/ и http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ или выполните поиск в google «как работает браузер»

  2. Хорошо отделить js, css part from html. но иногда вы хотите, чтобы функция вывода js соответствовала логике вашего приложения: кто-то его строит, кто-то динамически генерирует js-файл и требует его в html.

0

Из фрагмента кода в вашем вопросе

<input type="Button" value="Click me" onclick="alert('Welcome');"> 

Является примером встроенного JS.

Другие сорта, как вы упомянули, являются встроенными и внешними.

Встраиваемый JS полезен в ситуациях, когда ваши сценарии специфичны только для этого конкретного файла. Вы не можете повторно использовать JS в любом другом файле.

<script> 
    // Your script 
</script> 

Внешние JS полезны в ситуациях, когда вы хотите повторно использовать свой скрипт. Например создать файл, hello.js с содержанием

alert('Hello'); 

Затем вы можете включить скрипт в HTML, как

<script src="hello.js"></script> 
+0

* В то время как скрипт, включенный в заголовок, должен вызываться вручную. * Что это значит? –

Смежные вопросы