Как подключить javascript в html
Перейти к содержимому

Как подключить javascript в html

  • автор:

Как подключить Javascript файл к html документу?

Предположим, что у вас есть html-документ и javascript код, который должен в нем выполняться. Код javacript может находиться как внутри html-документа, так и в отдельном файле формата *.js.

Проблема, которая очень часто появляется у начинающих пользователей: Как подключить javacript-код или файл к html документу?

В этой небольшой заметке мы рассмотрим, как это можно сделать.

Все мои уроки по Javascript здесь.

Пусть содержимое файла html будет следующее:

    Документ без названия  Содержимое html-файла 

Ничего лишнего. Теперь код, который необходимо подключить:

alert("Javacript подключен");

Т.е. этот скрипт просто должен вывести всплывающее окно с сообщением, что «Javacript подключен» при открытии файла html-документа. Итак, рассматриваем два варианта подключения скрипта.

Вариант 1. Подключение внутри html-файла.

Делается это с помощью конструкции:

  

Вставим этот код можно внутри тэга , либо внутри тега . В итоге, содержимое html файла может буть следующим:

    Документ без названия    Содержимое html-файла 

Проверяем, что все работает:

21-10-2014 13-05-32

Отлично. Окно с сообщением появилось.

Вариант 2. Подключение внешнего файла скрипта с кодом.

Если javascript-код находится во внешнем файле, то способ его подключение будет несколько другим. Пусть такой файл называется script.js. О том, как создать javascript файл я писал здесь.

В итоге, имеем два файла index.html и script.js, которые находятся в одной папке.

21-10-2014 13-04-21

Как теперь подключить скрипт к html файлу? В этом случае нужно воспользоваться тэгом

Об адресах и как их правильно выставлять информация здесь.

Так как файл скрипта script.js находится в той же папке, что и файл index.html, то html-код может быть следующим:

    Документ без названия  Содержимое html-файла 

Как правило, скрипты подключаются в области документа. Если все сделано правильно, то вы точно также сможете увидеть всплывающее окно с надписью, что «javascript подключен». Это два основных способа, как вы можете подключить код javascript к html документу.

Пользуйтесь этим на практике.

Все мои уроки по Javascript здесь.

Подключение JavaScript к HTML

Осваивайте профессию, начните зарабатывать, а платите через год!

Курсы Python Ак­ция! Бес­плат­но!

Станьте хакером на Python за 3 дня

Веб-вёрстка. CSS, HTML и JavaScript

Курс Bootstrap 4

Станьте веб-разработчиком с нуля

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами ;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .

Выполнить код » Скрыть результаты

Обратите внимание: мы указали атрибут language тега , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .

JavaScript в атрибутах событий HTML-элементов

Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

В следующем примере функция JavaScript помещается в раздел HTML-документа. Вот пример HTML-элемента с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.

Выполнить код » Скрыть результаты

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами .

По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.

Выполнить код » Скрыть результаты

Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.

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

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов .

Расположение тегов

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

Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:

Подключение и выполнение javascript

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/hello-world.

  1. Подключение в любом месте
  2. Вынос скриптов в заголовок HEAD
  3. Внешние скрипты

В этом разделе мы понемногу рассмотрим все основные элементы javascript. Это позволит тут же писать и тестировать простейшие скрипты.

Javascript подключается напрямую в HTML-файл. Самый простой способ - это написать javascript-команды внутрь тега где-нибудь в теле страницы.

Подключение в любом месте

Когда браузер читает HTML-страничку, и видит - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

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

  

Считаем кроликов

*!* for(var i=1; i */!*

. Посчитали

В этом примере использовались следующие элементы.

Тег

В следующем примере javascript-код только описывает функцию count_rabbits , а ее вызов осуществляется по нажатию на кнопку input .

  *!*  */!* *!**/!*  

Для указания запускаемой по клику функции в input был использован атрибут onclick . Это лишь вершина мощного айсберга javascript-событий.

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

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега .

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

Чтобы подключить несколько скриптов - используйте несколько таких тегов:

При указании атрибута src содержимое тега игнорируется.

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

Современное оформление тэга

На плохое оформление сейчас ругается только валидатор. Поэтому эту заметку можно не читать.

Однако, знать это полезно хотя бы для того, чтобы сразу отличать современный и профессиональный скрипт от написанного эдак лет 5-6 назад.

Атрибут По стандарту этот атрибут нужен для указания языка скрипта, но по умолчанию принят javascript, поэтому даже атрибута type нет - все работает ок. Но валидатор будет ругаться, т.к стандарт требует этот атрибут.

Иногда используют как оригинальный способ добавить неотображаемые данные на страницу. Браузер не исполняет и не показывает с неизвестным типом. В этом плане он ничем не отличается от обычного с вечным style="display:none" .
Атрибут В старых скриптах нередко можно увидеть атрибут language . Этот атрибут давно мертв и никому не нужен. Не используйте его для javascript. Комментарии до и после скрипта В старых руководствах по javascript встречается указание "прятать" javascript-код от старых браузеров, заключая его в HTML-комментарии .

Браузер, от которого прятали код (старый Netscape), давно умер. Современные браузеры комментарии просто игнорируют. Не ставьте их.

Автор: Zzet, дата: 30 июля, 2009 - 17:58

Здравствуйте!Запускаю скрипт для подсчета кроликов по кнопке. скрипт в отдельном html, браузер Mozilla FireFox - не работает. в чем дело не подскажете? подддержка JavaScript в браузере включена.

Автор: Марат (не зарегистрирован), дата: 30 июля, 2009 - 20:11

Если Вы имеете в виду, что вы выносите js-код в отдельный файл, то там нужно поставить расширение .js

Автор: Гость (не зарегистрирован), дата: 8 декабря, 2012 - 21:47

все работает локально, смотрите у себя недочёты.

Автор: Гость (не зарегистрирован), дата: 9 апреля, 2015 - 16:24

в начали добавь

Автор: rossderi, дата: 6 декабря, 2022 - 20:22

radikal sirk zebra bağlantı kesildi Truva atı makale knyl Erkek cüzdan fiyatları - jazzsocietyturkey. Erkek Cüzdan Modelleri ve Fiyatları. JUST POLO Mini Cüzdanlı Ayarlanabilir Uzun Askılı Erkek Çapraz Çanta Pbu2168. Toptan Çanta, Cüzdan & Kemer Çeşitleri. Egemenlik mahallesi 6112 sk no:1/224 Bornova / İzmir. net; dedikodu sele mantar Knyl Erkek Deri Cüzdan Ince Ve Zarif Tasarım Fiyatı, . com bir tık kadar yakınınızda olup kol düğmesi için Türkiye deki en büyük seçenek ekoldugmesi dir. Hakiki Deri Telefon Kılıfı Modelleri ve Fiyatları. Erkek cüzdan modelleri arasında yer alan klasik deri cüzdan, kartlık cüzdan, fermuarlı cüzdan ve spor cüzdan modellerine sitemizden kolayca ulaşabilirsiniz. MANCA & KNYL Erkek CÜZDAN en iyi özellikleri ve gerçek kullanıcı yorumları en ucuz fiyatlarla 'da. age Meaningless Swamp knyl erkek cüzdan fiyatları. Tıkla, en ucuz Manca Erkek Çantaları ayağına gelsin. com'da! Yeni sezon Erkek Cüzdan modellerine çok cazip fiyat avantajları ile hemen sahip olabilirsiniz. Sti̇legom sevgililer gününe özel hediyelik . JUST POLO Erkek Ayarlanabilir Uzun Askılı El Ve Omuz Çantası Pbu1360. Cüzdan

Автор: rossderi, дата: 6 декабря, 2022 - 20:23

TPDK yönetmelik yayımlayarak kıyılmış tütün için yaprak kağıt üretimine izin verdi. Sözünü ekarte eden sigara şeklidir. comWatch quality videos about e arşiv fatura irsaliye yerine geçer mi and share them online. Torbalı'da kaçak tütün satışı yapıldığı tespit edilen bir iş yerinde toplamda 110 kilogram kıyılmış tütün ve nargile tütünü, 55 bin 781 adet makaron, 153 bin adet Tütün Cüzdanı kağıdı, 14 adet TAPDK bandrolü ele geçirildi. Piyasada satılan tütün haznesiz ucuza satılan sarma makinalarından uzak durunuz çünkü herhangi bir kap ile bu hazne aynı şey değildir. Bu kişilerin ev ve iş yerlerinde yapılan aramalarda 494 kilo açık kıyılmış tütün, 50 kilo gümrük kaçağı çay, 14 bin 400 adet içine tütün basılmış makaron, 256 Tütün Cüzdanı …. Evde Tütün Kesesi İşi Yapmak Evde çalışıp para kazanmak isteyenlere belirttiğimiz alternatif iş fikirleri arasında; evde Tütün Kesesi işi yerini korumaktadır. Tütün Fiyatları ve Tütün Kesesi makinesi fiyatlarını web sitemizden detaylı bir şekilde öğrenebilirsiniz. Tütün Cüzdanı

Автор: rossderi, дата: 6 декабря, 2022 - 20:25

Beklediğiniz her şeye ve hiç beklemediğiniz bir fiyata sahip Akıllı Saat Kordonu SE ile tanışın. Akıllı Saat Kordonu Series 7 Gps + Cellular, 45MM Siyah Alüminyum Kasa ve Siyah Spor Kordon - MKJP3TU/A. Telefon Kılıfı; AirPods Kılıfları; Telefon Çantaları; Telefon Bilek Askısı; İNDİRİM. Akıllı Saat Kordonu Series 6 GPS 44mm. Apple, sessiz sedasız bir şekilde internet sitesini güncelledi ve yeni ürünlerinin fiyatlarını da duyurdu. Akıllı Saat Kordonu 42MM KRD-08 SERAMİK KORDON metal gövde . Bunlardan ilki Akıllı Saat Kordonu kordon boyutları olarak göze çarpar. Akıllı Saat Kordonu SE Gps + Cellular 44mm Aluminyum Kasa Ve Spor Kordon Akıllı Saat. Akıllı Saat Kordonu GPS + Cellular cihazınıza tanımlı olacak bu tarife ile, iPhone'unuz veya bir Wi-Fi bağlantınız olmasa bile arama yapabilir, verileri ve uygulamaları kullanabilirsiniz. Akıllı Saat Kordonu 3 kordon 38mm kasa ile uyumluluk. Akıllı Saat Kordonu

Автор: rossderi, дата: 6 декабря, 2022 - 20:26

Ekonomik bileklik seçimi, Tyvek® bileklikler hızlı ve kolay tanımlama için mükemmeldir. Ücretsiz Kargo, Hızlı Teslimat ve İade Garantisi. Fuşya Beyaz Puanlı Kağıt Çanta (18x24 cm) Doğum günü ve özel günlerde sevdiklerinize, hediyelerini bu çanta ile verebilirsiniz. Ürün Kodu: metal-takiboncugu-33. Barkodlu deri bileklik; Yırtılmaz deri bileklik üzerine değişken bilgi, numaratör, barkod basılır. deri bileklik Fiyatları ve Modelleri. Özel Üretim Yumuşak Dokulu Kağıt Rafya - Ebruli. Güvenlik Bilekliği: Çok amaçlı kullanıma uygun olup kullanım yerine göre hasta bilekliği, parti bilekliği, müşteri takip bilekliği şeklinde de isimlendirilen güvenlik bileklikleri ; * Otel ve Tatil Köylerinde. Kumihimo Bileklik Yapımı Merhaba ben Aysu İnan. Kağıda benzer yapısı sayesinde ince ve hafiftir. Her ebat ve özel tasarımlar ile bileklik yapılabilir. Bilezik çizimine baĢlamadan önce çizeceğiniz modeli ayrıntılarına dikkatle inceleyiniz ve kâğıt üzerindeki kompozisyonunu kurgulayınız,(ġekil : 1. onlardan birini seçebilirsiniz, veya ayrıca özel. Erkek Bileklik

Автор: rossderi, дата: 10 декабря, 2022 - 16:16

Amigurimi SAKARYA / HENDEK - 09. Örgü Atölyesi: Makrome Çantalı Ayı Anahtarlık Tarifi. Özellikle hobi olarak yapabileceğiniz bu tür örgülerin . Örgü anahtarlık modelleri ni örüp sevdiklerinize de hediye edebilirsiniz. Çok kolay tığ işi çanta anahtarlık yapımı (Makrome. Tamamen el yapımı olan bu ürünümüzü, ister anahtarlık ister çanta süsü olarak kullanabilirsiniz. org; nötr Norm önemli Makrome . Diğer marka Kadın Aksesuar Sarı renk beden Pompompurin Makrome Sanrio. 2022 - Pinterest'te Nesrin Alsancaklı adlı kullanıcının "Makrome anahtarlık ve çanta" panosunu inceleyin. Makrome Göz Vidalı 12mm / 50 Çift. Yapılışı: sihirli halka içine 6 tane sık iğne yaparak çantanın alt kısmından başlıyoruz. Makrome, adına her şeyi burada bulabilirsiniz. Kapak kısmı için yuvarlak bir parça hazırlayıp gizli dikiş ile çantaya ekleyin. Makrome Malzemeleri Satın Al. Kaydırma tekniği ile birleştirelim. 1) Makrome Emoji Anahtarlık Yapımı Emojiler hayatımızın artık ayrılmaz bir parçası haline geldi. Makrome Anahtarlık Modelleri

Автор: rossderi, дата: 10 декабря, 2022 - 16:18

Patlıcan tekrar et formasyon bahçe salıncak bim. BİM aktüel 22 Temmuz 2022 kataloğu! Karcher elektrikli süpürge, mobilya, elektronik, tekstil ürünleri Askılı Salıncak 1. A101, BİM ve ŞOK Aktüel Ürünler Listesinde Bu Hafta Neler Var?. Cuma raflarda! BİM aktüel 1 Nisan 2022 Cuma. 03 Temmuz 2020 Cuma’dan itibaren BİM Market mağazalarında satılacak ürünlerden biri olan Silikon Mama Önlüğü vatandaşlar tarafından merak …. BİM 15 Nisan 2022 kataloğu! BİM aktüel 15 Nisan 2022. Haber 7 - Haftanın A101 aktüel kataloğu yayınlandı. salıncak Fiyatları ve Modelleri. En güncel Şok kataloğu fiyaton'da. Ayhan Çocuk - Anne ve Ürünleri Mağazası; Araç ve Gereçleri, Bakım ve Beslenme Ürünleri, Odası Mobilya, Kampanyalar, İndirimler. Şok 11 Ağustos 2021 Aktüel Ürünleri » Aktüel. Casilli Şortlu Saten Takım 39,90 TL. SAMSUNG MG23A7013CB-OL-BIM ANKASTRE MİKRODALGA FIRIN. ebebek, 10+ yıldır Şikayetvar üye markasıdır. Oguzser Ingiliz Gülü 3 Kişilik Bahçe salıncak Teras Balkon Salıncak 200 cm. İndirim Kuponlarım; Trendyol'da Satış Yap; Yardım & Destek; Giriş Yap. Tavana çelik dübel montajı dahil herşeyi bulabilebileceğiniz bir. A101 bu hafta MGS Çocuk salıncak …. Salıncak

Автор: Mors Alfabesi Bileklik (не зарегистрирован), дата: 26 октября, 2023 - 19:12

Ücretsiz sigortalı kargo 1-2 iş gününde kargoya teslim. HEMEN AL Ücretsiz sigortalı kargo 1-2 iş gününde kargoya teslim. El Yapımı Özel Tasarım Otantik

Автор: Гость (не зарегистрирован), дата: 1 ноября, 2023 - 20:20

Indulge in the excitement of suika game , where the fusion of strategy and Tetris-style gameplay creates a vibrant and dynamic gaming experience that encourages players to think fast and act strategically, promising an immersive and addictive adventure that will keep you coming back for more.

Автор: Tikson (не зарегистрирован), дата: 17 августа, 2009 - 19:55

Согласен с Zzet
НЕ работает пример с head на локальном компьютере. На сайте если нажать Просмотреть - работает, но если скопировать код и сохранить на локальном компьютере, то ничего не происходит в браузере, появляется только кнопка- жмешь на нее , ничего не происходит

Автор: Илья Кантор, дата: 18 августа, 2009 - 10:15

Попробовал. По виду - при копировании и вставке - код вставляется в 1 строчку, это так у вас?

Автор: Грин (не зарегистрирован), дата: 18 декабря, 2011 - 00:21

Tikson, ну ёмаё, правильно, ничего не выйдет, потомучто файл с расширением js сохранен на сервере, чтобы код работал у тебя, тебе нужно написать такой файл у себя на компе и прописать к нему путь. Ну что тут может быть не понятно.

Автор: Арсенька, одмын-дизайнер (не зарегистрирован), дата: 18 мая, 2012 - 02:27

Конечно нифига на локальном не выйдет. ДЖс - это язык програмирования. Для его выполнения нужна среда. такая же как для кода пхп, т.е. тот же денвер. Олухи блин.

Автор: Гость (не зарегистрирован), дата: 5 июня, 2012 - 15:26

Эм. умнее ничего сказать не мог?
JS - браузерный язык(с)кэп, какая еще среда ему нужна? о_О
И не сравнивай яблоко с апельсином, php - серверный язык программирования (с)Кэп, разницу чуешь?(риторика)

Автор: Гость (не зарегистрирован), дата: 30 ноября, 2012 - 19:23

Это не серверный язык, умник.

Автор: Гость (не зарегистрирован), дата: 28 февраля, 2013 - 10:27

Смешно Вас слушать, одмын Арсенька! Среда для js есть у каждого и выбирают ее по своим предпочтениям: хром, лиса, сафари, ие наконец.

Автор: Гость (не зарегистрирован), дата: 15 января, 2015 - 19:15

На каждом сервере есть интерплитатор php и js кода - своего рода рабочая среда для действия кода, А браузер всего лишь поддерживает эту сдреду! Для того что бы разрабатывать сайт с js и php кодом, нуже не только рабочий браузер, но и сама рабочая среда для кодов! Вы не сможете просто так на PC создать папку, в ней создать php файл с большим кодом и запустить его в браузере и проверить работу кода! Он не будет работать! Нужен Денвер или другой лок. хостинг!

Автор: Гость (не зарегистрирован), дата: 19 октября, 2015 - 04:35

Дааа, велики ваши познания сер, можете сейчас прям в программеры с окладом в $5000 идти. В яндекс там или гугл:)))

Автор: Гость (не зарегистрирован), дата: 21 июня, 2018 - 16:29

С php кодом так не получиться, а вот с JS вполне! Создаешь папку, засовываешь в нее html в который внедряешь JS и все будет работать! Ну если конечно руки из плечей растут. Можешь хоть ОС свою переустановить и к интернету не подключаться, а и дрова не нужны на много что ставить, все что нужно это браузер, желательно по новее!
Ну или можешь просто нажать F12 (или "Инспектор кода"), перейти во вкладку Console и прям там писать JS. Судя по твоим познаниям тебя удивит результат таких действий!

Автор: Hank (не зарегистрирован), дата: 16 июня, 2020 - 21:26

very interesting! Thanks for the feedback. wichita ks fence installation

Автор: Гость (не зарегистрирован), дата: 6 июля, 2013 - 11:59

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

Автор: Гость (не зарегистрирован), дата: 5 ноября, 2014 - 11:57

неверно. не нужна никакая среда для js. он исполняется в браузере, поэтому никакие денверы не нужны для работы. обычный html, сохраненный на рабочий стол запустит любой js как в себе, так и в подключенном файле. исключение - ajax работающий с функциями php.

Автор: Гость (не зарегистрирован), дата: 1 октября, 2017 - 19:27

Автору: Арсенька
Конечно нифига на локальном не выйдет. ДЖс - это язык програмирования. Для его выполнения нужна среда. такая же как для кода пхп, т.е. тот же денвер. Олухи блин. "
Глупость несусветная. Не знаешь так чего лезешь? js - браузерный язык и в локале работает отлично

Автор: Гость (не зарегистрирован), дата: 21 марта, 2012 - 21:07

Правильно. В Head тег titile является необходимым без него ничего не запашет

Автор: alexey00344540 (не зарегистрирован), дата: 7 ноября, 2012 - 20:54

товарищ, тег title для вывода названия, если поместить внутрь код, то он только покажется в заголовке и ничего не сработает!

Автор: Tikson (не зарегистрирован), дата: 18 августа, 2009 - 13:50

>По виду - при копировании и вставке - код вставляется в 1 строчку, это так у вас?
Не могу найти этому обьяснение, но сегодня этот пример работает. ). Причем действия я выполнил все теже, что и впрошлый раз.
В одну строчку код не вставлялся, все нормально вставлялось в мой текстовый редактор.
В любом случае благодарю за помощь.

Автор: Philcher (не зарегистрирован), дата: 12 января, 2010 - 15:09

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

Автор: Voland-Li (не зарегистрирован), дата: 20 мая, 2010 - 08:30

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

Автор: Maxim (не зарегистрирован), дата: 19 августа, 2009 - 16:58

Все работает, просто когда вы пишите код в файле .js
такие параметры как:

учитывать не надо. И писать надо без них. Тогда все работать будет.

Автор: SoulFestival (не зарегистрирован), дата: 26 августа, 2009 - 07:03

Скрипт не работает когда при копировании заносится в одну строчку.
Там комментарии закрывают alert

Автор: Mihel (не зарегистрирован), дата: 13 декабря, 2009 - 19:27

Ну что вы все ерунду пишите. Одна строчка, коментарии. что мы здесь все, малыши - элементарных вещей не знаем?
Пример не работает. Почему?
Учебник содержит ошибку:
- ТАК НЕ ПИСАТЬ.
- вот так писать. И все заработает)))

Автор: Гость (не зарегистрирован), дата: 13 декабря, 2009 - 19:30

- ВОТ ТАК ПИСАТЬ
Первый слеш перед my (или js - неважно) лишний.

Автор: B@rmaley.e>Читайте про адресацию.

Автор: Гость (не зарегистрирован), дата: 6 февраля, 2010 - 14:31

подтверждаю в ФФ 3.5 не работает если первый "/" перед js ставишь

Автор: Гость (не зарегистрирован), дата: 27 февраля, 2014 - 13:48
Автор: Эльдар (не зарегистрирован), дата: 18 мая, 2016 - 15:40

Отдуши чувак! помог!

Автор: Гость (не зарегистрирован), дата: 2 мая, 2018 - 20:18
Автор: Гость (не зарегистрирован), дата: 27 августа, 2009 - 10:18

Если вы про кнопку с кроликами то уберите комментарий в коде и всё будет окей.

Автор: Гость (не зарегистрирован), дата: 29 августа, 2009 - 07:38

А у меня все пошло сразу) На стандартных настройкай эксплорера) Поэксперементировал) викинул лишнее добавил свое все работает))) Даже удивился этому))))

Автор: Гость (не зарегистрирован), дата: 6 сентября, 2009 - 17:34
Автор: Антон Погребной (не зарегистрирован), дата: 9 сентября, 2009 - 13:17

Спасибо за отличный учебник!
Скажите можно ли в отдельном файле js писать несколько скриптов?
Если да, то как их разделить в этом файле и как вставлять на страницу
script src="https://javascript.ru/tutorial/foundation/.%20js" ,
или для каждого скрипта нужно создавать отдельный файл?
С уважением Антон.

Автор: Илья Кантор, дата: 9 сентября, 2009 - 21:18

Чтобы подключить несколько скриптов - используйте несколько тегов:

Автор: А (не зарегистрирован), дата: 11 сентября, 2009 - 11:10

А как в самом файле js их раздеть?
Скрипт
Можно так или нужно иначе?
Извените за мои наивные вопросы!
С уважением Антон.

Автор: Илья Кантор, дата: 11 сентября, 2009 - 11:55

Вопрос не понял.

Автор: Гость (не зарегистрирован), дата: 11 сентября, 2009 - 12:03

src="https://javascript.ru/js/script2.js" вставляю в HTML файл.
А в отдельном файле со скриптами JS как разделить (задать имя) каждому скрипту, если их несколько? script1, script2 и т д

Автор: Гость (не зарегистрирован), дата: 24 сентября, 2009 - 21:42

Я так понимаю, вы имеете ввиду несколько функций в одном файле?
Тогда нет необходимости их как-то разделять. В одном файле может находиться множество различных функций, каждая из которых выполняет свою задачу. Просто подключаете файл js и в html вызываете нужную функцию, на пример так:

из второго примера вызывает функцию count_rabbits()

Автор: Гость (не зарегистрирован), дата: 28 сентября, 2009 - 13:31

Во внешнем файле js три текста
document.write("Текст 1");
document.write("Текст 2");
document.write("Текст 3");
Как каждый отдельный текст вставить в HTML файл?
script src="https://javascript.ru/tutorial/foundation/.%20js" Как им задать имя? Я это спрашиваю.

Автор: dm-tlt (не зарегистрирован), дата: 28 сентября, 2009 - 17:39

Помещай каждый текст в отдельную функцию и выводи эту фунцию в любом месте страницы.

Автор: Гость (не зарегистрирован), дата: 30 сентября, 2014 - 22:11

В Джумле с использованием редактора TinyMCE любое указание адреса для параметров тега типа src, даже если пишешь первый слэш, после апдейта отображения в модуле и последующем просмотре кода выдает адрес без рута (первого слэша). Так что вот так.

Автор: Гость (не зарегистрирован), дата: 27 февраля, 2012 - 21:40

А как быть если в одном *.js
две функции и одна вызывает другую?
Пример ниже:
function Login_Sessin(form)
if (form.User_Login.value=="1")
if (form.User_Password.value=="2")
alert("Здравствуй.")
>
else
alert("неверный пароль.")
>
>
else
alert("Неверный логин.")
>
TEST(form)
>
function TEST
alert("Тестовая строка")
>

тестовая строка не выводится. без второй функции работает.

Автор: Гость (не зарегистрирован), дата: 12 февраля, 2015 - 14:55

ты логику проверь разочек

Автор: Гость (не зарегистрирован), дата: 26 марта, 2019 - 12:07

a eto tochno budet rabotat?

Автор: Гость (не зарегистрирован), дата: 13 февраля, 2013 - 15:19

можно ли в отдельном файле js писать несколько скриптов? > можно
для этого можно каждому скрипту назначить свою функцию и потом использовать ее. но для упрощения поиска ошибка лучше если каждый отдельный скрипт висит в своем файле

Автор: ГостьZ (не зарегистрирован), дата: 9 сентября, 2009 - 20:33

Скажите пожалуйста, как вывести на страницу, где находится кнопка, информацию: i=1;i=2;i=3, из приведенного кода

function count_rabbits() for(var i=1; i=1;i <=3; i++) // оператор + соединяет строки
alert("Из шляпы достали "+i+" кролика!")
>
>

Заранее Вам благодарна.

Автор: Гость (не зарегистрирован), дата: 2 октября, 2009 - 14:56

Помогите разобраться. Я делаю как в примере про кроликов с кнопкой для запуска но со своей функцией случайных чисел. у меня не выводится ни чего. вот код проги

  Пример 12345 Назад nhjjkk function getRandomInt(x, y)  

Автор: Илья Кантор, дата: 4 октября, 2009 - 23:35

Ничего не выводится, т.к. отсутствует оператор вывода, например, alert.

Автор: Гость (не зарегистрирован), дата: 6 октября, 2009 - 11:30

А куда его сувать!

Автор: kurguru (не зарегистрирован), дата: 8 октября, 2009 - 15:28
function getRandomInt(x, y)

Вместо возвращения значения (return) - в вашем случае можно сразу вызвать alert.
Я так понимаю, x и y - соответственно левая и правая границы диапазона случайных чисел? В коде уже исправлено.

Автор: danie (не зарегистрирован), дата: 13 октября, 2009 - 17:13

При вставке всего текста скрипта в

вызов кнопкой работает.

При в вставке файла с этой функцией в

вызов кнопкой не пашет. Почему?

Автор: Гость (не зарегистрирован), дата: 16 октября, 2009 - 09:05

"браузер читает HTML-страничку" лучше заменить на: "браузер воспроизводит HTML-теги"

Автор: Гость (не зарегистрирован), дата: 16 октября, 2009 - 15:12

Как задать свойства шрифта (цвет, размер и т. д.) при помощи javascript только для этого текста?
document.write("ТЕКСТ");

Автор: Гость (не зарегистрирован), дата: 14 января, 2010 - 06:31

document.write('TEKST');

Автор: Гость (не зарегистрирован), дата: 10 февраля, 2011 - 18:52
Автор: Sirozha (не зарегистрирован), дата: 9 ноября, 2009 - 17:07

Доброго времени суток
Не могли бы вы уточнить, каким образом писать адрес внешнего скрипта, (объясняю ситуацию: существует html страница и локально в это же папке лежит скрипт)

Автор: Гость (не зарегистрирован), дата: 10 ноября, 2009 - 14:19

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

Автор: Гость (не зарегистрирован), дата: 10 ноября, 2009 - 18:16

при открытии карт или удалении писем появляется надпись,что нет сервиса javascript и надо подключить в надстройках браузера. ПОМОГИТЕ ПОЖАЛУЙСТА. я неуверенный пользователь ПК и видно,что-то нахимичила. ПОМОГИТЕ

Автор: Norma (не зарегистрирован), дата: 12 ноября, 2009 - 13:59

в браузере инструменты - настройки - включить javascript

Автор: Norma (не зарегистрирован), дата: 12 ноября, 2009 - 14:11

вопрос: а если внешних скриптов несколько, то имена всех методов в них должны быть разными? чтобы не было путаницы, какую функцию вызывать по событию, например onclick? или можно как-то явно прописать через имя скрипта?

Автор: Илья Кантор, дата: 13 декабря, 2009 - 14:05

Сколько бы внешних скриптов не было - объявленные в них функции и переменные находятся в одном глобальном пространстве имен window.

Автор: Гость (не зарегистрирован), дата: 16 ноября, 2009 - 16:52

Вопрос: внешний файл .js кроме текста самого скрипта должен еще что-то включать?
Поясню свой вопрос: хочу вынести скрипт в отдельный файл, вырезала текст скрипта из страницы, добавила src, а сам текст вставила в отдельный файл. Что еще в этом файле надо дописать?

Автор: Илья Кантор, дата: 13 декабря, 2009 - 14:03

Нет, js не должен и не может включать ничего, кроме текста скрипта.

Автор: Гость (не зарегистрирован), дата: 10 февраля, 2011 - 19:09

это для чего вначале и в конце в файле скрипта вставляют?

Автор: Гость (не зарегистрирован), дата: 11 февраля, 2011 - 12:24

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

Автор: Гость (не зарегистрирован), дата: 2 июля, 2011 - 21:05

Только в XHTML. В HTML тег CDATA не рекомендуется

Автор: ВадимБакей (не зарегистрирован), дата: 25 января, 2017 - 21:47

1)А если у меня на странице много скриптов script. /script
Могу ли я вырезать их из тегов и написать все в одном подключаемом файле .js
2) И если этот файл подключу к другой странице, где некоторые включаемые скрипты не используются - не создаст ли это ошибки?

Автор: Гость (не зарегистрирован), дата: 12 декабря, 2009 - 21:27

Скажите, пожалуйста, а можно из одного файла script.js обращаться к другому файлу lib.js и использовать функции, описаные в нём?

И ещё:
Из родительского окна открывается дочернее(open().
Из дочернего окна происходит обращение к массиву users[], находящимуся в родительском: opener.document.users[](если это имеет значение - каждая ячейка массива содержит объект - получается как бы многомерный массив).
Если происходит просто редактирование значений то всё нормально, а если было добавление новой ячейки(opener.document.users.push(), то при закрытии дочернего окна, и повторном его открытии в ИЕ(6) выскакивает ошибка:
"Вызываемая сторона(сервер[а не приложение-сервер]) недоступна и исчезла; ни одно бодключение более не действует. Сам вызов не был выполнен".
Мозилла и Опера не капризничают.

Автор: Илья Кантор, дата: 13 декабря, 2009 - 14:04
Автор: Жорж Борман (не зарегистрирован), дата: 20 декабря, 2009 - 22:26

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

function checkjs() if (window.hs === undefined) alert (window.hs+'Нет такая');
> else alert (window.hs+'Есть такая');

Автор: Жорж Борман (не зарегистрирован), дата: 20 декабря, 2009 - 22:32

Кстати, спасибо за отличный мануал.

Автор: Гость (не зарегистрирован), дата: 2 января, 2010 - 10:45

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

Автор: Questioner, дата: 22 августа, 2011 - 11:13

Переменная, которая существующая только в одной функции

Автор: Gregory May (не зарегистрирован), дата: 5 января, 2010 - 17:21

Это отличный учебник для начинающих изучать JavaScript.
Благодарю автора за работу и надеюсь, что в будущем сайт будет только развиваться.

ВОПРОС:
Объясните "i++" в конструкции for и
"+i+" в функции alert

С уважением, Григорий Май
5/I/2010 г.

Автор: B@rmaley.e>в конструкции for (и не только там) означает увеличение значения переменной i на 1 и полностью эквивалентно

i = i + 1// или i += 1

В alert'е +i+ сам по себе был бы бессмысленным (и даже ошибочным, в отличии от i++), т.к. эти операторы принимают 2 аргумента. А вот

'string' + i + 'more string'

уже имеет смысл. Здесь происходит конкатенация (склеивание) 3 строк (при этом все нестроковые переменные принудительно приводятся к строкам). Т.е. сначала будет выполнено

'string' + i

, а потом к результату присоединено

'more string'

. Это выражение аналогично

('string' + i) + 'more string'

Более подробно советую почитать в разделе операторов JavaScript.

Автор: Гость (не зарегистрирован), дата: 13 декабря, 2011 - 20:03

'i++' не эквивалентно 'i = i + 1' или 'i += 1', им '++i' эквивалентно

Автор: Mol4ok (не зарегистрирован), дата: 6 января, 2010 - 11:52
Автор: igrd (не зарегистрирован), дата: 8 января, 2010 - 02:10

i++ увеличивает переменную i на единицу

+i+ "склеивает" 3 строки:
1) "Из шляпы достали "
2) i (значение переменной, потому без кавычек)
3) " кролика!"

Автор: Gatihno (не зарегистрирован), дата: 30 марта, 2010 - 16:23

+i+ "склеивает" 3 строки
Можно по подробней, пожалуйста?
+i как я понял переводит i из числа в строку, а вот зачем второй +?

Автор: Гость (не зарегистрирован), дата: 31 марта, 2010 - 09:30

Что бы прибавить третью строку " кролика!"

Автор: Гость (не зарегистрирован), дата: 2 декабря, 2010 - 09:12

аааа валяюсь I = 5 это целая пременная
когда пишут Строка+целая переменная т.е "Строка"+I результатом будет "Строка 5"
Так же как "Строка "+"5" т.е. конкатенация двух строк,

Автор: Mefistofel (не зарегистрирован), дата: 5 ноября, 2012 - 01:57

В конструкции for i++ означают увеличение переменной i на единицу.
В конструкции alert +i+ плюсы означают оперцию конкатенации, то есть сложения строк. То есть "текст"+переменная+"текст". То есть чтоб интерпретатор знал, где вставлять текст, а где значение переменной из области памяти.

Автор: R_G (не зарегистрирован), дата: 8 января, 2010 - 23:50

Уважаемый, Илья!
Простите если задам глупый вопрос, но все же!
На сайте есть несколько счетчиков количества посетителей в каждом из которых используются подключаемые файлы javascript. Возможно ли объединение данных файлов в один файл javascript (с целью уменьшения количества обращений к файлам и уменьшения времени загрузки). Если возможно, то как? Если не возможно, пожалуйста объясните, почему?
Спасибо!

Автор: Mol4ok (не зарегистрирован), дата: 10 января, 2010 - 06:43

Спасибо! Теперь понятно что означает +i+

Автор: Regent, дата: 11 января, 2010 - 13:54

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

Автор: Gary_Ch (не зарегистрирован), дата: 13 января, 2010 - 07:23

Наткнулся в сети на еще один способ выполнения js при загрузке документа -- механизм подстановок (entity). Вроде

Я правильно понял, что этот механизм безнадежно устарел и современными браузерами больше не поддерживается?

Автор: Илья Кантор, дата: 13 января, 2010 - 10:24

Этот механизм родился в Netscape давно еще. Он и его аналог в IE (expressions) действительно устарел и не рекомендуется к использованию.

Автор: Гость (не зарегистрирован), дата: 15 января, 2010 - 15:30

У меня вопрос. В начале кода нужно написать эту строку.У меня никак не запускается в браузере- выдает синтаксическую ошибку. Ведь первая строка- Это адрес? Относительно чего его нужно указывать?

Автор: Гость (не зарегистрирован), дата: 15 января, 2010 - 15:31
Автор: hf (не зарегистрирован), дата: 16 января, 2010 - 04:02

очень неудобно, что при выделение текста программы, выделяются номера строк.
возможно ли вынести эти цифры как например тут: http://freshcoder.ru/archives/56
?(не сочтите за рекламу)

Автор: Илья Кантор, дата: 16 января, 2010 - 13:36

Там справа в менюшке появляющейся есть кнопка - нажмите на нее и номера строк исчезнут.

Автор: @Hunter@ (не зарегистрирован), дата: 2 февраля, 2010 - 18:35

не стоит пользоваться копипастом если вы начинающий, пишите все вручную, это поможет быстрее усвоить синтаксис)

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

Автору огромный СПС))

Автор: Tadot (не зарегистрирован), дата: 21 января, 2010 - 23:31

Все скрипты пашут!

Автор: ГостьЯ (не зарегистрирован), дата: 5 февраля, 2010 - 20:36

Удивительно, что в некоторых комментарии совсем элементарные вопросы))) неплохой учебник, молодцы=)

Автор: Гость (не зарегистрирован), дата: 8 февраля, 2010 - 23:36

доброго времени суток.
подскажите, пожалуйста, почему при объявлении функции в пределах body её вызов из head оканчивается неудачей? спасибо.

Автор: Гость (не зарегистрирован), дата: 21 февраля, 2010 - 21:32

Потому что HEAD обрабатывается раньше, чем BODY и про твою функцию в этот момент браузер еще ничего не знает.

Автор: ALEX_CIT (не зарегистрирован), дата: 12 февраля, 2010 - 05:36

Какая последовательность загрузки-исполнения HTML, JS, CSS в браузерах?

Автор: sevdaqasan (не зарегистрирован), дата: 14 февраля, 2010 - 07:05

А как сделать так что бы – если человек зашёл на сайт и потом взял и хочет подключится javascript
Пожалуйста подскажите

Автор: Questioner, дата: 1 января, 2012 - 14:30
Автор: Maxum, дата: 23 февраля, 2010 - 02:43

Спасибо огромное за одну строчку "При указании атрибута src содержимое тега игнорируется"! Так и бы продолжались мучения и вопросы "почему же не работает внешний скрипт. "
Спасибо ещё раз!

Автор: Гость (не зарегистрирован), дата: 23 февраля, 2010 - 14:52

> Объясните "i++" в конструкции for и "+i+" в функции alert
>
> С уважением, Григорий Май>

ne razreshajte takie kommenty..

Автор: vava (не зарегистрирован), дата: 24 февраля, 2010 - 00:40

>ne razreshajte takie kommenty..

зы ресурс отменный, все в одном месте, красата! спасиба.

Автор: Гость (не зарегистрирован), дата: 3 апреля, 2010 - 19:21

Здраствуйте. Я скачал один скрипт для сайта. Закинул его в папку Firefox. Далее судя по рекомендации в контекстном меню надо зайти во вкладку "изменить параметры узла", "сценарии", обзор ну и вставить скрипт. Единственная проблема - в контекстном меню у меня нет параметров узла! Перешерстил все настройки, но так и не нашел. Подскажите пожалуйста, где в Firefox параметры узла, либо как этот скрипт вставить по другому. Спасибо.

Автор: Zhecky (не зарегистрирован), дата: 8 января, 2011 - 23:19

Такая штука в Опере. В мозилле нету. А зря.

Автор: Гость (не зарегистрирован), дата: 6 мая, 2011 - 10:55

В мозилле для подключения пользовательских скриптов есть расширение Greasemonkey.

Автор: Нenry, дата: 19 апреля, 2010 - 17:12

Обьясните кто нибудь как мне при редактировани страници поместить или всунуть. большой скрипт в одну строку-окно. Для економии места и красоты. Пример покажите что вырезать и вставить туда скрипт или чем пользоваться в редакторе.

Автор: Гость (не зарегистрирован), дата: 1 мая, 2010 - 03:20

так никто и не написал как правильно оформитььб скрипт во внешнем файле.

Автор: ЛехаНаМотохе (не зарегистрирован), дата: 6 мая, 2010 - 07:50

все написали, читай камменты

Автор: Pastet (не зарегистрирован), дата: 21 июня, 2010 - 00:50

Если еще для вас вопрос актуален, то у меня получилось вот так
В html страницу вроде такого

А в самом файле скрипта пишем без каких либо тегов и комментариев
Пример:function MM_swapImgRestore() < //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i

Автор: ИльяДум (не зарегистрирован), дата: 24 июня, 2010 - 13:05

Во внешнем скрипте нужно писать чистый javascript, уже не используя тэги , т.е. только то, что идёт между ними (когда скрипт вставлен прямо в тексте HTML-страницы).

Автор: Гость (не зарегистрирован), дата: 17 мая, 2010 - 09:28

я так и не понял как писать на javascript(((омогите обьясните основы

Автор: Гость (не зарегистрирован), дата: 19 мая, 2010 - 22:20

Уважаемый автор.
Не могу найти примеров и описания работы if.
Мне нужно чтоб в интервале дат, например с 1.05. по 3.06 выводился текст а в остальное время нет. Как это лучше сделать.

Автор: bruha (не зарегистрирован), дата: 25 мая, 2010 - 18:17

ошибка:
поэтому даже ЕСЛИ атрибута type нет - все работает ок.

Автор: zenija2007, дата: 27 мая, 2010 - 19:10

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

Автор: simvoliuss (не зарегистрирован), дата: 10 июля, 2010 - 16:54

слушай сюда новичок 😎 я тоже уже конечно не новичок но все же я такой же как и ты. если я тебя правильно понял ты говоришь что в браузере пользователю каждый раз придется нажимать "разрешить" чтоб разрешались использование скриптов да? если так то это можно исправить например:
1 то что ты говоришь происходит не со всеми браузерами а только с иннетЭксплорер или еще каким то браузерами (я не све знаю) но с опера такого нет. а пользователям если они через иннетЭксплорер заходят то надо будет каждый раз подтверждать о разрешении. но если они догадаются в настройках своего браузера поставить галочку "всегда разрешать использование сценариев для данного сайта" то в дальнейшем он может спокойно восхититься твоими сценариями(скриптами в действии). -)
надеюсь что я тебя правильно понял если нет то напиши мне в аську 558-444-560

Автор: kutok (не зарегистрирован), дата: 27 мая, 2010 - 22:53

а вот такое разве не используется?

Автор: Гость (не зарегистрирован), дата: 25 июня, 2010 - 10:53

Вопрос такой.
Можно ли подключить js файл со стороннего сервера?
Например где то допустим на ya.ru крутится скрипт test.php внутри которого подключается

Возможно ли такое? На первый взгляд в целях безопасности, такое должно быть не допустимо, но с другой стороны, ведь я могу свободно скачать любой js скрипт с ресурса javasript.ru.

Автор: Гость (не зарегистрирован), дата: 10 февраля, 2011 - 19:49

точно так же как и с картинками - ты можешь в своём блоге указывать URL картинок из ВКонтакта или других сайтов, не закачивая себе на сервер (некоторые сайты блокируют такое "воровство" и вместо картинки ты увидишь картинку "фото недоступно" с логотипом того сайта или что-то подобное).
java-скрипты можно юзать с других сайтов (есть специальные хранилища например cufon-шрифтов, откуда скрипт загрузится гораздо быстрее, чем с посредственного хостинга). Если ты используешь скрипт нелегально - админы его могут изменить или удалить при реконструкции своего сайта и у тебя всё полетит.
А использовать чужие php, в которых идут обращения к БД тебе вряд ли удастся.

Автор: taurus (не зарегистрирован), дата: 7 июля, 2010 - 11:29

не хватает описания атрибута charset в теге script. я использую линукс, а в нем по умолчанию при создании документа идет кодировка utf8, но когда загружается скрипт видимо что то другое, поэтому надо явно указывать.

Автор: Гость (не зарегистрирован), дата: 10 февраля, 2011 - 19:55

Если не юзать виндовый блокнот, а нормальные редакторы, то кодировка по-умолчанию тоже utf8, проблем не наблюдал.

Даже так - с utf8 питоновские скрипты нормально отображают кирилицу в виндовой консоли (если декодировать). Если кодировка py-файла ANSI и там есть кирилические строки - то такой скрипт даже не запустится.

Автор: Flytok (не зарегистрирован), дата: 12 июля, 2010 - 00:27

Автору огромное спасибо - со второй попытки все получилось!

function count_rabbits() for(var i=1; i <=3; i++) // оператор + соединяет строки
alert("Из шляпы достАААли "+i+" кролика!")
>
>

Именно так должен выглядеть отдельный файл со скриптом! (а разместить его удобно создав через ftp отдельную папку,)

Автор: Jamesdgreeze, дата: 28 июля, 2010 - 20:38

Подскажите плиз. можно ли сделать в яваскрипт, как в CSS несколько файлов стилей в один включить? В CSS это так: @import url("style.css");
вот тоже самое тока несколько файлов яваскриптов в один подключить?

Автор: Walter Meier, дата: 23 августа, 2010 - 23:21

Что означает text/ в script type="text/javascript"?

Автор: PaulG (не зарегистрирован), дата: 24 августа, 2010 - 13:34

атрибут type указывает MIME-тип содержимого контейнера. MIME-типы говорят браузерам как обращаться с конкретными расширениями.

А text говорит о том, что это. текст))

бывают еще и application, video, audio.

Автор: лахматый (не зарегистрирован), дата: 18 октября, 2010 - 17:53

подскажите пожалуйста начинающему. код javascript выполняется между тегами

однако во втором примере вызов функции в теле HTML документа происходит ниже закрытвающего тега javascript. Сделать пример получилось и все работает, спасибо, но хотелось бы узнать, почему это так. спасибо заранее

Автор: Гость (не зарегистрирован), дата: 27 октября, 2010 - 19:49

Внутри . функция только определена, а ниже она используется как уже известная.

Автор: lqc0902, дата: 9 ноября, 2010 - 18:50

как и где подключится Java Script?

Автор: Гость (не зарегистрирован), дата: 16 ноября, 2010 - 15:10

У меня проблема, помогите, что делать незнаю
скачал и установил два срипта, вот так:

Но работает только один (нижний), что делать незнаю, менял местами работает только нижний, извращался как только можно и нелзя неполучается. ПОМОГИТЕ.

Автор: Гость (не зарегистрирован), дата: 25 ноября, 2010 - 07:01

Два файла в одной папке - Lesson1.html и script.js.

[head] [script type="text/javascript" src="https://javascript.ru/forum/script.js"][/script] [/head] [body] [input type="button" onclick="count_rabbits()" value="Считать кролей!"/] [/body]

// конечно вместо [] уменя <>, просто не знаю как здесь заставить отображаться.

Содержимое файла script.js:
---------------------------------------------
function count_rabbits() for(var i=1; i <=3; i++) // оператор + соединяет строки
alert("Из шляпы достАААли "+i+" кролика!")
>
>
---------------------------------------------
При открытии браузером файла Lesson1.html кнопка корректно отображается, но но при клике по ней ничего не происходит.
ВОПРОС - почему не выполняется скрипт, где ошибка?

Автор: B@rmaley.e>Смотрите, что говорит консоль ошибок.

Автор: Гость (не зарегистрирован), дата: 25 ноября, 2010 - 11:09

Ошибка: count_rabbits is not defined
Источник: file:///C:/Users/123/Desktop/%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F%20%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0%20(2)/%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F%20%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0/Lesson1.html
Строка: 1
Вот здесь я уже ничего не понимаю, могу предположить что имя функции не верно записано, так нет же, все правильно. Что еще.

Автор: Lukreziy (не зарегистрирован), дата: 11 февраля, 2011 - 13:42

Поскольку оба файла в одной папке, то должно быть так: src="https://javascript.ru/tutorial/foundation/script.js"

Автор: Lukreziy (не зарегистрирован), дата: 11 февраля, 2011 - 13:46

Сорри, форум вставляет лишнюю папку в путь (/forum/). Поэтому напишу кириллицей: должно быть так: срц="скрипт.js" (без папки /forum/).

Автор: [ANTI]CheateR, дата: 25 ноября, 2010 - 11:21

проверьте, подключается ли у вас файл script.js.

Автор: [ANTI]CheateR, дата: 25 ноября, 2010 - 11:22

функция ваше не определена. проверьте, подключается ли у вас файл script.js.

Автор: Гость (не зарегистрирован), дата: 25 ноября, 2010 - 11:24

Вы уж простите, но как это сделать?

Автор: [ANTI]CheateR, дата: 25 ноября, 2010 - 11:28

если браузер хром или файрфокс, то щелчок правой кнопкой - просмотр исходного кода.

там пути отображаются как ссылки, щелкаете по ссылке с вашим js, если открывается, то ищем причины дальше, нет - так прописываем верный путь до js

Автор: Гость (не зарегистрирован), дата: 25 ноября, 2010 - 11:38

Сделал все выше сказанное. Адрес тот, что я указал в коде файла "Lesson1" - /forum/script.js. Кликая по нему при просмотре исходного кода ничего не открывается. Следовательно неверный путь. Но файлы в одной папке и адрес прописан точно как здесь объяснили.

Автор: Гость (не зарегистрирован), дата: 25 ноября, 2010 - 11:53

Спасибо, проблема решена.
Стоило лишь верно прописать путь. В моем случае это было:
src="https://javascript.ru/script.js". Так писать не верно, нужно без /. Вот так - src="https://javascript.ru/tutorial/foundation/script.js".

Я так и не понял откуда у Вас взялся вот этот вид src="https://javascript.ru/forum/script.js", что за /forum? Может это конечно и правильная запись с точки зрения чего-то там, но новичка это только заставляет поломать мозг пару часов.

Автор: Гость (не зарегистрирован), дата: 25 ноября, 2010 - 11:58

Ух ты. Парни что-то здесь ни так в коде отображения постов. В сообщении выше, в третьей строке последнее предложение, вот этого /forum быть не должно. Подставляется автоматом, это и заставило меня пол ночи не спать

Автор: turanchoks (не зарегистрирован), дата: 27 ноября, 2010 - 14:55

в комментарии к первому примеру написано:

"Объявление var i
Объявление переменной внутри цикла: i - локальная переменная."

а в справочнике где цикл for про ту же переменную:

"initial-expression
Выражение (включая присваивание) или объявление переменной. Как правило, используется для инициализации переменной-счетчика. Это условие может объявлять новую переменную при помощи var. Такая переменная не является локальной переменной цикла, она видна во всей области видимости."

так локальная она или глобальная в JS? спасибо.

Автор: turanchoks (не зарегистрирован), дата: 27 ноября, 2010 - 15:04

. или здесь надо говорить не "глобальный", а "видимый за пределами блока". Хотя и это не вариант, если в JS видимость задается функцией, а не блоком.

Автор: B@rmaley.e>Да, как Вы верно заметили, область видимости в JS задается только функцией. Это значит, что переменная, объявленная в for(var . ) будет локальной для текущей области видимости. Т.е. будет доступна всюду внутри функции или, если мы вне функции (т.е. в глобальной области), то переменная соответственно станет глобальной.
В отличие от, например, Си, где область видимости задается блоком и переменная, объявленная в for(. ) будет видна только внутри тела цикла.

Автор: Вопрошатель (не зарегистрирован), дата: 30 ноября, 2010 - 13:41

Могут ли функции объявденные во внешнем файле работать с глобальными переменными?
То есть у меня в HTML-страницу встроены скрипты.При переносе их во внешний файл и подключении функции не работают.Попросту не видят глобальных переменных,объявленных во встроенных скриптах на html-страницах.
Есть ли выход?Может тогда весь javascript засунуть(вместе с объявление глобальных переменных)?Это будет очень неудобно.

Автор: Гость (не зарегистрирован), дата: 4 декабря, 2010 - 18:32

От души посмеялся над выражением "Браузер, от которого прятали код (старый Netscape), давно умер." )

Автор: uzumaxy (не зарегистрирован), дата: 26 декабря, 2010 - 12:10

Netscape слабо поддерживал javascript, css и даже css. Разработчики больше внимания уделяли различным дополнениям к браузеру и его функционалу, чем совместимости.
Из-за этого в 1998 году они перестали прятать код(этим самым сделав проект бесплатным) в надежде, что им помогут улучшить совместимость. Но этого не произошло.
Позже AOL(компания разработчиков) забросила проект "Netscape" и занялась разработкой браузера "Firefox".

Если бы AOL не прятали код сразу, то скорее всего собрали бы большую группу энтузиастов и проблема совместимости решилась.

Как видим ты от души посмеялся только над своим незнанием.

Автор: uzumaxy (не зарегистрирован), дата: 26 декабря, 2010 - 12:12

Netscape слабо поддерживал javascript, css и даже html. *

Автор: uzumaxy (не зарегистрирован), дата: 26 декабря, 2010 - 11:54

Спасибо за отличный учебник!

Автор: AdeL1ne (не зарегистрирован), дата: 27 декабря, 2010 - 08:25

Подскажите как сделать так, что бы при нажатии на ссылку запускался следующий скрипт:

var newWin = window.open('test.php','JSSite', 'width=600,height=500,resizable=yes,scrollbars=no,status=yes,toolbar=no')
newWin.focus()

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

Автор: Гость (не зарегистрирован), дата: 13 января, 2011 - 11:27

код с window.open. и т.д. засунуть в функцию, скажем, openNewWin()
В ссыдке прописать: Нажми сюда Но такой способ не рекомендуется. Или вот так Нажми сюда

Автор: Гость (не зарегистрирован), дата: 19 января, 2011 - 12:45

Прошу помочь. Уже третий день не могу решить проблему. Мне нужно вставить в javascript еще один javascript. Подскажите, каким образом это возможно сделать?

Автор: Kapillar, дата: 4 февраля, 2011 - 17:14

Подсчет кролей выдает такую ошибку
missing ; before statement
[Прерывать на этой ошибке] 05 function count_rabbits()
что тут не так не пойму.
+ ко всему свежие комментарии аж в самом низу, кто их прочитает, тем более ответит на них.
спс

Автор: Lukreziy (не зарегистрирован), дата: 11 февраля, 2011 - 16:13

Цифры 05, 04, 03 и т.д. убери.

Автор: JanyJoinnyDiz (не зарегистрирован), дата: 5 февраля, 2011 - 22:04

перечитал весь блог, довольно неплохо

Автор: Kapillar, дата: 6 февраля, 2011 - 19:43

с предыдущей проблемкой сам разобрался)) но хочу оставить пожелание, ввиду того что никто не отвечал на вопрос) 2 дня, новые посты отображать вверху, а не внизу, и(или) набрать пару модеров пусть отвечают.
Считаю, что такой способ управления поможет большему количеству новичков, таким как я.

Автор: Нимя, дата: 8 февраля, 2011 - 04:56

А как подсчитать в обратном количестве? Например:
1) из шляпы достали 6 кроликов
2) из шляпы достали 5 кроликов
.
n) из шляпы достали n кроликов

Автор: Гость (не зарегистрирован), дата: 9 февраля, 2011 - 17:17
for (var i=3; i>=1; i--)
Автор: Нимя, дата: 9 февраля, 2011 - 17:47

)))))
всё оказалась так просто!
но всеравно спс.

Автор: museyca (не зарегистрирован), дата: 6 марта, 2011 - 23:21

Подскажите уважаемые, Здесь - [!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"] - скрипт работает,
а тута - [!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"] - не хотит.
Скрипт нужный, но не менять же все остальное.

Автор: ihar, дата: 15 марта, 2011 - 15:46

Подскажите а что значит подключение типа

имеется ввиду после

стоит знак вопроса и потом перечисляются какие то значения (

"effects,builder"

Автор: Гость (не зарегистрирован), дата: 17 апреля, 2011 - 00:57

Первый пример - понятно - скрипт пишется в разделе BODY и запускается сам
Второй пример - скрипт вынесли в раздел HEAD 'для отделения от документа' и оформили как функцию. Но! при этом он перестал запускаться сам и для его запуска надо использовать кнопку.
Третий пример с внешним скриптом тоже для запуска использует кнопку.

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

Автор: armix (не зарегистрирован), дата: 19 апреля, 2011 - 12:26

Добрый день! Вставляю скрипт в тэг

. Не работает.
Вот такой текст:

JavaScript not available!

Если поставить сразу после body, то всё O'K

Автор: PageRanker (не зарегистрирован), дата: 3 мая, 2011 - 10:18

Вот! Вот же оно! Именно такую подачу материала я и искал.
Начинаю изучать Яву с Вами))
Спасибо.

Автор: ulit (не зарегистрирован), дата: 4 мая, 2011 - 14:02

А как сделать всплывающее древовидное меню?

Автор: прохожий (не зарегистрирован), дата: 10 мая, 2011 - 21:03

У меня проблема с подключением скрипта.
вот как он подключался в модуле
$document->addScript(JURI::base(true).'my.js');
комментировал строку
-----
вот как я его в шаблон вынес

но он не пашет.
Как его подрубить?

Автор: прохожий (не зарегистрирован), дата: 10 мая, 2011 - 21:06

вот как я его в шаблон вынес

Автор: Mazzyy (не зарегистрирован), дата: 16 мая, 2011 - 12:46

Все прекрасно работает, когда .js лежит в одной папке с .html путь надо указать без "/" т.е.
Вот так. Спасибо авторам.

Автор: saida (не зарегистрирован), дата: 11 июня, 2011 - 07:55

Определите значение переменной с после выполнения следующего фрагмента программы. A=6 b=15 a=b-a*2 if a>b then c=a+b c=b-a end if.

Автор: Гость (не зарегистрирован), дата: 11 июня, 2011 - 20:53

а уменя файлы js не открываются когда аткраваю ошубку выдает Windows Script Host что делать подскажити плиз

Автор: Гость (не зарегистрирован), дата: 15 июня, 2011 - 19:13

иди ты на хуй, сука пидарас!

Автор: Андрей38, дата: 17 июня, 2011 - 20:55

Пожайлуста,подскажите как на ЧИСТОМ JS подключать ФАЙЛЫ скриптов или стилей в зависимости от браузера.Браузеров-3 шттуки-ФФ, Опера и Инт Експлорер. Такое - сделанное на Квери, тормозит почему то все скрипты.
На чистом JS у меня почему-то работало не корректно. Помогите кто может ,уважаемые гуру !Я видел,что там фигурирует document.write('');

Автор: Гость (не зарегистрирован), дата: 19 июля, 2011 - 13:06

и так подключаешь скриптов сколько тебе нужно, или объясни подробнее что нужно сделать

Автор: Гость (не зарегистрирован), дата: 19 июля, 2011 - 13:12

Вот кусочек скрипта для определения браузера, как я понял многие ищут тут.

if (navigator.userAgent.indexOf (”Opera”) != -1) var isOpera =1; else if (navigator.userAgent.indexOf (”Firebird”) != -1) var isFb =1; else if (navigator.userAgent.indexOf (”K-Meleon”) != -1) var isKm =1; else if (navigator.userAgent.indexOf (”Phoenix”) != -1) var ispx =1; else if (navigator.userAgent.indexOf (”Safari”) != -1) var isSf =1; else if (navigator.userAgent.indexOf (”Lotus-Notes”) != -1) var isLn =1; else if (navigator.userAgent.indexOf (”Lynx”) != -1) var isLx =1; else if (navigator.userAgent.indexOf (”Crazy”) != -1) var isCb =1; else if (navigator.userAgent.indexOf (”Galeon”) != -1) var isGl =1; else if (navigator.userAgent.indexOf (”Flock”) != -1) var isFlock =1; else if (navigator.userAgent.indexOf (”MSIE”) != -1) var isIE =1; else if (navigator.userAgent.indexOf (”Navigator”) != -1) var isNets =1; else if (navigator.userAgent.indexOf (”Firefox”) != -1) var isMoz =1; else if (navigator.userAgent.indexOf (”Konqueror”) != -1) var isKonq =1; if (isFb) document.write (”Ваш браузер: Mozilla Firebird“); if (isKm) document.write (”Ваш браузер: K-Meleon“); if (ispx) document.write (”Ваш браузер: Mozilla Phoenix“); if (isSf) document.write (”Ваш браузер: Safari“); if (isLn) document.write (”Ваш браузер: Lotus-Notes“); if (isLx) document.write (”Ваш браузер: Lynx“); if (isCb) document.write (”Ваш браузер: Crazy Browser“); if (isGl) document.write (”Ваш браузер: Galeon“); if (isOpera) document.write (”Ваш браузер: Opera“); if (isIE) document.write (”Ваш браузер: Internet Explorer“); if (isNets) document.write (”Ваш браузер: Netscape Navigator“); if (isMoz) document.write (”Ваш браузер: Mozilla Firefox“); if (isFlock) document.write (”Ваш браузер: Flock“); if (isKonq) document.write (”Ваш браузер: Konqueror“); // Определяем операционную систему if (navigator.userAgent.indexOf (”Windows”) != -1) var isWindowsxp =1; if (navigator.userAgent.indexOf (”Linux”)!= -1) var isLinux =1; if (navigator.userAgent.indexOf (”Mac”)!= -1) var isMac =1; if (navigator.userAgent.indexOf (”SunOS”)!= -1) var isSun =1; if (navigator.userAgent.indexOf (”FreeBSD”)!= -1) var isBsd =1; ОС: if (isWindowsxp) document.write (”Ваша ОC: Windows“); if (isMac) document.write (”Ваша ОС: Macintosh, Mac OS/X“); if (isSun) document.write (”Ваша ОС: Sun Solaris“); if (isBsd) document.write (”Ваша ОС: FreeBSD“); if (isLinux) document.write (”Ваша ОС: Linux“);

Автор: madrabbyt, дата: 19 марта, 2012 - 14:35

function BrowserAndOSAnswer() < // перечисляем браузеры var browsers = new Array ('Undefined', 'Chrome', 'Opera', 'Firebird', 'K-Meleon', 'Phoenix', 'Safari', 'Lotus-Notes', 'Lynx', 'Crazy', 'Galeon', 'Flock', 'MSIE', 'Navigator', 'Firefox', 'Konqueror'); var theBrowser = ''; // сюда сложим найденные браузеры for (var i=1; i < browsers.length; i++) < // перебираем браузеры из navigator.userAgent // складываем найденное в theBrowser if (navigator.userAgent.indexOf (browsers[i]) != -1) < // если theBrowser не пусто, перед добавленным названием добавим запятую, чтобы было красиво theBrowser += (theBrowser != "" ? ", " : "") + browsers[i]; >> // в случае неудачного поиска вернем 'Undefined' if (theBrowser == '') < theBrowser = browsers[0]; >// перечисляем известные ОС var operSys = new Array('Undefined', 'Windows', 'Linux', 'Mac', 'SunOS', 'FreeBSD'); // в случае неудачного поиска вернется 'Undefined' var theOS = operSys[0]; for (var i=1; i < operSys.length; i++) < // проверим присутствие названий известных ОС в userAgent if (navigator.userAgent.indexOf (operSys[i]) != -1) < theOS = operSys[i]; // ОС только одна определится >> // возвращаем найденное в виде строки return "ВАШ БРАУЗЕР: " + theBrowser + "\n 
ВАША ОПЕРАЦИОНКА: " + theOS; > . // пример использования document.write (BrowserAndOSAnswer ());

Конечно, тут можно применить тернарный оператор ( * ? * : * ) вместо if и внести их в описание циклов for для сокращения места, но для новичков так нагляднее.

Автор: Alex`S (не зарегистрирован), дата: 27 июля, 2011 - 07:03

Задам вопрос.. вдруг ответит кто-нить..
Нужно выполнить скрипт задисейбливания текстовых полей при загрузке страницы, если соответствующий checkbox=checked. Каждое поле и checkbox имеют уникальный ID. При выполнении клика по checkbox функция работает. Как выполнить эту функцию много раз при загрузке страницы. Куда поместить и как правильно написать вызов этой функции?
к примеру, в HTML:

.
.

в данном случае onClkick() прекрасно срабатывает.

Автор: Mavio Candiz (не зарегистрирован), дата: 30 июля, 2011 - 14:28

Я на моём сайте в Народ.ру (он создаётся с помощью конструктора сайтов) хочу сделать такую же эффективную поисковую систему, как у Википедии, поскольку мой сайт тоже носит энциклопедический характер. Но я не любитель таких сложных кодов и такого сложного устройства страниц, как в Википедии. Мне нужно так:
я пишу в поиске слово - название статьи (оно же и предмет статьи) и после нажатия кнопки "Поиск" (в моём сайте: "Búsqueda") открывается страница моего сайта с этой статьёй. Но мне бы код попроще, чем в Википедии. Я смотрел тот исходный код - слишком сложный. Существует ли более элементарный код, пусть с javascriptом, который мог бы обеспечить моему сайту такую возможность. Обычный блок "Поиск" конструктора сайтов ничего не даёт вообще. Не находит даже то, что на моём сайте явно есть, хотя названия страниц, их описания и ключевые слова я указываю в свойствах страницы при редактировании и добавлении новых.
Спасибо!

Автор: Questioner, дата: 22 августа, 2011 - 11:21

Как подключить 1 скрипт из другого? Напр. 3Dlib.js используется в 3DGlassesLib.js?
Заранее благодарен.

Автор: Тельман (не зарегистрирован), дата: 25 августа, 2011 - 12:53

Проблема с кодировкой.

Когда выношу скрипт в заголовок или пишу его внутри тела, русские символы читаются без проблем.

Ежели вывожу скрипт в отдельный файл с расширением .js то выходят иероглифы.

Кодировки utf-8 и 1251 не помогла.

Автор: Гость (не зарегистрирован), дата: 5 сентября, 2011 - 17:15

скажите а как сделать так чтобы js(в нем есть свой код) обрабатывалось по нажатию на картинку

Автор: Гость (не зарегистрирован), дата: 7 сентября, 2011 - 09:21

Есть файл.js
Как подключить .js в HTML?
Можно пример HTML документа?

Автор: armix (не зарегистрирован), дата: 6 октября, 2011 - 11:44

Добрый день.
У меня следующая проблема:
Страницу создаю динамически. По windo.open.
Все файлы js подгружаю в head.
После тэга пишу скрипт:

На $(document).ready получаю сообщение: "Предполагается наличие объекта".
Аналогичное сообщение получаю на вызов любой функции из подгруженных
файлов.
Такое ощущение, что все файловые скрипты не видны.
После отрисовки окна всё работает нормально.
Не подскажете в чём проблема, и как с ней бороться?
После скрипт писать? (Это я, понятно, шучу).

Автор: armix (не зарегистрирован), дата: 6 октября, 2011 - 12:05

Вдогонку.
Во-первых: виноват. Пропущены и в пятой и последней строках, соответственно.
Во-вторых: этот эфект наблюдается только у IE. Все остальные браузеры срабатывают нормально. А вот как с "осликом" быть?

Автор: Гость (не зарегистрирован), дата: 6 октября, 2011 - 14:52

Доброго дня.
Пытаюсь разобраться, куда же лучше помещать скрипты. Считается ли правилом хорошего тона, например, все скрипты размещать в HEAD, по возможности не хранить ничего в BODY и использовать методы типа "onContentReady" вместо того, чтобы вставлять скрипт после нужной ему html-разметки?
Если часть скриптов в HEAD, а часть в BODY, начинаешь в определенный момент путаться от того, что все смешано.

Автор: Gruberoid (не зарегистрирован), дата: 24 октября, 2011 - 17:14

День добрый.
Возник вопрос, как подключить javascript через js файл.
Вот собственно сам код

 if (confirm("Для того, чтобы попасть на искомую страницу, Вы должны подтвердить свое совершеннолетие. Если вам есть 18 лет или больше, нажмите ОК, если нет, нажмите ОТМЕНА.")) < parent.location='18.html'; >else

прописывал в теле

если вставить в тело скрипт, то работает, а инклуд файла не чего не дает, подскажите что я делаю не так?

Автор: grafdis4_01, дата: 27 октября, 2011 - 18:42

Здравствуйте, я начинающий веб программист, и делаю свой первый заказ, и у меня возникла небольшая ошибка: я засунул в боди , понаписал там всего, и запустил, но Этот код не выпонился, даже алерт не выполняется. Решил попробовать засунуть код в хеад - выполнился, но не весь, потому что я с getElement работал.Я подумал что браузер почему-то не видит его, заглянул в исходный код - все в порядке. Решил в другом файле похожий код в боди выполнить - выполнился. Именно в этом файле в боди не выполняется. Не понимаю почему, помогите.

Автор: grafdis4_01, дата: 27 октября, 2011 - 18:44

"я засунул [script] в боди"
"Именно в этом файле [script] в боди не выполняется"
вместо [] : <>

Автор: grafdis4_01, дата: 27 октября, 2011 - 18:53

 var table = document.getElementById("table"); alert("go"); if(==0) for(i=0; i; i++)< eval('table.getElementById("img'+i+'").style.width = ;'); eval('table.getElementById("img'+i+'").style.height = ;'); > alert(document.getElementById("img1").style.width); alert("yo"); for(k=0; k; k++)

вот собственно сам код, первый алерт все-таки выполняется,но дальше пусто

Автор: grafdis4_01, дата: 27 октября, 2011 - 18:54

И еще - что такое песочница?

Автор: grafdis4_01, дата: 27 октября, 2011 - 18:56

Прошу прощения обнаружил ошибку, но вопрос не решен.)
Что за?
Uncaught TypeError: Object # has no method 'getElementById'

Автор: grafdis4_01, дата: 27 октября, 2011 - 19:02
Автор: grafdis4_01, дата: 27 октября, 2011 - 19:05

Uncaught TypeError: Object # has no method 'getElementById'

Автор: madrabbyt, дата: 19 марта, 2012 - 14:16

Возможно автор уже решил свой вопрос. Но вот пояснения к его ошибке:

Невероятно, но в стр.2 ищется некий тег, с атрибутом id="table". Это крайне нежелательно, т.к. можно запутаться тегами table> и что-то >.

Во вторых метод getElementById() в "чистом" JavaScript определен только для объектов document и body. Для других объектов, по крайней мере для table, такого метода нет, хотя можно самостоятельно определить.

Автор: Гость (не зарегистрирован), дата: 8 ноября, 2011 - 05:17

Написал скрипт в отдельном файле mymenu.js для обработки вертикального раскрывающегося меню. В html-файле подключил скрипт: . На локальном компьютере через браузер проверяю - все работает: меню сворачивается, разворачивается. Выгружаю в Интернет - не работает. Такое ощущение, что скрипты не подключаются. Не пойму, почему. Помогите, пожалуйста!

Автор: фыр (не зарегистрирован), дата: 16 ноября, 2011 - 10:03

Подскажите, а можно ли из одного файла *.js вызвать другой файл *.js?

Автор: Андрей38, дата: 18 ноября, 2011 - 01:23

. Я прохожу циклом по всей таблице вставляя в каждую строку по 3 штуки одинаковых парент-дивов с множеством рисунков в каждом.
Скажите пожайлуста, отразиться ли такое насыщение ДОМ, на скорости исполнения скрипта применительно к такому контенту и скриптов ,которые не относятся к таблице
На 2 строках таблици такое пока работает нормально..

Автор: антон222 (не зарегистрирован), дата: 18 ноября, 2011 - 23:55

Застрял на таком вопросе, перерыл все учебники и интернет.
1) Как в локальной функции изменить глобальную переменную? Пожалуйста с подробным примером. Я чайник.

2) как вывести в блоке div в тексте значение текстовой переменной.
пример:

(нормально выводит переменную суммы - число) (а рядом надо вписать переменную валюты "рубли"или доллары или гривны или евро) /div> какова команда и синтаксис.

//Очень прошу ответить.

Автор: Гость (не зарегистрирован), дата: 17 декабря, 2011 - 17:42

у меня SciTE ругается на скрипты:
unexpected symbol near ' что делать?

Автор: uster (не зарегистрирован), дата: 20 декабря, 2011 - 18:17

Спасибо, оказывается так просто привязать внешний скрипт.

Автор: Гость (не зарегистрирован), дата: 18 января, 2012 - 09:38

Можно ли создать библтотеку скриптов ?

Автор: Калыс (не зарегистрирован), дата: 29 февраля, 2012 - 09:30

Здраствуйте люди, у меня проблемы такого. Я написал в html страницу такого пути и создан файл "/js/script1.js" этот скрипт работает только IE но другие браузеров не работает. Как решаем проблему?

Автор: Гость (не зарегистрирован), дата: 3 марта, 2012 - 19:54

Здравствуйте. У меня такой вопрос.
имеется html код
----

----
команда файла script1.js
function count_rabbits() for(var i=1; i <=3; i++) // оператор + соединяет строки
alert("Из шляпы достали "+i+" кролика!")
>
>

команда файла script2.js
function count_rabbits() for(var i=2; i <=4; i++) // оператор + соединяет строки
alert("Из шляпы достали "+i+" человека!")
>
>

При нажатии обоих кнопок работает команда только второго файла script2.js
Почему команда файла script1.js на первой кнопке неработает?
не могу понять что не так с html кодом??

Автор: madrabbyt, дата: 19 марта, 2012 - 12:38

По-видимому работает count_rabbits() определенный последним.

Автор: madrabbyt, дата: 19 марта, 2012 - 14:03

Возможно ли динамически подключить .js?
Допустим в директории /js-dinamic лежат некоторое количество (3-5) скриптов JavaScript. Но статично подключен некий один внешний скрипт из /js, который будет выполнять какие-то действия по их подключению.
Можно ли в нем подключить скрипты из /js-dinamic не указывая их в тексте HTML, а только средствами JavaScript?

Или из веб-консоли, например, в Chrome можно ли выполнить команду, подключающую внешний js, после чего можно использовать объекты подключенного скрипта?

Автор: slava37md2 (не зарегистрирован), дата: 29 мая, 2012 - 17:24

У меня когда функция count_rabbits() находится в html файле всё работает нормально, а когда в файле .js, то вместо текста "Из шляпы достали "+i+" кролика!", в функции alert выводятся квадратики.

Автор: Rantiev (не зарегистрирован), дата: 8 июня, 2012 - 19:35

Привет,
Вот вернулся к началу.

Как грузятся JS скрипты браузерами? По очереди или все сразу. Если к примеру подключается в одном месте сразу 4 скрипта.

Я так понимаю браузер видит загружает содержимое, испольняет его, а потом переходит к загрузке другого скрипта и исполнению его кода.

Мне кажется FF грузит одновременно скрипты, когда я смотрю в FireBug.

По выполнению кода, в JS я так понимаю не могут 2 функции выполняться одновременно. Это так? В новой версии ecma это так?

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

А также по кроссбраузерному динамическому подключению скриптов.

Автор: Rantiev (не зарегистрирован), дата: 8 июня, 2012 - 19:37

Навигация по страницам с комментами не работает.

Автор: Mic (не зарегистрирован), дата: 15 июня, 2012 - 22:15

Скажите как один файл .js подключить только один раз? Например, текущий файл подключает file1.js и file2.js, а file2.js в свою очередь подключает file1.js. Как не подключить file1.js второй раз?

Автор: Гость (не зарегистрирован), дата: 25 июня, 2012 - 22:07

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

Например я знаю, что если скрипт в самой странице, то можно так:

$(document).ready(function() Скрипт, выполнение которого начнётся после загрузки страницы. Как сюда подключить скрипт из файла, например по адресу /js/script.js
>)

Автор: Зиад (не зарегистрирован), дата: 18 августа, 2012 - 22:26

иди - ка ты нахуй со своим "новым" оформлением!

Автор: Гость для Ihar (не зарегистрирован), дата: 8 ноября, 2012 - 13:28

Подключение типа
src="https://javascript.ru/tutorial/foundation/js/scriptaculous.js?load=effects,builder"
может значить, что текст файла "scriptaculous.js" формируется на сервере php-скриптом. (серверные скрипты, изучение php - это отдельная, большая тема).
То, что указано после "?" является параметрами для серверного скрипта.
Очевидно, что в зависимости от этих параметров текст подгружаемого js-скрипта может кардинально различаться.

Автор: Гость (не зарегистрирован), дата: 15 января, 2013 - 06:12

Люди умные посоветуйте! Как же динамически загрузить js файлов? Скажем мы с перво загрузили 1.js(как обычно). И мне надо загрузить 2.js после нажатию на кнопку(button). То есть чтобы с самого начало не загружался 2.js.

Автор: IZIC (не зарегистрирован), дата: 15 января, 2013 - 13:31

Здравствуйте!
Я - новичок, не судите строго.

Делаю страницу "Расписание уроков с 1 по 11 классы".
Сделал:
Выберите, пожалуйста, класс

Класс
1 А
1 Б
1 В .
.
11 В

Не домучил еще "document.getElementById("id_")".
Подскажите, пожалуйста, код вывода результата на этой же странице.
Спасибо заранее!

Автор: Андрей Айдар (не зарегистрирован), дата: 19 февраля, 2013 - 01:04

А кто знает как можно подключить например 10 файлов с расширением js одной строкой чтобы не прописывать 10 строк.
Реально возможно такое?

Автор: skpupt, дата: 29 мая, 2013 - 21:35

Насколько понял из некоторых записей, что прописанный javascript не всегда может отображать работу на локальном, это как на Денвере имеется ввиду. Но в основном при установке многих разнообразных скриптов с javascript ведь на Денвере все работает или что то не так понял о данном написании.

Автор: Кто - то. (не зарегистрирован), дата: 15 сентября, 2013 - 00:51

Подскажите п-та как получить доступ к текстовому узлу подвешенному к узлу образованому тегом SCRIPT (узлу содержащему сам код) если сей скрипт нахадится вне страници ибо подключен по ссылке? Конструкция:

var scripts = document.getElementsByTagName('SCRIPT'); for(var node in scripts)

возвращает null на таких узлах.

Автор: FANTOM22A, дата: 30 мая, 2014 - 11:25

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

Автор: Гость (не зарегистрирован), дата: 5 июля, 2014 - 14:32

Всем привет!Подскажите пожалуйста почему у меня не получается?
Вот javascrip код и html:
window.onload = function()

function initDate() var now= newDate();
var dateString= (now.getDate()>9? now.getDate():'0'+now.getDate())+
'.'+
((now.getMonth()+1)>9? now.getMonth():'0'+now.getDate())+
'.'+
now.getFullYear();

var now= newDate();

var timeString= (now.getOurs()>9?now.getOurs():'0'+ now.getOurs())+

Автор: 3dHelg (не зарегистрирован), дата: 29 октября, 2014 - 22:48

Здравствуйте уважаемая администрация сайта и посетители сайта. ЯЫ пришёл за помощью, так как у меня не получается подключить js-файл.

Сразу объясню, тот метод, который у Вас здесь описан он работает во всех браузерах, но к большому моему сожалению, я делаю html-страницу для заложенного браузера в платформу 1С Предприятие 8.2, а он как на зло, не хочет воспринимать код, типа: . Поковыряв немного маны в инете нашёл такую конструкцию: , которая идеально работает. Но как видно из второго примера, мне приходится использовать прямые пути и у меня никак не получается их сделать относительными. Пробовал разные варианты конструкции Может кто сталкивался с подобным, поделитесь, если не трудно.

Автор: BRIGSS, дата: 4 марта, 2015 - 15:38

как подключить скрипт к хтмл странице, с помощью подключённого скрипта? т.е. вывести в head теги script и адрес другого файла?

Автор: Гость (не зарегистрирован), дата: 21 апреля, 2016 - 14:54

ajax функция в теле функции на внешнем файле JS - не работает. Что нужно делать?

Автор: nemezida.su (не зарегистрирован), дата: 18 августа, 2016 - 12:37

а как вызвать скрипт с параметрами?

Автор: Гость (не зарегистрирован), дата: 8 ноября, 2016 - 14:26

У меня не работает строка:

alert(obj.getElementsByTagName("img")[1].style.width);

Не подскажете в чем причина?

Автор: Гость (не зарегистрирован), дата: 19 ноября, 2016 - 13:55

А как узнать адрес JS фаила
Потому что вот у меня адресс JS C:\Users\Я\Desktop\js\1.js
код

HTML фаил запускаю а библиотека не подключается хотя адресс совпадает или я что то непонил
Ребят помогите кому нетрудно в чем ошибка? что я непонял?

Автор: Гость (не зарегистрирован), дата: 22 ноября, 2016 - 20:20

Добавьте js файл в одну папку с html документом, в котором он должен выполняться. Тогда в атрибуте src можно будет просто написать адрес script.js или js/script.js, для удобства.

Автор: Рахман (не зарегистрирован), дата: 25 апреля, 2017 - 00:06

Извените я только учусь js, и у меня есть вопрос. JavaScript'ы можно использовать как классы ? Я к тому что, определённый скрипт можно добавить в определённое место? Т.е например как у CSS

, такое вообще делается ?!
Автор: Гость (не зарегистрирован), дата: 22 июня, 2017 - 09:59

for (var i = 5 ; i alert('У машины отвалилось '+i+' деталей!')
>

Автор: Гость (не зарегистрирован), дата: 10 декабря, 2017 - 19:53

function Vector(x, y) this.x = x;
this.y = y;
>
Vector.prototype.plus = function(other) return new Vector(this.x + other.x, this.y + other.y);
>;

var grid = [["top left", "top middle", "top right"],
["bottom left", "bottom middle", "bottom right"]];
console.log(grid[1][2]);
// → bottom right

var grid = ["top left", "top middle", "top right",
"bottom left", "bottom middle", "bottom right"];
console.log(grid[2 + (1 * 3)]);
// → bottom right

function Grid(width, height) this.space = new Array(width * height);
this.width = width;
this.height = height;
>
Grid.prototype.isInside = function(vector) return vector.x >= 0 && vector.x < this.width &&
vector.y >= 0 && vector.y < this.height;
>;
Grid.prototype.get = function(vector) return this.space[vector.x + this.width * vector.y];
>;
Grid.prototype.set = function(vector, value) this.space[vector.x + this.width * vector.y] = value;
>;

var grid = new Grid(5, 5);
console.log(grid.get(new Vector(1, 1)));
// → undefined
grid.set(new Vector(1, 1), "X");
console.log(grid.get(new Vector(1, 1)));
// → X

var directions = "n": new Vector( 0, -1),
"ne": new Vector( 1, -1),
"e": new Vector( 1, 0),
"se": new Vector( 1, 1),
"s": new Vector( 0, 1),
"sw": new Vector(-1, 1),
"w": new Vector(-1, 0),
"nw": new Vector(-1, -1)
>;

function randomElement(array) return array[Math.floor(Math.random() * array.length)];
>

function BouncingCritter() this.direction = randomElement(Object.keys(directions));
>;

BouncingCritter.prototype.act = function(view) if (view.look(this.direction) != " ")
this.direction = view.find(" ") || "s";
return ;
>;

function elementFromChar(legend, ch) if (ch == " ")
return null;
var element = new legend[ch]();
element.originChar = ch;
return element;
>

function World(map, legend) var grid = new Grid(map[0].length, map.length);
this.grid = grid;
this.legend = legend;

map.forEach(function(line, y) for (var x = 0; x < line.length; x++)
grid.set(new Vector(x, y),
elementFromChar(legend, line[x]));
>);
>

function charFromElement(element) if (element == null)
return " ";
else
return element.originChar;
>

World.prototype.toString = function() var output = "";
for (var y = 0; y < this.grid.height; y++) for (var x = 0; x < this.grid.width; x++) var element = this.grid.get(new Vector(x, y));
output += charFromElement(element);
>
output += "\n";
>
return output;
>;

var test = prop: 10,
addPropTo: function(array) return array.map(function(elt) return this.prop + elt;
>.bind(this));
>
>;
console.log(test.addPropTo([5]));
// → [15]

var test = prop: 10,
addPropTo: function(array) return array.map(function(elt) return this.prop + elt;
>, this); // ← без bind
>
>;
console.log(test.addPropTo([5]));
// → [15]

Grid.prototype.forEach = function(f, context) for (var y = 0; y < this.height; y++) for (var x = 0; x < this.width; x++) var value = this.space[x + y * this.width];
if (value != null)
f.call(context, value, new Vector(x, y));
>
>
>;

World.prototype.turn = function() var acted = [];
this.grid.forEach(function(critter, vector) if (critter.act && acted.indexOf(critter) == -1) acted.push(critter);
this.letAct(critter, vector);
>
>, this);
>;

World.prototype.checkDestination = function(action, vector) if (directions.hasOwnProperty(action.direction)) var dest = vector.plus(directions[action.direction]);
if (this.grid.isInside(dest))
return dest;
>
>;

function View(world, vector) this.world = world;
this.vector = vector;
>
View.prototype.look = function(dir) var target = this.vector.plus(directions[dir]);
if (this.world.grid.isInside(target))
return charFromElement(this.world.grid.get(target));
else
return "#";
>;
View.prototype.findAll = function(ch) var found = [];
for (var dir in directions)
if (this.look(dir) == ch)
found.push(dir);
return found;
>;
View.prototype.find = function(ch) var found = this.findAll(ch);
if (found.length == 0) return null;
return randomElement(found);
>;

for (var i = 0; i < 5; i++) world.turn();
console.log(world.toString());
>
// → … пять ходов

Как это подключить к html? Продолбался пол дня!

Автор: kravru, дата: 27 января, 2018 - 02:48

вставлял яваскрипт сразу в html используя

и скрипт не работал,
я всю голову изломал почему,
а заработал когда заменил на

CSS, SCSS and Less

Visual Studio Code has built-in support for editing style sheets in CSS .css , SCSS .scss and Less .less . In addition, you can install an extension for greater functionality.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

IntelliSense

VS Code has support for selectors, properties and values. Use ⌃Space (Windows, Linux Ctrl+Space ) to get a list of context specific options.

IntelliSense in CSS

Proposals contain extensive documentation, including a list of browsers that support the property. To see the full description text of the selected entry, use ⌃Space (Windows, Linux Ctrl+Space ) .

Syntax coloring & color preview

As you type, there is syntax highlighting as well as in context preview of colors.

Syntax and color

Clicking on a color preview will launch the integrated color picker which supports configuration of hue, saturation and opacity.

Color picker in CSS

Tip: You can trigger between different color modes by clicking on the color string at the top of the picker.

You can hide VS Code's color previews by setting the following setting:

"editor.colorDecorators": false 

To just disable it for css, Less and SCSS, use

"[css]":  "editor.colorDecorators": false > 

Folding

You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all declarations (for example, rule declarations) and for multiline comments in the source code.

Additionally you can use the following region markers to define a folding region: /*#region*/ and /*#endregion*/ in CSS/SCSS/Less or // #region and // #endregion In SCSS/Less.

If you prefer to switch to indentation based folding for CSS, Less and SCSS, use:

"[css]":  "editor.foldingStrategy": "indentation" >, 

Emmet snippets

Emmet abbreviation support is built into VS Code, suggestions are listed along with other suggestions and snippets in the editor auto-completion list.

Tip: See the CSS section of the Emmet cheat sheet for valid abbreviations.

Syntax Verification & Linting

Note: You can disable VS Code's default CSS, Sass or Less validation by setting the corresponding .validate User or Workspace setting to false.

"css.validate": false 

Go to Symbol in file

You can quickly navigate to the relevant CSS symbol in the current file by pressing ⇧⌘O (Windows, Linux Ctrl+Shift+O ) .

Hovers

Hovering over a selector or property will provide an HTML snippet that is matched by the CSS rule.

Hover in CSS

Go to Declaration and Find References

This is supported for Sass and Less variables in the same file. CSS variables per the draft standards proposal are also supported.

There is jump to definition for @import and url() links in CSS, SCSS and Less.

CSS custom data

You can extend VS Code's CSS support through a declarative custom data format. By setting css.customData to a list of JSON files following the custom data format, you can enhance VS Code's understanding of new CSS properties, at-directives, pseudo-classes and pesudo-elements. VS Code will then offer language support such as completion & hover information for the provided properties, at-directives, pseudo-classes and pesudo-elements.

You can read more about using custom data in the vscode-custom-data repository.

Formatting

The CSS Languages Features extension also provides a formatter. The formatter works with CSS, LESS and SCSS. It is implemented by the JS Beautify library and comes with the following settings:

  • css.format.enable - Enable/disable default CSS formatter.
  • css.format.newlineBetweenRules - Separate rulesets by a blank line.
  • css.format.newlineBetweenSelectors - Separate selectors with a new line.
  • css.format.spaceAroundSelectorSeparator - Ensure a space character around selector separators '>', '+', '~' (for example, a > b ).

The same settings also exist for less and scss .

Transpiling Sass and Less into CSS

VS Code can integrate with Sass and Less transpilers through our integrated task runner. We can use this to transpile .scss or .less files into .css files. Let's walk through transpiling a simple Sass/Less file.

Step 1: Install a Sass or Less transpiler

For this walkthrough, let's use either the sass or less Node.js module.

Note: If you don't have Node.js and the npm package manager already installed, you'll need to do so for this walkthrough. Install Node.js for your platform. The Node Package Manager (npm) is included in the Node.js distribution. You'll need to open a new terminal (command prompt) for npm to be on your PATH.

npm install -g sass less 

Step 2: Create a simple Sass or Less file

Open VS Code on an empty folder and create a styles.scss or styles.less file. Place the following code in that file:

$padding: 6px; nav  ul  margin: 0; padding: $padding; list-style: none;  > li  display: inline-block; > a  display: block; padding: $padding 12px; text-decoration: none;  > > 

For the Less version of the above file, just change $padding to @padding .

Note: This is a very simple example, which is why the source code is almost identical between both file types. In more advanced scenarios, the syntaxes and constructs will be much different.

Step 3: Create tasks.json

The next step is to set up the task configuration. To do this, run Terminal > Configure Tasks and click Create tasks.json file from template. In the selection dialog that shows up, select Others.

This will create a sample tasks.json file in the workspace .vscode folder. The initial version of file has an example to run an arbitrary command. We will modify that configuration for transpiling Sass/Less instead:

// Sass configuration  // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [   "label": "Sass Compile", "type": "shell", "command": "sass styles.scss styles.css", "group": "build"  >  ] > 
// Less configuration  // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [   "label": "Less Compile", "type": "shell", "command": "lessc styles.less styles.css", "group": "build"  >  ] > 

Step 4: Run the Build Task

As this is the only command in the file, you can execute it by pressing ⇧⌘B (Windows, Linux Ctrl+Shift+B ) (Run Build Task). The sample Sass/Less file should not have any compile problems, so by running the task all that happens is a corresponding styles.css file is created.

Since in more complex environments there can be more than one build task we prompt you to pick the task to execute after pressing ⇧⌘B (Windows, Linux Ctrl+Shift+B ) (Run Build Task). In addition, we allow you to scan the output for compile problems (errors and warnings). Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don't want to scan the output, select Never scan the build output from the presented list.

At this point, you should see an additional file show up in the file list styles.css .

If you want to make the task the default build task to run execute Configure Default Build Task from the global Terminal menu and select the corresponding Sass or Less task from the presented list.

Note: If your build fails or you see an error message such as "An output directory must be specified when compiling a directory", be sure the filenames in your tasks.json match the filenames on disk. You can always test your build by running sass styles.scss styles.css from the command line.

Automating Sass/Less compilation

Let's take things a little further and automate Sass/Less compilation with VS Code. We can do so with the same task runner integration as before, but with a few modifications.

Step 1: Install Gulp and some plug-ins

We will use Gulp to create a task that will automate Sass/Less compilation. We will also use the gulp-sass plug-in to make things a little easier. The Less plug-in is gulp-less.

We need to install gulp both globally ( -g switch) and locally:

npm install -g gulp npm install gulp gulp-sass gulp-less 

Note: gulp-sass and gulp-less are Gulp plug-ins for the sass and lessc modules we were using before. There are many other Gulp Sass and Less plug-ins you can use, as well as plug-ins for Grunt.

You can test that your gulp installation was successful by typing gulp -v in the terminal. You should see a version displayed for both the global (CLI) and local installations.

Step 2: Create a simple Gulp task

Open VS Code on the same folder from before (contains styles.scss / styles.less and tasks.json under the .vscode folder), and create gulpfile.js at the root.

Place the following code in the gulpfile.js file:

// Sass configuration var gulp = require('gulp'); var sass = require('gulp-sass')(require('sass')); gulp.task('sass', function(cb)  gulp  .src('*.scss')  .pipe(sass())  .pipe( gulp.dest(function(f)  return f.base;  >)  ); cb(); >); gulp.task( 'default', gulp.series('sass', function(cb)  gulp.watch('*.scss', gulp.series('sass')); cb();  >) ); 
// Less configuration var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('less', function(cb)  gulp  .src('*.less')  .pipe(less())  .pipe( gulp.dest(function(f)  return f.base;  >)  ); cb(); >); gulp.task( 'default', gulp.series('less', function(cb)  gulp.watch('*.less', gulp.series('less')); cb();  >) ); 

What is happening here?

  1. Our default gulp task first runs the sass or less task once when it starts up.
  2. It then watches for changes to any SCSS/Less file at the root of our workspace, for example the current folder open in VS Code.
  3. It takes the set of SCSS/Less files that have changed and runs them through our respective compiler, for example gulp-sass , gulp-less .
  4. We now have a set of CSS files, each named respectively after their original SCSS/Less file. We then put these files in the same directory.

Step 3: Run the gulp default task

To complete the tasks integration with VS Code, we will need to modify the task configuration from before to run the default Gulp task we just created. You can either delete the tasks.json file or empty it only keeping the "version": "2.0.0" property. Now execute Run Task from the global Terminal menu. Observe that you are presented with a picker listing the tasks defined in the gulp file. Select gulp: default to start the task. We allow you to scan the output for compile problems. Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don't want to scan the output, select Never scan the build output from the presented list. At this point, if you create and/or modify Less or SASS files, you see the respective CSS files generated and/or changes reflected on save. You can also enable Auto Save to make things even more streamlined.

If you want to make the gulp: default task the default build task executed when pressing ⇧⌘B (Windows, Linux Ctrl+Shift+B ) run Configure Default Build Task from the global Terminal menu and select gulp: default from the presented list.

Step 4: Terminate the gulp default Task

The gulp: default task runs in the background and watches for file changes to Sass/Less files. If you want to stop the task, you can use the Terminate Task from the global Terminal menu.

Customizing CSS, SCSS and Less Settings

You can configure the following lint warnings as User and Workspace Settings.

The validate setting allows you turn off the built-in validation. You would do this if you rather use a different linter.

Id Description Default
css.validate Enables or disables all css validations true
less.validate Enables or disables all less validations true
scss.validate Enables or disables all scss validations true

To configure an option for CSS, use css.lint. as the prefix to the id; for SCSS and Less, use scss.lint. and less.lint. .

Set a setting to warning or error if you want to enable lint checking, use ignore to disable it. Lint checks are performed as you type.

Id Description Default
validate Enables or disables all validations true
compatibleVendorPrefixes When using a property with a vendor-specific prefix (for example -webkit-transition ), make sure to also include all other vendor-specific properties e.g. -moz-transition , -ms-transition and -o-transition ignore
vendorPrefix When using a property with a vendor-specific prefix for example -webkit-transition , make sure to also include the standard property if it exists e.g. transition warning
duplicateProperties Warn about duplicate properties in the same ruleset ignore
emptyRules Warn about empty rulesets warning
importStatement Warn about using an import statement as import statements are loaded sequentially which has a negative impact on web page performance ignore
boxModel Do not use width or height when using padding or border ignore
universalSelector Warn when using the universal selector * as it is known to be slow and should be avoided ignore
zeroUnits Warn when having zero with a unit e.g. 0em as zero does not need a unit. ignore
fontFaceProperties Warn when using @font-face rule without defining a src and font-family property warning
hexColorLength Warn when using hex numbers that don't consist of three or six hex numbers error
argumentsInColorFunction Warn when an invalid number of parameters in color functions e.g. rgb error
unknownProperties Warn when using an unknown property warning
ieHack Warn when using an IE hack *propertyName or _propertyName ignore
unknownVendorSpecificProperties Warn when using an unknown vendor-specific property ignore
propertyIgnoredDueToDisplay Warn when using a property that is ignored due to the display. For example, with display: inline , the width , height , margin-top , margin-bottom , and float properties have no effect. warning
important Warn when using !important as it is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored. ignore
float Warn when using float as floats lead to fragile CSS that is easy to break if one aspect of the layout changes. ignore
idSelector Warn when using selectors for an id #id as selectors should not contain IDs because these rules are too tightly coupled with the HTML. ignore

Next steps

Read on to find out about:

  • Configure Tasks - Dig into Tasks to help you transpile your SCSS and Less to CSS.
  • Basic Editing - Learn about the powerful VS Code editor.
  • Code Navigation - Move quickly through your source code.
  • HTML - CSS is just the start, HTML is also very well supported in VS Code.

Common questions

Does VS Code provide a color picker?

Yes, hover over a CSS color reference and the color picker is displayed.

Is there support for the indentation based Sass syntax (.sass)?

No, but there are several extensions in the Marketplace supporting the indented flavor of Sass, for example, the Sass extension originally created by Robin Bentley, now maintained by Leonard Grosoli.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *