# Trabajar con Scripts del Cliente ¶

> Nota: Esta sección se encuentra en desarrollo.

### Registrar scripts ¶

Con el objeto yii\web\View puedes registrar scripts. Hay dos métodos dedicados a esto: registerJs() para scripts en línea registerJsFile() para scripts externos. Los scripts en línea son útiles para configuración y código generado dinámicamente. El método para agregarlos puede ser utilizado así:

    $this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');

El primer argumento es el código JS real que queremos insertar en la página. El segundo argumento determina en qué parte de la página debería ser insertado el script. Los valores posibles son:

- View::POS_HEAD para la sección head.
- View::POS_BEGIN justo después de la etiqueta `<body>`.
- View::POS_END justo antes de cerrar la etiqueta `</body>`.
- View::POS_READY para ejecutar código en el evento `ready` del documento. Esto registrará jQuery automáticamente.
- View::POS_LOAD para ejecutar código en el evento `load` del documento. Esto registrará jQuery automáticamente.

El último argumento es un ID único del script, utilizado para identificar el bloque de código y reemplazar otro con el mismo ID en vez de agregar uno nuevo. En caso de no proveerlo, el código JS en sí será utilizado como ID.

Un script externo puede ser agregado de esta manera:

    $this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

Los argumentos para registerJsFile() son similares a los de registerCssFile(). En el ejemplo anterior, registramos el archivo `main.js` con dependencia de `JqueryAsset`. Esto quiere decir que el archivo `main.js` será agregado DESPUÉS de `jquery.js`. Si esta especificación de dependencia, el orden relativo entre `main.js` y `jquery.js` sería indefinido.

Como para registerCssFile(), es altamente recomendable que utilices asset bundles para registrar archivos JS externos más que utilizar registerJsFile().

### Registrar asset bundles ¶

Como mencionamos anteriormente, es preferible utilizar asset bundles en vez de usar CSS y JavaScript directamente. Puedes obtener detalles de cómo definir asset bundles en la sección gestor de assets de esta guía. Utilizar asset bundles ya definidos es muy sencillo:

    \frontend\assets\AppAsset::register($this);

### Registrar CSS ¶

Puedes registrar CSS utilizando registerCss() o registerCssFile(). El primero registra un bloque de código CSS mientras que el segundo registra un archivo CSS externo. Por ejemplo,

    $this->registerCss("body { background: #f00; }");

El código anterior dará como resultado que se agregue lo siguiente a la sección head de la página:

    <style>
    body { background: #f00; }
    </style>

Si quieres especificar propiedades adicionales a la etiqueta style, pasa un array de claves-valores como tercer argumento. Si necesitas asegurarte que haya sólo una etiqueta style utiliza el cuarto argumento como fue mencionado en las descripciones de meta etiquetas.

    $this->registerCssFile("http://example.com/css/themes/black-and-white.css", [
        'depends' => [BootstrapAsset::className()],
        'media' => 'print',
    ], 'css-print-theme');

El código de arriba agregará un link al archivo CSS en la sección head de la página.

- El primer argumento especifica el archivo CSS a ser registrado.
- El segundo argumento especifica los atributos HTML de la etiqueta `<link>` resultante. La opción `depends` es especialmente tratada. Esta especifica de qué asset bundles depende este archivo CSS. En este caso, depende del asset bundle BootstrapAsset. Esto significa que el archivo CSS será agregado después de los archivos CSS de BootstrapAsset.
- El último argumento especifica un ID que identifica al archivo CSS. Si no es provisto, se utilizará la URL del archivo.

Es altamente recomendable que ustilices asset bundles para registrar archivos CSS en vez de utilizar registerCssFile(). Utilizar asset bundles te permite combinar y comprimir varios archivos CSS, deseable en sitios web de tráfico alto.