основы яваскрипт – вопросы.
<script type="text/javascript">
var div_class = ''; var div_id = ''; var span_class = ''; var span_id = ''; </script> такие имена можно дать переменным? |
На здоровье, нельзя использовать зарезервированное в языке, все иное как угодно.
|
Блондинка,
Имена переменных |
вопрос № 2
как присвоить значения этим переменным, при условии что эти значения есть в определённом элементе с конкретным названием ид'а? и при втором условии что одна из этих четырёх значений может иметь несколько значений? |
var div_class = document.querySelectorAll('.имя класса')[номер элемента].textContent
var div_id = document.querySelector('#ид элемента').textContent
|
и само сабой id на странице должны быть уникальны
|
vanished
|
Цитата:
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { background: #a6ffff; border: 1px solid #3232cc; width: 90%; padding: 10px 35px; margin-bottom: 1em; }
</style>
</head>
<body>
<pre><code id="code-1">
<!DOCTYPE html><br>
<html><br>
<head><br>
<meta charset="utf-8"><br>
<title>border-radius</title><br>
<style><br>
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; }<br>
#a { border-radius: 50px 0 0 50px; }<br>
#b { border-radius: 40px 10px; }<br>
#c { border-radius: 13em/3em; }<br>
#d { border-radius: 13em 0.5em/1em 0.5em; }<br>
#e { border-radius: 8px; }<br>
.span_bold { font-weight: bold; }<br>
#span_ital { font-style: italic; }<br>
</style><br>
</head><br>
<body><br>
<div class="radius"></div><br>
</body><br>
</html>
<code/></pre><br>
<div style=""><span style=""></span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.
</body>
</html>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 40px 10px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 40px 10px;</span></div> <div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 40px 10px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 40px 10px;</span></div> <div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 13em/3em;"><span style=" font-weight: bold; font-style: italic;">border-radius: 13em/3em;</span></div> <div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 13em 0.5em/1em 0.5em;"><span style=" font-weight: bold; font-style: italic;">border-radius: 13em 0.5em/1em 0.5em;</span></div> <div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 8px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 8px;</span></div>
<script type="text/javascript">
var div_class = document.querySelector('.radius').textContent;
var div_id = document.querySelector('#a').textContent;
var span_class = document.querySelector('.span_bold').textContent;
var span_id = document.querySelector('#span_ital').textContent;
</script>
вроде так |
но ведь искать то надо не на странице, а только в пределах <code id="code-1">.
|
document.querySelector('#code-1.radius')
|
Значит правильно так
<script type="text/javascript">
var div_class = document.querySelector('#code-1.radius').textContent;
var div_id = document.querySelector('#code-1#a').textContent;
var span_class = document.querySelector('#code-1.span_bold').textContent;
var span_id = document.querySelector('#code-1#span_ital').textContent;
</script>
|
laimas,
просто скажи, правильно или нет, и что не так |
Цитата:
|
Цитата:
|
laimas,
я наверное скоро начну ругаться семиэтажным, когда я пытаюсь что-то понять и кто-то что поясняет, тебе нужно прервать процесс моих попыток что понять из основ js, если самому трудно довести до логического завершения написанный тобой сценарий. |
Цитата:
Я вам говорил и не раз как правильно, а как может закончится результатом то, что изначально уже не правильно. Ну нет на вашей странице элемента с классом radius, это текст у вас, в котором описан элемент с этим классом. 1) Говорил я вам, что не обязательно пересаживаться в другую машину, чтобы ехать быстрее? Вы же долго и упорно хотели выдирать код из текста. 2) Ладно, написал как вы и хотите - просто, до безобразия просто, получили текст как объекты DOM которые в вставляем в контейнер. То есть на каждой из своих страниц вам нужен один и тот же ну очень простой код, и соглашение - на страницах должен быть контейнер с одним и тем же id, а элементы родители описывающие код иметь определенное имя класса, по которому они будут извлекаться. 3) Вы, видимо, поняли, что вторая машина и впрямь не нужна, но с упорством продолжаете выдирать данные из текста, вместо того, чтобы их определять явно. Вопрос - как вас можно направить/заставить делать так, как это и делается, по уму, если у вас нет концепции, а значит и стратегии не будет? Автоматизация, это не означает - пишу что хочу, а там дай бог есть средство, которое все будет выдирать и вставлять на место. |
laimas,
можешь объяснить как выдрать из текста нужные куски и присвоить этим переменным? <script type="text/javascript"> var div_class = document.querySelector('#code-1.radius').textContent; var div_id = document.querySelector('#code-1#a').textContent; var span_class = document.querySelector('#code-1.span_bold').textContent; var span_id = document.querySelector('#code-1#span_ital').textContent; |
Цитата:
Я ведь вам писал такой пример. Да можно, но вся беда в том, что это будет работать конкретно для текущей страницы, а на других уже нет. Универсального же вы вряд ли напишите. То есть, для каждой из страниц придется писать свой такой парсер, которому явно указывать что и где искать. А из этого вытекает вопрос - зачем же, зная что нужно найти, искать это, а это могут быть и весьма затратные операции, вместо того, чтобы их прописать явно как данные для скрипта? Это мой аргумент. |
laimas, можно просто доработать этот скрипт?
<script>
var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'], step = 0;
document.querySelector('.radius').addEventListener('click', function() {
step = ++step % 5;
this.style.borderRadius = radius[step];
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step] + ';';
})
</script>
|
Цитата:
Посмотрите на свой код в посте #9. Не странно ли то, что вы описываете стили для блоков дважды - первый раз глобально в CSS и второй раз встроенными стилями. В данном посте непосредственно в тексте описания нет такого, ну в предыдущих темах это есть. Здесь же вместо того, чтобы определить общие стили для блоков также через CSS (как и в описании), вы их почему-то встраиваете в каждый элемент. Зачем? Элемент PRE отображает текст как есть, то есть все переводы строк будут действовать так же как и BR в html, дублировать это поведение еще и добавлением BR совсем ни к чему. Заменять кавычки в тексте описания кода на html сущности не обязательно, обязательно заменять < > и &. Первые используется в тегах, а последнее в html сущности. Ну это прелюдия, а вот далее вообще не понятно. Какие цели вы ставите перед своим приложением? Пусть это будет демонстрация CSS правил. Если вы хотите на всех страницах с правилами иметь однотипные операции, что вполне входит в понятие "автоматизация", то почему вы зациклились на radius? Я не в том смысле, что уже в нескольких темах вы пишите о border-radius, я о том, почему вы хотите иметь автоматизацию, но при этом определяете элементы демонстрации не глобальными для всех страниц, а привязываете их для каждой страницы индивидуально? А как же тогда скрипт, если, к примеру, он может быть, мягко говоря, "универсальным", то определение демонстраторов для каждой страницы не позволит быть ему универсальным. Пусть, хотя бы как предположение, вы хотите на каждой страницу показывать CSS правила с различными значениями. Страницы вы будет писать сами. Но уже для них явно есть то, что будет общим для них всех. А значит это общее не выгодно писать на каждой странице, а выгодно описать раз и подключать на каждой. Вот так можно представить все страницы.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#visualizer {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Chapter border-radius</h1>
<p>Descriptor</p>
<h2>Code</h2>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
div {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
}
.a {
border-radius: 50px 0 0 50px;
}
.b {
border-radius: 40px 10px;
}
.c {
border-radius: 13em/3em;
}
.d {
border-radius: 13em 0.5em/1em 0.5em;
}
.e {
border-radius: 8px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</body>
</html>
</pre>
<h2>Visualization</h2>
<div id="visualizer"></div>
<p id="informer"></p>
<script>
//определили правила и значения демонстраций для текущей главы
var rules = [
{ name: 'border-radius', values: ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'] }/*,
{ name: 'box-shadow', values: ['0 0 10px rgba(0,0,0,0.5)', '2px 3px 10px rgba(0,0,0,0.5)', '1px 0 15px rgba(0,0,0,0.5)', '5px 5px 10px rgba(0,0,0,0.5)', '-5px 10px 20px rgba(0,0,0,0.5)'] }*/
];
</script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
Она содержит заголовок, блок описания, блок кода, и блок демонстрации (в HTML5 достаточно тегов для определения таких блоков, здесь же простые). Общее в стилях для всех страниц определено в подключаемом файле стилей style.css.
body {
font-size: 14px;
}
pre {
font-family: sans-serif;
color: #012E71;
}
#visualizer {
cursor: pointer;
}
#informer {
color: #D36A01;
}
Общие стили для блоков описаны в шапке страницы, так же как и в тексте описания кода. Но только конкретно для блока демонстратора. Если эти общие правила будут верны для всех страниц, то их можно перенести в подключаемый css-файл. Но такого скорее не может быть, а значит на каждой странице они свои. В самом тексте описания общие правила объявляются не через имя класса, а через тег, а различные правила через классы. Не обязательно для этого id, его назначение в общем-то иное, и к тому же, имя класса может быть и составным. Боксы демонстратор и информатор на всех страницах имеют одно и тоже id, в данном примере это visualizer и informer. Указывать их в тексте описания кода совсем не требуется, это рабочие имена, скрытие от пользователя. Если их менять, то менять нужно и в JS коде, иначе ничего работать не будет. |
На каждой странице вам нужно определить значения для css, которые надо продемонстрировать. Этого достаточно, все остальное возьмет на себя подключаемый js-файл, который единый для всех страниц. Но тут встает вопрос - достаточно ли определить наборы изменяемых значений как массив? Если стили, которые будут описаны на ваших страницах для этого требуют только одно css правило, то да. А если для этого потребуется более одного правила?
Лучше определять правила как массив объектов, в котором указаны правила и их изменяемые значения, в примере это rules. Здесь нужно только соблюдать соглашение - количество изменяемых значений у каждого правила должно быть одинаково (хотя и этот вопрос решаем, но пока это не рассматривается). В примере после запуска, просмотра, удалите комментарий объекта описывающего правило box-shadow, будут работать два правила. Подключаемый js-файл js.js работает с определенными в объекте rules css правилами и их значениями, которые применяет к объекту демонстратору #visualizer и отображает их в объекте #informer
var i = 0, //кольцевой счетчик демонстраций
k = rules[0].values.length, //определили количество демонстраций
visual = document.getElementById('visualizer'), //объект демонстратор
info = document.getElementById('informer'); //объект информатор
//показываем первую демонстрацию
getRules();
//устанавливаем обработчик смены демонстраций
visual.addEventListener('click', function() {
//увеличили счетчик демонстраций, если он выйдет за пределы, то установим его в начало
i = ++i % k;
//показать следующую демонстрацию
getRules();
});
//функция применения и отображения текущих стилей
function getRules() {
//получим все правила и значения текущей демонстрации
var a = rules.map(function(e) {
//формируем и возвращаем в массив правило и его значения
return e.name + ': ' + e.values[i];
});
//применим правила к объекту демонстратору
visual.style.cssText = a.join(';');
//покажем правила в объекте информаторе
info.innerHTML = a.join(';<br>');
}
|
А полная автоматизация, это уже динамические страницы. Нет смысла все расписывать подробно. Автоматизировать процесс создания страниц, это определять:
1) Заголовок страницы для правила. Эти определения могут быть записаны в базу (желательно) либо в файл как json. На базе этих записей при формировании страниц будет автоматически строится меню. 2) Описание страницы можно выполнять в визуальном редакторе, а правила стилей описать в подключаемом css. 3) Описывать html код, как есть, который также будет сохраняться на сервере как данные для соответствующей страницы. Выводе его как текст-описание возьмет на себя сервер. 4) Определять для правила его набор значений для демонстраций. Сервер сохранит их как данные, которые автоматически при выводе страницы подставит для объекта rules. Шапка и подвал страниц, это одинаковые разовые определенные шаблоны, в которых динамически будут подставляться значения из определенных для каждой страницы правил. Из этих шаблонов, а также данных и будут динамически формироваться страницы как результат запроса меню, в котором определен параметр, например, page, значением которого может быть имя css правила. |
Цитата:
Цитата:
Блондинка, нужно начать с того, что определимся, как может выглядеть структура данных учебника по CSS. Маленькое отступление. Когда в 1996 году вышла спецификация CSS 1, то она была размером, так сказать с большую статью, и вы могли выучить CSS за день. Но когда в 1998 году вышла CSS 2, она была настолько большая, что в печатном виде занимала примерно 500 страниц (пачка листов, или томик), и уже тогда стало ясно, что дальнейшее развитие CSS становится слишком громоздким для одной спецификации. Так что движение вперёд означало разбиение на множество отдельных модулей, каждый с собственным номером версии. Модули, которые расширяли возможности CSS 2.1, нумеровались как версия 3. Вот примеры таких модулей:
Однако модули, выражающие, совершенно новые идеи, нумеруются с первой версии:
Я считаю, что учебник должен быть разбит на разделы, соответствующие модулям CSS. Например, в разделе посвященному модулю Flexible Box Layout, собрано всё про «флэксбокс». В каждом модуле могут описываться — свойства, дескрипторы, селекторы, @-правила, значения. Это список ссылок. При нажатии на одну из них открывается пример и т.д. Вот как выглядит заготовка для такого объекта:
var data = {
"css-background-3": {
"title": "Backgrounds and Borders Level 3",
"properties": {
"background-repeat": ["repeat", "space", "round", "no-repeat"],
"border-radius": [
"10px",
"50%",
"10px / 20px",
"2px 4px 8px 16px"
],
"box-shadow": [
"1px 1px", "0 0 black", "1px 2px 3px black",
"1px 2px 3px 4px black", "inset 1px 1px",
"1px 2px 3px 4px black inset"
]
}
},
"css-images-3": {
"title": "Image Values Level 3",
"values": {
"properties": [
"background-image",
"list-style-image",
"border-image",
"cursor",
"content"
],
"linear-gradient": [
"linear-gradient(to right, white, black)",
"linear-gradient(white 5px, black)",
"linear-gradient(white, #f06, black)"
],
"radial-gradient": [
"radial-gradient(white, black)",
"radial-gradient(circle, white, black)",
"radial-gradient(ellipse, white, black)"
]
},
"properties": {
"object-fit": ["fill", "contain", "cover", "none", "scale-down"]
}
}
};
Вам, нужно, это проделать для всех модулей со всеми свойствами, дескрипторами, селекторами, @-правилами, значениями. Когда, у вас будет такой объект, то вы сможете легко работать с этими данными. Строить примеры, создавать меню, совершать поиск и пр. |
попытаюсь еще раз объяснить
неизвестно сколько на каждой странице контейнеров с кодом и див'ов-демонстраторов, допустим их больше одного, тогда для меня достаточно присвоить и контейнеру и див'у индетификаторы(ид), и дважды поставить (контейнер с кодом, див-демонстратор скрипт) на одной странице или на разных но стиль дива-демонстратора может быть разным, неудобно демонстрировать (и наблюдать) разные свойства на див'е с общей шириной в 90%, поэтому я и пытаюсь уйти от внутренних стилей и прийти к встроенным, нельзя предугадать какое свойство я буду описывать завтра, следовательно неизвестно какой именно элемент будет демонстратом, значит надо попытаться присвоить начальные стили обоим элементам, и див'у и спану, для этого я вчера и пыталась найти и присвоить значения четырём переменным. а потом уже надо определять значения какого свойства будут меняться при клике и сколько раз, и у какого именно элемента – див'а или спан'а |
laimas,
а сейчас можно вернуться к прелюдии, если этот же скрипт сможет еще и преобразовать нормальный код в текст, тоесть < & > в сущчности, что позволит мне в контейнер пре засовывать нормальный код, то большего мне и не нужно. |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
laimas,
ладно, отбросим 26 пост, в 25 посте всё указано |
Блондинка, я читал, и это понятно, что не все одним маслом будет мазано. Но почему вы не группируете схожие задачи, отдавая их на исполнение одному сценарию? У вас же явно прослеживается индивидуальность, а ведь даже и среди описаний правил схожих однотипных сценариев будут много.
Хотя после последнего вашего заявления я уже не знаю, что вы на самом деле хотите. ) |
laimas,
можно просто дополнить скрипт исходя из поста 25? |
Дополнить чем?
|
Блондинка, может я не понял, но если смысл вашего вопроса "один подключаемый файл сценариев", то да. Но прежде чем дополнять, нужно определиться, например, все боксы демонстраторы имеют в имени своем одну общую для всех часть и части которые их группируют. Например, box-group, отображает все все схожие по структуре "правило - значения" стили, и за которым определен один сценарий, а за box-shadow закреплено нечто индивидуально навороченное.
|
четырьмя переменными в которых стили класса и ид'а див'а и спан'а скопированные из контейнера а если в контейнере нет нужного, то присвоить значение null, и добавлением ид'ов элементам pre div span если они не имеют.
|
Тут я вам не советчик. Я тоже не сторонник интерфейса, в котором нужно щелкать по боксу чтобы увидеть применение стиля, о чем вам и другие говорили. Но уж коли вы так определили, то это должно быть везде без исключения, пользователь должен понимать что ему делать на всех страницах учебника, а не выяснять на каждой, что предпринимать. А наличие информатора или его отсутствие, тут уж вам виднее.
|
Что групировать, куда, зачем? есть контейнер с кодом, есть див со спаном – демонстраторы есть скрипт, а больше ничего нету.
|
Цитата:
Я не часть ваших мыслей, что у вас в голове я не знаю. :) Но я уверен, что все это следствие того, что у вас не определена общая концепция вашего приложения. |
| Часовой пояс GMT +3, время: 11:49. |