首页 > 代码库 > js基础学习
js基础学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script>
document.getElementById(‘demo‘).innerHTML=‘My First Pargraph_2014‘;
</script>
<h4>如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。</h4>
<p id=‘demo‘>My First Pargraph.</p>
<h4>写到文档输出</h4>
<script>
document.write(‘<p>写入到html浏览器里面</p>‘);
</script>
<h4>如果用document.write()仅仅向文档输出写内容</h4>
<p>如果在文档已完成加载后执行document.write()方法，会把整个html页面被覆盖掉</p>
<p>my first web page</p>
<button onclick="myfunc()">点击这边</button>
<script>
function myfunc(){
document.write(‘消失了，按钮‘);
}
</script>
<h4>javascript语句向浏览器发出命令，语句的作用是告诉浏览器该做什么</h4>
<h4>分号是在语句结尾添加分号，另一种用处中一行编写多条语句，它是可选的,js是通过顺序来执行每一条语句</h4>
<p id="abc">A B C.</p>
<div id="div">D I V.</div>
<script>
document.getElementById(‘abc‘).innerHTML=‘hello world!‘
document.getElementById(‘div‘).innerHTML=‘Div1‘
</script>
<h4>js代码块</h4>
<h4>
通过语句块形式进行组合
块由左括号开始，右括号结束
块的作用是使语句序列一起执行
js函数将语句组合在块中的典型例子
</h4>
<p id="abc1">A B C.</p>
<div id="div1">D I V.</div>
<p><button type="button" onclick="myfunc1()">点击这边</button></p>
<script>
function myfunc1(){
document.getElementById(‘abc1‘).innerHTML=‘hello world!111‘
document.getElementById(‘div1‘).innerHTML=‘Div11111‘
}
</script>
<h4>js对大小写有敏感</h4>
<p>
当编写js语句时，请留意是否关闭大小写切换键
函数gtElementById与getElementbyID是不同的
同样，变量Ma与mA也不同的
</p>
<p>空格</p>
<p>
js会忽略多余空格，可以向脚本添加空格，来提升可读性
var name=‘name‘;
var name= ‘name‘;
对代码也可以进行拆行处理
document.write(‘hello \
world!‘);
不过，下面的情况是不可以拆行的
document.write\
(‘hello world!‘);
</p>
JavaScript 注释可用于提高代码的可读性。
<h4>注释</h4>
js不会执行注释
可以添加注释对js进行解释，或者提高代码可读性
单行注释以//开头
<h1 id=‘my1‘></h1>
<p id=‘myp‘></p>
<script>
//输入标题
document.getElementById(‘my1‘).innerHTML=‘单行注释‘
//输出段落
document.getElementById(‘myp‘).innerHTML=‘输出段落‘
</script>
<p><b>注释:</b>注释不会被执行.</p>
JavaScript 多行注释
以/*开始,以*/结束
<h1 id=‘H1‘></h1>
<p id=‘P1‘></p>
<script>
/*下面这部分是一个标题和一个段落并将代码主页的开始
*/
document.getElementById(‘H1‘).innerHTML=‘/**/‘
document.getElementById(‘P1‘).innerHTML=‘/**/‘
</script>
<p><b>注释:</b>注释不会被执行.</p>
使用注释来阻止执行
<p id=‘P11‘></p>
<script>
//document.getElementById(‘H1‘).innerHTML=‘/**/‘
document.getElementById(‘P11‘).innerHTML=‘/**/‘
</script>
<p><b>注释:</b>注释不会被执行.</p>
注释用于阻止代码块执行（可用于调用）
<script>
/*document.getElementById(‘H1‘).innerHTML=‘‘
‘document.getElementById(‘P11‘).innerHTML=‘‘;
*/
</script>
在行末使用注释
就是在代码行的结尾处注释
<p id=‘vars‘></p>
<script>
var x=5; //声明x并把5赋值给x
var x1=x+2 //声明y并把x+2赋值给x1
document.getElementById(‘vars‘).innerHTML=x1 //把y的值写到vars
</script>
<p><b>注释:</b>注释不会被执行.</p>
JavaScript 变量
<h3>变量是存储信息的容器。</h3>
<script>
var x=2;
var y=3;
var xy=x+y;
{ document.write(x+‘<br>‘)
document.write(y+‘<br>‘)
document.write(xy+‘<br>‘)
}
/*var z1=window.prompt("请输入数字！","");
var z2=window.prompt("请输入数字！","");
var z3=z1+z1;*/
</script>
x=1
y=2
z=x+y
在代数中，使用字母比如x来保存值2
通过上面表达式z=x+y能够计算出z的值为3
在js中这些字母被称为变量
也就是可以存储数据的容器
JavaScript 变量
与代数一样,js变量可以用于存储值和表达式
变量可以使用短名称，也可以使用描述性更好的名称
变量必须以字母开头
变量也能以$和_符号开头（不推荐这么做）
变量名对大小写敏感
JavaScript 数据类型
js变量还可以保存其他数据类型，比如文本值(name=‘liuben‘)
js，类似‘liuben‘这样一条被称为字符串
js变量很多类型，还有整形，浮点型等
当向变量分配文本值，可以使用双引号或者单引号来包围这个值
当向变量赋数值时，不要使用使用引号，因为如果使用引号，表示是字符类型
<script>
var pi=3.14;
var name=‘name‘;
var abs1=‘yes i am!‘
document.write(pi+‘<br>‘);
document.write(name+‘<br>‘);
document.write(abs1+‘<br>‘);
</script>
声明（创建） JavaScript 变量
在js中创建变量通常称为‘声明‘变量
使用关键字var 来声明变量
var carname;
当变量声明之后，该变量是空的（None）
如需向变量赋值，使用等号
carname=‘volo‘;
也可以在声明变量时对其赋值
var carname=‘volo‘;
<p>点击这边的变量，并显示结果</p>
<button onclick="myf()">点击这边</button>
<p id=‘d‘></p>
<script>
function myf(){
var car=‘xxoo‘
document.getElementById(‘d‘).innerHTML=car
}
</script>
一条语句，多个变量
一行多条地，使用逗号隔开
var name=‘abc‘,age=123,float1=2.3,long=1l
也可以横跨多行
var name=‘abc‘,
age=123,
float1=2.3
long=1l;
Value = undefined
在计算机程序中，经常会声明无值变量，未使用值来声明变量，其值实际上是undefined
如下
var carname;
重新声明 JavaScript 变量
当重新声明JS变量时，该变量值不会丢失，可以在2条语句执行后，变量carname值依然是‘volo‘
var carname=‘volo‘
var carname;
JavaScript 算数
您可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：
y=5
x=x+2
<p>进行简单的计算</p>
<button onclick="myc()">计算</button>
<p id=‘d1‘></p>
<script>
function myc(){
var y=5;
var x=y+2;
var demop=document.getElementById(‘d1‘)
demop.innerHTML=‘x=‘ + x;
}
</script>
JavaScript 数据类型
分字符串，数字，布尔，数组，对象,Null, Undefined
js是动态类型，也就是和python有类似的地方
例如
var x //x为Undefined
var x=6; //x是数字
var x=‘bull‘//x是字符串
JavaScript 字符串
字符串是存储字符的变量，字符串可以是引号中任意文本，可以是单引号或者双引号
var abs1=‘1‘
var abs1=‘2‘
var abs1=‘abs1‘
<script>
var carname1="Bill Gates";
var carname2=‘Bill Gates‘;
var answer1="Nice to meet you!";
var answer2="He is called ‘Bill‘";
var answer3=‘He is called "Bill"‘;
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>
JavaScript 数字
只有一种数字类型，可以带小数点，也可以不带
var x=1.0 33//小数点
var x=2 //无小数点
极大或者极小的数字可以通过科学（指数）计数法来写
var x=123e5 //12300000
var x=123e-5 //0.00123
<script>
var x1=36.00;
var x2=36;
var y=123e5;
var z=123e-5;
document.write(x1 + "<br />")
document.write(x2 + "<br />")
document.write(y + "<br />")
document.write(z + "<br />")
</script>
JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var t=true
var f=false
布尔常用在条件测试中
JavaScript 数组
关键字 new Array();
var l=new Array();
l[0]=‘a‘
l[1]=‘b‘
或者 condensed array(密集阵列)类似python中的元组
var l=new Array(‘a‘,‘b‘,‘c‘);
也可以 literal array(文字阵列)类似python的列表
var l=[‘a‘,‘b‘,‘c‘];
<script>
var i;
var cars = new Array();
cars[0]=‘a‘;
cars[1]=2;
cars[2]=2.6;
for (i=0;i<cars.length;i++) /*类似 for i in range(len(cars)):*/
{
document.write(cars[i]+‘<br>‘)}
</script>
</body>
</html>
js基础学习