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 长度obj.trim() 移除空白obj.trimLeft()obj.trimRight)obj.charAt(n) 返回字符串中的第n个字符obj.concat(value, ...) 拼接obj.indexOf(substring,start) 子序列位置obj.lastIndexOf(substring,start) 子序列位置obj.substring(from, to) 根据索引获取子序列obj.slice(start, end) 切片obj.toLowerCase() 大写obj.toUpperCase() 小写obj.split(delimiter, limit) 分割obj.search(regexp) 从头开始匹配,返回匹配成功的第一个位置(g无效)obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个。obj.replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项, $数字:匹配的第n个组内容; $&:当前匹配的内容; $`:位于匹配子串左侧的文本; $‘:位于匹配子串右侧的文本 $$:直接量$符号 |
实例:跑马灯,不停的循环输出文字
<!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 数组的大小obj.push(ele) 尾部追加元素obj.pop() 尾部获取一个元素obj.unshift(ele) 头部插入元素obj.shift() 头部移除元素obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 obj.splice(n,0,val) 指定位置插入元素 obj.splice(n,1,val) 指定位置替换元素 obj.splice(n,1) 指定位置删除元素obj.slice( ) 切片obj.reverse( ) 反转obj.join(sep) 将数组元素连接起来以构建一个字符串obj.concat(val,..) 连接数组obj.sort( ) 对数组元素进行排序 |
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本文出自 “麻婆豆腐” 博客,请务必保留此出处http://beanxyz.blog.51cto.com/5570417/1920939
原文:http://beanxyz.blog.51cto.com/5570417/1920939