Клуб мобильного творчества
Меню
Анасец 06.02.12 в 21:59 #
Я не буду вникать в идеологию языка. Все представленные в этой теме уроки я постараюсь объяснить наиболее доходчиво. Минимум слов - максимум кода с соответствующими пояснениями. И да прибудет с нами сила.
Урок первый. Азы.
Код программы на Javascript должен
располагаться в контейнере<script type="text/javascript></
script>
на странице или находиться в
файле, например <script language="javascript" src="scripts/main.js">.
Вот демонстрация синтаксиса:
<script type="text/javascript">
//однострочный комментарий
/*многострочный комментарий,
который может занять неск. строк*/
//тут идет программа
//после каждой комманды
//идет знак "точка с запятой"
//например:

alert("Hello, user!");
// ^
// эта комманда вывода сообщения на
экран

prompt("Как тебя зовут?");
//^
//эта комманда, которая выводит на
экран
//поле ввода данных с клавиатуры

</script>
В языке javascript есть несколько
основных классов:
*Object
Класс, отвечающий за работу с самым
общим видом Объект
*String
Работа со строками
*Array
Работа с массивами
*Date
Работа с датой и временем
*Boolean
Логические выражения
*Math
Класс математики, т.е. тут присутствуют
разные формулы типа синус, косинус и
т.п.
*RegExp
Постоянные выражения.
При наличии определенных знаний в программировании, можно спокойно освоить этот язык, благо все проблемы в создании программы на javascript сводятся к созданию логики, все остальное - написание программы и её выполнение не составляют труда.
Файл(ы):
9098_demo1.zip (0 кб.) Скач. 292 раз.
Изменил(а) Анасец 06.02.12 в 22:00
Рейтинг: 0
Анасец 06.02.12 в 23:42 #
Урок первый(продолжение).
Едем дальше. Чем нам может помочь
javascript? Можно создать какой-нибудь
калькулятор-конвертер, организовать
смену стиля страницы по щелчку на
кнопке, да кучу всего полезного и не
очень.
Пример взаимодействия с пользователем
был описан в предыдущем посте. Это две
стандартные комманды alert и prompt.
Напомню еще раз:
alert - окошко с сообщением;
prompt - поле ввода;
После каждой комманды идет знак ";".
alert имеет возможность выводить не
только статичную строчку, но и
содержимое какой нибудь переменной:
name=prompt("Enter your name, please");
alert("Hello, "+name);

В этом примере мы склеили статичную
строчку и значение переменной name.
Но хочется, чтобы данные вводились не в
маленькое окошко, а в большое
текстовое поле на самой странице. На
этом этапе нам понадобятся некоторые
знания html. Если их нет - следует почитать дополнительно документацию, вот даже сайт:
http://w3schools.com - спецификация языка html и не только.
Там все отлично изложено, правда на
английском, но это не беда.
Так вот, мы решили организовать
получение информации со страницы. Для
начала нам нужно поле, куда будет
вводиться нужная нам информация:
Код на html:
<input size=50 id="someData">. Так же нам понадобится кнопка, при нажатии на которую и будут производиться нужные нам действия:
<input type="button" onClick="getData();">
onClick - событие, вызываемое при нажатии на кнопку. В данном случае выполнится функция getData().
Так, поле у нас есть, теперь организуем
доступ к нему. В html схема объектов
называется DOM.
Javascript использует эту модель для
доступа к объектам на странице. Чтобы
обратится к элементу на странице, надо
задействовать объект document:
function getData() {//создаем функцию под названием getData
var data;

//объявляем переменную, в
которой будем хранить информацию

data=document.getElementById("someData").value;
Разберемся по порядку:
document - объект, который являет собой
страницу;
someData - идентификатор текстового поля,
переданный в атрибуте id тэга input;
value - свойство объекта, обозначает
содержимое, которое хранится в
объекте.
Если представить схемой, то получится
следующее:
document
|
someData
|
value
Хочу заметить, что существуют такие структуры типа document.object1.object2.{...}.objectN.property, в которых ничего не стоит запутаться, поэтому я советую использовать у объектов, к которым нужно получить доступ, свойство "id", тогда легко получить ссылку на объект с помощью метода document.getElementById(elementID), где elementID - идентификатор, переданный в поле id.
Далее мы можем вывести данные на
экран.
alert(data);
Мы так же можем вывести данные на
саму страницу, для этого есть
специальная комманда:
document.write(data);
Но нужно быть с ней осторожным, так
как данные, хранящиеся в переменной
будут выведены на страницу сразу после
кода скрипта, а это не совсем то, что нам
нужно. Конечно же, существуют
возможности вывода данных на
страницу, их мы обговорим чуть позже.
На этом пока все. Следующие примеры будут чуть позже, т.к. я работаю над созданием этих самых тем и примеров. Можете сами предложить какие темы вы хотите видеть, и я отпишусь по ним.
Файл(ы):
demo1a.zip (0 кб.) Скач. 259 раз.
demo1b.zip (0 кб.) Скач. 264 раз.
Рейтинг: 0
Анасец 10.02.12 в 20:12 #
Урок 2. Функции в языке Javascript.
На прошлом уроке мы изучили несколько примеров языка. Для выполнения некоторых действий нам понадобилось создать функцию, помните?
function getData()

Можно сказать, что функция - упорядоченная последовательность действий, которую можно вызвать из любого места программы. Вот несколько особенностей функций:
-в функцию можно передать параметр:
function multiple(a,b) {
z=a*b;

-функция может возвратить объект или значение:
function multiple(a,b) {
return a*b;
//возвращает произведение
//a и b

}
-функция может иметь свойства и даже подфункции, тогда она превращается в объект, экземпляры которого можно создавать многократно. Рассмотрим на примере машины.
У машины есть свойства - марка, цвет, тип кузова, объем двигателя и проч. Еще машина может выполнять какие-то действия - посигналить, мигнуть фарами:
car=function(mark,color,type) {
this.mark=mark;
this.color=color;
this.type=type;
this.flash=function {
alert("O O");}
this.beep=function {
alert("!!BIP!!");}
}

Как вы заметили, ссылку на текущий объект получают с помощью ключевого слова this. Теперь нам ничего не стоит создать объект car:
mazda=new car("Mazda","red","sportcar");
mazda.flash();
//Помигали фарами.
Чем это может нам помочь? Можно создать объект пользователя, хранить в нем какие-то временные данные. Или написать javascript-библиотеку и внести в нее новый тип объектов. Фантазия не ограничена почти ничем, благо гибкость языка позволяет проявить всю свою изобретательность. Дерзайте!:-)
Рейтинг: 0
Анасец 10.02.12 в 21:27 #
Урок 3. Инструментарий.
Вообще, этот урок(если можно так назвать) должен был располагаться в самом начале, но по неясным самому автору причинам он оказался здесь. Итак, что же нам нужно? Если вы изучаете javascript на телефоне, то жизненно необходима одна вещь - эвалюатор. Сейчас все объясню.
В языке javascript есть одна очень полезная функция - eval(stringEval);
Эта функция выполняет код, переданный в виде строки в аргумент. Благодаря этому возможно изучить почти все особенности языка. Почему почти всех? Потому что мобильные устройства поддерживают ограниченный набор возможностей ядра.
Перейдем к самому главному. К исходному коду. Я решил привести здесь полный листинг страницы html:
<html>
<head>
<title>JSEval</title>
<script type="text/javascript">
function evalIt(toEval) {
try {
eval(toEval);
} catch(Exception exc) {
alert(exc.getMessage());
}
}
</script>
Давайте разберемся, что это там такое новое и неизвестное.
Блок try {} catch() {} присутствует во многих языках программирования. Это - наилучший способ отладить свой код, а так же определить, на каком месте программы возникают ошибки. Идем дальше.

</head>
<body>
JS Evaluator Lite<br>
<hr>
<textare id="inputArea" rows=20 cols=45></textarea><br><input type="button" value="OK" onClick="evalIt(document.getElementById('inputArea').value);">
</body>
</html>

Ну как бы все. Это лайт версия эвалюатора, расширеная будет в файлах. Инструкция:
1. Пишем код на javascript в поле
2. Нажимаем Ок
3. Если в коде ошибки, то сообщит, на какой строке и что вызвало(это не гарантирую, все зависит от разработчика платформы).
Инструкция для фул версии:
Первые три пункта те же
4. Доступен вывод в терминал. Для этого есть две функции:
println(str);
print(str);

Первая выводит текст на новой строке, вторая - на последней. Так же можно отчистить терминал вызовом функции clear();. Еще одна возможность - получение объекта не через длинную функцию document.getElementById(), а через короткую - id(ident). ident - id элемента.
Пока что все. Добра вам!
Файл(ы):
jseval.zip (0.87 кб.) Скач. 260 раз.
Рейтинг: 0
seg0ro 24.02.12 в 21:40 #
¯\_(ツ)_/¯
Анасец, а можешь написать, как можно получить данные со страницы.
Обьясняю: Есть сайт #1 на нем есть страничка с таким текстом <span id="msg">14</span>, как написать js, который бы мог находясь на сайте #2 считывать цифру со страницы первого сайта.
Я вот как думаю
var msg = function () {
var resurce = ... // а вместо точек код по захвату информации с сайта.
}

Буду заранее благодарен.
Рейтинг: 0
Анасец 25.02.12 в 00:11 #
Постараюсь найти решение как можно быстрее. А пока несколько догадок:
1. Использовать frameset и там уже доставать объекты
2. Использовать ajax xmlhttprequest и работать с ответом, как с xml-документом
Рейтинг: 0
seg0ro 25.02.12 в 04:37 #
¯\_(ツ)_/¯
Спасибо заранее.
xmlhttprequest я пробовал, но не получилось
Рейтинг: 0
Анасец 25.02.12 в 17:30 #
В общем, покопался я и выяснил вот что:
-нельзя использовать javascript, чтобы получать данные с другого сайта;
-можно использовать ajax и php, чтобы провернуть это дело.
У нас должен быть php-скрипт, который получает страницу в переменную и передаёт её js-скрипту уже на странице.
В ajax и jquery я не силен, поэтому вот ресурсы для изучения:
http://dayte2.com/foreign-content-ajax - тут присутствует описание самого механизма
http://w3schools.com/ajax/ajax ... e.asp - тут присутствует описания ajax и работы с xml-файлами
http://w3schools.com/jquery/jq ... l.asp - тут поро jquery и работу с тегами
Изменил(а) Анасец 25.02.12 в 17:31
Рейтинг: 0
seg0ro 25.02.12 в 18:51 #
¯\_(ツ)_/¯
Спасибо
блин, хренова.
Начал читать учебник по js - увлекло. вроде просто, но и сложно местами
Изменил(а) seg0ro 25.02.12 в 18:52
Рейтинг: 0
Анасец 25.02.12 в 19:16 #
Хм, а в php можно получить доступ к HTML DOM?
Рейтинг: 0