JavaScript笔记——第一天
关于什么叫JavaScript就不说了，我也记不住，只知道它属于前端的，页面交互的，完成“动作”的，基于对象的……好叭也许后续…再补充呗。
一、JS的三种引入方式
1、内部引用：用script标签实现，这个标签可以放在html页面中任意位置，但一般为了书写不乱，放在head标签中或者html结尾处。
2、行内引用:不太建议使用，因为代码多了就不好书写，跟CSS一个道理。一般书写格式为：在标签内书写οnclick=“script:’除了数字可以不用引起来，其他都放这里’”，onclick表示点击，onload表示加载
3、外部引用:在外部书写一个以.js结尾的代码文件，再在内部引用。script标签中用src引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方式一、内部引用-->
<script>
alert(123);
</script>
</head>
<!--方式二、行内引用-->
<body onload="script:alert(1234)">
<h1 onclick="">脚本演示</h1>
</body>
<!--方式三、外部-->
<script src="my.js"></script>
</html>
二、变量的声明和赋值
我觉得我还是直接贴代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var a;
var b =123;
var c = false;
var d = 'Hello';
var e = [];
var f = {};
var g = new Date();
var h = null;
var i = /@#$!/;
alert(typeof a);
alert(typeof b);
alert(typeof c);
alert(typeof d);
alert(typeof e);
alert(typeof f);
alert(typeof g);
alert(typeof h);
alert(typeof i);
</script>
</body>
</html>
三、变量可以切换
就是跟Java不一样，js的变量可以切换类型，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var a;
alert(typeof a);
var a=123;
alert(typeof a);
var a = false;
alert(typeof a);
var a = 'Hello';
alert(typeof a);
var a = [];
alert(typeof a);
var a = null;
alert(typeof a);
var a = /@#$!/;
alert(typeof a);
</script>
</body>
</html>
四、数组
看代码and注解吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var arr = [ 123, false , 'Hello', new Date()];
console.log(arr.length)
for(var i = 0; i< arr.length;i++){
console.log(arr[i])
}
console.log('--------------------')
arr[5] = 3.141592654;
for(var i = 0; i< arr.length;i++){
console.log(arr[i])
}
console.log('--------------------')
var arr = [1,2.3,4,5];
var arr2 = [1.1,2.2,3.3]
console.log(arr.length)
arr.pop();
arr.push(78);
var ts = arr.concat(arr2);
for(var i = 0; i< ts.length;i++){
console.log(ts[i])
}
</script>
</body>
</html>
五、字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var str = 'Hello World';
console.log(str.length);
for(var i = 0;i<str.length;i++){
console.log(str.charAt(i))
}
console.log(str.substr(2,3));
console.log(str.substring(2,3));
console.log(str.indexOf('llo'));
console.log(str.indexOf('llo',7));
var arr = str.split(' ');
console.log(arr.length);
for(var i = 0;i<arr.length;i++){
console.log(arr[i])
}
</script>
</body>
</html>
六、运算符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var a = '10';
var b = '20';
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log(a++);
console.log(++b);
console.log('--------------------')
var x = '10';
x += 20;
console.log(x);
console.log('--------------------')
var y;
console.log(typeof y);
y += 20;
console.log(y);
var z = null;
z += 20;
console.log(z);
console.log('--------------------')
var i = 10;
var j = 20;
console.log(i>j && i<j);
console.log(i>j || i<j);
console.log(!(i<j));
</script>
</body>
</html>
最后一个例子：运行代码，浏览器弹出两个数字（默认为0，可以自己填），然后运算（默认相加，可以自己填）。
这里用到一个函数，明天开始讲函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
fun();
function fun() {
var num1 = prompt("请输入运算数字：",'0');
var num2 = prompt("请输入运算数字：",'0');
var op = prompt("请输入运算符号：",'+');
if(isNaN(num1)) return;
if(isNaN(num2)) return;
num1 = parseInt(num1);
num2 = parseInt(num2);
var result = null;
switch (op) {
case '+':
result=num1 + num2
break;
case '-':
result=num1 - num2
break;
}
alert("运算结果为：" + result)
}
</script>
</body>
</html>
|