Javascript set script text

Hello, world!

This part of the tutorial is about core JavaScript, the language itself.

But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We’ll keep the amount of browser-specific commands (like alert ) to a minimum so that you don’t spend time on them if you plan to concentrate on another environment (like Node.js). We’ll focus on JavaScript in the browser in the next part of the tutorial.

So first, let’s see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like «node my.js» .

The “script” tag

JavaScript programs can be inserted almost anywhere into an HTML document using the tag.

   
Before the script.
  
. After the script.
  

You can run the example by clicking the “Play” button in the right-top corner of the box above.

The tag contains JavaScript code which is automatically executed when the browser processes the tag.

Modern markup

The tag has a few attributes that are rarely used nowadays but can still be found in old code:

The old HTML standard, HTML4, required a script to have a type . Usually it was type=»text/javascript» . It’s not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that’s an advanced topic, we’ll talk about modules in another part of the tutorial.

The language attribute: language=…>

This attribute was meant to show the language of the script. This attribute no longer makes sense because JavaScript is the default language. There is no need to use it.

Comments before and after scripts.

In really ancient books and guides, you may find comments inside tags, like this:

This trick isn’t used in modern JavaScript. These comments hide JavaScript code from old browsers that didn’t know how to process the tag. Since browsers released in the last 15 years don’t have this issue, this kind of comment can help you identify really old code.

External scripts

If we have a lot of JavaScript code, we can put it into a separate file.

Script files are attached to HTML with the src attribute:

Here, /path/to/script.js is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, src=»https://javascript.info/script.js» , just like src=»https://javascript.info/script.js» , would mean a file «script.js» in the current folder.

We can give a full URL as well. For instance:

To attach several scripts, use multiple tags:

Источник

Script text Property

The text property sets or returns the contents of the element.

Browser Support

Syntax

Property Values

Technical Details

Return Value:	A String, representing the contents of the script. Returns all the text nodes that are children of the element in tree order (other nodes, like comments or elements will be ignored).

More Examples

Example

Another example of how to get the contents of the element:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Привет, мир!

В этой части учебника мы изучаем собственно JavaScript, сам язык.

Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.

Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.

Тег «script»

Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега .

   
Перед скриптом.
  
. После скрипта.
  

Вы можете запустить пример, нажав на кнопку «Play» в правом верхнем углу блока с кодом выше.

Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.

Современная разметка

Тег имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:

Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге . Обычно он имел значение type=»text/javascript» . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.

Атрибут language : language=…>

Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.

Обёртывание скрипта в HTML-комментарии.

В очень древних книгах и руководствах вы сможете найти комментарии внутри тега , например, такие:

Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег . Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.

Внешние скрипты

Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.

Файл скрипта можно подключить к HTML с помощью атрибута src :

Здесь /path/to/script.js – это абсолютный путь до скрипта от корня сайта. Также можно указать относительный путь от текущей страницы. Например, src=»https://learn.javascript.ru/script.js» или src=»https://learn.javascript.ru/script.js» будет означать, что файл «script.js» находится в текущей папке.

Можно указать и полный URL-адрес. Например:

Для подключения нескольких скриптов используйте несколько тегов:

Как правило, только простейшие скрипты помещаются в HTML. Более сложные выделяются в отдельные файлы.

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

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

Это сокращает расход трафика и ускоряет загрузку страниц.

В одном теге нельзя использовать одновременно атрибут src и код внутри.

Нижеприведённый пример не работает:

Нужно выбрать: либо внешний скрипт , либо обычный код внутри тега .

Вышеприведённый пример можно разделить на два скрипта:

Итого

• Для добавления кода JavaScript на страницу используется тег
• Атрибуты type и language необязательны.
• Скрипт во внешнем файле можно вставить с помощью .

Нам ещё многое предстоит изучить про браузерные скрипты и их взаимодействие со страницей. Но, как уже было сказано, эта часть учебника посвящена именно языку JavaScript, поэтому здесь мы постараемся не отвлекаться на детали реализации в браузере. Мы воспользуемся браузером для запуска JavaScript, это удобно для онлайн-демонстраций, но это только одна из платформ, на которых работает этот язык.

Задачи

Вызвать alert

Создайте страницу, которая отобразит сообщение «Я JavaScript!».

Выполните это задание в песочнице, либо на вашем жёстком диске, где – неважно, главное – проверьте, что она работает.

Источник

JavaScript HTML DOM — Changing HTML

The HTML DOM allows JavaScript to change the content of HTML elements.

Changing HTML Content

The easiest way to modify the content of an HTML element is by using the innerHTML property.

To change the content of an HTML element, use this syntax:

This example changes the content of a

element:

Example

• The HTML document above contains a

  element with id=»p1″

• We use the HTML DOM to get the element with id=»p1″
• A JavaScript changes the content ( innerHTML ) of that element to «New text!»

This example changes the content of an element:

Example

• The HTML document above contains an element with id=»id01″
• We use the HTML DOM to get the element with id=»id01″
• A JavaScript changes the content ( innerHTML ) of that element to «New Heading»

Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax:

This example changes the value of the src attribute of an element:

Example

• The HTML document above contains an element with id=»myImage»
• We use the HTML DOM to get the element with id=»myImage»
• A JavaScript changes the src attribute of that element from «smiley.gif» to «landscape.jpg»

Dynamic HTML content

JavaScript can create dynamic HTML content:

Example

document.write()

In JavaScript, document.write() can be used to write directly to the HTML output stream:

Example

Never use document.write() after the document is loaded. It will overwrite the document.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Node: textContent property

The textContent property of the Node interface represents the text content of the node and its descendants.

Note: textContent and HTMLElement.innerText are easily confused, but the two properties are different in important ways.

Value

A string, or null . Its value depends on the situation:

If the node is a document or a doctype, textContent returns null .

Note: To get all of the text and CDATA data for the whole document, use document.documentElement.textContent .

Warning: Setting textContent on a node removes all of the node’s children and replaces them with a single text node with the given string value.

Differences from innerText

Don’t get confused by the differences between Node.textContent and HTMLElement.innerText . Although the names seem similar, there are important differences:

• textContent gets the content of all elements, including and elements. In contrast, innerText only shows «human-readable» elements.
• textContent returns every element in the node. In contrast, innerText is aware of styling and won’t return the text of «hidden» elements.
  • Moreover, since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.)

  Differences from innerHTML

  Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML.

  Moreover, using textContent can prevent XSS attacks.

  Examples

  Start with this HTML fragment.

  div id="divA">This is span>somespan> text!div> 

  You can use textContent to get the element’s text content:

  let text = document.getElementById("divA").textContent; // The text variable is now: 'This is some text!' 

  If you prefer to set the element’s text content, you can do:

  .getElementById("divA").textContent = "This text is different!"; // The HTML for divA is now: // 
  This text is different! 

  Specifications

  Browser compatibility

  BCD tables only load in the browser

  See also

  Found a content problem with this page?

  This page was last modified on Apr 7, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник