JavaScript笔记-js基础

最新推荐文章于 2024-08-16 23:08:28 发布

风影莎从

最新推荐文章于 2024-08-16 23:08:28 发布

阅读量498

点赞数 1

文章标签： it java js javascript

本文链接：https://blog.csdn.net/u012453193/article/details/38392117

版权

JavaScript和网页部分 HTML CSS 结合使用的
会HTML 和 CSS 日后课程需要CSS，配合的话，深入在讲解CSS

JavaScript是网页脚本语言，作用在网页中，动态网页是什么语言开发的不重要，无论是java编写，还是php,还是.net
先期，将就JavaScript写在我们的网页中

需要将JavaScript代码，封装在<script></script>标签中
理论中，JavaScript代码，可以出现在网页的任意位置上
一般情况下，是写在网页的头部 <head></head>标签之间

JavaScript 严格区分大小写

<script>
//变量，作用是什么，存储常量值，方便与我们计算和存储数据

/*在java中，是有数据类型之分的？java的数据类型有几种
java有基本数据类型，和引用数据类型两大类：
基本数据类型(四类八种)：整型(byte,short,int,long)，字符型（char）；浮点型（float，double）；
布尔型（boolean）；
引用数据类型：接口，类，数组。

基本数据类型：整数123,45,67，-5，小数1.2 0.3，真假值
引用数据类型

JavaScript弱类型语言：没有数据类型的概念
Java强类型语言：将所有的数据，进行了分门别类的管理

JavaScript定义变量
在java中，数据类型变量名 = 数值;
JavaScript中： var 变量名 = 数值;
*/

var x = 10;//定义了一个变量，赋的数值是10
//alert(x+false);//alert()在网页中，弹出一个对话框，对话框中现实的内容，
就写在alert的小括号中
//在JavaScript中，true表示1 false表示0
//NaN 非法值
若定义变量如：var x;但没有给其赋值，就直接alert的话，会弹出undefind，若加上一个值的话会弹出NaN。
若没有定义，就直接alert的话，什么也不会弹出的，
var y = '5' ;
//alert(y+10);//弹出的是510；

//int[] arr = new int[2];
var arr = new Array(3);//定义数组，存储3个数据

arr[0] = "abc";
arr[1] = 123;
arr[2] = false;
arr[5] = true;
alert(arr);

创建数组的四种方式：
var arr1 = new Array();

var arr2 = new Array(3);

var arr3 = new Array("dd","dd","ff","dd");

var arr4 =["dd","dd","ff","dd"];

//小结一点：JavaScript弱类型语言，先期可以这样理解，没有类型，随便存储数据
********************************************************************************************
js中的运行需要注意的地方：取模；

alert(3%5);//3
alert(-3%5);//-3
alert(3%-5);//3总结，无论是在java还是在javascript中，对于取模运算中的负数，要看前面的数字，
和后面的数字是没有关系的，前面的数字是负数，模的结果就是负数，前面的数字是正数，模的结果就是正数。
对于除运算：/
在java中（3125/1000×1000）=3000
在javascript中（3125/1000×1000）=3125

*********************************************************************************************
比较运算符: 运算后的结果，是true或者是false
== 比较等号两端是否相等两端都相等的时候结果是true
!= 不等于符号两端的数据不相等的时候，运算结果是true
< 小于符号左边小于右边时，运算结果是true
> 大于符号左边大于右边时，运算结果是true

<= >=

赋值运算符
= 将等号右边的值，赋值给左边的变量
+= x += 2 ---> x = x + 2
-=
*=
/=
%=
++ x++ ---> x = x +　１

位运算符，先将数据转成二进制，进行运算
&：与符号：两边都是1，结果是1，有一边是0 ，结果就是0
3的二进制 11
&
2的二进制 10
10

|：或，一边是1结果就是1，两边结果都是0，结果就是0
3的二进制是 11
|
2的二进制是 10
11
3的二进制 00】11
3的二进制 1100】 12
左移数据越来越大，右移数据越来越小
*/
//alert(3<<2);

/*
逻辑运算符连接两个真假表达式的
不要使用 &单个的符号 2个&&计算出来真假值
|单行个符号，2个||进行计算真假值
这点和java是有点不一样的，在Java中，使用位运算符的话，假如两边是数字的话，就进行位运算，若两边
是boolean值的话就进行真假值的运算，一边bolean，一边数字的话，编译器会报错的。

在JavaScript | & 不具备短路效果
*/

//alert(true && false);// 1 & 0

***********************************************************************
/*
javascript中的语句
判断语句
选择语句
循环语句
*/

//判断语句 if语句，如果
//对条件进行判断需要使用if语句
/*
if语句的格式
if(条件){
被执行的代码
}
条件，是一个布尔类型表达式，运算结果是true（真）或者是假
当布尔类型表达式，运算结果是true，if条件成立，执行if语句下面大括号中的代码
*/

/*
在javascript脚本语言中，弱类型语言，非0 ，即为true
java语言行不行呢，java强类型语言，数字就是数字，布尔就是布尔
*/

注意：if判定的时候，如果不写大括号的话，if语句只能控制距离它最近的一行有效代码，（空行是不算
有效代码的）：

判断语句的第二种格式：
if（条件）{
条件的运算结果是true的话，执行这里的代码
}else{

条件不成立，条件的运算结果是false的话，执行这里的代码。
}
注意：if中的代码，和else中的代码，只能运行一个，另外：if 或者else肯定会执行一个。

判定语句的第三种格式：

if(条件){
//执行代码
}else if（条件）{
//执行的代码
}else if(条件){
//执行的代码
}else{
//执行的代码
}
注意：当有一个if中的条件成立，其他的if else都不会再运行了，代码的执行效率会提高。

循环语句 while循环
当程序需要多次重复执行的时候，使用循环语句
格式：
while（条件）{
//执行的代码
}

do ……while的格式：

do{
//执行的代码

}while（条件）；

while和do……whlie的区别是：do...while至少执行一次循环体。
break 配合循环使用，强制跳出循环。
注意：当出现多层嵌套循环的时候，要跳出指定的循环的话，可以使用标记为来实现：
比如：
var p=0;
a:while(p<5){
b:while(true){
alert("ddd");
break a;
}

alert(p);
}

循环语句：for循环

for(表达式1;表达式2;表达式3){
循环体;

}
表达式1：初始化表达式
表达式2：条件表达式
表达式3：增量表达式

特殊：
for(;;){//执行的代码}和while(true){//执行的代码}表示死循环。

注意：
任何循环问题其实都是可以通过这三个循环实现。
do...while至少执行一次循环体。
而while和for循环可能不执行循环体。

while循环和for循环是可以等价转换的。

while和for的使用场景：
如果次数明确，范围明确，请用佛如循环。比如：1-100之间。
如果次数不够明确，一般使用while循环。比如：我现在冰箱有一堆西瓜，我要吃掉它，但是呢，我并
不知道它有多少个。判定有没有西瓜，有，就吃，没有，就结束。

选择语句 switch case

格式：
switch(变量){

case 常量：
执行的代码；break；

case 常量：
执行的代码；break；

default ：
执行的代码：break；

}
注意：switch一定要写break，否则会出现case穿透的问题；在上面的case都没有匹配的时候，执行default
后面的代码，default后面的break写或者不写，视情况而定，若default写在switch块的最后面的话，break
是可以省略的，若default不是写在最后面，写在上面或者是中间，那么如果不写break的话，就会出现case
穿透的问题，就是会一直往下执行，知道遇到break为止。

if和switch的使用场景：
A:如果判断的是几中类型或者几个数据。用switch。
switch(表达式)
{
case 值1:
语句1;
break;
case 值2;
语句2;
break;
...
default:
语句n;
//break;
}
B:如果判断的是一个范围一般用if。
if(表达式){}

if(表达式){}
else{}

if(表达式){}
else if(表达式){}
else if(表达式){}
...
else{}

********************************************************************************************

JavaScript消息框

A：警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("文本")

B:确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("文本")

C:提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("文本","默认值")

*********************************************************************************************

注意：
+
如果是字符串，它表示字符串连接符。

-，*，/他会自动进行转换并运算。


alert(typeof 100);//number
alert(typeof 100.456);//number
alert(typeof true);//boolean
alert(typeof "hello"); //string

typeof 表达式或者变量常量;
判断后面数据的类型。

******************************************************************************************
JS可以做什么?
JS主要用来做网页的前台效果
JS可以用来做校验
减少对服务器的交互
JS做游戏

开发人员：做校验和交互。
********************************************************************************************
对象：
document 对象
我先讲一个对象的方法：document.write("内容")
writeln不能实现换行。
要想换行，用br

注意：
write方法既可以把文本写到页面上，也可以把html标签写出来。

document.writeln("java");
//ln,\r\n换行。
document.write("<br/>我换行了,你信不信<br/>");
document.write("<input type='button' value='我是按钮' />");

js函数:

我们在写代码的过程中，会发现很多操作是类似的。
只是参与操作的数据是不同的。
针对这种情况，js就提出了函数的概念。

函数：
函数就是完成一个特点功能的代码块。

格式：
function 函数名(参数...)
{
方法体;
return 返回值;
}
注意：
函数只有被调用才执行。

函数的调用：
A:通过函数名调用。

B:调用方式：
a:在<script>代码块使用
b:通过其他的元素的事件进行触发。
js是基于事件驱动的脚本语言

函数的调用问题：函数如果有明确的return带一个返回值的
A:我们可以直接调用，但是没有意义。
B:alert调用。可以把结束直接显示。但是不推荐。
因为我们可能根据返回的结果还要继续参与操作。
C:赋值使用。

js中没有函数的重载。
如果有函数的名称一样，以最后一个为主。

//判断数是否相等
function compare(a,b)
{
/*
if(a==b)
{
return true;
}
else
{
return false;
}
*/

//if语句的第二种格式和三元运算符是在某些情况下可以等价转换。在有赋值或者返回值的时候。
//表达式?值1:值2
//var c = (a==b)?true:false;
//return c;

//再次改进
//return (a==b)?true:false;

//==返回的本身就是true或者false。
return a==b;
}

1. 日期对象
|-- 创建方法 var date = new Date();
|-- toLocaleString()返回一个看的懂的时间和日期
|-- getFullYear()获取日期对象中的年份
|-- getMonth()获取日期对象中的月份，0-11 运算结果+1
|-- getDate()获取日期对象中的，月中的日期
|-- getDay()获取星期中的，返回的是星期几
|-- getHours()获取当前小时
|-- getMinutes()获取当前的分钟数
|-- getSeconds()获取当前的秒数
|-- getMilliseconds()获取当前毫秒值，1000毫秒=1秒
|-- getTime()获取1970年1月1日午夜零时，到运行Date对象这个时刻的
经过的毫秒值

/*
JS基于对象
*/
//创建的日期对象
//var date = new Date();
//日期对象，调用toLocaleString()
//alert(date.toLocaleString());
/*
单独的获取某个日期的值
获取功能上，函数名都是以get开头
*/
//alert(date.getFullYear());
//alert(date.getMonth()+1);
//alert(date.getDay());
//alert(date.getHours());
//alert(data.getDate() );
//alert(date.getMinutes());
//alert(date.getSeconds());
//alert(date.getMilliseconds());
//alert(date.getTime());

定时器：

window.setInterval("getDateDemo()",1);//没隔一毫秒调用一次前面的函数。

将字符串转换为日期的格式：
1. 将字符串转成日期对象
Date对象的parse方法，月日年
2. 毫秒值的减法运

parse 方法
解析一个包含日期的字符串，并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒

短日期可以使用“/”或“-”作为日期分隔符，但是必须用月/日/年的格式来表示，例如"7/20/96"。

**********************************************************************************************
数组的排序：

var arr = [3,2,1,5];
//选择排序
/*
for(var i=0; i<arr.length-1;i++){
for(var x=i+1;x<arr.length ;x++){
if(arr[i]>arr[x]){
var temp =arr[i];
arr[i]=arr[x];
arr[x]=temp;
}

}

}
*/

//冒泡排序

for(var x = 0 ; x < arr.length -1; x++){
for( var y = 0 ; y < arr.length - x -1; y++){

if(arr[y] > arr[y+1]){
var temp = arr[y];
arr[y] = arr[y+1];
arr[y+1] = temp;
}
}
}

Array对象中的方法 sort()对数组进行排序升序
Array对象中concat()方法更多数组组合而成的新

如果是定义一个数据，用变量存储即可。如果是多个数据的操作，就必须用数组存储了。

数组：存储多个元素的容器。JS数组比较特殊，跟java有可能有些不一样。
特点：
数组都有索引,从0开始编号。方便取出元素。

//定义数组对象。
var arr = [1,2,3,4,5];

//数组长度 length
document.write("arr.length:"+arr.length+"<br/>");

//数组要掌握的方法
//join 方法
//返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
//arrayObj.join(separator)
//document.write("join:"+arr.join("-")+"<br/>");

//pop 方法
//移除数组中的最后一个元素并返回该元素。
//arrayObj.pop( )
//document.write("pop:"+arr.pop()+"<br/>");
//疑问：数组本身是否发生了改变?
//document.write("arr:"+arr.toString()+"<br/>");

//push 方法
//将新元素添加到一个数组中，并返回数组的新长度值。
//arrayObj.push([item1 [item2 [. . . [itemN ]]]]) //java中有一个可变参数。
//document.write("push:"+arr.push(6,7)+"<br/>");
//document.write("arr:"+arr.toString()+"<br/>");

//reverse 方法
//返回一个元素顺序被反转的 Array 对象。
//arrayObj.reverse( )
//arr.reverse(); //反转
//document.write("reverse:"+arr.toString()+"<br/>");

//slice 方法 (Array)
//返回一个数组的一段。
//arrayObj.slice(start, [end]) 索引包含左边，不包含右边。
//document.write("slice:"+arr.slice(1)+"<br/>"); //从编号1开始截取到数组的末尾
//document.write("slice:"+arr.slice(1,3)+"<br/>"); //从编号1开始截取到编号2

//splice 方法
//从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
//arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
//js的数组是可变的。
//document.write("splice:"+arr.splice(1,2,8,9,11)+"<br/>");
//document.write("arr:"+arr.toString()+"<br/>");

//unshift 方法
//将指定的元素插入数组开始位置并返回该数组。
//这个方法解释有问题。不同的浏览器效果不一样。建议不要使用该方法。
//document.write("unshift:"+arr.unshift(12)+"<br/>"); //unshift 方法
//document.write("arr:"+arr.toString()+"<br/>");

********************************************************************************************
全局对象:是一个固有对象，目的是把所有全局方法集中在一个对象中。
Global 对象没有语法。直接调用其方法。
在脚本引擎被初始化时创建，可以直接使用。

parseInt 方法
parseFloat 方法和parseInt类似。
isNaN 方法
escape 方法(对 String 对象编码以便它们能在所有计算机上可读， )
| eval 方法(这个字符串将由 JScript 分析器进行分析和执行。)
| isFinite 方法(返回一个 Boolean 值,指明所提供的数字是否是有限的。)
| isNaN 方法(返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。)
| parseFloat 方法 (返回由字符串转换得到的浮点数。 )
| parseInt 方法(返回由字符串转换得到的整数。)
| unescape 方法(解码用 escape 方法进行了编码的 String 对象。 );

//注意：请看
document.write("parseInt:"+parseInt("100")+"<br/>");//100
//从头开始解析,直到不能被解析的数据为止。
document.write("parseInt:"+parseInt("100abc")+"<br/>");//100
document.write("parseInt:"+parseInt("abc100")+"<br/>");//NaN
document.write("parseInt:"+parseInt("10abc0")+"<br/>");//10

//注意：进制问题
//parseInt(numString, [radix]) 返回的是第一个对应的第二个进制的十进制表示。
document.write("parseInt:"+parseInt("100",2)+"<br/>");//4
//1010101010101 自己测试。
document.write("parseInt:"+parseInt("123",2)+"<br/>");//1
document.write("parseInt:"+parseInt("2123",2)+"<br/>");//NaN
******************************************************************************
字符串对象：


//创建字符串对象
//var str = new String(); //空字符串对象。
//var str = new String("hello"); //在创建对象的时候就给出元素
//var str = "hello"; //String 对象可用字符串文字显式创建。全局字符串对象
//document.write("str:"+str+"<br/>");

var str = "hello";

//anchor 方法
//在对象中的指定文本两端放置一个有 NAME 属性的 HTML 锚点。
//strVariable.anchor(anchorString)
//html中讲a标签：
//配套使用：
//<a name="haha">hello</a> 定义锚点
//<a href="#haha">返回</a> 使用锚点
*****************************************************************************
参数的问题：
<script type="text/javascript">
function params()
{
var paras="";
for(var x=0;x<arguments.length;x++)
paras=paras+" "+arguments[x];
alert(paras);
}

//params("xyz",567);

params(567,789,"xyz")
</script>

*******************************************************************************************
js的面向对象的理解：

在传统的web开发中,js一直起到的是一种点缀的作用，只完成了有限的功能：表单校验。
后面，如果我们想对ajax技术有深入的了解，必须好好学习js的面向对象思想。

js本身并不是一门面向对象的语言。基于对象的。
当然，我们今天会给大家讲讲，在js中，我们怎么模拟面向对象。
js的面向对象是非正统的面向对象语言，在学习js面向的时候，
需要大家对面向对象思想有一点点了解

typeof运算符：
js是一门弱类型语言,不代表js是没有类型的。
那么,我们怎么能够知道js的类型呢?
这个时候js就提供了typeof运算符供我们使用。

格式：
typeof 表达式

var date = new Date();
//alert(typeof date); //object
alert(typeof Date); //function

var str = new String("hello");
//alert(typeof str); //object
alert(typeof String); //function

//三次结果都是function。
//说明了我们其实是可以通过function模拟类的定

//面向对象中，最核心的概念就是类。
//类表示具有相似性质的一类事物的抽象。
//通过实例化一个类,就能够得到一个类的对象。
//我们如何自己定义对象呢?通过刚才的讲解,我们想到了使用function模拟。
/*
在java中，定义类格式如下：
class 类名
{

}

*/

//定义一个类：定义了一个Person类。
function Person()
{

}

//问题来了,类定义好了，怎么用啊。
//回想：new Date(),new String()
//new操作符不仅仅对js的内置对象有效，对用户自定义的类也是同样有效的。
//也就是说，你完全可以使用new关键字来创建自定义类的对象。
var p = new Person();
//alert(typeof p); //object
//alert(typeof Person); //function

//这个对象没有任何属性的和功能。

如何使用对象的属性和方法呢?
var arr = new Array();
方式1：
对象名.属性(方法)名
方式2：
对象名["属性或方法名"]
//使用方法
//arr.push(44);
//使用属性
//alert(arr.length);

//[]方式使用方法
arr["push"](44);
//[]方式使用属性
alert(arr["length"]);


<script type="text/javascript">
//自定义类Person
function Person()
{

}

//创建对象
var p = new Person();
//alert(typeof p); //object

//1：添加属性
//alert(p.name+"***"+p.age+"***"+p.sex);
p.name = "林青霞";
p.age = 26;
p.sex = "女";
//alert(p.name+"***"+p.age+"***"+p.sex);

//这里创建对象后，添加的属性只是给每个对象自己特有的值
//var p2 = new Person();
//p2.name = "石松";
//p2.age = 28;
//p2.sex = "男";
//alert(p2.name+"***"+p2.age+"***"+p2.sex);

//2：添加方法
/*
function show()
{
alert(p.name+"***"+p.age+"***"+p.sex);
}
//函数赋值
p.start = show;
//调用
p.start();
*/
//匿名函数
p.start = function()
{
alert(p.name+"***"+p.age+"***"+p.sex);
}

//调用
//p.start();

//3：修改属性和方法
//alert(p.name+"***"+p.age+"***"+p.sex);
//p.name = "刘德华";
//alert(p.name+"***"+p.age+"***"+p.sex);
/*
p.start = function()
{
alert("面向对象的js,其实也不过如此");
}

p.start();
*/

//4：删除属性和方法
p.name = undefined;
p.start = undefined;

//alert(p.name+"***"+p.age+"***"+p.sex);
//p.start();
</script>
//自定义类
//在js中，如果直接定义了变量，它不会把这个变量认为是当前类的属性或者方法。
//怎么办才行呢?用this。
//this就可以代表当前类的引

function Person(){

this.name = "zhangsan";
}

//创建对象
var p = new Person();
alert(p.name+"ddd");

function Person(name,age)
{
//这就表示把name和age作为Person类的属性了
this.name = name;
this.age = age;

//get/set方法
this.setName = function(n)
{
this.name = n;
}

this.getName = function()
{
return this.name;
}

this.setAge = function(a)
{
this.age = a;
}

this.getAge = function()
{
return this.age;
}
}

var p = new Person();
p.setName("林青霞");
p.setAge(26);
alert(p.name+"***"+p.age);

//使用带参数的创建方式
var p2 = new Person("杨幂",25);
//alert(p2.name+"***"+p2.age);
alert(p2.getName()+"***"+p2.getAge());

/*
在传统的面向对象中，每个对象都会对应到类上。
js中对象其实是属性或者方法的一个集合，并没有严格意义上类的概念。
所以呢,他提供了一种简单的方式创建对象，就是用{}方式。

格式：
{
property1:value1,
property2:value2,
property3:value3,
...
method:function(){
...
}
}
通过大括号扩住了多个属性或者方法的定义,属性或者方法或,隔开。实现了类的定义。
*/
//创建了一个没有任何属性和方法的对象
//var obj = {}; //空的大

//创建了一个包含了三个属性和一个方法的对象
var user = {
name:"liuyi",
age:"30",
work:"老师",
show:function(){
alert(this.name+"***"+this.age+"***"+this.work);
}
}

user.show();

在java中，有成员的访问修饰符的概念:private,默认,protected,public
在js中没有，那么，我们怎么才能够在js中模拟出私有成员呢?
在js中，通过this把变量和方法与类关联上的。如果你自己用var定义了一个变量，
或者直接定义了一个方法，他会认为这个方法或者变量与当前的类无关。
可以被看做是局部的变量和方法

例如：
function Person(name,age)
{
this.name = name;
this.age = age;

//定义了一个变量
var sex = "女";

setSex = function()
{
sex = "男";
}

//通过this修饰的方法
//通过成员方法调用局部方法修改局部变量
this.changeSex = function()
{
setSex();
}

//相当于通过成员方法返回局部变量的值
this.getSex = function()
{
return sex;
}
}

//在js中，大家应该记得 Math对象
//alert(Math.abs(-12)); //绝对值
//alert(Math.max(23,45)); //获取较大的值
//js中也是有静态的概念存在的
//添加静态属性
Person.sex = "男";
//添加静态方法
Person.run = function()
{
alert("run");
}

//注意了：在js中，静态的内容只能被类名访问
//var p = new Person("林青霞",26);
//alert(Person.sex);
//Person.run();

//静态就是这么简单，通过类名直接添加属性或者方法，将来使用的时候也不能创建对象使用

***********************************************************************************************
js原型：

js原型：prototype
在我们每个创建的函数中都有一个属性：prototype属性。原型属性。
它其实是一个对象,它的用途是把所有实例共享的属性和方法给包含起来。
我们也可以通过这个属性给对象添加新的属性和功能。

举例：通过画图工具画圆形。

照猫画虎：
虎.prototype = 猫。
如果是这样的话，我们修改猫，那么，虎的动作也就被修改了。
通过这个原型属性，等会我们就可以模拟继承。

例如：
function Person(name,age)
{
this.name = name;
this.age = age;

this.setName = function(n)
{
this.name = n;
}

this.getName = function()
{
return this.name;
}

this.setAge = function(a)
{
this.age = a;
}

this.getAge = function()
{
return this.age;
}
}

var p = new Person("武松",30);
alert(p.name+"***"+p.age);

//需求：我现在有一个学生类，他和这个Person类的结构一模一样，
//怎么办呢？

//重构：重构（Refactoring）就是在不改变软件现有功能的基础上，
//通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。
//通过了解重构和java中的继承，我们就想到了，这里的代码其实也是可以优化的。
//把学生类给注释调用，重写一个。
function Student(){} //什么都没有定义

//在这里产生一个继承关系
Student.prototype = p;

var s = new Student();
s.setName("石松");
s.setAge(29);
alert(s.getName()+"***"+s.getAge());
原型的应用-：


<script type="text/javascript">
//获取数组中的最大值
/*
function getMax(arr)
{
//定义参照物
var max = arr[0];

for(var x=1; x<arr.length; x++)
{
if(arr[x]>max)
{
max = arr[x];
}
}

return max;
}

//创建一个数组
var arr = [134,276,35,49,215];
alert(getMax(arr));
*/

//arr.方法()就能够获取到数组中的最大值

Array.prototype.getMax = function()
{
//实现功能
var max = this[0];

for(var x=1; x<this.length; x++)
{
if(this[x]>max)
{
max = this[x];
}
}

return max;
}

//定义一个数组
var arr = [134,276,35,49,215];
//我要调用一个方法就能获取数组中的最大值
//而数组并没有提供这个方法，所以，需要我们自己实现。
//那么我们自己怎么实现呢?通过原型
//this对象：谁调用，this代表谁。
alert(arr.getMax());

原型的应用二：


<script type="text/javascript">
//在js中是没有我要求的这几个方法的，所以，都是要求自己实现的。
//并且，我们又不想把字符串作为参数传递，所以我们使用字符串的原型
//给字符串的原型添加功能,就相当于给字符串添加功能
String.prototype.trim = function()
{
/*
分析：
A：this就代表那个带有空格的字符串对象
B：先从头开始找空格，一直往后找，如果没有空格了，就记录该索引
C：从后面开始找空格，一直往前找，如果没有空格了，就记录该索引
D：使用字符串的截取功能截取字符串
*/
//定义开头索引
var start = 0;
//定义末尾索引
var end = this.length - 1;

//从头找空格
while(start<=end && this.charAt(start)==" ")
{
start++;
}

//从后面找空格
while(start<=end && this.charAt(end)==" ")
{
end--;
}

return this.substring(start,end+1);
}

//把字符串变成字符数组
String.prototype.toCharArray = function()
{
/*
A：this还是代表那个调用方法的字符串
B：定义一个字符数组
C：遍历字符串获取到每一个字符
D：把遍历到的每一个字符添加到字符数组中。
E：返回字符数组
*/
//定义字符数组
var chs = new Array(this.length);

//遍历字符串
for(var x=0; x<this.length; x++)
{
chs[x] = this.charAt(x);
}

//返回字符数组
return chs;
}

//字符串反转功能
String.prototype.myReverse = function()
{
/*
A:可以把字符串变成字符数组,因为我刚才写过这个方法
B:在数组中有反转功能
*/

//把字符串转成数组
var arr = this.toCharArray();
//调用数组中的反转功能
return arr.reverse();
}

//定义一个字符串对象
//var str = " hello world ";
//alert("***"+str.trim()+"***");

var str = "hello,js";
//var arr = str.toCharArray();
//alert(arr.toString());
alert(str.myReverse());
<script type="text/javascript" src="demo1.js"></script>

<link href="cc.css" rel="stylesheet" type="text/css" />

**************************************************************************
DOM的介绍：
DOM : Document Object Model
将HTML标记型文档，封装成对象，提供更多的属性和行为

DOM的三级模型
第一级：将标记型文档，封装成对象，提供更多的属性和行为
第二级：对原有的模型，进行了升级
第三级：XML文档封装成对象

DHTML：动态HTML dynamic 四个技术的组合体

HTML：将网页中的内容，封装到标签中
CSS：层叠样式表，提供更加丰富的页面显示效果
JavaScript:负责程序设计，JS对象，函数，循环，判断，变量
DOM:把标记封装成对象，提供更多的方法和属性

DOM树：学好DOM技术，必须要掌握节点对象，他们之间的关系

*******************************************************************************
window对象：
/*
代表浏览器中一个打开的窗口。
window对象，随着浏览器的打开后，这个对象就建立起来了

window对象中的alert(消息)方法
调试程序，给用户进行信息的提示
var x = 10 ;
window.alert(x+20);

window对象中的confirm方法,这个方法返回一个布尔类型值，点击的是确定按钮，将反回true
Web开发中，提示用户对数据删除时候的确认
if(window.confirm("你真的要删除吗")){
document.write("用户选择是真的要删除");

window对象中的close()方法，关闭当前的页面

window对象中的open方法，打开一个网页
window.open("Sample.htm",null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

window对象中的打印方法print

window对象中的setInterval 每经过指定毫秒值后计算一个表达式。定时器，定时的去执行每一个功能

window对象中的clearInterval 使用 setInterval 方法取消先前开始的间隔事件。取消定时器效果
使用取消定时器方法的时候，需要传递一个ID值，这个值可以确定，取消的是哪一个定时器的效果
setInterval会返回一个整数的ID值，如果要取消这个定时器效果，可以将setInterval方法返回的ID值，传递给
clearInterval方法

document 对象：
document对象，代表给定浏览器窗口中的HTML文档。
使用document对象，获取HTML页面中的标签节点对象。对标签节点对象进行操作

document对象获取HTML页面中的标签节点对象的三个方法

getElementById（"标签节点的id属性值"）
getElementByName（"标签节点的name属性"）；
getElementByTagName("标签名");

1:document对象获取节点的方式
A:getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
B:getElementsByName 根据 NAME 标签属性的值获取对象的集合。
C:getElementsByTagName 获取基于指定元素名称的对象集合。
var tableNode = document.getElementById("tab_id");
//表格table对象的属性 nodeName 是标签名
// alert(tableNode.nodeName);
//对表格节点对象的style属性进行设置
tableNode.style.border = "5px solid #00FF00";

<script type="text/javascript">
/*
通过节点对象之间的父子，兄弟关系，进行获取
指定一个参考节点 table表格
*/
function documentDemo(){
//获取一个参考性的节点 table节点对象
var tableNode = document.getElementById("tab_id");
alert(tableNode.nodeName);
// alert(tableNode.nodeName);
//通过table节点来获取父节点
// parentNode 获取文档层次中的父对象。
var parentNode = tableNode.parentNode.parentNode.parentNode;
alert(parentNode.nodeName);

}

function documentDemo2(){
//通过table节点，获取子节点
var tableNode = document.getElementById("tab_id");
var childNode = tableNode.childNodes[0].childNodes;
alert(childNode.length);
}

function documentDemo3(){
//通过table节点，获取兄弟节点
var tableNode = document.getElementById("tab_id");
// var node = tableNode.previousSibling.previousSibling.previousSibling.previousSibling;
// alert(node.nodeName);
var node = tableNode.nextSibling.nextSibling.nextSibling;
alert(node.nodeName);
}
</script>

**********************************************************************************************

<script type="text/javascript">
function create()
{
/*
需求：给div添加一个文本节点
分析：
A:创建一个文本节点
B:将文件节点的值添加到指定的div区域中
*/

//如何创建文本节点呢?
//createTextNode
var textNode = document.createTextNode("div区域1");
//获取指定的div
var divNode = document.getElementById("div_1");
//div对象中有这样的一个方法：appendChild 给对象追加一个子元素。
divNode.appendChild(textNode);

//我想给它添加一个超链接标签行不行呢?
//createElement 为指定标签创建一个元素的实例。
var aNode = document.createElement("a");
//给a标签添加文本节点
// href 设置或获取目标 URL 或锚点
aNode.href = "http://www.baidu.com";
aNode.innerText = "百度";

//把a标签节点添加到div上
divNode.appendChild(aNode);
}

function deleteNode()
{
/*
需求：删除div_2的内容。
分析：
A:找到div_2节点
B:删除内容即可
*/
//找到div_2节点
//var divNode = byId("div_2");
//childNodes 返回div的所有儿子节点
//var nodes = divNode.childNodes;
//alert(nodes[0].nodeValue);
//获取文本节点
//var textNode = divNode.childNodes[0];
//删除文本节点
//removeChild 从元素上删除子结点。
//divNode.removeChild(textNode);

/*
需求：我要删除div_2这个节点。
分析：
A:先找到div_2的父节点
B:通过父节点删除div_2这个节点
*/
//var divNode = byId("div_2");
//获取该节点的父节点
// parentNode 获取文档层次中的父对象
//alert(divNode.parentNode.nodeName);
//获取到了body节点
//var bodyNode = divNode.parentNode;
//采用删除方法即可
//bodyNode.removeChild(divNode);

//节点自己删除自己
var divNode = byId("div_2");
//删除节点
//removeNode 从文档层次中删除对象
//true childNodes collection of the object is removed.
divNode.removeNode(true); //连同儿子都干掉
}

function update()
{
/*
需求：用div_1把div_3给替换调用
分析：
A:获取div_1节点对象
B:获取div_3节点对象
C:用div_1节点替换div_3节点
*/
//获取div_1节点对象
var div1Node = byId("div_1");
//获取div_3节点对象
var div3Node = byId("div_3");
//替换节点
//object.replaceNode(oNewNode)
div3Node.replaceNode(div1Node);
}

function clone()
{
/*
需求：用div_3替换div_4。但是还是要去div_3存在
分析：
A:获取div_3节点对象
B:获取div_4节点对象
C:把div_3的节点对象复制一份
D:用复制后的div_3节点替换div_4节点
*/
var div3Node = byId("div_3");
var div4Node = byId("div_4");

//复制节点呢
//cloneNode 从文档层次中复制对对象的引用
var div3Node2 = div3Node.cloneNode(true);//表示连同子节点对象一起克隆

//替换
div4Node.replaceNode(div3Node2);
}

function byId(id)
{
return document.getElementById(id);
}

**********************************************************************************
更改页面的背景色：
function change1()
{
/*
分析：
由于body标签中的一个属性可以实现背景色的更改。
所以,首先我们就想到了获取body这个对象。
通过body对象来改变背景色

html标签属性纯html标签属性
html节点属性把html标签封装成对象后的属性
*/
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode.nodeName);
//颜色组成的三元素：红绿蓝
//bodyNode.bgcolor = "#ff0000"; //这个时候的bgcolor是标签属性
//bodyNode.bgColor = "#ff0000"; //我们需要找到的是该标签属性对应的对象属性
//通过样式写
bodyNode.style.backgroundColor = "#ff0000";
}

function change2()
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = "#00ff00";
}
function change3()
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = "#0000ff";
}

function change(c)
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = c;
}
</script>

****************************************************************************************
正则表达式：

正则表达式：就是符合某些规则的一个模式字符串。
实现判断效果，替换效果

规则：
次数：
+:一次或多次
*:零次或连续多次。
?:零次或一次。
{n}:恰好n次
{n,}:n次以上
{n,m}:至少n次，最多m次

字符是怎么表示的:
\d和[0-9]:0-9的数字
\w和[a-zA-Z_0-9]：用于匹配字母，数字或下划线字符;
[a-z]:小a到小z
[A-Z]:大a到大z
^:表示开头
$:表示结尾

正则表达式对象的创建：
rgexp = /pattern/

正则表达式的使用；
返回一个 Boolean 值，它指出在被查找的字符串中是否匹配给出的正则表达式。
rgexp.test(str)

风影莎从

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记-js基础

JavaScript和网页部分 HTML CSS 结合使用的会HTML 和 CSS 日后课程需要CSS，配合的话，深入在讲解CSS JavaScript是网页脚本语言，作用在网页中，动态网页是什么语言开发的不重要，无论是java编写，还是php,还是.net 先期，将就JavaScript写在我们的网页中需要将JavaScript代码，封装在标签中理论中，Ja
复制链接

扫一扫