023.JavaScript基础综合

Posted 2020-08-28

javascript:
-------------------------------------------------------Day01-------------------------------------------
1.概念:
动态网站:网站的[动态功能]的开发技术
where:浏览器(客户端)
how:客户端动态功能的开发(客户端的表单验证,特效,客户端的计算...)
what:
脚本语言:能嵌套在其他语言中执行的语言
解释执行:按照程序顺序逐行的解释执行代码,不需要编译.
C#:编译(2次)执行
事件驱动:事件激发执行指定js代码
基于对象:具备面向对象的特征(封装,继承)内置了很多对象,可以简化程序开发.
2.基本语法:

注意:

1js应用方式.
1)行内嵌入.(代码量少)
2)页面内部.(网页内)
3)外部JS文件(重用,多个网页都可以引用,实现代码与html的分离)建议使用!

2js的简单调试.
3js是依赖于浏览器的,如果浏览器禁用javajs脚本那么功能就不会执行.
不同浏览器或者同一浏览器的不同版本,对于js的支持差异是不同的.

用于测试的浏览器:IE,FF(最标准),GOOGLE CHROME,苹果Safary

类型:
1.基本数据类型
Number:数(整数,小数)同一64位
String:文本(单字符,字符串)unicode 编码(双字节的编码格式)"",‘‘
Boolean:布尔 true(1),false(0),非0即真,0就是假
2.类型转换
自动类型转换:
string+Number ==> Number会自动转成String
String+Boolean ==> Boolean会自动转换成String
Boolean+Number ==> Boolean会自动转换成Number(true--1,false--0)
强制转换:
ParseInt() 字符串-->整型
ParseFloat() 字符串-->小数型
if(!isNaN(a)) isNaN(a) 为true代表a不是一个数
eval("") 将字符串转换为表达式,并且自动计算.
(JSON表达式) 客户端的计算,必须得是表达式
特殊类型:
null: 没有指向任何对象.
undefined: 未定义
1) 声明变量但是没有赋值
2) 对象的属性不存在

变量
弱类型(var:可变类型变量)
var nam1,name2
var可以省略,建议var还是要写
注意:1.function(参数)参数不需要写var
2.如果var是全局变量,那么var必须要写,不能省略(动态时钟时演示)

运算符
算数运算符:+,-,*,/,%,++,--
比较运算符:>,<,>,+=,<=,==,!=,===,!==
== (忽略了类型相等,底层做了类型转换)
=== (严格相等)
逻辑运算符:&&(短路与),&,||(短路或),|,!
f1(true) f2(false)
f2()&&f1() 短路与,当第一个表达式为false时,&&后面的表达式被短路,不被执行.
f2&f1() 与 无论如何两个表达都被执行
true||(?无论真假都会被短路)
false||(表达式会被执行不会被短路.)
true|f2(),两个表达式都会被执行.

控制语句(与C#类似):
1.实现一个等腰三角形 2.从大到小输出6个hello
document.write("<hr/>");
if
while
for

函数:
function 函数 (目前:可以把function看成是一个方法(更深入的在后面自定义对象中去学习))

语法:
function name(参数1,参数2...)
{
return val//返回值
//当方法没有返回值时,不用写return,系统默认返回true.
}

---------------------------------------------------------Day02-----------------------------------------
JS的对象(一切皆对象)

对象封装:方法,属性
实例化对象: var obj=new 对象();
调用方法 :obj.方法(val),obj属性
当前对象 :this
对象集合 :objes[index]通过索引下标访问对象元素

1.
内置对象(系统定义)应用
类型对象:String,Number,Boolean
功能对象:Date,Math
高级对象:Object(所有对象的父对象),Function,Array

重点:String,Math,Array,Date,Function
1)Function 对象:创建函数的第二种方法
实例化:var obj函数名=new Function("参数1","参数2","...","函数体;函数体;");
2)String
常用方法:subStr(截取子字符串),replace(替换),split(拆分),charAt(返回指定位置的字符),indexOf(查询字符索引下标),lastIndexOf(从后往前查字符索引下标)
3)Math
常用方法:round(四舍五入取整),ceil(向上取整),floor(向下取整),abs(绝对值),sqrt(开根号),pow(次方,次幂),max(最大),min(最小),radom(随机数)
4)Date 日期对象
实例化:
new Date();当前系统时间
new Date(‘1983-07-09‘);指定时间

常用方法:
set***()设置时间
get***()获取时间
5)Array对象(数组对象)
特点:js:可以类型不一致,长度可变.(集合)
常用方法:sort(排序);push(添加);join();
基本语法:

1.声明,赋值的方式
//1.
// var num1 = new Array();
// num1[0] = "a";
// num[1] = 2;
// num1[3] = false;
// alert(num1[2]);

//2.初始的数组长度
// var numArr = new Array(3);
// numArr[0] = "aa";
// numArr[1] = "bb";
// alert(numArr.length);

//3.声明并初始化
// var numArr = new Array(1, 2, 3, 4, 5);
// alert(numArr[4]);

//4.不需要实例化的
var numArr = ["张清瑞", "", "男", "八组", true, "so happy!!!!"];
alert(numArr);

//遍历数组元素
var nums = new Array(4);
nums[0] = 12;
nums[2] = 123;
nums[4] = 11;
nums[5] = 17;
//for 输出数组的所有元素,包括undefined的数据(原生for,支持广泛, 推荐使用)
for (var i = 0; i < nums.length; i++) {
alert(nums[i]);
}
//for in ,所有非undefined的元素值,index指的是元素下标‘
for (var index in nums) {
document.write(nums[index] + ",")
}
2.实现全选和反向全选

function checkAll() {
var ckList = document.getElementsByName("ck");
for (var i = 0; i < ckList.length; i++) {
if (ckList[i].type == "checkbox")
ckList[i].checked = document.getElementById("c_k").checked;
}
}

<p>全选<input type="checkbox" id="c_k" name="ck" onclick="checkAll(this.checked)" /></p>
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="radio" name="ck"/>

 

1.内置对象(系统定义)应用

2.BOM对象(浏览器对象模型)
window对象
常用方法:
1.对话框
alert();//只有确定 按钮
confoirm();//确定取消对话框
prompt();//用户输入对话框
2.打开窗口 open()

3.关闭当前窗口 close()

4.时钟设置:seTimeout(),clearTimeOut(id)

History对象 forward go(1)前进
back go(-1)后退

location对象
属性:href:完整的url字符串
hostname:url中的主机名
host:url中的主机名和端口号
方法:reload()重新加载网页
replace(url)替换掉当前网页

--------------------------------------------------------Day03------------------------------------------

1.事件 *****
1js绑定事件的方式
1） 静态绑定，直接将事件绑定在静态的html标记上（html与js混淆）
2） 动态绑定，将事件绑定到dom对象上。（建议：html与js分离）

2.事件种类
鼠标事件
键盘事件
状态事件

3.event对象:获取事件的信息
ie与ff在event对象的支持上有区别:
ff必须以参数传入才可以识别event对象.
常用属性:
1)x,y轴坐标:clientX,clientY(常用于鼠标事件)
2)按键的键值:keyCode(键盘的事件)
3)鼠标的按键键值:button(鼠标事件)
4)事件的冒泡:子元素的同类事件向父元素传递
解决:e.cancelBubble=true;

2.Dom对象(文档对象模型)*****

W3C 组织推出的一组规则
支持多种语言(C#,js,oracle,java...)

作用:1将文档加载到内存并形成树形结构
2能对内存中的树进行增删改查的操作
3.持久的保存改变
dom:
1查询的方法:(js,C#都有)
getElementByid(id)(得到单个元素)
getElementsByName(name)//name 属性(得到集合)
getElementsTagName(tagname)//标记名(得到集合)
属性:
表单元素:
值:value
非表单元素:<p>段<a>aaaa</a>落</p>
文本值:innerText(FF不支持)
html内容:innerHTML(都支持)
2增加
1)创建新的元素对象
document.creatElement();
2)为新元素添加属性,文本等
p.align="center";
p.innerHTML="这是动态添加的段落"
3)将新元素添加到父元素中
$("div").appendChild(p);

3.删除
思路:父元素删除子元素
父元素对象.removeChild(子元素对象)

综合案例*****
必须掌握:
1.客户端表单验证:
事件:onsubmit 表单提交事件
默认是:return true(提交)
取消提交:return false(取消提交)
文本框 onfocus="this.select()"自动选蓝
onblur="checkPwd()" 焦点离开验证

2.js操作样式 案例:广告漂浮
1 style
语法:元素对象.style.样式属性="样式值"

window.onload = function () {
//鼠标移入:字变红变大
$("btnstyle").onmouseover = function () {
$("btnstyle").style.color = "red";
$("btnstyle").style.fontSize = "50px";
}
//鼠标移出:字变绿变小
$("btnstyle").onmouseout = function () {
$("btnstyle").style.color = "blue";
$("btnstyle").style.fontSize = "20px";
}
}

2.className
元素对象.className="类选择器名"

 

3.下拉列表元素的操作:省市级联
事件:onchange
属性:option 选项集合 option[index]选项元素
selectedIndex:被选中项的索引