javascript基础概念和基础使用案例
程序员文章站
2024-02-03 11:33:10
1，javascript的特点以及和java的区别 javascript是基于对象和事件驱动的语言，应用与客户端。 javascript是基于对象和事件驱动的语言，应用与客户端。 js的特点 js的特点 交互性：信息的动态交互 交互性：信息的动态交互 安全性：不能访问本地磁盘文件 安全性：不能访问本 ......
1，javascript的特点以及和java的区别
javascript是基于对象和事件驱动的语言，应用与客户端。
js的特点
交互性：信息的动态交互
安全性：不能访问本地磁盘文件
跨平台性：java里面跨平台性，虚拟机；javascript只有能够支持js的浏览器，都可以运行
和java的区别：
（1）java是sun公司，现在oracle；js是网景公司
（2）JavaScript 是基于对象的，java是面向对象
（3）java是强类型的语言，js是弱类型的语言
- 比如java里面 int i = "10";
- js: var i = 10; var m = "10";
（4）JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。
（5）java和JavaScript都区分大小写
2，使用js的案例
1，标签中使用：
<script type="text/javascript"> js代码 </script>
2，外部引用js文件，创建js文件，写js代码
<script type="text/javascript" src="1.js"></script>
3，变量和数据类型案例：
<script> var str="abc"; alert(str); var str1="123" var mm = 123; alert(mm) alert(typeof(mm))//查看当前变量的数据类型 var str2 = null//表示对象为空 document.writeln(str) document.writeln(typeof(str)) var str3 //定义不赋值 document.writeln(str2)//undefined var flag = true; alert(flag); var obj = new Object();//Object类 document.writeln(obj) </script>
4，语句案例
<script>
var a = 1;
if (a==1){
alert(1);
}else{
alert(2)
}
var b = 2;
switch(b){
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default:
alert("other")
break;
}
var i= 5;
while(i>1){
alert(i)
i--;
}
for(var j = 1; j <=3; j++){
alert(j);
}
</script>
5，运算符案例
<script type="text/javascript">
var i = 123;
document.write(i/1000*1000);
//js里面不区分整数和小数 123/1000 = 0.123;
var str ="456";
var str1 = "abc";
// alert(str+1)//4561 相加 字符串的连接
// alert(str-1)//455 真正的减法运算
document.write(str1-1)//提示NaN 表示不是数字
var flag = true; //true=1
// alert(flag+1);//2
var flag1 = false; //false=0
document.write(flag1+1)//1
//==只判断值，和类型无关；===判断值和类型
var aa = 5;
var a1 = "5"
if(a1===5){
document.write(5);
}else{
document.write("other")
}
var result = -1 > 0? true : false;
document.writeln("result:" +result)
</script>
6，99乘法表案例
<head>
<meta charset="UTF-8">
<title>乘法表</title>
<style type="text/css">
table{
matgin: auto;
border-collapse: collapse;
}
td {
padding: 5px;
}
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' cellspacing='0'>")
document.write("<caption>9*9乘法表</caption>");
for(var i = 1; i <= 9; i++){
document.write("<tr>");
for(var j = 1; j <= i; j++){
document.write("<td>");
document.write(j + "*" + i + "="+ j*i);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
7，定义数组案例
<script type="text/javascript">
var arr = [1,2,"3"];
// document.write(arr);
document.write("length:" + arr.length);
var arr1 = new Array(5);
arr1[0] = "a";
arr1[1] = "b";
arr1[2] = "c";
var arr2 = new Array(3,4,5);
document.write(arr2);
</script>
数组方法案例
1. concat() 连接两个或更多的数组，并返回结果
2. reverse() 将数组进行反转
3. join(separator) 与split()功能相反，将数组通过分隔符，拼成一个字符串。
4. sort()
<script>
var arr1 = [1,8,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
document.writeln(arr3);
arr3 = arr1.reverse();
document.writeln(arr3);
document.writeln("<br>")
arr3 = arr1.join("#");
document.writeln(arr3);
document.writeln("<br>")
/*
调用sort方法
1. 数字是按首位排序的
2. 如果是字母,就按字母顺序
如果想要升降序 :function (a,b) a -b 升序
*/
arr1.sort();
document.writeln(arr1);
document.writeln("<br>")
arr4 = ['jack','Rose','Tom','Jerry','Kate'];
arr4.sort();
document.writeln(arr4);
document.writeln("<br>")
var method = function (a,b) {
return b - a;
};
arr1.sort(function (a,b) {
return b - a;
});
document.writeln(arr1);
document.writeln("<br>")
</script>
8，函数案例
<script type="text/javascript">
/*
*第一种方法：使用函数关键字
* 函数的参数列表里面，不需要写var 直接写参数名称
* function 方法名（参数列表）{
* 方法体，
* 返回值可有可无}
* */
function test(){
alert("a");
}
//调用方法
// test();
function add1(a,b){
var sum = a + b;
alert(a+b);
}
// add1(2,3);
function add2(a,b,c){
var sum1 = a + b + c;
return sum1;
}
alert(add2(2,3,4));
//第二种方式 匿名函数
var add3 = function(m,n){
document.write(m+n);
}
add3(5,6);
//第三种方式：动态函数 ，使用到js里面的内置对象Function
// var add4 = new Function("x,y","var sum; sum=x+y;return sum;");
var canshu = "x,y";
var fagnfati = "var sum;sum=x+y;return sum;"
var add4 = new Function(canshu,fagnfati);
alert(add4(1,9));
</script>
9，轮播图案例
<body>
<img src="../img/0.jpg" width="800px" id="myPic">
<script >
var i = 0;
var method = function () {
var img = document.getElementById("myPic");
img.src = "../img/"+i+".jpg";
i++;
if(i == 5){
i = 0;
}
}
window.setInterval(method,1000)
</script>
</body>
10，内置对象案例
<script type="text/javascript">
document.write("现在时间是：" + new Date() + "<hr/>");
document.write("现在时间是：" + new Date().toLocaleString() + "<hr/>");
var a = "123abc123";
var i = parseInt(a);
document.write(i + "<br/>");
var b = "3.14abc123";
i = parseInt(b);
document.write(i + "<br/>");
var age = "1012";
document.write(isNaN(age) + "<br/>");//不是一个数字字符，返回true
var str = "hello world 你好 世界";
document.write(str + "<hr/>");
str = encodeURI(str);
document.write(str + "<hr/>");
//对编码后的URL进行解码
str = decodeURI(str);
document.write(str + "<hr/>");
</script>