一.JavaScript和java的联系
JavaScript和Java除了名字和语法有点像,其他没有任何的关系.主要做:富客户端开发。JavaScript是基于对象，解释，弱变量类型；而Java是面向对象，编译解释，强变量类型，完全不同。
二.JavaScript的声明和引入
<!DOCTYPE html>
<html>
<head>
<!--
js的声明学习：
1、在head标签中使用script标签进行js代码域的声明
<script type="text/javascript">
alert("这是我的第一个js")
</script>
作用：
声明js代码域
特点:
js的代码只会作用于当前网页
2、在head标签中使用script标签引入外部声明好的js文件
<script src="相对路径" type="text/javascript" charset="utf-8"></script>
作用：引入外部声明好的js文件
特点：
实现js代码的重复使用，避免代码的冗余。
注意：
因为js在HTML文档中是一门单独的语言，可以声明在文档中的任意位置
一般情况下声明在head标签中。
-->
<meta charset="UTF-8">
<title>js的声明呵和引入</title>
<!--引入外部声明好的js文件-->
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>js的声明和引入</h3>
<!--声明js代码域-->
<script type="text/javascript">
alert("这是我的第一个js")
</script>
</body>
</html>三.JavaScript的变量学习
<html>
<head>
<title>js的变量学习</title>
<meta charset="UTF-8"/>
<!--
js的变量声明学习：
1、js中的所有变量声明只有var关键字。
a、js的变量名是严格区分大小的。
b、js中的字符串可以使用双引号也可以使用单引号。
c、js中可以声明同名变量，不会报错，后面的会将前面的声明覆盖。(重要)
2、中的数据类型
数据类型判断关键字：typeof
数据类型：
number:数字类型
string：字符串类型
boolean:
object：
null:空对象赋值，主要是和undefined进行区分。
Undefined:变量声明不赋值的情况下，默认值是undefined。
在js代码中尽可能的给声明的变量赋初值。
-->
<!--声明js代码域-->
<script type="text/javascript">
</script>
</head>
<body>
<h3>js的变量学习</h3>
</body>
</html><html>
<head>
<title>js中的变量强转</title>
<meta charset="UTF-8"/>
<!--
js中的数据转换：
其他类型转换为number 类型，使用Number(其他类型的数据)：
string 类型的数字字符: 对应的number数字
string 非数字字符: NaN(number类型)
boolean true: 1
boolean false: 0
object 有具体的值: 数字
object null: 0
其他类型转换为boolean，使用Boolean(其他类型的数据)：
number 正数或者负数： true
number 0: false
string 非空字符串: true
string 空字符串"": false
object 具体的对象: true
object null: false
声明不赋值的变量: false
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明变量*/
var a=123;
var a1=-123
var a2=0;
var b="abcdf";
var b1="";
var d=new Date();
var d1=null;
var c;
alert(Boolean(c));
if(a){
alert("哈哈");
}
</script>
</head>
<body>
<h3>js中的变量强转</h3>
</body>
</html>四.JavaScript运算符
<html>
<head>
<title>js的运算符学习</title>
<meta charset="UTF-8"/>
<!--
js的运算符学习：
算术运算符：
加法：+
减法：-
乘法：*
除法：/
余数：%
number类型的和number类型的
number类型和boolean类型(true--1,false--0)
number类型和string类型(*,/,%,-)
string类型和string类型的数字(*,/,%,-)
string类型数字和boolean类型(*,/,%,-)
在算术运算中如果两边的数据类型不是number的话，会使用Number()强转后在进行运算。
字符串的加法会作为字符链接，不会运算。
注意：在字符串中“+”符合代表的是字符串的连接符，不会参与运算。
逻辑运算符：
! & && | || (与java中的一致);
var a=true;
var b=true;//false
alert(a&b);
if(a&b){
alert("haha");
}
关系运算符：返回值为true 或者fasle
!=:
>=:
<=:
>:
<:
自增运算符：
++:a++ ++a
--:
+=:
-=:
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明变量:逻辑运算*/
var a=true;
var b=true;
alert(a&b);
if(a&b){
alert("haha");
}
</script>
</head>
<body>
<h3>js的运算符学习</h3>
</body>
</html><html>
<head>
<title>js的特殊关系运算符</title>
<meta charset="UTF-8"/>
<!--
等值运算符:==
先判断类型，类型一致则直接比较。
类型不一致，则先使用Number()进行强转后再进行比较。
等同运算符:===
先判断类型，类型一致则再比较内容，内容一致则返回true，内容不一致则返回false。
类型不一致则直接false。
注意：
null和undefined在做==判断时候返回true。
Object类型和Object类型在做==判断的时候判断的是地址。
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明变量*/
var a=1;
var a1="1";
var a2=true;
var a3="true";
var a4="a";
var a5="a";
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(a4==a5);//true
</script>
</head>
<body>
<h3>js的特殊关系运算符</h3>
</body>
</html>五.JavaScript的逻辑结构
<html>
<head>
<title>js的逻辑结构和循环结构学习</title>
<meta charset="UTF-8"/>
<!--
js的逻辑结构：
if结构
单分支结构：
if(判断条件){执行体}
双分支：
if(判断条件){执行体}else{执行体}
多分支：
if(判断条件){执行体}else if(判断条件){执行体}……else{执行体}
swicth选择结构：
switch (a){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
注意：
判断的变量可以是number类型也可以是string类型，但是不要混用。
循环结构：
for(变量;条件;迭代条件){循环体}循环
while(循环条件){循环体}
do{循环体}while(循环条件)
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明变量：if判断*/
var a=123;
var b=45;
if(a>10){
alert(a+b);
}
/*声明变量：选择结构*/
var a=1;
switch (a){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
/*循环结构学习*/
for(var i=0;i<3;i++){
alert("好热:"+i);
}
/*演示九九乘法表*/
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" ");
}
document.write("<br />");
}
</script>
</head>
<body>
<h3>js的逻辑结构和循环结构学习</h3>
</body>
</html>六.JavaScript的数组学习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的数组学习</title>
<!--
js的数组学习：
1、数组的声明
var arr=new Array();//声明一个空数组对象
var arr=new Array(length)//声明一个指定长度的数组
var arr=[元素]//声明数组(最常用);<br />
注意：js中的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变。
2、数组的赋值和取值
数组可以存储任意类型的数据
数组名[角标]=值;//角标可以是任意的正整数或者是0
数组的取出：
数组名[角标]//返回当前角标对应存储的值
如果角标不存在，返回undefined;
3、数组的length属性
作用1：数组名.length//返回当前数组的长度。
作用2：数组名.length=新的值//动态的改变数组的长度
注意：length>原有长度，则使用空进行填充。
length<原有长度，则从后面进行截取，最后的数据会被删除。
4、数组的遍历
普通for循环：
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for-in：
for(var i in arr){
alert(i);//获取的是角标
}
-->
<!--声明js代码域-->
<script type="text/javascript">
</script>
</head>
<body>
<h3>js的数组学习</h3>
</body>
</html>七.JavaScript计算器案例
<html>
<head>
<title>计算器</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*设置div样式*/
#showdiv{
border: solid 1px;
border-radius: 10px;/*设置边框角度*/
width: 320px;
height:400px;
text-align: center;
margin: auto;/*设置居中*/
margin-top: 50px;
background-color: floralwhite;
}
/*设置输入框样式*/
input[type=text]{
margin-top: 20px;
width: 290px;
height: 40px;
font-size: 20px;
}
/*设置按钮样式*/
input[type=button]{
width: 60px;
height: 60px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight: bold;
font-family: "萝莉体 第二版";
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//声明函数
function test(btn){
//获取button按钮对象的value值
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:
//将按钮的值赋值给input输入框
document.getElementById("inp").value=document.getElementById("inp").value+num;
break;
}
}
</script>
</head>
<body>
<div id="showdiv">
<input type="text" name="" id="inp" value="" readonly/><br />
<input type="button" name="" id="btn" value="1"value="" οnclick="test(this)"/>
<input type="button" name="" id="" value="2" onClick="test(this)"/>
<input type="button" name="" id="" value="3" onClick="test(this)"/>
<input type="button" name="" id="" value="4" onClick="test(this)"/><br />
<input type="button" name="" id="" value="5" onClick="test(this)"/>
<input type="button" name="" id="" value="6" onClick="test(this)"/>
<input type="button" name="" id="" value="7" onClick="test(this)"/>
<input type="button" name="" id="" value="8" onClick="test(this)"/><br />
<input type="button" name="" id="" value="9" onClick="test(this)"/>
<input type="button" name="" id="" value="+" onClick="test(this)"/>
<input type="button" name="" id="" value="-" onClick="test(this)"/>
<input type="button" name="" id="" value="*" onClick="test(this)"/><br />
<input type="button" name="" id="" value="0" onClick="test(this)"/>
<input type="button" name="" id="" value="/" onClick="test(this)"/>
<input type="button" name="" id="" value="c" onClick="test(this)"/>
<input type="button" name="" id="" value="=" onClick="test(this)"/>
</div>
</body>
</html>八.JavaScript数组常用操作
<html>
<head>
<title>js数组的常用操作</title>
<meta charset="UTF-8"/>
<!--
数组的操作学习：
1、数组的合并：arr.concat(b,c);//数组的合并
2、数组指定间隔符转换字符串:var b=arr.join("-");
3、数组移除最后一个元素并返回:var ele=arr.pop();
4、数组的追加，返回新的长度：var ln=arr.push("lol");//追加的元素可以是一个数组，但是为作为一个角标值存在
5、数组的移除第一个元素:var ele=arr.shift();
6、数组的在开始位置插入指定元素:var a=arr.unshift("又是周五了");
7、数组删除指定位置元素：var arr2=arr.splice(1,3,"a");
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明数组*/
var arr=[1,"abc","张三","12"];
</script>
</head>
<body>
<h3>js数组的常用操作</h3>
</body>
</html>