ScriptJava Framework - $$().$$().$$().$$().$$()...

perepyk · February 5, 2012

ScriptJava Framework

* работа с элементами

* работа с ajax

* динамическая подгрузка скриптов

* динамическое создание элементов

* динамическая подгрузка css стилей

* отправка файлов через ajax

* отправка формы через ajax

* работа с cookie

* работа с событиями

* работа с браузером, экраном, числами, элементами

Подробный мануал на русском

http://scriptjava.net/

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

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


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

Примеры на 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

Вначале нужно подключить сам 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>
	    ';
	}
?>

Динамическое подключение скриптов

Вначале нужно подключить сам 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 запрос';
	    }
	}
?>

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

Veseloff · February 5, 2012

А в чём его преимущество, например, перед jQuery? Почему он добавляет в пространство имён болше чем две перемнные? Как разруливаются конфликты? Где minified версия? Где комментарии в коде? Где удобные селекторы? Где обработчик исключений?

И ещё, я думаю, можно тысячи таких вопросов задать. По-моему, fail.

perepyk · February 5, 2012

половина не нужна, а та половина которая нужна еще в процессе

Edited February 5, 2012 by perepyk

Veseloff · February 5, 2012

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

s0rr0w · February 5, 2012

Где удобные селекторы?

А нафига они нужны?

perepyk · February 6, 2012

пример гостевой полностью написанной на scriptjava

http://test.onfind.net/

Зачем тогда рекламировать то, что ещё не готово.

не готово - это когда ничего не сделать, а тут уже можно писать целые гостевые на ajax без особых затрат

код гостевой (ссылка вверху) на scriptjava:

а без фреймворка все бы это превратилось бы в адскую работу


var n_buf;
var getform = function(q,n) {
	$$('fotvg','display','block');
	$$('capcha_img').src='genkap.php?'+Math.random();
	if($$('fotvg') != $$(q).nextSibling) {
		$$(q).parentNode.insertBefore($$('fotvg'), $$(q).nextSibling);
		n_buf=n;
		$$('f1').setAttribute('action', '/index.php?w='+n);
	}
}

var sendajaxform = function () {
$$f({
	formid:'f1',
		url:'/index.php?w='+n_buf,
		onstart:function () {

	},
	onsend:function () {

	}
});
}

var toupwin = function (l,t) {
	l = l || 0;
	t = t || 0;
	window.scrollTo(l, t);
}

var sendok = function (s,m,n,x) {
	if(s=='ok') {
		$$('error_mes',m);


			var div=$$i({
				create:'div',
				attribute: {
					'class':'otvpost'
				},
				insert:$$().body
			});

		if(x>0) {
			$$('fotvg').parentNode.insertBefore($$(div), $$('fotvg').nextSibling);
		}
		else {
			$$('txtdesc').parentNode.insertBefore($$(div), $$('txtdesc').nextSibling);
			toupwin();
		}

		$$(div,'<img src="loading.gif" />');

		$$a({
			type:'post',
  			url:'get.php',
  			data:{'id':n},
  			success:function (data) {
				$$(div,data);
  			}
		});

		$$('name').value='';
		$$('mail').value='';
		$$('url').value='';
		$$('text').value='';
		$$('tags').value='';
		$$('kod').value='';
		$$('capcha_img').src='genkap.php?'+Math.random();
		$$('fotvg','display','none');
	}
	else {
		$$('error_mes',m);
		$$('capcha_img').src='genkap.php?'+Math.random();
	}
}

var getparent = function (q,n) {
	$$(q,'<img src="loading.gif" />');
		$$a({
			type:'post',
  			url:'get.php',
  			data:{'id':n,'txt':'1'},
  			success:function (data) {
				$$(q.parentNode,data);
  			}
		});
}

ну разве не четко написано?

а если поглядеть код этого форума - ведь идея та же - все отправлять через ajax

не вижу пару строк, кода дофига, а функционал тот же что у гостевой, та же отправка формы

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

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

jquery я не знаю, я его не учил и не хочу учить

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

а чем он лучше или хуже мне не важно, я не соревнуюсь на изощренность

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

Edited February 6, 2012 by perepyk

Odrin · February 6, 2012

Просто до вас его уже сделали. Давно. Лучше. На много лучше. И удобнее. И с великим множеством плагинов. И еще много- много "и ...".

С сайта вашего:

//вставляю текст в элемент и меняю цвет
$$('result','Другой текст').$$('color','#ffffb6');

Вы издеваетесь? =)

Или это:

var e = function(event){$$('result','событие onclick получено');}
$$e.add($$('result'),'click',e);

Для сравнения, то же самое на jQ:

$('#result').click(function(){ $(this).text('событие onclick получено'); });

Edited February 6, 2012 by Odrin

Great Rash · February 6, 2012

А я считаю, что свои велосипеды это хорошо. Не бросайте это дело

buddah · February 6, 2012

+1, даже если никому этот велосипед не пригодится - хороший опыт и шикарный пункт резюме будут получены.

perepyk · February 6, 2012

Просто до вас его уже сделали. Давно. Лучше. На много лучше. И удобнее. И с великим множеством плагинов. И еще много- много "и ...".
С сайта вашего:
//вставляю текст в элемент и меняю цвет
$$('result','Другой текст').$$('color','#ffffb6');
Вы издеваетесь? =)
Или это:
var e = function(event){$$('result','событие onclick получено');}
$$e.add($$('result'),'click',e);
Для сравнения, то же самое на jQ:
$('#result').click(function(){ $(this).text('событие onclick получено'); });

это вы издеваетесь

зачем я его таким сделал и что делает?

var e = function(event){$$('result','событие onclick получено');}
$$e.add($$('result'),'click',e);

и чем он отличается от такой записи?

$$e.add($$('result'),'click',function(){ $$('result','событие onclick получено'); });

то же самое в jquery

Edited February 6, 2012 by perepyk

Great Rash · February 6, 2012

Я бы тока $$ на _ заменил. Писать один символ вместо двух и, плюс, с jQuery ассоциаций меньше.

Veseloff · February 6, 2012

Где удобные селекторы?
А нафига они нужны?

Это сарказм?

s0rr0w · February 6, 2012

Это сарказм?

Это повод задуматься над ментальными паттернами

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

Sign In

ScriptJava Framework - $$().$$().$$().$$().$$()...

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information