1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

ScriptJava - упрощенный javascript - примеры и докуменация

Тема в разделе "CSS, HTML, JS", создана пользователем xzxzxz, 9 фев 2012.

  1. xzxzxz
    xzxzxz Guest
    ScriptJava Framework - $$().$$().$$().$$().$$()...

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

    ScriptJava Framework

    * работа с элементами
    * работа с ajax
    * динамическая подгрузка скриптов
    * динамическое создание элементов
    * динамическая подгрузка css стилей
    * отправка файлов через ajax
    * отправка формы через ajax
    * работа с cookie
    * работа с событиями
    * работа с браузером, экраном, числами, элементами

    Подробный мануал на русском
    http://scriptjava.net/

    Поддерживает все современные браузеры!

    Краткое описание функций

    Код:
    $$() - получение доступа к элементам
    $$a() - работа с ajax
    $$c() - работа с cookie
    $$e() - работа с событиями
    $$f() - отправка форм через ajax
    $$i() - динамическое подключение скриптов стилей и создание элементов
    $$r() - работа с событием window.onload
    $$s() - набор полезных функций по работе с экраном, мышью, браузером, элементами, числами и т.д.
    
    Код:
    $$()
    $$a() - ajax
    $$c() - cookie
    $$e() - event
    $$f() - forms
    $$i() - insert
    $$r() - ready
    $$s() - scripts
    
    Примеры на scriptjava:

    Как отправить файл через AJAX

    Вначале нужно подключить сам scriptjava фреймворк

    Код:
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    
    Для отправки файлов серверу есть такая форма

    Код:
    <form id="test_form" method="post" enctype="multipart/form-data">
    <input type="file" name="upload_file" />
    </form><br /><br />
    <div id="status">Тут будет статус загрузки</div><br /><br />
    <div onclick="SendFile();">Отправить файл через Ajax</div><br />
    
    Пишем для него функцию отправки

    Код:
    <script type="text/javascript">
    	function SendFile() {
    	    $$f({
    	        formid:'test_form',//id формы
    	        url:'ajax.php',//адрес на серверный скрипт который будет принимать файл
    	        onstart:function () {//действие при начале отправки файла на сервер
    	            $$('status','начинаю отправку файла');
    	        },
    	        onsend:function () {//действие по окончании отправки файла на сервер
    	            $$('status',$$('status').innerHTML+'<br />файл успешно загружен');
    	        }
    	    });
    	}
    </script>
    
    Чтобы получить ответ от сервера, содержимое файла ajax.php может быть таким:

    Код:
    <?php
    	    if($_FILES['upload_file']['size']>0) {
    	        echo '
    	            <script type="text/javascript">
    	            var elm=parent.window.document.getElementById("status");
    	            elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт";
    	            </script>
    	        ';
    	    }
    ?>
    
    Работа с cookies в javascript

    Вначале нужно подключить сам scriptjava фреймворк

    Код:
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    
    Для проверки поддерживает и браузер кукисы можно использовать следующий код:

    Код:
    <script type="text/javascript">
    	//проверяю поддержку cookie браузером
    	if($$c.test()) {
    	    alert('браузер поддерживает cookie');
    	}
    	else {
    	    alert('браузер не поддерживает cookie');
    	}
    </script>
    
    Вот так можно установить кукисы на 10 секунд

    Код:
    <script type="text/javascript">
    	//устанавливаю cookie
    	$$c.set('test', 'содержимое test', 10);
    </script>
    
    Вот так можно считать кукисы

    Код:
    <script type="text/javascript">
    	//читаю cookie
    	alert($$c.get('test'));
    </script>
    
    Для удаления установленных кукисов достаточно использовать такой код

    Код:
    <script type="text/javascript">
    	//удаляю cookie
    	$$c.erase('test');
    </script>
    
    Как отправить форму через Ajax

    Вначале нужно подключить сам scriptjava фреймворк

    Код:
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    
    Допустим на странице сайта у нас есть форма

    Код:
    <form id="test_form" action="comment.php" method="post">
    	    Имя: <input type="text" name="name" /><br />
    	    Комментарий: <textarea name="comment"></textarea>
    	</form><br />
    <div id="result">Тут будет статус загрузки</div><br /><br />
    <div onclick="SendForm();">Отправить форму через Ajax</div><br />
    
    Ее можно отправить на сервер через AJAX с помощью кода

    Код:
    <script type="text/javascript">
    	function SendForm() {
    	    //отправка файла на сервер
    	    $$f({
    	        formid:'test_form',//id формы
    	        url:'comment.php',//адрес на серверный скрипт, такой же как и в форме
    	        onstart:function () {//действие при начале отправки
    	            $$('result','начинаю отправку');//в элемент с id="result" выводим результат
    	        },
    	        onsend:function () {//действие по окончании отправки
    	            $$('result',$$('result').innerHTML+'<br />комментарий успешно отправлен');//в элемент с id="result" выводим результат
    	        }
    	    });
    	}
    </script>
    
    Чтобы получить ответ от сервера, содержимое файла comment.php может быть таким:

    Код:
    <?php
    	if(isset($_POST['name'])) {
    	    echo'
    	        <script type="text/javascript">
    	        var elm=parent.window.document.getElementById("result");
    	        elm.innerHTML=elm.innerHTML+"<br />Получено имя '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['name'])))).' с текстом '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['comment'])))).' ";
    	        </script>
    	    ';
    	}
    ?>
    
    Как динамически подключить javascript

    Вначале нужно подключить сам scriptjava фреймворк

    Код:
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    
    Чтобы динамически подключить скрипт, а также после его загрузки выполнить из него код, нужно выпонить следующий код

    Код:
    <script type="text/javascript">
    	function GetScript() {
    	    //Подключаю внешний скрипт и запускаю из него метод
    	    $$i({
    	        create:'script',
    	        attribute: {
    	            'type':'text/javascript',
    	            'src':'http://nagon.net/js/NRMSLib.js'//адрес на подключаемый скрипт
    	        },
    	        insert:$$().body,
    	        onready:function() {
    	            modules.sound.start();//этот метод запускается уже из подключенного скрипта
    	        }
    	    });
    	}
    	GetScript();
    </script>
    
    Дописываю вышепоказанный код, теперь он будет запускаться сразу после загрузки сайта:

    Код:
    <script type="text/javascript">
    	//выполнение кода только после загрузки документа
    	$$r(function() {
    	    //Подключаю внешний скрипт и запускаю из него метод
    	    $$i({
    	        create:'script',
    	        attribute: {
    	            'type':'text/javascript',
    	            'src':'http://nagon.net/js/NRMSLib.js'//адрес на подключаемый скрипт
    	        },
    	        insert:$$().body,
    	        onready:function() {
    	            modules.sound.start();//этот метод запускается уже из подключенного скрипта
    	        }
    	    });
    	 
    	});
    </script>
    
    Как отправить GET, POST, HEAD запросы через AJAX

    Вначале нужно подключить сам scriptjava фреймворк

    Код:
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    
    Поместим на сайт такой html код

    Код:
    <div id="result">Тут будет ответ от сервера</div><br /><br />
    <div onclick="SendGet();">Отправить GET запрос через Ajax</div><br />
    <div onclick="SendPost();">Отправить POST запрос через Ajax</div><br />
    <div onclick="SendHead();">Отправить HEAD запрос через Ajax</div><br />
    
    Пишем код

    Код:
    <script type="text/javascript">
    	function SendGet() {
    	    //отправляю GET запрос и получаю ответ
    	    $$a({
    	        type:'get',//тип запроса: get,post либо head
    	        url:'ajax.php',//url адрес файла обработчика
    	        data:{'q':'1'},//параметры запроса
    	        response:'text',//тип возвращаемого ответа text либо xml
    	        success:function (data) {//возвращаемый результат от сервера
    	            $$('result',$$('result').innerHTML+'<br />'+data);
    	        }
    	    });
    	}
    	 
    	function SendPost() {
    	    //отправляю POST запрос и получаю ответ
    	    $$a({
    	        type:'post',//тип запроса: get,post либо head
    	        url:'ajax.php',//url адрес файла обработчика
    	        data:{'z':'1'},//параметры запроса
    	        response:'text',//тип возвращаемого ответа text либо xml
    	        success:function (data) {//возвращаемый результат от сервера
    	            $$('result',$$('result').innerHTML+'<br />'+data);
    	        }
    	    });
    	}
    	 
    	function SendHead() {
    	    //отправляю HEAD запрос и получаю заголовок
    	    $$a({
    	        type:'head',//тип запроса: get,post либо head
    	        url:'ajax.php',//url адрес файла обработчика
    	        response:'text',//тип возвращаемого ответа text либо xml
    	        success:function (data) {//возвращаемый результат от сервера
    	            $$('result',$$('result').innerHTML+'<br />'+data);
    	        }
    	    });
    	}
    </script>
    
    Содержимое файла ajax.php

    Код:
    <?php
    	if(isset($_GET['q'])) {
    	    header("Content-type: text/txt; charset=UTF-8");
    	    if($_GET['q']=='1') {
    	        echo 'запрос GET успешно обработан, q = 1';
    	    }
    	    else {
    	        echo 'карявый GET запрос';
    	    }
    	}
    	if(isset($_POST['z'])) {
    	    header("Content-type: text/txt; charset=UTF-8");
    	    if($_POST['z']=='1') {
    	        echo 'запрос POST успешно обработан, z = 1';
    	    }
    	    else {
    	        echo 'карявый POST запрос';
    	    }
    	}
    ?>
    

    Остальные примеры смотрите на оф сайте фреймворка
     
    9 фев 2012

Поделиться этой страницей

Загрузка...