js basic¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jstest</title>
<style type="text/css"></style>
{# js数据类型#}
<script>
//变量的声明不能使用关键字，不能使用数字开头。
//字符串类型
var ad = 'Hello';
//数字类型
var b = 20;
//布尔类型
var c = true;
var d = false;
//数组类型, 如果我们要取下面数组中第二个值，也就是那个4，那我们可以找e[1],第一个值是0,和python的索引是一样的。
var e = new Array(1,4,66,'Alvin Wan');
//对象类型，像是一个组，字典，单独调用下面的cc后面的22这个值，可以使用f.cc，就得到22了。
var f ={
cc:22,
dd:33,
ee:55,
}
//Undefined类型
var g ; //没有给值，就是undefined类型。
//NULL类型
var h = null;
//字符串截取
var i = '105449@qq.com'
function cc() {
alert(f.dd)
}
{# alert(j)#}
</script>
{# js运算符#}
<script>
var a1 = 9;
var a2 = 4;
{# 变量相加#}
var a3 = a1+a2;
var a4 = a1-a2;
var a5 = a1*a2
var a6 = a1/a2
var a7 = a1%a2 //取余
var a8 = new Array(a3,a4,a5,a6,a7)
{# 变量自加+1或减1#}
var a9 = 1
var a10 = a9++ //先把自己的值1赋值给a10,然后a9自己加1变成2.
var a11 = ++a9 //先把自己+1，然后+1得到的3赋值给a11，自己这时也已经变成3了。
{# 字符串拼接。当+号前后有字符串时，结果就变成了拼接，组成一个新的字符串。#}
var a12=4396;
var a13='Alvin Wan'
var a14=a12+a13
</script>
{# 条件判断#}
<script>
var b1=10
var b2='10'
{# >是大于，==是等于，<是小于，===三个等于号是恒等，恒等会去判断他的数据类型 #}
if (b1===b2){
}else{
}
{# &&是与，||是或，!是非，下面的表达式中，5确实是大于4的，4确实是小于5的，所以两边的条件都成立，所以b3的值是True#}
var b3=(5>4)&&(4<5)
{# 这里!true也就是不是true，不是true那就是false了，所以b4的值是false#}
var b4=!true
{# ,逗号运算符，在一条语句中执行多个操作，下面我们给多给变量赋值 #}
var b5=100,b6=700,b7=800
{# 最简单的if判断，用?, 下面的表达式的意思是，如果5大于4，那么就赋值yes,否则就赋值no给b8，一个简单的if判断 #}
var b8 = 5>4?'yes':'no';
</script>
{# 流程控制语句#}
<script>
//if(){}else{}
var c1 = Number(null)
if(c1==0){
{# alert(0)#}
}else {
{# alert(c1)#}
}
var c2 = 33;
{# if else的用法#}
if (c2 >=90){
alert('完美！')
}else if(c2>=80){
alert('优秀！')
}else if(c2>=60){
alert('及格！')
}else{
{# alert('不及格!')#}
}
var c3 =1;
{# case的用法，必须要加berak，如果不加，会在匹配一个case后，继续执行下面的内容，所以加berak防止语句穿透#}
switch (c3){
case 1:
{# alert('one');#}
break;
case 2:
alert('two')
break;
case 3:
alert('three')
break;
}
{# while的用法#}
var c4 = 1;
while(c4<=5){
{# alert(c4);#}
c4++
}
var myDate = new Date();//获取系统当前时间
{# var mytime=myDate.toLocaleTimeString();#}
alert(myDate)
</script>
</head>
<body>
<p onclick="">This is js test page</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>java script 1</title>
<script type="text/javascript">
function PeopleNameAge(name,age) {
alert('你的名字：' +
name +
'你的年龄：' +
age);
}
PeopleNameAge('alvin',25)
//驼峰式命名:PeopleNameAge 每个单词首字母大写
//小驼峰式命名：Peoplenameage 单词的首字母大写
//函数可以有参数，也可以没有参数。函数的名称可以覆盖，同样命名的函数，后面的会覆盖前面的。
function aza() {
return(1)
}
{# alert( aza())#}
</script>
{# js的object#}
<script type="text/javascript" >
//object就和python字典一样
//使用new运算符创建Object
var people = new Object();
people.name='alvin';
people.age=25;
//new关键字可以省略
var people = Object();
people.name='alvin';
people.age=25;
//使用字面量方式创建Object
var people = {
name:'alvin',
age:25 //最后一个属性不要加逗号
}
//赋值方式
var people = {};
people.name='alvin'
people.age = 25;
//输出方式
{# alert(people.name);#}
{# alert(people['name'])#}
//为对象创建方法
var people = {
run : function () { //run是它的名称，function是指函数
return '跑步中'
}
}
people.fly = function () {
return 'fly'
}
{# alert(people.run())#}
{# alert(people.fly())#}
</script>
{# js的数组（和python的list一样#}
<script type="text/javascript">
//使用new关键字创建数组
var box = new Array();
var box = new Array(10);
var box = new Array('alvin',18,'nice');
//以上三种方法，可以省略new关键字
var box = Array();
//声明采用字面量的方式,就和python的list数据类型一样
var box = [];
var box = ['alvin',18,'nice'];
// 使用索引下标来取数组的值，也和python一样。
{# alert(box[2])#}
//修改指定索引下的内容
box[2]='happy'; //javascript 里面写不写分号都可以。
{# alert(box.length) //数组的长度#}
// 数组里单个元素的值也可以是对象，也就是字典,下面我们定义一个复杂的数组
var box = [
{
name:'alvin',
age :18,
run:function () {
return '跑步中...';
}
},
['百度','淘宝','腾讯'],
'alvin',
18
]
{# alert(box[0].run()) //取9号索引的run()属性。#}
{# alert(box[1][2]) //取1号索引的值里面的2号索引#}
</script>
{# js BOM#}
<script type="text/javascript">
{# js的三种弹窗，一个确认框，confirm,一个提示框prompt,还有一个用的最多的警告框。#}
var w = window.innerWidth; //获取浏览器宽度
var h = window.innerHeight; //获取浏览器高度
{# alert(w)#}
{# if(confirm("你喜欢我吗？")){#}
{# alert('Yes I like!')#}
{# }else {#}
{# alert('No I do not like ')#}
{# }#}
{# var name = prompt('请输入你的名字');#}
if(name){
{# alert('welcome'+name)#}
}
</script>
{# JavaScript 计时事件#}
<script type="text/javascript">
//语法，setInterval(函数体，执行时间）时间单位毫秒
{# setInterval(function () {#}
{# document.write(1);#}
{# },1000)#}
{# setInterval(function () {#}
{# document.write('1')#}
{##}
{# },1000)#}
function ad() {
var d = new Date();
var t = d.toTimeString() //获得时间
document.getElementById('clock').innerHTML="<h1>"+t+" </h1>"; //设置使用id为clock的标签，添加内部html "<h1>"+t+" </h1>"，也可以通过innerText设置文本
{# document.write('now time is '+d)#}
{# alert(t);#}
}
{# setInterval('ad()',1000);#}
var time1 = new Date();
</script>
{# 页面延迟加载，document更多方法,js操作属性样式#}
<script type="text/javascript">
window.onload=function(){
document.getElementById("betaa").setAttribute('style','font-size:40px;color:red');
{# var ad=document.getElementById("ad").getAttribute('name') ; //获取使用id为ad的表情的name属性的值，赋值给ad。#}
{# document.getElementById('alpha').setAttribute('style','color:red');#}
{# alert(ad)#}
ad = document.getElementById("ad");
ad.style.color="blue"
ad.style.fontSize="30px" //原本我们设置字体大小是font-size,但这里是不能用-的，所以格式上是把-后面的首字母大写，然后把-去掉，font-size变成fontSize，设置有效。
}
</script>
</head>
<body>
{#<input type="text " value="aaa" id="clock">#}
<div id="betaa" >
666666
</div>
<div id="ad"> hello ad</div>
</body>
</html>