JS初识，了解

• 什么是前端 

Web是网络的基石

前端：界面：计算机（pc）端桌面软件的界面，计算机端的浏览器界面，移动端的浏览器的界面。

使用网页技术HTML+CSS+Javascript 开发界面；

HTML+CSS+Javascript 的关系；

HTML      架构师，网页内容

Css        修饰师，装饰内容

Javascript   魔术师，网页进行交互

• 什么是Javascript ;

1. Javascript 的缩写 JS
2. Javascript 与 CMASscript的关系；

   Javascript 与 CMASscript的一种实现，CMASscript 是 Javasctipt 的一个标准。

1. JS是一种脚本语言，弱数据类型，基于对象事件，基于事件驱动的一种语言。

   Js是解释执行的，解释器是浏览器。

• JS的特点

1. 脚本语言；JS是一种解释型的脚本语言，C  C++  Java 等语言先编译后执行，而Js是在程序进行过程中逐行进行解释的。
2. 基于对象；JS是一种基于对象的脚本语言，它不仅可以创建对象也能使用已有的对象。
3. 简单；JS语言中采用的是弱数据类型的变量类型，对使用的数据类型未作出平格的要求，是基于Java基本语句和控制的脚本语句，其设计简单紧凑。
4. 动态性；JS是一种采用事件驱动的脚本语言，它不要经过web服务器就可以对用户的输入做出相应，在访问一个网页时鼠标在网页中进行点击或者上下移动，窗口移动等操作，JS都可以直接对这些事建做出相应的相应。
5. 跨平台性；JS脚本语言不依赖操作系统，仅需要浏览器的支持，因此一个JS脚本在编写后可以移动到任何机器上使用，前提上机器的浏览器的支持JS脚本语言，目前JS已被大多数浏览器的支持。

• JS的应用

网页的开发

网站的前端开发；给网页添加动态效果

网络的后端开发，Nsde JS  让程序员可以使用JS自由的书写后端

移动端的开发；

 Web app ; Html 提供了很好的API支持，可以实现原生应用拥有的大部分功能，但是性能有待提高，像 friefox os就基于web app 的移动系统。

混合式开发；把原生应用的一部分应用前端技术，使原生应用更加灵活，很多应用这样做 phoneGop , Reat Native , 之类的平台的出现允许程序员使用JS来进行移动开发。

可视化数据开发  

• JS的构成

1. Ecmas script   语言基础
2. Dom                对文档中的元素的操作
3. Bom              对浏览器进行操作  

• 初识

   一）、JS的编写

1. 使用Editplus  

1.  、常用快捷键

1. ctrl + shift + n       创建一个新的Html 的文件
2. Ctrl+c             复制
3. Ctrl+v             粘贴
4. Ctrl+x             剪切
5. Ctrl+b             按照指定的浏览器打开Html 文件

无法打开；工具》首选项》工具》其他浏览器》浏览器地址

• 、JS的编写

          Java script: 实现网页交互的脚语言

          交互 ：   用户输入数据》程序接收并处理数据

                    返回输入结果   》》

          如何编写JS:

1. 通过浏览器进行编写
2. 通过HTML中的<script>标签进行编写
3. 通过<script>标签中的src文件进行编写

 

• 、代码运行顺序

    js如何运行：

浏览器中包含2个引擎：

    1. 内容排版引擎 - 解析html和css的

2. 脚本解释引擎 - 解释并执行JavaScript程序脚本语言的引擎

  解释执行：默认都是自上而下逐行执行的

当页面加载完成后，修改id为box的div的内容

1. 通过Dom（文档对象模型）的API查找到id为box的div元素对象

api: 应用程序接口

window.οnlοad=function(){ // 当页面加载完成后，才执行事件处理函数中的操作

    var box=document.getElementById("box");

console.log(box);// null  -  空

box.innerHTML="  "; // 通过innerHTML属性修改元素对象的显示内容

}

      解释；在无window.οnlοad=function(){ } 事件时，程序执行方式是至上往下执行，则var box=document.getElementById("box");   console.log(box);// null    box.innerHTML="  ";该程序执行为空，因为该程序在BOD上方时无法找到该box.

则该改为下方