HTML - Como separar el contenido de una pagina web

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 42 puestos en HTML (en relación al último mes)
Gráfica de HTML

Como separar el contenido de una pagina web

Publicado por Salvador (3 intervenciones) el 22/12/2018 18:34:00
Buenas tardes, estoy estudiando informática y como uno de mis primeros proyectos, me han mandado a hacer una página con html, css y javascript donde debemos separar por archivos el contenido de cada uno de ellos por ejemplo si quiero poner un texto, el texto en sí lo programo con un archivo de html, el estilo con uno de css y la función que cumpla con uno de javascript, Pues bien, tengo esto:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
 
#myImg:hover {opacity: 0.7;}
 
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
 
/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
 
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
 
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}
 
@keyframes zoom {
  from {transform: scale(0.1)}
  to {transform: scale(1)}
}
 
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
 
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
 
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>
 
 
<img id="myImg" src="img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">
 
<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
 
<script>
 
var modal = document.getElementById('myModal');
 
 
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
 
 
var span = document.getElementsByClassName("close")[0];
 
 
span.onclick = function() {
  modal.style.display = "none";
}
</script>
 
</body>
</html>

como ejemplo para hacer una cosa y no puedo separar el javascript del html, ¿Cómo lo hago?
¿Cómo separo la parte de la imagen y el modal con la de la función de javascript?


Gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 619
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Como separar el contenido de una pagina web

Publicado por xve (1539 intervenciones) el 22/12/2018 19:34:26
Hola Salvador, no se muy bien donde tienes el problema, pero creo que es tan sencillo como cojer el código js y ponerlo en un archivo externo y luego incluirlo en tu código con:
1
<script type="text/javascript" src="tuArchivo.js"></script>

Es esto lo que solicitas?


NOTA: En el archivo.js, no tienes que poner los tags de html <script></script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar