此文只适用于初学者,大神们就不要看了,嘿嘿~
一、定义变量
关键字 var,由此关键字定义变量,例如:var a =21;就把21这个数定义给了变量a
二、基本数据类型
1、Number类型 表示数字,例如:10,3.14;
var number = 10;
alert(number);
2、String类型 表示字符串
var string = ‘hello’;
alert(string);
·注意:等号后面必须有单引号或双引号。
3、Boolean类型 布尔类型,用来表示真假 true false
var b1 = true;
var b2 = false;
alert(b1);
4、Object 对象类型(了解)
var obj = new Object();
alert(typeof obj);
三、用户交互&代码调试的5绝杀
用户界面交互基本操作是警告,提示和确认。
代码调试:
1、alert(Message); 消息窗口,也叫作模态窗口
var c = 0;
alert(c);
这两句JS代码便会在页面刷新时 ,出现提示框,提示框的内容为“0”;
2、prompt(提示信息); 该提示框会出现用户可以输入的窗口,类似于input中的text属性。
var name = prompt('请输入姓名');
alert(name);
3、confirm 跟alert差不多,就是多了个取消
confirm('下课不?');
4、console.log 这个不是在网页上提示,而是在开发者工具中的控制台中输出
var a =100;
console.log(a);
会在控制台上出现“100”这个数
5、document.write 将内容写入到html文件中
document.write('这是一个大千世界,啥货都有');
四、算数运算符
算数运算
alert(5+5);
alert(10-3);
alert(5*6);
alert(10/2);
求余运算: alert(10%3);
+号对字符串的作用
alert('hello'+' word');//拼接
alert('2'+1);
-号对字符串的影响
alert('5'-3);// 2
自增,自减运算符 ++ --
var a = 10;
a++;//相当于a = a + 1;
++a;
alert(a);
var b = 10;
b--;
--b;
alert(b);
当++ -- 不是单独出现的时候
var a = 10;
var number = a++;// ++ 在后,先赋值,在自增;++ 在前,先自增,在赋值。
alert(a);
alert(number);
复合运算符
+= -= *= /= %=
var a = 10;
a = a + 5;
a += 5;
alert(a);
a = a / 3;
a /= 3;
alert(a);
a = a % 3;
a %= 3;
alert(a);
五、元素的获取
<body>
<p id="para">这就是P标签</p>
<p class="praa">通过类名获取元素</p>
<p class="praa">通过类名获取元素</p>
<p class="praa">通过类名获取元素</p>
<script type="text/javascript">
//1.通过id获取元素
// var para = document.getElementById('para');
// //修改元素的样式
// para.style.color='red';
// //2.通过类名获取元素
var praa = document.getElementsByClassName('praa');
//修改集合中第一个元素的样式
praa[0].style.color = 'blue';
praa[1].style.color = 'yellow';
praa[2].style.color = 'orange';
praa[1].style.color = 'green';
//3.通过标签名获取元素
// var paar = document.getElementsByTagName('p')
// paar[0].style.color = 'green';
六、一些细节:
script标签放在底部的好处:
虽然理论上放在哪里都是可以的,但是对于前端页面优化来说,放在底部最佳,如果js执行出错,最起码页面中的元素还能加载出来,因为文档是按照从上到下的顺序执行的。
变量名:(自定义的,1、不能以数字开头,可以是字母/_/$/。2、不能使用系统保留字。3、大小写敏感,多个单词采用驼峰命名法{var className=21;}。4、见名知意。5、不能出现空格)