您的位置：首页 > Web前端 > JavaScript

JS的基本使用

2014-02-15 19:49 501 查看

1、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>

<script type="text/javascript">
function f1(){
alert("hello javascript!!");
}

</script>
</head>

<body>
<a href="#" onclick="f1()">click me</a>
</body>
</html>

2、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
function f2(){
var a = 100;
//a = '100';

alert(typeof a);//打印变量阿德类型
}
</script>
</head>

<body>
<a href="" onclick="f2()">click me</a>
</body>
</html>

3、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>



<html>
<head>
<script type="text/javascript">
function f3(){
/**
== 比较的是看值是否相等
*/
var str1 = '123';
var str2 = '123';

if(str1 == str2){
alert("str1 is equal to str2");
}

var a = 123;
var b = '123';
if(a == b){
alert("a is equal to b");
}else{
alert("a is not equal b");
}

/*
=== 先判断的是类型是否相等,然后在判断值是否相等
*/
var i1 = 123;
var s2 = '123';

if(i1 === s2){
alert("i1 is equal to s2");
}else{
alert("i1 is not equal to s2");
}
}
</script>
</head>

<body>
<a href="" onclick="f3()">click me</a>

</body>
</html>

4、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
<script type="text/javascript">
function f4(){
//var a = null;
alert(typeof null);//null 的类型是object

var a;
alert(typeof a);//一个变量如果只声明,但是不赋值,那么它的类型还是undefined
}
</script>
</head>

<body>
<a href="" onclick="f4()">click me</a>

</body>
</html>

5、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
<script type="text/javascript">
function f5(){
/*
需要注意的是if()语句里面的判断逻辑:
1)非空字符串、不为0的字符串都是true
2)null、undefined 为false
*/
//var flag = 'hello';
//var flag = '';
//var flag = 12;
//var flag = 0;
var flag = null;

if(flag){
alert(true);
}else{
alert(false);
}

}
</script>
</head>

<body>
<a href="" onclick="f5()">click me</a>

</body>
</html>

6、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
function f6(){
/*
string ---> number
主要是通过以下几个函数:
parseInt(str),
parseFloat(str),
isNaN(str);
*/

/*
var s = '123';
var s1 = parseInt(s) + 100;//parseInt(s),把s当成整数进行解析
alert(typeof s1 + ' : ' + s1); //最后s1的值为223

*/

/*
var s = '125.04';
var s1 = parseInt(s) + 100;
alert(typeof s1 + ' : ' + s1);

这时候打印出来的结果是225
*/

/*
var s = '125.04';
var s1 = parseFloat(s) + 100;
alert(typeof s1 + ' : ' + s1);//这时候返回的结果是225.0000004
*/

var s = '125a';
if(isNaN(s)){//isNaN(s) : 判断字符串s是否只一个数字
alert('s不是一个数字');
}else{
alert('s是一个数字');
}

}
</script>
</head>

<body>
<a href="" onclick="f6()">click me</a>

</body>
</html>

7、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
/*
number ---> string
主要是通过: .toString()来实现的
*/
function f7(){
var n1 = 123;
var s1 = n1.toString();//js在执行时,会自动将number类型转换成其对应的包装类型Number,然后调用相应的方法
alert(typeof s1 + ' : ' + s1);
alert(s1+100);
}
</script>
</head>

<body>
<a href="" onclick="f7()">click me</a>

</body>
</html>

8、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
function f8(){
var str = 'abcde';
alert(str.length); //str.length: 获取字符串的长度
alert(str.substring(1,3));//[1,3) ,索引从0开始

}
</script>
</head>

<body>
<a href="" onclick="f8()">click me</a>

</body>
</html>

9、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
function f8(){
var str = 'abc12de12345asfasd1234';
var reg = /[0-9]+/g;
//alert(typeof reg); JS在执行时,会把/[0-9]+/g转换成一个RegExp对象,g表示搜索整个字符串,i表示忽略大小写

//alert(str.match(reg));//输出的结果是12,12345,1234

var reg2 = /[0-9]+/;
//alert(str.search(reg2));//返回第一次匹配的索引

alert(str.replace(reg,'888'));//将str中符合reg规则的字符串都转换成888

}
</script>
</head>

<body>
<a href="" onclick="f8()">click me</a>

</body>
</html>

10、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
function f10(){
//第一种创建数组的方式: 使用 new Array()
var arr = new Array();
arr[0] = 1;
arr[2] = '1bc';
arr[10] = 'haha';
//alert(arr.length); //输出 11
//alert(arr[9] + ' , ' + arr[10]); //输出的结果是undefined , haha

var arr1 = [];
arr1[3] = 2;
//alert('arr2.length: ' + arr1.length);//输出结果: 4

var arr2 = [1,false,'abs'];
arr2[5] = 'helloworld';
alert('arr2.length: ' + arr2.length);//输出结果: 6
alert(arr2[5]);//输出结果: helloworld

}
</script>
</head>

<body>
<a href="" onclick="f10()">click me</a>

</body>
</html>

11、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
function f11() {
var arr = new Array();//二维数组的定义.注意这里写成new Array也是可以的(即省略Array后面的小括号)
arr[0] = [ 1, 11, 111 ];
arr[1] = [ 2, 3, 4, 5 ];
arr[2] = [ 6, 7, 8, 9, 10, 11 ];

for ( var i = 0; i < arr.length; ++i) {
for ( var j = 0; j < arr[i].length; ++j) {
alert(arr[i][j]);
}
}
}

</script>
</head>

<body>
<a href="" onclick="f11()">click me</a>

</body>
</html>

12、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
<head>
<script type="text/javascript">
function f12() {
var arr = ['b','c','a','d'];
//alert(arr.toString());//输出b,c,d,a
//alert(arr);//结果和上面是一样的

var arr1 = ['1','3','2','4'];
//alert(arr.concat(arr1));//b,c,a,d,1,3,2,4

//alert(arr1);//1,3,2,4
//alert(arr1.reverse());//4,2,3,1

//alert(arr1.join('|'));//1|3|2|4

//alert(arr1.slice(1,4));//输出数组中的[1,4)的元素

var arr2 = [111,22,3,99,100];
//alert(arr2.sort());//默认按照字典序进行排序

alert(arr2.sort(function(t1,t2){//这时候从大到小进行排序.所传的对象是函数对象
return t2-t1;
}))

}

</script>
</head>

<body>
<a href="" onclick="f12()">click me</a>

</body>
</html>

13、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
<script type="text/javascript">

var i = 100;
function f13() {
var i = 1000;
alert(i);
}

</script>
</head>

<body>
<a href="" onclick="f13()">click me</a>

</body>
</html>

14、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>


<script type="text/javascript">

function f14(){
var obj = document.getElementById('d1');
//alert(obj.innerHTML);//通过innerHTML可以读写一个节点的html内容
obj.innerHTML='i love zzt';
}

</script>
</head>

<body>
<a href="javascript:;" onclick="f14()">click me</a>

<div id="d1">
<span>hello javascript</span>
</div>
</body>
</html>

15、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>



<script type="text/javascript">
function f15(){
var obj = document.getElementById('username');
alert(obj.value);//通过value属性可以读写一个节点的value值
obj.value = 'i love zzt';
}

</script>
</head>

<body>
<input id="username" type="text"/>
<a href="javascript:;" onclick="f15()">click me</a>

</body>
</html>

16、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>



<script type="text/javascript">
function f16(){
var opp1 = document.getElementById('opp1');
var opp2 = document.getElementById('opp2');
var result = document.getElementById('result');

var o1 = parseInt(opp1.value);
var o2 = parseInt(opp2.value);
result.value = o1+o2;
}

</script>
</head>

<body>
<input id="opp1" type="text"/>
<input id="opp2" type="text"/>
<input id="result" type="text"/>

<a href="javascript:;" onclick="f16()">click me</a>

</body>
</html>

17、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>



<script type="text/javascript">
function f17(){
var opp1 = Math.random();//产生[0,1)的随机数
var opp2 = Math.floor(13.68);//向下取整. 13
var opp3 = Math.ceil(13.68);//向上取整 14
Math.c
alert(opp1);
alert(opp2);
alert(opp3);
alert(Math.random() * 33);
}

</script>
</head>

<body>

<a href="javascript:;" onclick="f17()">click me</a>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航