Какой тег сообщает браузеру что текст является языком сценария

Обновлено: 05.01.2025

Я где-то читал, что вам больше не нужны такие вещи, как type="text/javascript" и странные вещи CDATA и <!-- в ваших тегах сценария. Итак, вместо:

Вы бы просто сделали:

Я не могу вспомнить, где я читал это все же. Я думаю, это было от инженера Google или Yahoo, и они конкретно упомянули, какие браузеры требуют этих архаичных конструкций и почему. Кто-нибудь знает, о каком посте / статье в блоге идет речь, или есть хороший ресурс, рассказывающий об этом?

Не используйте взлом  со скриптами. Он был предназначен для предотвращения отображения сценариев в виде текста в браузерах первого поколения Netscape 1 и Mosaic. В этом не было необходимости много лет.  должен сигнализировать о комментарии HTML. Комментарии следует игнорировать, а не компилировать и не выполнять. Кроме того, комментарии HTML не должны включать -- , поэтому скрипт, который уменьшает, имеет ошибку HTML.

type="text/javascript"

Этот атрибут не является обязательным. Начиная с Netscape 2 языком программирования по умолчанию во всех браузерах был JavaScript. В XHTML этот атрибут является обязательным и ненужным. В HTML его лучше не указывать. Браузер знает, что делать.

Что ж, я испытываю соблазн сказать, что никто больше не использует text/javascript , и что даже инструменты минимизации, вероятно, удалят его . Действительно, в документации Facebook SDK указано только <script> .

Однако, документация Google SDK все еще содержит text/javascript .

В документации Amazon SDK все еще есть text/javascript .

Документация по Linkedin API все еще содержит text/javascript .

Instagram все еще использует text/javascript .

HTML5 не нуждается в type="text/javascript" (по умолчанию).

CDATA требуется только для страниц XHTML, если в сценарии есть какие-либо символы HTML (например, ' ').

<!-- должен быть нужен только для старых браузеров.

Вы можете подумать о этой статье здесь, поскольку зависимость в сценариях по умолчанию автоматически используется text / javascript в HTML5, в то время как браузеры, не относящиеся к HTML5, по-прежнему ожидают, что вы определите тип специально для него, даже если они почти всегда будут угадывать текст / javascript.

Em Спецификация HTML5 призывает авторов не указывать атрибут, а не указывать избыточный тип MIME. MDN

Стандарт MIME Sniffing позволяет обслуживать JavaScript с использованием любого типа MIME ( многоцелевые расширения почты Интернета ), что соответствует следующему:

Ну, я продолжаю видеть больше примеров без текста / javascript, но по какой-то причине мои скрипты не будут работать в FF, когда я так делаю. Я бы порекомендовал сохранить текст / декларацию JavaScript. Тег CDATA предотвращает показ javascript в виде обычного текста на вашем веб-сайте, если в вашем браузере отключен javascript. Лично я больше не использую эти теги, не думаю, что есть много пользователей без них, и если они там, они могут захотеть вырастить немного мозгов: P

Если вы помещаете скрипт в SVG , вы должны указать атрибут type. И это должно быть "text/ecmascript" , а не "text/javascript" .

Если ваш сценарий встроенный (не связанный), вам нужно будет также обернуть тело сценария в декларацию CDATA. Таким образом, шаблон встроенного сценария для SVG (и других вариантов XML)

Это могут быть особые случаи «в дикой природе», но они достаточно реальны, и использование SVG расширяется, поэтому для любого другого человека неверно утверждать, что атрибут type и CDATA полностью устарели в современных браузерах. Варианты использования узкие, да, но не неслыханные.

«Измени окружение на противоположное, и каждый кусочек мудрости станет худшим из глупостей». - Эшби

Я полагаю, что браузер должен правильно интерпретировать блок script на основе заголовков, а не атрибута type . Поэтому, чтобы ответить на ваш вопрос, нет, это не требуется для современных браузеров (я говорю о IE7 +, FF, Webkit). Если вы поддерживаете старые браузеры, чем это . мне вас жаль =)

type="text/javascript" : требуется в HTML 4 и XHTML, но необязательно в HTML5.

CDATA : требуется в XHTML.

<!-- : используется, чтобы скрыть JavaScript от очень старых браузеров. Например: Netscape 1 и Internet Explorer 2, которые никто больше не использует.

Это Crockford. Я знаю, что видел, что это отражено в другом месте (возможно, ppk?). Спецификация HTML5 не требует этого.

Как ни странно, au courant стало несколько лучше использовать атрибут «type» для пометки <script> блоков, которые вы не хотите оценить:

Предоставляя странный тип, отличный от JavaScript, вы получаете способ вставлять необработанный текст на страницу для использования другим кодом JavaScript (который предположительно находится в блоке сценария, который может быть оцененным).

Атрибут type определяет сценарии язык кода, встроенный в элемент скрипта или на который ссылается атрибут src элемента. Это указано как тип MIME; примеры поддерживаемых типов MIME включают текст / javascript, текст / ecmascript, application / javascript и application / ecmascript.

Атрибут type указывает язык сценариев элемента содержимое и переопределяет язык сценариев по умолчанию. Скриптинг язык указывается в качестве типа контента (например, «текст / javascript»). Авторы должны предоставить значение для этого атрибута. Там нет по умолчанию значение для этого атрибута.

Но в HTML5 text/javascript есть тип по умолчанию, так что вы можете опустить

Атрибут type дает язык сценария или формат данные. Если атрибут присутствует, его значение должно быть действительным MIME тип. Параметр charset не должен быть указан. По умолчанию, который используется, если атрибут отсутствует, это «text / javascript».

Скрипты используются в html-страницах для увеличения функциональности и возможностей взаимодействия с посетителями сайта.

Для добавления сценария на страницу HTML используется дескриптор:

Или сегодня можно использовать упрощенный вариант:

Атрибуты дескриптора:

Итак, кратко резюмируем то, что необходимо знать о javascript:

тег script обычно помещается в html-страницу в область head или body ;
этот тег указывает на то, что внутри находится сценарий — исполняемый код, в нашем случае скрипт на языке javascript;
когда html-парсер браузера, отображая последовательно структуру html, доходит до тега script , то он передает инициативу интерпретатору javascript ;
интерпретатор, в свою очередь, исполняет содержимое кода до закрывающего тега script , а затем опять передает управление html-парсеру.

Добавление javascript в html

Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:

1. Встраивание JavaScript непосредственно в HTML-страницу:

<hr> Это обычный HTML документ. </body></html>

В данном примере дескриптор script может находиться как в теле документа, т.е. теге body (как в примере), так и в области head .

Создайте две страницы: lab1.html и myscript.js. Расположите обе страницы в одном каталоге.
В html-документе разместите код:

При прикреплении внешнего файла со скриптом тег script следует размещать в области head . При прикреплении js-файла следует иметь в виду, что в html-файле надо указывать относительный путь к файлу со скриптом. Так, если файл со скриптом находится в каталоге jscripts , то код будет: sсript src="https://labs-org.ru/javascript-1/jscripts/myscript.js" .

Выполните следующий пример, чтобы увидеть особенности работы метода alert() :

Пример 2: Поменяйте местами alert и document.write . Посмотрите на результат в браузере. Важно: особенность модального окна alert() состоит в том, что пользователь не может продолжить работу, пока не щелкнет по кнопке окна

Обратите внимание, как работает javascript, помещенный в теги оформления шрифта:

Пример 3: Перенесите скрипт в BODY после тега H1 . Посмотрите на результат. Важно: Пример показывает, что при использовании метода write() на странице выводится не просто текст, а html-код. То есть данный код может содержать теги html, которые будут преобразованы в соответствующее форматирование текста. Задание Js 1. Вывести в окно браузера следующие данные: Ваше ФИО, возраст, хобби (каждое на новой строке)

Задание Js 2. Написать сценарий (javascript) для вывода двух строк текста, красной и синей.

Замечание:
Теги html для оформления текста цветом: Задание Js 3. Найдите и исправьте ошибки во фрагментах кода:

Что такое сценарий (скрипт)?
Сформулируйте основные задачи, решаемые с помощью скриптов javaScript.
Опишите основные правила подключения сценариев к странице html.
Какой метод javaScript используется для вывода текста (html-кода) на страницу?

2. Синтаксис javaScript, основные понятия

JavaScript – язык интерпретируемый (простыми словами: интерпретируемый — исполняется последовательно команда за командой), но также оснащен JIT-компиляцией.

JIT или компиляция «на лету» (Just-in-time compilation) — технология увеличения скорости работы программных систем, использующих байт-код, путём компиляции байт-кода в машинный код непосредственно во время работы программы.

Рассмотрим некоторые понятия, относящиеся к синтаксису языка:

операторов,
блоков, т. е. взаимосвязанных наборов операторов, и
комментариев.

Операторы могут содержать:

переменные — могут изменять свое значение в программе,
константы — не изменяют свое значение,
выражения.

Идентификаторы (identifiers) — имена переменных, методов и объектов:

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

Важно: Язык JavaScript чувствителен к регистру:

//переменные различаются: counter=1 Counter=1

«Верблюжья нотация» в записи идентификаторов:

Есть определенные устоявшиеся среди программистов правила для идентификаторов (имён) переменных, функций, массивов и классов. Рассмотрим их:

let myCounter=1; // просто переменная let userNames = new Array(); // массив function getUserCounter()<>// функция

Ключевые слова (keywords) — предварительно определенные идентификаторы, составляющие основу языка программирования. Ключевые слова нельзя использовать для имен переменных, функций, объектов и методов.

Правила оформления скрипта JavaScript

каждый оператор JavaScript лучше начинать с новой строки;
каждый оператор заканчивается точкой с запятой;

Такой код не работает:

Код работает верно:

// способ 1: a=5 document.write(a) // способ 2: a=5; document.write(a); // способ 3: a=5; document.write(a);

блок — это набор операторов (составной оператор), заключенный в фигурные скобки < >.

JavaScript комментарии

В JavaScript допустимы два вида операторов комментария:

// — одна строка символов, расположенная справа от этого оператора, считается комментарием;
/*. */ — все, что заключено между /* и */ , считается комментарием; с помощью этого оператора можно выделить несколько строк в качестве комментария.

// проверка /* здесь может быть ошибка a=5; document.write(a); */

Второй способ комментирования обычно используется при поиске ошибок: тот блок сценария, в котором может находиться потенциальная ошибка, комментируется. Задание Js 4. Исправьте ошибки во фрагменте кода:

alert("Hello World!"); / это однострочный комментарий

Объявление переменных в javaScript и оператор присваивания

Переменная (variable) — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные.

Стандартным является размещение сценария в контейнере тега <SCRIPT>,T.e. между тегами <SСRIРТ> и </SСRIРТ>. Встречая тег <SCRIPT>, браузер «понимает», что за ним начинается код сценария. Все, что находится вне этих тегов, браузер воспринимает как html-код. Контейнер <SCRIPT> может располагаться в любом месте html-документа и даже не один раз. Одним из параметров тега <SCRIPT> является LANGUAGE, который определяет используемый язык сценария (JavaScript, Jscript, VBScript, VBS), но его можно не писать. Если атрибут не указан, то в Internet Explorer подразумевается JavaScript.

Старые браузеры, появившиеся раньше JavaScript, игнорируют теги <SCRIPT> и <SCRIPT>, а все что находится между ними, интерпретируют как содержимое html-документа. Рекомендуется помещать операторы языка JavaScript в дескрипторы комментария . Новые браузеры, поддерживающие сценарии, будут игнорировать эти символы, выполняя код сценария, а старые, наоборот.

Сценарий, определяющий площадь прямоугольного треугольника по катетам. Сценарий разместим в разделе <BODY> html-документа:

<TITLE>первый сценарий в документе</ТIТLЕ>

document.write("Площадь прямоугольного треугольника равна ",a*h/2,".")

<Р>Конец формирования страницы, содержащей сценарий. </Р>

Вопросы для повторения

1. Какие литералы существуют в JavaScript?

2. Как объявляются переменные в языке JavaScript?

3. Где описываются локальные переменные?

4. Где описываются глобальные переменные?

5. Где в HTML-документе можно разместить сценарий?

Иерархическая структура
объектной модели документа DOM

Средством для взаимодействия сценариев JavaScript с содержимым HTML-страницы является объектная модель документа или DOM. Среди объектов DOM имеются основные объекты и, присутствующие всегда, а также объекты, соответствующие различным элементам на странице. Для упрощения работы с объектами DOM они организованы в виде иерархии.

Итак, на вершине иерархической лестницы находится объект window (окно браузера). Он является одним из ключевых объектов языка JavaScript и содержит информацию об окне браузера, в которое загружена web-страница. Любые изменения в окне браузера связаны с изменением свойств и вызовом методов этого объекта, а также вложенных в него объектов. Именно поэтому в сценариях допускается обращение к свойствам и методам объекта window без явного указания его имени. Возникает вопрос: зачем вводить какой-то объект, если потом его имя можно нигде не использовать? В некоторых случаях, как управление фреймами или всплывающими окнами, работать в сценарии приходится сразу с несколькими объектами window. В этих случаях необходимо конкретизировать, для какого именно объекта вызывается то или иное свойство или метод.

Основными вложенными объектами window являются объекты document, history, location. Объект document содержит всю информацию об элементах html-страницы и позволяет их изменять. Каждому html-тегу соответствует отдельный объект и все они являются дочерними объектами document. Объект location предоставляет доступ к URL текущей страницы, а объект history – к списку посещенных страниц браузера.

Об объектах navigator и screen нельзя сказать, что они являются дочерними объектами window, поэтому на рисунке они расположены на одном уровне с объектом window. Хотя в отдельные моменты работы браузера объектов window может быть несколько, объекты navigator и screen всегда существуют в единственном экземпляре и являются «истинными статическими» объектами. Иначе говоря, их содержимое не может быть изменено средствами сценария. Объекты navigator и screen содержат, соответственно, информацию об используемом браузере и настройках экрана пользователя.

в основе DOM лежит понимание XML-документа как дерева объектов с изменяемыми свойствами элемент <head>. </head> является родительским объектом для объекта <html>. </html> элемент <body>. </body> является дочерним элементом по отношению к элементу <html>. </html>

11. Выберите верные утверждения:

строка кода $peremen = $_GET['peremennaya']; передает значение в JavaScript

строка кода var perem = (R*2*3,14) присваивает значение функции

строка кода var pets = new Array('X1','X2','X3'); создает массив pets со значениями X1,X2,X3

12. Какие данные, из ниже перечисленных, являются нетривиальными в JavaScript?

null function undefined

12. Что, из ниже перечисленного, является элементарным типом?

object array undefined

12. Что, из ниже перечисленного, является ссылочным типом?

object array undefined

1.Какой способ размещения JavaScript соотвествует URL-схеме?

. <FORM><INPUT TYPE=button VALUE="Кнопка" onClick="alert('Вы нажали кнопку');"></FORM> <BODY onLoad="alert('Приветствуем!');"> . </BODY>

…<A HREF="JavaScript:alert('Внимание!');">Кликни здесь</A>

1. Какой способ размещения JavaScript соотвествует подстановке?

<A HREF="JavaScript:alert('Внимание!');">Кликни здесь</A>

2.В каком случае будет вызван обработчик события onfocus?

для фокусировки того или иного элемента

для загрузки HTML-документа в окно браузера

для удаления загруженного ранее HTML-документа из окна браузера

2. Для чего применяется обработчик события onunload?

для фокусировки того или иного элемента

для загрузки HTML-документа в окно браузера

для удаления загруженного ранее HTML-документа из окна браузера

2. Для чего применяется обработчик события onload?

для фокусировки того или иного элемента

для загрузки HTML-документа в окно браузера

для удаления загруженного ранее HTML-документа из окна браузера

3.С помощью чего, из ниже перечисленного, можно вывести содержимое документа?

<a href="javascript:doStuff()">…</a> document.write() document.all

3. С помощью какого элемента можно разместить ссылку в JavaScript?

3. С помощью какого элемента будет показываться содержимое внутри этого элемента пользователям, которые отключили JavaScript?

4.В каком блоке размещается информация о типе документа в XHTML?

HTML CDATA DOCTYPE

4. В какой блок необходимо помещать код JavaScript, если используете строгий XHTML?

HTML CDATA DOCTYPE

4. В каком блоке не будет обрабатываться код JavaScript? HTML CDATA HEAD

5. Какие конструкции для циклов есть в JavaScript?

одна: for две: for и while три: for, while, do. while

5. Какие конструкции для функций есть в JavaScript?

одна: function f_name([arg1, arg2, . ])

две: function f_name([arg1, arg2, . ]), var my_function(arg1, arg2, . function_body)

одна: var my_function(arg1, arg2, . function_body)

5. Какие конструкции для условий есть в JavaScript?

четыре: if, if. else, . switch/case одна: if две: if, if. else

6. Какой комментарий не используют в языке JavaScript?

6. Какой комментарий заключается после символа //?

блоковый строковый многострочный

6. Какой комментарий заключается между символами /* строка */?

блоковый строковый многострочный

7. Какие преимущества имеет код JavaScript, размещенный во внешнем файле?

можно применять один и тот же код для нескольких документов HTML

замедляется отображение сайта

исправлять ошибки легче

7. Какие недостатки имеет код JavaScript, размещенный во внешнем файле?

можно применять один и тот же код для нескольких документов HTML

замедляется отображение сайта

исправлять ошибки легче

7. Какие достоинства имеет код JavaScript, размещенный непосредственно в HTML?

можно применять один и тот же код для нескольких документов HTML

быстро отображается сайт

исправлять ошибки легче

8. Какая проблема возникает, если использовать <a href = "javascript:doStuff()" > …</a> ?

сильное замедление обработки страницы

затруднения при тестировании

8. Какие недостатки имеет document.write()?

замедляет работу страницы

возникают трудности при тестировании

предоставляет альтернативный контент для пользователей

-8. Какие недостатки имеет window.onload?

происходит задержка отображения HTML

загрузка происходит довольно долго

для Internet Explorer необходимо использовать внешний файл JavaScript

9. В каком варианте описания переменных и функций используется литерал объекта?

9. В каком варианте описания переменных и функций используется раскрытие шаблона модуля?

Читайте также: