JS:
1、直接嵌入HTML页面。
2、由浏览器解释执行代码,不进行预编译。
JS不区分单引号和双引号。
JS:解释型语言
Java:编译型语言
直接量(常量) 'abc' 12
也称为“字面量”,就是看见什么,它就是什么。
简单的直接量有2种:数字、字符串。
数值的直接量的表达非常简单,就是写上去就行了,不需要任何的符号
alert(886); //886是数字,所以不需要加引号。
字符串,就是人说的话,比如单词、句子,它们不是数字。一定要加上引号。
变量
初中的时候,学习了一个学科“代数”,x、y、z、a、b、c。
计算机的程序中,也是有这样的量,就是用字母来表示数字、字符串等其他东西的,称为“变量”。
var num = 100;
variable
这就是一个固定的写法,就是语法。也就是说,我们使用var来定义一个变量。
int num = 100;
变量名区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号。
起有意义的名字,最重要一点就是“见名知意”。
DOM介绍:
dom:document object model文档对象模型
dom技术在JS里面作用:JS语言和Html/Xml标签之间沟通的一个桥梁。
为了方便javascript语言通过dom操作html比较方便,
把html标签的内容划分为各种节点:
文档节点(document)
元素节点 也叫标签getElementsByTagName
文本节点
属性节点 type=”text” name=”username”
注释节点
dom就是学习利用JS如何实现对Html标签增删改查。
documnet:是页面中的内置对象,内置对象简单理解就是已经new好的一个对象,对象的名字就叫document。
元素节点的获取:
document.getElementById( id属性值);
document.getElementsByTagName("标签名");
例题:
<table>
<tr>
<td>第一个数</td>
<td colspan="3"><input id="inputId1" type="text"/></td>
</tr>
<tr>
<td>第二个数</td>
<td colspan="3"><input id="inputId2" type="text"/></td>
</tr>
<tr>
<td><button οnclick="cal('+')">+</button></td>
<td><button οnclick="cal('-')">-</button></td>
<td><button οnclick="cal('*')">*</button></td>
<td><button οnclick="cal('/')">/</button></td>
</tr>
<tr>
<td>计算结果</td>
<td colspan="3"><input id="result" type="text"/></td>
</tr>
<script type="text/javascript">
function cal(type){
var num1 = document.getElementById("inputId1").value;
var num2 = document.getElementById("inputId2").value;
var result;
switch(type){
case '+':
result = parseInt(num1)+parseInt(num2);
break;
case '-':
result = parseInt(num1)-parseInt(num2);
break;
case '*':
result = parseInt(num1)*parseInt(num2);
break;
case '/':
result = parseInt(num1)/parseInt(num2);
break;
}
console.log(result);
document.getElementById("result").value = result;
}
</script>
</table>
null、undefined
变量的声明:
var x;
var y;
没有初始化的变量自动取值为undefined。
如果这个变量值为null表示这个变量已经赋值了,这个值正好是null。
声明变量统一使用var声明,声明的时候变量是没有类型。
但是变量赋值之后就有类型,这个变量的类型就是赋值给这个变量值的类型。
关系运算符:
全等:===
不全等:!==
全等是判断值是不是相等 ,还有类型是不是相等。
String:
创建String对象有两种方式
1、var str1 = "hello js!";
2、var str2 = new String("hello js!");
String属性:length
str1.length; // 9
String常用的方法:
1、大小写转换
str.toLowerCase();
str.toUpperCase();
var str = "Hello jS!";
console.log(str.toLowerCase());//hello js!
console.log(str.toUpperCase());//HELLO JS!
2、获取指定字符:
str.charAt(index) 返回指定位置的字符
index:字符位置
console.log(str.charAt(6));//j
3、查询指定字符串出现索引
str.indexOf(findstr, [index]);
str.indexOf(findstr);
str.indexOf(findstr,index);
str.indexOf(findstr,[index])
str.lastIndexOf(findstr, [index]);
使用说明:
findstr:查找的字符串
index:开始查找的位置索引,可以省略
返回findstr在x中出现的首字符位置索引,如果没有找到则返回-1
lastIndexOf:从后面找起
4、split() 方法用于把一个字符串分割成字符串数组。
x.split(separator,howmany)
separator : 字符串或正则表达式,从该参数指定的地方分割 stringObject
howmany:指定返回数组的最大长度,可以省略
返回分割后的字符串数组
Boolean
Java中条件表达式必须返回布尔类型
2<3
JS中表达式可以是任意表达式。
1不是0,就是非空值,表示true。
NaN=Not a number
在JS里面一切表示空的值都是false,非空的值都是true。
Array对象:
创建数组对象
int[] array; String[] array;
var array1 = new Array();//创建一个空的数组
var array2 = new Array(7);//创建长度是7的数组
var array3 = new Array(100, "a", true);
var array4 = [100, 200, 300];
获取数组元素的个数:length属性
var array1 = new Array(7);
console.log(array1.length);//7
var array2 = new Array(100, "a", true);
console.log(array2.length);//3
//创建一个空数组
//数组长度是可变
var array = new Array();
array[0] = "232";
console.log(array);//["232"]
console.log(array.length);//1
array[1] = true;
console.log(array);//["232", true]
console.log(array.length);//2
//使用push和pop分别对应栈操作的入栈和出栈
var arr = new Array();
arr.push("zhangsan");
console.log(arr);//["zhangsan"]
arr.push(false)
console.log(arr);//["zhangsan", false]
arr.push(45)
console.log(arr);//["zhangsan", false, 45]
//console.log(arr[2]);//45
console.log(arr.pop());//45
console.log(arr.pop());//false
console.log(arr.pop());//zhangsan
Math:数学相关操作
Math.PI Math.round(3.14)
eval:
console.log(eval("2+3")); //5
eval("var x=10;var y=20;console.log(x*y);"); //200
innerText 直接当成一个字符串展示
innerHtml 将内容当成html来解析
练习:
1、负数是没有阶乘
2、0的阶乘是1
3、整数的阶乘n!=n*(n-1)*(n-2)....3*2*1
span
<body>
<input id="inputId" type="text" />
<button οnclick="factorial()">阶乘</button>
=
<span id="resultId"></span>
<script type="text/javascript">
function factorial(){
var num = document.getElementById("inputId").value;
var resultObj = document.getElementById('resultId');
if(num<0){
resultObj.innerHTML = "<span style='color: red;'>负数没有阶乘</span>";
}else if(num == 0){
resultObj.innerHTML = "<span style='color: red;'>0的阶乘是1</span>";
}else{
var i=0;
var result = 1;
for(i;i < num;i++){
result = result * (num - i);
}
resultObj.innerHTML = result;
}
}
</script>
</body>
2、猜数字游戏:
1-100
[0.0,1)
0.0=<Math.random()<1
0.0---------------0.9999999... *100
0.0---------------99.999999... +1
1.0---------------100.99999... parseInt
1-----------------100
var random = parseInt(Math.random() * 100 + 1);
<body>
<input id="inputId" type="text" />
<button οnclick="guess()">猜</button>
<span id="resultId">
</span>
<script type="text/javascript">
var random = parseInt(Math.random()*100+1);
function guess() {
var num = document.getElementById("inputId").value;
var resultObj = document.getElementById('resultId');
if(num<random){
resultObj.innerHTML = "小了";
}else if(num>random){
resultObj.innerHTML = "大了";
}else{
resultObj.innerHTML = "对了";
}
}
</script>
</body>