变量的命名规范：
1，变量名的第一个字符必须是英文字符或下划线
2，变量名中只能是英文、数字、下划线 （$符号除外）
3，变量名不能是关键字
变量命名法：
1.小驼峰命名法 userName
2.大驼峰命名法 UserAge
3.匈牙利命名法 strUserTeam
&& 和 || 以及短路运算
1.逻辑与 &&（所有条件都为true，返回true；只要有一个是false，返回false；不一定返回boolean类型值）
1.1 如果前面操作数隐式类型转换后为true，则返回最后一个操作数
console.log(true&&9&&"您好")；//返回“您好”
1.2 如果前面有一个隐式转换后不是true，则返回第一个隐式转换为false的值（即短路的值）
console.log(“”&&true)；//返回空格
console.log(44&&0&&"hello");//返回0
console.log(55&&false&&0);//返回false
console.log(0&&null&&55);//返回0
console.log(NaN && 16 && "");//返回NaN
console.log("" && NaN && 12);//返回“”空字符串
1.3 当逻辑与的左边为 null/NaN/undefined ，结果就会得到null/NaN/undefined
console.log(55*“abc”&&true);//返回NaN
console.log(null&&true);//返回null
console.log(undefined&&true);//返回undefined
console.log(undefined&&null&&9&&NaN);//返回undefined
2.逻辑或 ||（只要一个条件为true，则返回true；都为false，则返回false）
1.1 可以操作任意类型的数据，不只是布尔型
1.2 返回值不一定是boolean类型（有一个为true，则返回true，后面就被短路了；都为false，一直走到最后一个，打印最后一个）
console.log(33<22||33>11);//返回true
console.log(undefined || null || 0);//返回0
console.log(undefined || 88 || 99 );//返回88
console.lof(undefined || 33>10 || false);//返回true
console.log(null || undefined || NaN);//返回NaN
console.log(NaN || undefined) ;//返回undefined
console.log("hellow" || NaN);//返回hellow
3.逻辑非 ！（可以操作任意类型的数据，返回值一定是boolean值；！！使用两个逻辑非操作符时——两次求反，为本来代表的boolean值）
进制转化
1.十进制转为其他进制
console.log( (16).toString(8) ); // 十进制的16转换为八进制
2. 其他进制转化为十进制
var r = parseInt('10', 2); // 二进制的"10"，转为为十进制时，结果为
console.log( r, typeof(r) ); // 2 number
console.log( parseInt('9', 8) ); // NaN 八进制的9是不存在的
3.定义各进制
3.1 定义八进制
console.log( 010 ); //8
// 如果一个数值，开头为0的话，看后面的数据，是否能表示八进制的数，如果能表示，则为八进制，否则为十进制
//console.log( 09 ); // 十进制
3.2 定义十六进制 （0x开头）
//console.log( 0x9 );
//console.log( 0xa );
//console.log( 0x10 );
事件驱动：
1. onunload
// 谷歌和火狐浏览器不支持
// IE刷新时能执行
window.onunload = function(){
alert("浏览器关闭时触发");
}
2. onselect
<span id="span1">span</span>
span1.onselect = function(){
alert("span");
}
3. onresize
<div id="div1"></div>
// 当浏览器窗口的大小发生变化时
// 浏览器的宽度高度发生变化时
window.onresize = function(){
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;
div1.innerHTML = w+" , "+h;
}
4. onreset onsubmit
<formid="form1"action="http://www.1000phone.com">
<inputtype="text"value="默认值abcd1234"/><br>
<inputtype="submit"value="提交按钮"/>
<inputtype="reset"value="重置按钮"/>
<inputtype="button"value="普通按钮"/>
</form>
// 当表单被重置时，触发函数
form1.onreset = function(){
alert("重置");
}
// 当表单被提交时，触发函数
form1.onsubmit = function(){
alert("提交了");
}
5. 鼠标事件
<div id="div1"></div>
// 鼠标进入div时
div1.onmouseover = function(){
this.style.background = "orange";
}
// 鼠标离开div时
div1.onmouseout = function(){
this.style.background = "skyblue";
}
// 鼠标按下时
div1.onmousedown = function(){
this.style.background = "greenyellow";
}
// 鼠标松开时
div1.onmouseup = function(){
this.style.background = "yellowgreen";
}
// 鼠标移动时
var i=0;
div1.onmousemove = function(){
this.innerHTML = i++;
}
6.键盘事件
<inputtype="text"id="input1"/>
<divid="div1"></div>
// 键盘按下
input1.onkeydown = function(){
//div1.style.background = "black";
console.log("down:", this.value);
}
input1.onkeypress = function(){
//div1.style.background = "red";
console.log("press:", this.value);
}
// 键盘按下后的松开
input1.onkeyup = function(){
//div1.style.background = "white";
console.log("up:", this.value);
}
7.img
<imgsrc="01.jpg"id="img1"/>
<spanid="span1"></span>
img1.onerror = function(){
span1.innerHTML = "图片载入失败";
}
img1.onload = function(){
span1.innerHTML = "图片载入成功";
}
8.click
<inputtype="button"id="btn1"/>
<inputtype="button"id="btn2"/>
btn1.onclick = function(){
alert();
}
btn2.ondblclick = function(){
alert("双击时");
}
9.change
<selectid="select1">
<option>red</option>
<option>green</option>
<option>yellow</option>
<option>orange</option>
<option>black</option>
</select>
select1.onchange = function(){
//body1.style.background = this.value;
document.body.style.background = select1.value;
}
10.blur
<inputtype="text"id="input1"/>
<spanid="span1">span</span>
// 当输入框失去焦点时，触发的函数
input1.onblur = function(){
span1.innerHTML = "失去了焦点";
}
// 当输入框获得焦点时，触发的函数
input1.onfocus = function(){
span1.innerHTML = "获得了焦点";
}
作用域
1.全局变量
//在函数内，可以直接使用全局变量
var a = 1;
function fn(){
alert(a); // 1
}
fn();
2.局部变量
//在函数外，不能直接使用局部变量
function fn(){ // 把函数的大括号范围理解成函数作用域
var a = 2; // 局部变量
alert( a ); // 2
// fn()函数执行后，会自动销毁变量a
}
fn();
alert( a ); // a is not defined
3.全局变量和局部变量名称相同时，指两个不同的变量。
var a = 5;
function fn(){
var a = 10;
alert( a );
}
fn();
alert( a ); // 5
4.未声明的 JavaScript 变量
function fn(){
a = 1; // 没有用var声明时，这个变量为全局变量
//alert( a );
}
fn();
alert( a );//1
5.
function fn(){
var a=b=2; // 2 2
// var a,b=2;//undefined 2 只声明了a，未赋值
console.log(a, b);
}
fn();
6.
var i = 10;
function fn(){
// 这一行是该fn函数的作用域的顶端
// alert( i ); //undefined 在函数作用域内能找到变量i，但尚未定义
var i = 5;
// alert( i ); //5
}
fn();
alert(i);// 10 访问外部的i
7.判断a是不是全局变量？
现在自身的作用域内查看，a是否有用var定义，如果没有用var定义的话，会向上一层作用域内查找，以此类推
声明提升
在浏览器真正的执行js之前，会先对js做预处理（编译过程, 声明提升）
声明提升：把变量或函数的定义部分，提升到作用域的顶端
变量和函数的赋值部分，位置不变，只有定义部分提升到作用域的顶部
优先级：函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖
1.
var a = 5;
function a(){
function b(){
alert(a);
}
b();
}
a();// a is not a function
2.
function fn1( a ){ // var a = 10 // 参数相当于在函数内 定义了一个变量，所以参数是局部变量
alert(a);
a = 5;
}
var a
a = 10;
fn1( a );
alert(a);
3.
function fn1( a ){
a = 5;
alert( arguments[0] ); //arguments[0] 和 a 指内存中相同的一块空间，所以改变一个值的时候，另一个值也会变
// arguments[0] = 7;
// alert(a);
}
fn1(2);
4.函数提升只会提升函数声明，而不会提升函数表达式
console.log(foo1); // [Function: foo1]
foo1(); // foo1
console.log(foo2); // undefined
foo2(); // TypeError: foo2 is not a function
function foo1 () {
console.log("foo1");
};//被提升
var foo2 = function () {
console.log("foo2");
};//未被提升
三目运算（三元运算）
? :
条件 ? 条件成立时，执行的代码 : 条件不成立时，执行的代码
网友评论