JavaScript学习笔记

标签内部写代码,放在head和body里都可以。

一对标签可以加无限制个。

输出document.write();
可以输出标签,例如document.write("

标签h1

");

分号可加可不加

执行顺序是顺序执行

单行注释://

多行注释:/**/

数据类型:
字符串string
数字number
布尔Boolean
数组Array,定义方式:var a = [1,3,4],或者var a = new Array();此时数组大小是未定义的。
对象Object
空null
未定义
可以通过赋值为null的方式清除变量

运算符

算数运算符
+,-,,/,%,++,--
赋值运算符
=,+=,-+,
=,/=,%=

字符串拼接
+,字符串和其他类型拼接,自动把其他类型转换为字符串,包括布尔类型

比较运算符
==,返回布尔类型,值相同就为true,类型可以不相同
===,必须类型和值都相同才为true

逻辑运算符
&&
||
!取反

条件运算符【三目运算符】
判断条件?为真的结果:为假的结果
i>5?"i大于5":"i小于5"

条件语句

if else

if(i>10){
document.write("Yes");
}

switch
switch(i){
case 1:
document.write("是1");
break;
case 2:
document.write("是2");
break;
defualt:
document.write("不满足");
break;

循环

for

for(;;)

for in

var j = ['4',34,'hi',3434]
for(i in j)
{
document.write(i);

while&do while

函数

定义

function 函数名(){
函数体;
}

对大小写敏感,function必须是小写

调用

1、
2、HTML中调用


带参数的函数

局部变量和全局变量

声明在函数之外,或者在函数内部不用var声明,[例如在函数内部,m=10,则调用完此函数后,m就是全局变量了]任何地方都可以使用;
声明在函数内部,只有在函数内部可以使用。

异常处理

异常捕获

try{
发生异常的代码块;
}catch(err){
错误信息处理;
}
function demo(){
try{alert(str);}
catch (err){
alert(err);}
}


image.png

throw语句





事件

事件


//这里的this指向当前的函数

DOM

Document Object Model

DOM

DOM操作HTML

DOM操作HTML元素、HTML属性、CSS,事件

DOM操作HTML

1、改变HTML输出流
注意不要在文档加载完成之后使用document.write(),这会覆盖该文档。
2、寻找元素
id,getElementById("id_name")

标签
geElementByTagName("tag_name")
会找到第一个

3、改变HTML内容
使用innerHTML
getElementByTagName("div").innerHTML="None";

4、改变HTML属性:
使用attribute,例如a的href属性,和img的src属性





DOM操作CSS

语法:document.getElementById(id).style.property=new style


修改CSS
DOM EventListener
DOM EventListener

背景:通过改一个函数名称,就需要改相对应的调用其函数的名称,如果代码量大的话会很麻烦。

因此,使用句柄。

document.getElementById(id).addEventListener("动作",function_name)

句柄

使用句柄,不会覆盖,而是会顺序执行。

removeEventListener用法同add,会移除前面已经存在的句柄。

Javascript事件

事件流

1、描述的是在页面接受的顺序;

2、事件冒泡:
由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点包括文档
button --> div -->body -->html

3、事件捕获:
从最不具体的节点接收事件,而最具体的节点应该是最后接收事件
html -- > body --> div --> button

事件处理

1、直接添加到HTML结构中

2、DOM0级事件处理
把一个函数值赋值给一个事件处理程序属性



此时点击按钮只会出现第二个,第一个被覆盖了。

3、DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");

true:事件捕获
false:事件冒泡
removeEventListener();




    



    

这里不会覆盖
4、IE事件处理程序【版本<=8】
attachEvent
detachEvent
对于兼容性的问题,可以通过判断

var btn = document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{btn.onclick=demo();
  function demo()
    {
          alert("hello")
    };
事件对象
1、事件对象

在触发DOM事件的时候都会产生一个对象

2、对象事件event:

** type:获取事件类型**




    



    

target:获取事件目标




    



    
target

stopPropagation():阻止事件冒泡




    



    

preventDefault():阻止事件默认行为
例如阻止a标签的点击链接跳转




    



    



内置对象

对象

JavaScript张所有事物都是对象
每个对象带有属性和方法
JavaScript允许自定义对象

自定义对象

1、定义并创建对象实例;




    



    

Hi there

It's Me

Yes

2、使用函数定义对象,然后创建新的对象实例




    



    

Hi there

It's Me

Yes

内置对象

String对象
处理已有的字符串,单引号双引号均可以。
常用属性及方法:
长度:str.length
索引:str.indexOf("指定字符串"),-1表示不存在
内容匹配:str.match("字符串")
替换:str.replace("原字符串","新字符串")
大小写转换:toUpperCase()/toLowerCase()
字符串转为数组:str.split("分隔符")

字符串常见属性及方法

Date对象
用于处理日期和时间
var date = new Date();

常用方法:
date.getFullYear()获取年份
date.getTime()获取毫秒
date.setFullYear(yyyy-mm-dd)设置具体日期
getHours() 小时
getMinites()分钟
getSeconds()秒

Array对象

数组

concat
不会改变连接前后的值
a=[1,2]
b=[3,4]
c=a.concat(b)//c为[1,2,3,4]

sort
会改变顺序
a=['t','b','l']
a.sort()//为['b','l','t']

push()
会添加到原数组中
a=[1,2]
a.push(3);//此时a为[1,2,3]

reverse()
会改变原数组的排序
a=[1,2,3]
a.reverse()

Math对象
执行常见的算术任务
Math.round()
Math.random()
结合parseInt可以取到1~10的随机整数值:
parseInt(Math.random()*10)
Math.max()
Math.max(1,5,6,3,12)结果是12

Math.min()

Math.abs()

Javascript DOM对象控制HTML

常见方法

getElemensByName
getElemensByName("name")存储的是一个数组
getElemensByTagName与getElemensByName用法一致

getAttribute("attr_name")
获取节点对象的指定属性名称




    



    

Hi there

It's Me

Yes

setAttribute("属性名","属性值")

childNodes()
子节点获取的是一个对象列表
parentNode()
父节点只能有一个。

createEement()

var body = document.body;
var input = document.createElement("input");//创建节点类型
inpute.type="button";//节点的类型
input.value="按钮";//新建节点的名称
body.appendChild(input);//body添加目标子节点

inserBefore()
插入节点

    var div = document.getElementById('div')
    var body = document.body;
    var input = document.createElement("input");//创建节点类型
    var node = document.getElementById('2');
    input.type="button";//节点的类型
    input.value="按钮";//新建节点的名称
    div.insertBefore(input,node);//div添加目标子节点,在node之前

offsetHeight不包含滚动条
var width = document.body.offsetwidth||document.documentElement.offsetwidth//这里的||是兼容性的写法

var height = document.body.offsetheight||document.documentElement.offsetheight
scrollHeight包含滚动条

浏览器对象对象

window对象

window对象是BOM的核心,window对象值当前的浏览器窗口;
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员;
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一,因为document是全局的,因此使用时省略了前面的window.

window尺寸

window.innerHeight - 浏览器窗口内部高度
window.innerWidth - 浏览器窗口内部宽度

window方法

常用方法:
window.open(路径,名称,样式) 打开新窗口
window.close() 关闭当前窗口

计时器

1、计时事件:
通过使用JavaScript,可以在一个设定的时间间隔之后来执行代码,而不是函数被调用后立即执行;
2、计时方法:
a、setInterval(function(){function_name},interval_value) - (这里为啥是函数里调函数呢,是因为不调的话就只会执行一次)间隔指定的毫秒数不停的执行指定的代码【这里有点疑问,即便是我设置间隔值为0一样执行】
clearInterval() 方法用于停止setInterval()方法执行的函数代码




    



    

It's Me

b、setTimeout() - 暂停指定的毫秒数后执行指定的代码;
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码




    



    

It's Me

History对象

window.history 对象包含浏览器的历史url集合

history.back() 与浏览器点击后退按钮功能相同
history.forward() 与浏览器点击前进按钮功能相同;

history.go() 进入历史中的某个页面,进入上一个页面,需要给的值是-1,即history.go(-1)此功能可以结合是否正确登录判断之后应该跳转的页面。【这个还需要再学习】

Location对象

window.location对象 用于获得当前页面的地址(url),并把浏览器重定向到新的页面。
Location对象的属性:
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocal 返回使用的web协议
location.href 返回当前页面的url
location.assign() 加载新的文档,可以在括号内填写地址,使用onclick事件调用


Location对象

Screen对象

window.screen 对象包含有关用户屏幕的信息

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.height - 屏幕高度
screen.width - 屏幕宽度

JS瀑布流效果 - 布局

js里的第十集,每太看明白,可能太累了,下次继续看

你可能感兴趣的:(JavaScript学习笔记)