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语句时,请留意是否关闭大小写切换键

    函数gtElementByIdgetElementbyID是不同的

    同样,变量MamA也不同的

    

</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 //xUndefined

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>

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。