Использование возможностей DOM в мобильных разработках

Разбить на страницы

Показывать лекцию целиком

Ход выполнения работы:

Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> DomAndCanvas.

В папке проекта www откройте файл index.html. Это будет главная страница, с доступом к страницам Graphic.html и Dom.html. Удалите её содержание, соответствующее шаблону проекта, и вставьте следующий код:

<!DOCTYPE html>
<html>
    <head>
        <title>Dom and Canvas</title>
    </head>
    <body>
        <div class="app">
            <h1>Dom and Canvas</h1>
                <menu>
             <li>
              <h1>
                <a href ="Graphic.html">Страница с Canvas</a> - ссылка на страницу Graphic.html
              </h1>
            </li>   
            <li>
              <h1>
                <a href ="Dom.html">Страница с DOM</a> - ссылка на страницу Dom.html
              </h1>
            </li>               
               </menu>
            </div>
    </body>
</html>

Главная страница имеет две гиперссылки на другие страницы которые пока отсутствуют.

Создайте в папке www новую страницу Graphic.html, демонстрирующую возможности тега <canvas>.

Код страницы:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
      minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Graphic</title>
      <script type="text/javascript">
        CanvasMaster=new Object();
        CanvasMaster.showCanvas=function()
        {
        canvasNow  = document.getElementById("sunset");
        contextNow = canvasNow.getContext('2d');
        sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
        sunsetGradient.addColorStop(0, "yellow");
        sunsetGradient.addColorStop(1, "#cc0000")
        contextNow.fillStyle = sunsetGradient;
        contextNow.beginPath();
        contextNow.arc(100,100,75,0,Math.PI*2,false);
        contextNow.closePath();
        contextNow.fill()
        }
      </script>

  <style type="text/css">
    <body>
      {
      font-family:Verdana, Geneva, sans-serif;
      color:#cc0000;
      }
     </style>
      
        <title>Sunset</title>
        </head>
        <body onLoad="CanvasMaster.showCanvas()">
          <figure>
            <canvas id="sunset" width="400" height="400" > Как жаль, 
что вы не можете увидеть прекрасный закат из-за того, 
что ваш браузер не поддерживает HTML 5!</canvas>
            <figcaption>
              <p>Закат</p>
            </figcaption>
          </figure>
    </body>
</html>

Пояснения к JavaScript - коду, содержащему свойства и методы объекта Canvas:

CanvasMaster=new Object(); - создание пользовательского объекта CanvasMaster;

CanvasMaster.showCanvas=function() - объявление функции showCanvas;

canvasNow = document.getElementById("sunset"); - определение объекта, как метода объекта document, имеющего имя sunset;

contextNow = canvasNow.getContext('2d'); - canvas используется в плоскости;

sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379); - создание градиента.

Метод createLinearGradient() имеет четыре компоненты. Первые две отвечают за начало заливки - Хн, Ун. Вторые две - за конец заливки - Хк, Ук.

Еще один пример заливки:

var gradient=ctx.createLinearGradient(0,0,0,170);
gradient.addColorStop(0,"black");
gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Результат заливки:

sunsetGradient.addColorStop(0, "yellow"); -цвет начинающий заливку;

sunsetGradient.addColorStop(1, "#cc0000") - цвет завершающий заливку;

contextNow.fillStyle = sunsetGradient; - применение параметров стиля;

contextNow.beginPath(); - отрисовка окружности;

contextNow.arc(200,200,150,Math.PI*2,false);

contextNow.closePath().

Пояснения метода arc():

Первые два параметра являются центром окружности;

третий параметр отвечает за радиус;

четвертый параметр отвечает за длину нарисованной окружности в радианах;

пятый параметр определяет выбор отрисовки четвертого параметра.

Пример 1 рисования дуги:

ctx.beginPath();
ctx.arc(200,200,150,0,Math.PI*2,false);
ctx.stroke();

Результат:

Пример 2 рисования дуги:

ctx.beginPath();
ctx.arc(200,200,150,0,Math.PI*1.5,false);
ctx.stroke();

Результат:

contextNow.fill() - выполнение заливки.

Вызов JavaScript - кода выполняется при загрузке страницы, этому событию соответствует тег

<body onLoad="CanvasMaster.showCanvas()">

Пример тестирования страницы Graphic.html:

Создайте в папке www третью страницу Dom.html, демонстрирующую возможности модели DOM для манипулирования рисунками и надписями страницы.

Код страницы (пояснения содержатся в лекции 8):

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<script type="text/javascript">
    var flag = true;
    function swapImage() {
        var image_Object1 = document.getElementById("Dog");
        var image_Object2 = document.getElementById("Boy");
        if (flag == true) {
            flag = false;
            Boy.src = "img/Dog.jpg";
            Dog.src = "img/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "Мальчик ВИТЯ";
            document.getElementById("Caption_Boy").innerHTML = "БОБИК";

        }
        else {
            flag = true;
            Dog.src = "img/Dog.jpg";
            Boy.src = "img/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "ЖУЧКА";
            document.getElementById("Caption_Boy").innerHTML = "Мальчик ПЕТЯ";
        }
    }

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type ="text/css">
 body,a {
     font-size:50px
 }
</style>
<title>Обмен изображений</title>
</head>
<body>
<figure >
<img id ="Dog" src="img/Dog.jpg" width="500" height="550"> 
<figcaption id ="Caption_Dog">Изображение 1</figcaption>
</figure>
    <figure >
<img id ="Boy" src="img/boy.jpg" width="500" height="550"> 
<figcaption  id ="Caption_Boy">Изображение 2</figcaption>
</figure>
      <p><a href="#" onClick = "swapImage()">Поменять местами</a></p>
</body>
</html>

Изображения, указанные в разметке, должны быть размещены в папке img:

Результат совместного тестирования трех страниц на мобильном устройстве:

Страницы:

Ход выполнения работы:

Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> DomAndCanvas.

<!DOCTYPE html>
<html>
    <head>
        <title>Dom and Canvas</title>
    </head>
    <body>
        <div class="app">
            <h1>Dom and Canvas</h1>
                <menu>
             <li>
              <h1>
                <a href ="Graphic.html">Страница с Canvas</a> - ссылка на страницу Graphic.html
              </h1>
            </li>   
            <li>
              <h1>
                <a href ="Dom.html">Страница с DOM</a> - ссылка на страницу Dom.html
              </h1>
            </li>               
               </menu>
            </div>
    </body>
</html>

Главная страница имеет две гиперссылки на другие страницы которые пока отсутствуют.

Создайте в папке www новую страницу Graphic.html, демонстрирующую возможности тега <canvas>.

Код страницы:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
      minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Graphic</title>
      <script type="text/javascript">
        CanvasMaster=new Object();
        CanvasMaster.showCanvas=function()
        {
        canvasNow  = document.getElementById("sunset");
        contextNow = canvasNow.getContext('2d');
        sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
        sunsetGradient.addColorStop(0, "yellow");
        sunsetGradient.addColorStop(1, "#cc0000")
        contextNow.fillStyle = sunsetGradient;
        contextNow.beginPath();
        contextNow.arc(100,100,75,0,Math.PI*2,false);
        contextNow.closePath();
        contextNow.fill()
        }
      </script>

  <style type="text/css">
    <body>
      {
      font-family:Verdana, Geneva, sans-serif;
      color:#cc0000;
      }
     </style>
      
        <title>Sunset</title>
        </head>
        <body onLoad="CanvasMaster.showCanvas()">
          <figure>
            <canvas id="sunset" width="400" height="400" > Как жаль, 
что вы не можете увидеть прекрасный закат из-за того, 
что ваш браузер не поддерживает HTML 5!</canvas>
            <figcaption>
              <p>Закат</p>
            </figcaption>
          </figure>
    </body>
</html>

Пояснения к JavaScript - коду, содержащему свойства и методы объекта Canvas:

CanvasMaster=new Object(); - создание пользовательского объекта CanvasMaster;

CanvasMaster.showCanvas=function() - объявление функции showCanvas;

canvasNow = document.getElementById("sunset"); - определение объекта, как метода объекта document, имеющего имя sunset;

contextNow = canvasNow.getContext('2d'); - canvas используется в плоскости;

sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379); - создание градиента.

Еще один пример заливки:

var gradient=ctx.createLinearGradient(0,0,0,170);
gradient.addColorStop(0,"black");
gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Результат заливки:

sunsetGradient.addColorStop(0, "yellow"); -цвет начинающий заливку;

sunsetGradient.addColorStop(1, "#cc0000") - цвет завершающий заливку;

contextNow.fillStyle = sunsetGradient; - применение параметров стиля;

contextNow.beginPath(); - отрисовка окружности;

contextNow.arc(200,200,150,Math.PI*2,false);

contextNow.closePath().

Пояснения метода arc():

Первые два параметра являются центром окружности;

третий параметр отвечает за радиус;

четвертый параметр отвечает за длину нарисованной окружности в радианах;

пятый параметр определяет выбор отрисовки четвертого параметра.

Пример 1 рисования дуги:

ctx.beginPath();
ctx.arc(200,200,150,0,Math.PI*2,false);
ctx.stroke();

Результат:

Пример 2 рисования дуги:

ctx.beginPath();
ctx.arc(200,200,150,0,Math.PI*1.5,false);
ctx.stroke();

Результат:

contextNow.fill() - выполнение заливки.

Вызов JavaScript - кода выполняется при загрузке страницы, этому событию соответствует тег

<body onLoad="CanvasMaster.showCanvas()">

Пример тестирования страницы Graphic.html:

Код страницы (пояснения содержатся в лекции 8):

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<script type="text/javascript">
    var flag = true;
    function swapImage() {
        var image_Object1 = document.getElementById("Dog");
        var image_Object2 = document.getElementById("Boy");
        if (flag == true) {
            flag = false;
            Boy.src = "img/Dog.jpg";
            Dog.src = "img/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "Мальчик ВИТЯ";
            document.getElementById("Caption_Boy").innerHTML = "БОБИК";

        }
        else {
            flag = true;
            Dog.src = "img/Dog.jpg";
            Boy.src = "img/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "ЖУЧКА";
            document.getElementById("Caption_Boy").innerHTML = "Мальчик ПЕТЯ";
        }
    }

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type ="text/css">
 body,a {
     font-size:50px
 }
</style>
<title>Обмен изображений</title>
</head>
<body>
<figure >
<img id ="Dog" src="img/Dog.jpg" width="500" height="550"> 
<figcaption id ="Caption_Dog">Изображение 1</figcaption>
</figure>
    <figure >
<img id ="Boy" src="img/boy.jpg" width="500" height="550"> 
<figcaption  id ="Caption_Boy">Изображение 2</figcaption>
</figure>
      <p><a href="#" onClick = "swapImage()">Поменять местами</a></p>
</body>
</html>

Изображения, указанные в разметке, должны быть размещены в папке img:

Результат совместного тестирования трех страниц на мобильном устройстве:

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Использование возможностей DOM в мобильных разработках

Ход выполнения работы:

Ход выполнения работы:

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!