HTML,CSS和JavaScript是网页设计的基础。HTML和CSS定义了静态的效果,而JavaScript则可以体现出一些动态的效果。在已经掌握一种或者多种编程语言的基础下,学习JS很容易,下面看看一些基本的使用方法。
1. JavaScript的位置。
和CSS类似,我们可以直接写代码块,也可以引用外部文件。理论上,<script src="xxx"></script>可以放在<head>里面,也可以放在<body>里面,但是从效率考虑,如果script的链接比较慢或者错误,<head>里面可能导致整个页面半天加载不出来,因此,我们一般推荐放在<body</body>代码块的底部。如果只是暂时的测试性质的编码,我们甚至可以直接在浏览器上的console上使用。F12或者Inspect ,然后选择console就可以了
2.定义变量
直接写 name=‘james’ 定义了全局变量,如果在函数里面定义,指定一个var 关键字,则表示局部变量
3.数字
JS不区分float或者int,不过我们可以通过parseInt或者parsefloat来转换字符
例如:
a="222.2" parseFlaot(a) 222.2 parseInt(a) 222
4. 字符串
这个和其他语言几乎一样,有常见的属性和方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
obj.length 长度
|
实例:跑马灯,不停的循环输出文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1">欢迎领导视察工作</div> <script> //定义函数 function change(){ //通过id获取标签 var dd=document.getElementById("d1") //控制台可以查看输出,很好的查错方式 console.log(dd) var content=dd.innerText console.log(content) //获取第一个字符 var f=content.charAt(0) //获取子字符串 var l=content.substring(1,content.length) //字符串拼接 var new_content=l+f; //重新赋值 dd.innerText=new_content console.log(new_content); } //定时器,每隔1000毫秒执行一下change() setInterval(‘change()‘,1000) </script> </body>
5. 布尔值, true和false,注意是小写
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
6. 数组,和python的列表差不多。
方法如下,其中splice比较特殊 他有3个参数,第一个参数表示插入的位置,第二个参数表示删除几个值,第三个表示插入的新值。因此splice(0,1)表示删除第一个值,splice(0,0,20)表示第一个值前面插入一个值20
obj.length 数组的大小
|
7. 字典
例如
a={‘name‘:‘James‘,‘age‘:30}
使用和Python一样
8. for循环;for循环有2种形式
第一种形式
例如直接循环数组,他输出的是索引而不是值
a=[11,22,33,44] for(var item in a){console.log(item);} 0 1 2 3 for(var item in a){console.log(a[item]);} 11 22 33 44
直接循环字典,输出的也是key而不是value
b={"name":"alex","age":20} for(var item in b){console.log(item);} name age undefined for(var item in b){console.log(b[item]);} alex 20
第二种形式, 就和其他语言一样;不过注意如果要输出字典,因为字典的key的数据类型是无序散乱 因此这里就不适合了
for(var i=1;i<a.length;i++){console.log(i)} 1 2 3 for(var i=1;i<a.length;i++){console.log(a[i])} 22 33 44