基础-JavaScript

JavaScript

　发明人　　Brendan Eich　　布兰登·艾奇

　　　　　 后来，JavaScript兼容了ECMAScript标准,最新标准是ECMAScript6

作用:  　　

　　控制 "结构" 和 "样式"

使用

　　PC端　　移动端WebApp

　　Ajax异步交互技术的实现

　　逻辑的实现

特点

　　弱变量类型语言，由数据来决定数据类型，用var声明所有变量

　　解释型的脚本语言，运行前不需要编译，遇到错误就停止运行

　　程序员不需要管理内存

学习模块

　　基础核心　　基础语法

　　DOM　　　HTML中的元素的控制　　Document Object Model

　　BOM　　　浏览器的控制　　　　　　Browser Object Model

前台语言

　　作用在用户的电脑上

语法

　　对换行 空格 缩进不敏感

　　每一行以分号结尾，方便压缩

<!-- JavaScript --><script type="text/javascript" src="JavaScript/index.js"></script>

window里的内置对象

警告框 - win dow.alert　　

window.onload = function () {    /*弹出警告框*/    window.alert("人要是没有梦想,那跟咸鱼有什么分别 ");}

文档打印 - window.document.write

window.onload = function () {    /*文档打印输出*/    window.document.write("人要是没有梦想,那跟咸鱼有什么分别 ");}

console内置对象

window.onload = function () {    /*控制台打印输出*/    console.log("人要是没有梦想,那跟咸鱼有什么分别 ");    /*控制台警示*/    console.warn("2016-07-06 23：30 下班");    /*控制台报错*/    console.error("2016-07-06 23:29 脑抽了,待解决Bug");}

JS的简单使用

<div id="kQueen" class="kQueen"></div>

.kQueen {    width: 200px;    height: 200px;    ">red;}

/*加载完DOM再调用*/window.onload = function () {    /*kQueenDiv*/    var kQueenDiv = window.document.getElementById("kQueen");】    kQueenDiv.style.backgroundColor = "pink";}

变量

 JavaScript是弱类型的脚本语言

 变量的声明和初始化　 　　var kPigNumber = 3,kPigName = "HuaHua";

变量的命名规则：　　由 字母 数字 下划线 $符号 组成　　不能以数字开头　　区分大小写　　长度不能超过255字符　　不可以使用关键字和保留符号　　变量的作用域　　全局变量　　全局有效　　　　　　　　有var的，在函数最外层　　　　　　　　没有var的，在函数内直接使用（隐式的全局变量）　　局部变量　　局部有效　　　　　　　　只能有var，在函数内

事件三要素　　事件源　　　　　　触发事件的对象　　　　事件发起者　　事件　　　　　　　触发事件的条件　　　　发起者被怎样触发　　事件处理函数 　　 事件的响应函数　　　　具体触发什么　　　　onclick　　　　鼠标单击　　onmouseover　 鼠标遮盖　  onmouseout　　鼠标离开

<div id="kQueen" class="kQueen"></div>

<button id="kSolo">Solo</button>

.kQueen {    width: 200px;    height: 200px;　　">red;}

/*加载完DOM再调用*/window.onload = function () {    /*kQueenDiv*/    var kQueenDiv = window.document.getElementById("kQueen");】/*kSoloButton*/　　var kSoloButton = window.document.getElementById("kSolo");　　kSoloButton.onclick = function () {   　　 kQueenDiv.style.backgroundColor = "pink";　　}}

超链接

<a href="javascript:;" id="kPapi">触发</a>

window.onload = function () {    /*kPapiA*/    var kPapiA = window.document.getElementById("kPapi");    kPapiA.onclick = function () {    }}

练习题

输入任意数得出其 个位 十位 百位 之和

window.onload = function () {    var x = prompt("请输入字符串:");    var xFloat = parseFloat(x);    var ge = xFloat%10-xFloat%1;    var shi = xFloat/10%10-xFloat/10%1;    var bai = xFloat/100%10-xFloat/100%1;    console.log(ge+shi+bai);}

隐藏div的方法　　display;none;　　　　会清除大小，不占位置了　　visibility:hidden;　不会清除，占位置

显示div的方法　　display;block;　　　　　　visibility:visible;