javascript的第一天

javascript的第一天

主要是了解JavaScript的作用、体验、变量、事件、函数入口、模态框。

1.1 JavaScript的作用

• 1.1.1 网页特效
• 1.1.2 用户交互
• 1.1.3 表单验证

1.2 JavaScript的体验

• 1.2.1 alert() 弹出提示框
• 1.2.2 Console 控制台输出

使用代码	作用
Console.log()	控制台输出 普通输出语句
Console.warn()	控制台警示
Console.error();	错误提示

- 1.2.3 document.write() 文档打印输出

<script>
document.getElementById("demo").style.width = "300px";
</script>

1.3 JavaScript的变量

• 1.3.1 变量的命名规则!
• 1.变量命名必须以字母或是下标符号”_”或者”$”为开头。
• 2.变量名长度不能超过255个字符。
• 3.变量名中不允许使用空格。
• 4.不用使用脚本语言中保留的关键字及保留符号作为变量名。

<script>
var a = 10;
function fun()
{ a = "global"; }
console.log(a);
//输出 ？
var a;
function fun()
{ a = "global"; }
fun();
console.log(a);
</script>

• 1.3.2变量的作用域
• 根据变量的作用范围 可以分为 全局变量 和 局部变量
  全局变量：
  
  1. 在最外层声明的变量。
  2. 在函数体内部，但是没有声明var 的变量也是全局变量。
     局部变量：
     在函数体内部的 声明的变量

<script>
//在函数体内部，但是没有声明var 的变量也是全局变量。
var a = 1;
function fun(){
    a = b = 2;
}
func();
alert(a);
alert(b);
</script>

1.4 javascript事件的三要素

• 1.4.1 事件源 发起者 被触发者
• 1.4.2 事件 怎么触发的这个事情 一般情况下这个是 动词 点击 鼠标经过 按键盘

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

- 1.4.3事件处理程序 发生了什么事 = function(){ }

事件源.事件 = function(){  事件处理函数 }

<script>
/*要操作，先找事件源*/
var demo = document.getElementById("demo");//获取id为demo的盒子
var btn = document.getElementById("btn");//获得按钮
/*事件三要素*/
/*事件源.事件 = function(){}*/
btn.onclick = function(){
    demo.style.width = "400px";
}
</script>

1.5 javascript入口函数

• window.onload = function(){}

<script>
window.onload = function(){
    /*要做事，先找人*/
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");
    var pic3 = document.getElementById("pic3");
    pic1.onclick = function(){
        document.body.style.backgroundImage = "url(images/1.jpg)";
    };
    pic2.onclick = function(){
        document.body.style.backgroundImage = "url(images/2.jpg)";
    };
    pic3.onclick = function(){
        document.body.style.backgroundImage = "url(images/3.jpg)";
    };
};
</script>

1.6 模态框

<script>
window.onload = function(){
    //事件源：登录
    var login = document.getElementById("login");
    var mask = document.getElementById("mask");
    var box= document.getElementById("box");
    login.onclick = function(){
        //当我们点击登录，会弹出灰色的大盒子和白色的小盒子
        mask.style.display = "block";
        box.style.display = "block";
    };
    //事件源 span x
    var close_all = document.getElementById("close_all");
    close_all.onclick = function(){
        mask.style.display = "none";
        box.style.display = "none"
    };
};
</script>

1.7 javascript的书写位置

• 1.7.1 行内式

<button onclick="alert("你好吗？");"></button>

• 1.7.2 内嵌式

<script type=”text/javascript”>  </script>  任何一个地方

• 1.7.3 外链式

<script type=”text/javascript” src=”xx.js”></script>

1.8 数据类型

• Js 的数据类型分为：
  字符型 数值型 布尔型 null undefined
• 1.8.1 字符型 (string)
  string 转换为字符型
  
  1. 利用 “” (双引号) 加了引号的都是字符型。
  2. 利用String(); 转换为字符型
• 1.8.2 布尔型 (boolean)
  就两个值 正确的和错误的 true 和 false
  数据类型转换为布尔型：
  
  1. 利用 !!
     
console.log(typeof !!num);

  2. 利用 Boolean()
     false、undefined 、null、0、”” 为 false
     true、1、”somestring”、[Object] 为 true
• 1.8.3 数值型

 Var  num = 10

数值的前面带 0 表示 八进制

Var num = 020;

0*80+2*81 = 16
数值的前面带 0x 表示 十六进制

var result = 0xb; //11

转换为数值型:
1. 利用 - * / 都可以转换
2 利用Number( )
- 1.8.4 ParseInt() parseFloat()
parseInt(值, 进制);

parseInt(110,2) 

• 1.8.5 Null undefined
  Null 空的 没有值 。
  Undefined 未定义的 应该有值，但是没有给。
  Null “”

• -