文章目录
JS的声明
1.在head标签中使用script标签对JS代码域进行声明
<!-- 声明js代码域 -->
<script type="text/javascript">
var a=123;
alert(typeof a)
</script>
2.在head标签中使用script标签引入外部声明好的js文件
<!-- 外部引入 -->
<script src="./jsCode/firstJS.js" type="text/javascript" charset="utf-8"></script>
JS中的数据类型
（1）number：数据类型
var a = 123;
var b = 3.12312;
alert(typeof a)
（2）string：字符串类型
var a = '小明';
var b = lala;
alert(typeof a)
（3）boolean：布尔类型
var a = true;
var b = false;
alert(typeof a)
（4）object:对象类型
var b = new Date()；
alert(typeof a)
（5）null：空对象赋值，主要和undefined进行区分
var c;
alert(typeof d)
（6）undefined：undefined
var c;
alert(typeof c)
JS变量的强转
-
使用Number( )函数:将其他数据类型转换为数值类型，转换失败返回NaN(not a number )
-
使用Boolean( )函数:将其他数据类型转换为布尔类型，有值返回true,无值返回false;
<script type="text/javascript">
var a=123;
var b = '123'
var c = '哈哈'
alert(Number(c))
alert(typeof Number(c))
</script>
JS的运算符
算数运算符
算术运算中如果两边的数据类型不是number的话，会使用Number( )强转后在进行运算。
- 加法：+
- 减法：-
- 乘法：*
- 除法：/
- 余数：%
- number类型的和number类型的
- number类型和boolean类型(true—1，false—0)
- number类型和string类型(*，/，%，-)
- string类型的数字和string类型的数字(*，/ ，%，-)
- string类型数字和boolean类型(* ，/ ，%，-)
注：在字符串中‘+’号表示的字符串的连接符，不会参与运算
逻辑运算符
！ & && | ||
关系运算符
!=: >= <=
自增运算符
++ – += -=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js变量的学习</title>
<script type="text/javascript">
//算数运算
var a = 1
var b = 2
var c = true
var d = '1'
var e = 'abc'
// alert(a+b)
// alert(b+c)
// alert(c+d)
// alert(b+d)
// alert(e-d)
//逻辑运算符
var a = true
var b = false
alert(a&b)
alert(a&&b)
</script>
</head>
<body>
<h1>js变量的学习</h1>
</body>
</html>
和=运算符
等值运算符:==
先判断类型，类型一致则直接比较。类型不一致，则先使用Number( )进行强转后再进行比较。
等同运算符:===
先判断类型，类型一致则再比较内容，内容一致则返回true, 内容不一致则返回false。类型不一致则直接false。
注：null和undefined==运算时是true，===是false，因为null
对象和对象比的是地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js特殊运算符计算</title>
<script type="text/javascript">
var a = 1
var a1 = '1'
var a2 = true
var a3 = 'true'
// alert(a==a1)//true
// alert(a==a2)//true
// alert(a==a3)//false
// alert(a1== a2)//true
// alert(a1==a3)//false
// alert(a2==a3)//false
// alert(a===a1)//false
// alert(a===a2)//false
// alert(a===a3)//false
// alert(a1===a2)//false
// alert(a1===a3)//false
// alert(a2===a3)//false
alert(null==undefined)//true
alert(null===undefined)//false
var str1 = new String('123')
var str2 = new String('123')
alert(str1 == '123')//true
alert(str1 === '123')//false
alert(str1==str2)//false 对象和对象比的是地址
</script>
</head>
<body>
<h1>js特殊运算符计算</h1>
<hr >
</body>
</html>
JS逻辑结构
if语句
var a = 1
var b = 5
if (a< b){
alert(a+b)
}
else if (a==b){
alert(a+b)
}
else{
alert(a+b)
}
switch语句
var a = 2
switch(a){
case 1:
alert('first')
break
case 2:
alert('second')
break
default:
break
}
for语句
for(var i=0;i<3;i++){
alert('hot'+i)
}
while
do while
JS数组的学习
数组的声明
JS的数组长度声明不用指定长度，JS的数组长度是不固定的，会随着元素的数量的改变而改变
var arr1=Array();//声明方式1
arr1[0] = 'abc'
alert(arr1)
var arr2 = Array(5);//声明方式2
alert(arr2.length)
var arr3 = [1,2,3,4,5]//声明方式3
alert(arr3)
数组的赋值
- 数组可以存储任意类型的数据
- 数组名[角标]=值;//角标可以是任意的正整数或者是0
- 数组的取出:
- 数组名[角标]/ /返回当前角标对应存储的值
- 如果角标不存在，返回undefined ;
var arr1 = []
arr1[0] = 2
arr1[1] = '哈哈'
arr1[2] = true
arr1[3] = 'abc'
arr1[10] = 'lala'
alert(arr1)
alert(arr1[14])
数组length属性
- 作用1:数组名。length/ /返回当前数组的长度。
- 作用于2:数组名. length=新的值/ /动态的改变数组的长度
注意: length>原有长度，则使用空进行填充。
length<原有长度，则从后面进行截取，最后的数据会破删除。
var arr1 = []
arr1[10] = 'abc'
alert(arr1.length)
arr1.length=100;
alert(arr1.length)
数组的操作
1、数组的合并: arr.concat(b.c)5/ /数组的合并
2、数组指定间隔符转换字符串:var b=arr . join("-");
3、数组移除最后- -个元素并返回:var ele=arr.pop();
4、数组的追加，返回新的长度: var In=arr. push(“1ol”);//追加的元素可以是一个数组。
5、数组的移除第一个元素:var ele=arr .shift();
6、数组的在开始位置插入指定元素;var a=arr .unshift(“又是周五了”);
7、数组删除指定位置元素: var arr2=arr.splice(1,3,“a”);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a = Array(1,2,3)
var b = Array('lala','哈哈')
// 数组的合并
// var d = a.concat(b)
// alert(d)
// 数组转换为字符串
// var d = a.join('-')
// alert(d)
// 数组移除最后一个元素并返回这个移除的元素
// var d = a.pop()
// alert(d)
// 数组的追加并返回新长度
// var d = a.push('lol',1,2,3)
// alert(d)
// alert(a)
// var d=a.reverse()
// alert(d)
// var d=a.shift(1,2,3)
// alert(d)
// var d = a.unshift('今天天气真好')
// alert(d)
// alert(a)
</script>
</head>
<body>
</body>
</html>
计算器小实验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js计算器</title>
<style type="text/css">
#showdiv{
background-image: url(./img/1.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
border: solid 2px;
width: 300px;
height: 350px;
text-align: center;
margin: auto;
}
input[type=text]{
margin: auto: ;;
margin-top: 20px;
width: 290px;
height: 40px;
font-size: 20px;
}
input[type=button]{
background-color: transparent;
border-radius: 10px;
width: 50px;
height: 50px;
margin-top: 15px;
margin-left: 6px;
margin-right: 6px;
font-size: 30px;
font-weight: bold;
}
</style>
<script type="text/javascript">
function test(btn){
var num = btn.value
switch (num){
case '=':
document.getElementById('inp').value = eval(document.getElementById('inp').value)
break;
case 'C':
document.getElementById('inp').value = ''
break;
default:
document.getElementById('inp').value += num
break;
}
}
</script>
</head>
<body>
<h1>js计算器</h1>
<div id="showdiv">
<input type="text" id="inp" value="" /><br>
<input type="button" id="" value="1" onclick="test(this)"/>
<input type="button" id="" value="2" onclick="test(this)"/>
<input type="button" id="" value="3" onclick="test(this)"/>
<input type="button" id="" value="4" onclick="test(this)"/><br>
<input type="button" id="" value="5" onclick="test(this)"/>
<input type="button" id="" value="6" onclick="test(this)"/>
<input type="button" id="" value="7" onclick="test(this)"/>
<input type="button" id="" value="8" onclick="test(this)"/><br>
<input type="button" id="" value="9" onclick="test(this)"/>
<input type="button" id="" value="0" onclick="test(this)"/>
<input type="button" id="" value="+" onclick="test(this)"/>
<input type="button" id="" value="-" onclick="test(this)"/><br>
<input type="button" id="" value="*" onclick="test(this)"/>
<input type="button" id="" value="/" onclick="test(this)"/>
<input type="button" id="" value="C" onclick="test(this)"/>
<input type="button" id="" value="=" onclick="test(this)"/>
</div>
</body>
</html>
JS函数
1.函数的声明
方式1：function 函数名（“形参1”,“形参2”…）{执行体}
方式2：var 函数名=new Function( “形参1”，“形参2” … “函数执行体”);
注：此声明表明在js中函数是作为对象存在的
// 方式1
function sol(a1,a2){
alert('我是SB')
}
sol(1,2)
// 方式2
var test2 = new Function('a1','a2','alert("woshi Sb2")')
test2(1,2)
alert(test2)
// 方式3
test03 = function(a1,a2){
alert('idea3')
}
test03()
2.函数的参数
- 调用函数可以不赋值；因为变量声明默认为undefined
- js中的函数在调用时，形参赋值可以不全部赋值，不会报错，但是实参是依次赋值的
3.函数的返回值
1.JS的执行符号
- 没有小括号则函数名就是一个变量
- 有小括号则函数会被执行
<script type="text/javascript">
test = function(){
alert('test')
return 'js'
}
alert(test)
alert(test())
</script>
2.函数作为实参进行传递
// 函数作为实参进行传递
var testObj = function(a){
alert(a())
}
function test(){
alert('test')
}
testObj(test)
dea3’)
}
test03()
2.函数的参数
- 调用函数可以不赋值；因为变量声明默认为undefined
- js中的函数在调用时，形参赋值可以不全部赋值，不会报错，但是实参是依次赋值的
3.函数的返回值
1.JS的执行符号
- 没有小括号则函数名就是一个变量
- 有小括号则函数会被执行
```html
<script type="text/javascript">
test = function(){
alert('test')
return 'js'
}
alert(test)
alert(test())
</script>
2.函数作为实参进行传递
// 函数作为实参进行传递
var testObj = function(a){
alert(a())
}
function test(){
alert('test')
}
testObj(test)
5384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
