前端个人总结 之 js 1

前端三大块 
1、HTML：页面结构 
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果 
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript --js --1995年: 为了表单验证 
在1995年之前,没有任何一个脚本语言是运行在浏览器端,都是运行在服务器端 
livescript --JavaScript(行内式 内嵌式 外链式)


----------------------------js嵌入页面的方式----------------------
行内式  (要求--行内式js必须是以事件的格式出现 onclick k="v")

嵌入式(内嵌式)

外链式

   
--------------------变量类型和基本语法---------------------------
数值型: number;
字符串型: string;
布尔型: boolean;
对象型(null:空对象, 非空对象): object(也成复合对象);
未定义型: undefined;


变量、函数、属性、函数参数命名规范;----------------
1、区分大小写 
2、第一个字符必须是字母、下划线（_）或者美元符号（$） 
3、其他字符可以是字母、下划线、美元符或数字


-------------匈牙利命名风格：------------- 
变量命名: 在变量名前加入数值类型
对象o Object 比如：oDiv 
数组a Array 比如：aItems
字符串s String 比如：sUserName 
整数i Integer 比如：iItemCount 
布尔值b Boolean 比如：bIsComplete 
浮点数f Float 比如：fPrice 
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck




-------------------定义函数--------------------------


function fnAlert(){ alert('自定义函数的alert') }


变量不支持预解析, 函数支持预解析; 
运算符的改变: &&(and) ||(or) !(not)


-----------------------事件属性------------------------ 
事件语法: 操作的标签的变量.事件属性(事件类型) = function(){命令} 
单机事件: onclick; 鼠标滑过: onmouseover;
鼠标离开: onmouseout; 
window.onload = function(){ 
    var oBtn = document.getElementById('btn1'); 
    oBtn.onclick = myalert; 
    function myalert(){ alert('ok!'); 
    
    // 直接将匿名函数赋值给绑定的事件 
    oBtn.onclick = function (){ alert('ok!'); } 
}


:----------'return'关键字--------------- 
1、返回函数中的值或者对象 
2、结束函数的运行


---------------条件语句--------------------


if(条件){执行}
else if(条件){执行}
else{执行}


-----------------获取元素方法-----------------
     可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素， 
获取到的是一个html对象，然后将它赋值给一个变量


window.onload = function () { alert("hello world"); 
// 定义一个变量,改变css,和html 
var myBox = document.getElementById('box'); 
var oLink = document.getElementById('mylink') 


// 读取属性值 
var sValue = myBox.value; 
var sType = myBox.type; 
var sName = myBox.name; 
var sLinks = oLink.href; 
// 写(设置)属性 
mybox.style.height = '400px'; 
oLink.href = 'pifu1.css;


// 读取或者写入标签包裹的内容:
mybox.innerHTML = 'JavaScript'
mybox.innerHTML = '

JavaScript

';


-----------------------事件属性------------------------
事件语法: 操作的标签的变量.事件属性(事件类型) = function(){命令}
单机事件: onclick;
鼠标滑过: onmouseover;
鼠标离开: onmouseout;
window.onload = function(){ 
    var oBtn = document.getElementById('btn1'); 
    oBtn.onclick = myalert; 
    function myalert(){ 
        alert('ok!');
    
    // 直接将匿名函数赋值给绑定的事件
    oBtn.onclick = function (){
        alert('ok!');
} }


--------------控制link标签的href属性的值---------------- 
js控制html属性：只有class属性在js中是className， 
其余的所有html属性写法html和js完全相同
mybox.style.height
mybox.innerHTML可以读取或者写入标签里的内容
oLink.href = 'pifu1.css' // 控制css外链式