Java_Script入门学习

2023年12月21日发(作者：)

Java Script入门学习

1 JavaScript入门

 JavaScript介绍:

• 是一种网页编程语言

• 用于创建动态交互网页

• 基于对象和事件驱动

• 是解释型脚本语言

• 使用简单，功能强大

 JavaScript开发与运行环境:

• 开发：

– 普通的文本编辑器

• 运行

– Web浏览器

– 让浏览器支持java script运行

• 在浏览器中选中工具，再点击Internet选项，打开Internet选项中的安全页面，点击“该区域的安全级别”中的“自定义级别…”，然后在设置框中找到“脚本”位置，让活动脚本设置为“启动”

• 按上面的步骤同样打开Internet选项，然后打开其中的“高级”页面，在“设置”中把如下两个选中：

1.1 JavaScript语法

 每行代码结尾可以不加分号

 但是强烈建议每行代码结尾都要加分号，然后换行。

1.2 JavaScript数据类型

 数据类型：

 基本类型

•

•

•

 特殊类型

•

•

 组合类型

•

•

 数字类型

数字

字符串

布尔值

Null：空

Undefined：未定义

Array：数组

Object：对象

• 最基本的类型

• 不区分整型和浮点型

• 所有数字都是64位浮点格式存储，相当于double格式

 String

• 字符串

• „‟为转义字符

•

•

•

•

”

‟

n

 Boolean

• True：也代表1

• False：也代表0

 数据类型强制转换

• 转成整数：parseInt( “3.6” );

• 转成浮点：parseFloat( “8” );

 数据类型查询

• Typeof( “test” + 3 );

1.3 JavaScript流程控制

 流程控制

• +,-,*,/,%(求余数)

• ++,--

• >,<,==,>=,<=,!=

• &&,||,!

 条件判断 － if

•

•

•

•

If ( 1 == i ) {

} else if ( 2 == i ) {

} else {

}

 条件判断 － switch

Switch( i ) {

Case 1:

Y = y +1;

Break;

Case 2:

Y = y +2;

Break;

default:

Y = y +1;

}

 循环 － for

• For ( var I = 0 ; I < 10 ; I ++ ) {

– ……

• }

 循环 － while

– While ( 9 == i ) {

• ……

– }

1.4 JavaScript变量申明

 Var I;

– 无须申明类型

1.5 JavaScript函数申明

 由关键字function定义

 无须指定返回值类型

• function count( int I ) {

– Var t = 0;

– I = I + t;

– Return I;

• }

1.6 JavaScript的对象

 分类：

– 内置对象

– 浏览器对象

– ActiveX对象

– 自定义对象

 11种内置对象：

– Array

– String

– Date

– Math

– Boolean

– Number

– Function

– Global

– Error

– RegExp

– Object

2 JavaScript – String对象

 String建造：Var str = “Eric”;

 String获取长度：Var str = “Eric”;

Var len = ;

 String格式编排：

• Anchor()：„„

• Blink：„„

• fixed:：„„

•

•

•

•

•

•

•

Bold()

Italics()

Strike()

Big()

Small()

Sub()

Sup()

•

•

•

•

•

2.1 String大小写转换

•

•

•

•

•

•

•

•

•

2.2 String获取指定位置字符

• var res2 = (6);

• alert( res2 );

2.3 String获取字符位置

•

•

•

•

var index = f( "T", 5 );

alert( index );

index = dexOf( "T" );

alert( index );

2.4 String正则表达式

•

•

•

•

var list = ( ".*TA.*NA.*" );

for ( var i = 0 ; i < ; i ++ ) {

alert( list[ i ] );

}

• var s = ( ".*TA.*NA.*" );

• alert( s );

2.5 String截取字符串

•

•

•

•

•

•

•

•

s = ( 3, 5 );// 一共截5位

alert( s );

s = ing( 3, 5 );// 截到第5位

alert( s );

s = ( 8, -5 ); // 倒数截取

alert( s );

区别在哪里？

2.6 String替换 / 分割 / 连接字符串

 String替换字符串：

• s = e( "T", "t" );

• alert( s );

 String分割字符串：

• str = "This is a test";

• var sL = ( " " );

• for ( var i = 0 ; i < ; i ++ ) {

• alert( sL[ i ] );

• }

 String连接字符串：

• str = "This is a test";

• s = ( " 才怪！" );

• alert( s );

3 JavaScript数组

 数组的创建：

var arr = new Array( 8 );

var arr2 = [ 44, 55, 66 ];



•

•

•



数组的遍历：

for ( var i = 0 ; i < ; i ++ ) {

arr[ i ] = i;

}

数组的长度：

 数组的值查询：alert( ng() );

3.1 数组的连接

•

•



•

•

s = ( "-" );

alert( s );

连接2：

s = ( 77, 88 );

alert( s );

3.2 数组的排序

•

•

•

•

var arr2 = [ 44, 55, 66, 33, 22, 88 ];

alert( ng() );

();

alert( ng() );

3.3 数组的反转

•

•

•

•

arr2 = [ 44, 55, 66, 33, 22, 88 ];

alert( ng() );

e();

alert( ng() );

3.4 数组的截取

• var arrChild = ( 3, 5 );

• alert( ng() );

3.5 数组的堆栈操作（末端）

•

•

•

•

( [ 99 ] );

alert( ng() );

();

alert( ng() );

3.6 数组的堆栈操作（首端）

•

•

•

•

t( [ 99 ] );

alert( ng() );

();

alert( ng() );

4 JavaScript 例子

4.1 注册验证

var userName = ;

if ( 0 == ) {

}

var userPassword = ;

if ( 0 == ) {

}

var userPassword2 = ;

if ( userPassword2 != userPassword ) {

}

();

alert( '密码不一致，请重新输入！' );

return;

alert( '密码不能为空，请重新输入！' );

return;

alert( '用户名不能为空，请重新输入！' );

return;

4.2 修改信息验证

function edit( userId, userName, userPassword ) {

= userId;

}

= userName;

= userPassword;

();

4.3 获取复选框信息

function validate() {

i++) {

var checked =

if ( true == checked ) {

}

}

();

return;

mentsByName("idList")[i].checked;

for (var i = 0; i < mentsByName("idList").length;

}

alert( "请选中至少一条数据，再进行此操作！" );

5 JavaScript实例

5.1 变色表格示例

onMouseOver="changeColor('row1')" onMouseOut="resetColor('row1')">

onMouseOver="changeColor('row2')" onMouseOut="resetColor('row2')">

onMouseOver="changeColor('row3')" onMouseOut="resetColor('row3')">

学校	专业	人数
北大	法律	2000
清华	计算机	5000
人大	经济	6000

5.2 动态生成HTML页面

5.3 设置鼠标样式

5.4 三种常用的对话框

onclick="alertDialog()">

onclick="confirmDialog()">

onclick="promptDialog()">

5.5 字体、颜色、背景属性设置示例

幼圆、斜体、黑体、10pt

隶书、黑体、16pt

前景红色、背景黄色

style="background-image:url('');background-repeat:no-repeat;">    图片背景、不重复

5.6 下拉菜单示例

onMouseOut="hide()">菜单一

onMouseOut="hide()">菜单二

onMouseOut="hide()">菜单三

5.7 窗体的创建和关闭示例