html页面src里写js表达式,JavaScript学习笔记

JavaScript

-html搭建网页的结构和内容

-css用于美化页面

-JavaScript 给页面添加动态效果和内容的

JS特点

-js属于脚本语言，不需要编译，由浏览器解析执行。

-js可以嵌入到html代码中。

-js基于面向对象，属于弱型语言。

JS优点

-交互性：可以直接和用户进行交互

-安全性：js语言只能访问浏览器内部的数据，不能访问浏览器外部的内容(电脑磁盘中的各种数据)

如何引入JS代码

1、在元素的事件中书写代码

2、通过Script标签添加js代码

alert("第二种引入方式");

3、把js代码写在单独的js文件中，通过

js的数据类型

-数据类型(number)

-字符串类型(string)

-布尔值类型(boolean)

-undefine(未定义)

-对象类型

变量的声明及赋值

-由于js属于弱类型语言，声明变量时不需要指定类型

var x = 18;

var name="小明";

var isBoy=true;

x = "abc";

var m; //此时m的类型为undefined值也为undefined

数值类型

-js中底层都是浮点型，在使用过程中会自动转换整数或小数

int x = 5 / 2; //2

var x = 5 / 2;(2.5) 4/2(2)

NaN:not a number 不是一个数

isNaN()：判断不是一个数，

字符串类型

-通过单引号或者双引号修饰字符串

var s1 = "abc";

var s1 = 'abv';

布尔值类型

var b1 = true;

数据类型转换

var z = "abc"+18;

-任何数字和NaN进行运算结果都为NAN

数值类型

1、数值转字符串：直接转

2、转布尔值：0和NaN转false，其他都转true

-在if括号里的类型如果不是布尔类型会自动转换

字符串类型

1、转数值：能转直接转，不能转转成NaN “100”->100 "abc"->NaN

2、转布尔值：空字符转false，其他转true ""->false "aa"->true

布尔值

1、转数值：true->1 false->0

2、转字符串： true->"true" false->"false"

undefined

1、转数值：undefined->NaN 20+undefined=NaN

2、转字符串：undefined->"undefined"

3、转布尔值:false

null 是对象类型的值

1、转数值：null->0

2、转字符串：null->"null"

3、转布尔值：null->false

JS的运算符

-和Java中的运算符大体相同

1、==和===

==会先将等号两边的变量类型统一，统一完后再比较内容

“66” == 66 true

===会先比较类型是否相同，类型相同时再比较类型

“666”===

666 false

2、两数相除会自动转换小数和整数 5/2=2.5 4/2=2

3、typeof 获取变量的类型

typeof 66 + 6 "number6"

语句

-包括：if else while do while for switch case

-需要布尔值的地方如果不是布尔值会自动转换成布尔值

-for循环中 把 int 改为var，不支持增强型for循环

函数

-第一种

function 函数名(参数列表){

return ;

}

1、无参无返回

2、无参有返回

3、有参无返回

4、有参有返回

-第二种

var 函数名 = function(参数列表){

}

和页面元素相关的函数

1、获取页面中的元素对象

var input = document.getElementById("id");

2、为文本元素(文本框)赋值和取值

input.value="abc";//赋值

var s = input.value;//取值

3、给元素添加文本内容

元素对象.innerText=“添加内容”；

4、给元素添加HTML代码

元素对象.innerHTML="

abc

";

String相关api

-创建string的两种方式：

1、var s1 = “abc”；

2、var s2 = new String("abc")；

-转大小写：

s1.toUpperCase()；大写

s1.toLowerCase()；小写

-获取某个字符串在另一个字符串中出现的位置

str.indexOf("a");//第一次出现的位置

str.lastIndexOf("a");//最后一次出现的位置

-截取字符串：

str.substring(start,[end]);

-替换字符串：(返回一个新的字符串)

str.replace("helleo","helloworld");

-拆分字符串：

var names = "刘德华，张学友，黎明".split(",");

for(var i=0;i

var name = names[i];

}

number相关函数

-四舍五入 :toFixed(2) 保留2位小数

var x = 3.1415926;

x.toFixed(3); //3.141

数组

-创建数组的两种方式：

1、var arr1=["刘德华",18,true];

2、var arr2 = new Array("刘德华",18,true);

-数组中添加元素

arr1.push("周杰伦");

-修改数组的长度：

arr2.length=2;

-数组中获取数据：数组下标 没有脚标越界

for(var i=0;i

var x=arr2[i];

}

-数组反转：reverse();

-数组排序：sort()：

1、默认排序规则：以字符串的形式进行排序通过Unicode编码比较第一个字符比较完比较第二个字符。

2、数组中保存的对象的话可以通过以下方式排序。

日期相关

-了解服务器时间和客户端时间

1、获取客户端时间

var d1 = new Date();

2、指定时间创建时间对象 通过时间来自服务器时间

var d2= new Date("2018/08/01 18:36:50");

3、获取和设置时间戳(距离1970年1月1日 08:00:00的毫秒数);

d2.getTime(); d2.setTime(1000);

4、从date对象中获取单独的年月日时分秒 星期几

d1.getFullYear();//年

d1.getMonth();//月份需要+1，从0开始

d1.getDate();//号/日

d1.getDay();//星期几

d1.getHours();//时

d1.getMinutes();//分

d1.getSeconds();//秒

5、从date中获取年月日和获取时分秒

d1.toLocaleDateString();//2018/8/31

d1.toLocaleTimeString();//上午11:49:24

正则表达式

.匹配任意字符

\w

\d

^

$

-创建正则的两种形式

1、var reg1 = /规则/模式；

2、var reg2 = new RegExp(规则，模式)//模式可省略

斜杠需要转义

-正则相关的函数

1、reg.exec(str);//查找内容，如果模式为g全局查找，执行一次查询一个

2、reg.test(str);//校验文本

-字符串和正则相关的函数

1、str.match(reg);//查找 返回值为数组

2、str.replace(reg,替换的内容);//查找并替换

创建元素对象

1、声明函数的形式创建对象：

/* function Person(name,age){

this.name=name;

this.age=age;

this.run = function(){

alert("name:"+this.name+",age:"+this.age);

}

}

//创建对象

var p = new Person("张三",18);

//调用对象的方法

p.run();

*/

//创建一个空的Person

function Person(){

}

//创建Person对象

var p = new Person();

//后续给对象添加属性和方法

p.name = "刘备";

p.age = 18;

p.run = function(){

alert("name:"+this.name+",age:"+this.age);

}

//调用方法

// p.run();

2、声明变量的形式创建：

var student = {

"name":"曹操",

"age":28,

"run":function(){

alert("name:"+this.name+",age:"+this.age);

}

}

student.run();

DHTML

-简介：Dynamic(动态)超文本标记语言。这个不是新的技术，只是把所学的HTML，css，js结合到一起实现出来的内容

-DHTML包括：BOM和DOM

-BOM：Browser(浏览器)Object(对象)Model(模型)，包含以一部分和浏览器相关的对象，可以获取浏览器的请求地址，历史记录，浏览器窗口尺寸，浏览器版本。

-DOM：Document(文档)Object(对象)Model(模型)

BOM

window

-window里面的对象全称为全局对象，里面的方法称为全局方法。全局对象和方法可以省略掉window

-window中，常用的全局方法：

alert();//提示框

confirm();//确认框

promt();//弹出文本框

parseInt() parseFloat()

-window常用对象：

1、location.href获取和设置浏览器请求地址

2、location.reload()//刷新

-history 历史

1、history.length 得到历史请求页面的数量

2、history.back()返回上一个页面

3、history.forward()前往下一个页面

4、history.go(num)前往某个页面，0当前页面，1下一个页面，2下两个页面，-1上一个页面

screen 屏幕

1、screen.width/height 得到屏幕的宽高(像素)

2、screen.availWidth/availHeight //屏幕可以宽高

navigator 导航/帮助

1、navigator.userAgent 得到浏览器相关的版本信息

和window相关的事件

window的点击事件 onclick

-页面加载完成事件 onload

-获取焦点事件 onfocus

-失去焦点事件 onblur

eval()函数

可以将字符串以js代码的形式执行

通过js给元素添加css样式

通过元素对象.style.样式属性名称 = "属性值";

定时器

setInterval(函数,时间间隔);

通过标签名查找

var elements = document.getElementsByTagName("input");

定时器

-开启定时器 var timeId = setInterval(函数，时间);

-停止定时器 clearInterval(timeID);

-setTimeouut(函数，时间) 只执行一次

DOM Document Object Model 文档对象模型

学习DOM主要学习的就是对页面当中的元素进行增删改查操作

查找元素

1、通过id查找

var input = document.getElementById("id");

2、通过标签名查找

var divs = document.getElementsByTagName("div");

3、通过标签的name属性查找

var arr = document.getElementsByName("gener");

4、通过标签的class属性查找

var arr = document.getElementsByClassName("");

通过上下级关系获得元素

1、获取元素的上级元素

元素对象.parentElement 得到的是一个上级元素

2、获取元素的下级元素

元素对象.childNodes 得到的是一个数组里面装着多少元素和文本

创建元素

var div = document.createElement("div");

添加到某个元素里面

上级元素.appendChild(div);

添加到某个元素的上面

上级元素.insertBefore(div,弟弟元素);

删除元素

父元素.removeChild(被删除的元素);

修改元素的文本内容

innerText()

修改元素内部的HTML

innerHTML()

修改元素的样式

元素对象.style.样式名称="样式值";

事件

onclick点击事件 onload加载完成事件 onfocus获得焦点事件 onblur失去焦点事件

onmouseover鼠标移入事件 onmouseout鼠标失去焦点事件

onchange值改变事件 onsubmit提交事件

鼠标相关事件：onclick onmouseover onmouseout onmousedown鼠标按下事件 onmousemove鼠标移动事件

键盘相关事件：onkeydown(键盘按下) onkeyup(键盘抬起)

-状态改变事件：onload(页面加载完毕) onchange(值发送改变)

onbulr

以下代码获取窗口的宽高：

document.body.parentElement.clientHeight

document.body.parentElement.clientWidth

事件绑定

1、在元素中添加事件属性,在事件对应的函数中，this代表window对象

2、通过js代码动态绑定，this代表事件源

mybtn.onclick = function(){

alert("动态绑定成功");

}

event对象

1、event对象中保存着和事件相关的信息

2、通过event可以获得鼠标事件的坐标 event.clientX/Y

3、通过event可以获得键盘事件的字符编码集 event.keyCode

4、通过event可以获得事件源 event.target event.srcElemrnt

var obj = event.target || event.srcElemrnt

事件传递(事件冒泡)

如果在同一个区域有多个事件响应，响应的顺序是类似气泡，从上往下，也就是从底层元素往上级元素执行，这个过程称为事件冒泡

如果某个元素里面有多个元素需要添加事件，则这个事件也可以