JavaScript введение - статья для новичков

Discussion in 'Песочница' started by Shawn1x, 29 May 2017.

  1. Shawn1x

    Shawn1x Elder - Старейшина

    Joined:
    24 Aug 2007
    Messages:
    290
    Likes Received:
    506
    Reputations:
    13
    Сегодня мы рассмотрим введение в JavaScript.
    JavaScript отлично дополняет html, c его помощью можно создавать интеллектуальные формы управлять слоями картинками, и делать много чего интересного!
    В JavaScript имеется иерархия объектов, при обращении к объекту нужно указывать все вышестоящие объекты, но при обращении к функциям иерархия не используется, например write выводит сообщение, но для обращения к этому объекту нужно указать вышестоящий объект document.
    Сам скрипт объявляется тегами <script></script> в параметрах не обязательно указывать language="JavaScript" так как JavaScript стоит по умолчанию, а в случае с VBS указывать язык нужно!
    Синтаксис JavaScript лёгкий, похож на С\С++, но менее требователен, если на одной строке один оператор, то после него не обязательно ставить точку с запятой.
    Тип переменной объявляется наличием, или отсутствием кавычек. Чтобы объявить что а=1, т.е цифре, нужно писать var a=1, а если мы хотим присвоить a строковое значение, то нужно взять значение в кавычки: var a="текст".
    Составим программу умножения двух чисел:
    <script>
    var a=2; b=4; var c=a*b document.write("В результате умножения двух чисел получено значение: ",c," ."); </script>

    Чтобы вывести сообщение нужно воспользоваться функцией alert например:
    <a href="сайт" onClick="alert('До свидания!')">Линк</a>
    onClick - это событие на щелчок мыши, чтобы после щелчка произошло действие, его нужно указать в параметрах т.е в скобках. Обычно это функция, которой передаётся управление.
    Теперь мы напишем то же самое, но исходные данные вводит юзер. Для этого мы обратимся к форме, и каким либо её полям:

    <script> window.status="sdfsdf";
    function um() {
    var a = document.forma.pole1.value
    var b = document.forma.pole2.value
    document.write("В результате умножения ",a," на ", b, " получилось: ", a*b)
    } </script>
    <form name="forma">
    <input type="text" name="pole1">
    <input type="text" name="pole2"><>
    <input type="button" onClick="plus()" value="Умножить">

    Здесь мы используем функцию um() для умножения двух чисел. После имени функции ставится две точки, в которых можно указывать параметры. Тело функции берётся в фигурные скобки.
    Здесь показана иерархия объектов JavaScript. На первом месте находится document, на втором форма, но обрати внимание, что для обращения к форме её необходимо присвоить имя, в данном случае имя - forma. С именем поля формы тоже самое.
    Естественно, в документе не должно быть несколько форм, полей, картинок, или других элементов с одинаковыми именами.
    При нажатии на кнопку умножить мы вызываем функцию um() которая умножает, и выводит результат.
    Как ты, наверное, уже догадался, здесь используется иерархия, и объект value - предоставляет доступ к значению выше стоящего объекта, используя это мы можем менять значение форм, или получать уже введённое в них значение.
    Если в скрипте набрать document.forma.pole1.value="текст" можно изменить содержимое внутри текстового поля.
    Используя иерархию JavaScript можно изменять и картинки. Например нам надо, чтобы при наведении курсора на картинку она изменялась.
    Для этого нам потребуется познакомится с двумя новыми событиями:
    onMouseOver - перемещение курсора в область картинки,
    и onMouseOut - перемещение курсора за приделы картинки.
    Исходник:
    <a href="http:\\forum.antichat.ru" onMouseOver="document.pic.src='1.gif'" onMouseOut="document.pic.src='2.gif'">
    <img src="2.gif" name="pic"> </a>


    Наверняка гуляя по просторам Интернета ты видел в строке состояния браузера какой-нибудь текст, его можно задавать самостоятельно, это делается так:
    window.status="текст";
    Tаким образом можно обмануть юзера, и вместо реального адреса ввести свой:
    <a href="pornyxa.ru" onMouseOver="window.status='http:\\google.ru'" onMouseOut="window.status=' '"> google.ru </a>

    Ещё небольшая уязвимость позволяющая аварийно завершить IE, и закрыть все его окна - пишем:
    <script> window.window() // IE как грохнется! </script>
     
    madik likes this.