1、JavaScript是个脚本语言，需要有宿主文件，它的宿主文件是HTML文件。
2、用法：
在HTML中位置有三块：
（1）head里面
（2）body里面
（3）</html>之后
为了保险起见，一般写在</html>之后。
<script language="javascript">代码必须放在这里面</script>
3、三个常用对话框
alert("")警告对话框，作用是弹出一个警告对话框。
</html><script language="javascript" type="text/javascript"> alert("输入错误！") </script>
confirm("")确定对话框，作用是弹出一个可供选择的确定对话框，点击确定之后，它返回ture，点击取消返回false，可以用变量来接收。
</html><script language="javascript" type="text/javascript"> confirm("输入错误！") </script>
prompt("要显示的提示文字"),作用是弹出一个可以输入内容的对话框。
JS语法：
1.基本数据类型：
字符串、小数、整数、日期时间、布尔型等。
2.类型转换：
分为自动转换和强制转换，一般用强制转换。
其他类型转换为整数：parseInt（）；
其他类型转换为小数：parseFloat（）；
判断是否是一个合法的数字类型：isNaN（）；
是数字的话返回false，不是数字的话返回ture。
3、运算符
数学运算符：+ - * / % ++ --；
关系运算符：== != >= <= > <；
逻辑运算符：&& || ！；
其他运算符：+= -= *= /= %= ?:；
4、语句
一般分为顺序、分支和循环语句。
注：与C#部分的语句一模一样，不再赘述
几个利用js对网页进行操作的练习：
5、变量
都是通用类型var，可以随便存储其它类型的值，可以直接使用，不用定义。但习惯上定义。
定义变量： var a; //所有变量定义都用var定义，var是通用的可变类型。
6、数组
数组的定义：new Array(); //它的长度是动态变化的，里面可以放任意类型的元素。
数组元素的赋值：a[0]=123; a[1]="hello"; //元素中的索引从0开始。
数组的取值：a[i];
数组属性：a.length; //数组元素的个数，长度。
方法：a.sort();//数组排序，按照每一个元素的第一个字符进行排序。a.reverse(); //翻转数组。
注：类似C#中的集合，sort方法排序并不好用，最好还是通过冒泡排序排列
7、函数
函数的四要素：名称、输入、返回值、加工。
定义函数：function add(形参){函数体} //函数名为add，输入为参数的形式，返回值可以是var类型，也可以return一个返回值。
函数必须经过调用才能执行。函数的调用：add（实参）。
注：诸如调整整个标签的格式时，需要用 变量名.style.XXXX 点出需要改动的格式 然后=""进行实现;
练习：
<title>无标题文档</title> <style> *{ margin:0px; padding:0px;} .a { 500px; height:300px; background-image:url(%E6%99%BA%E5%8D%9A%E6%98%9F%E4%B8%BB%E9%A1%B5_files/banner.jpg); background-size:cover; } .anniu { 120px; height:40px; background-color:#6F0; border-radius:10px; margin-left:30px; font-size:18px; color:#900; font-family:"微软雅黑"; cursor:pointer; transition:0.5s;} </style> </head> <body>输入你的性别，身高，体重，查看是否符合标准:<br /> <br /> 性别：<input type="text" id="sex" required="required" value="" placeholder="(男/女)" /> 身高：<input type="text" id="hight" required="required" value="" placeholder="cm" /> 体重：<input type="text" id="weight" required="required" value="" placeholder="kg" /> <input type="button" value="判断" onclick="pp()" /><br /> <br /> 输入你的姓名，分数:<br /> <br /> 姓名：<input type="text" id="name" required="required" value="" /> 成绩：<input type="text" id="grade" required="required" value="" /> <input type="button" value="提交" onclick="chengji()" /><br /> <br /> 设置一个div，准备好3张图片，设置3个按钮，分别更改不同的背景，默认是第一张（类似于QQ空间更换主题）<br /> <br /> <div class="a" id="d"></div> <input type="button" class="anniu" value="思考" onclick="tu1()" /> <input type="button" class="anniu" value="网络" onclick="tu2()" /> <input type="button" class="anniu" value="交流" onclick="tu3()" /><br /> <br /> </div> 设置一个p标签，当点击这个p标签所在的位置时，更改文字的颜色，更改文字的大小<br /> <br /> <p id="p1" onclick="color1()">南城旧梦</p> <p id="p2" onclick="color2()">古城老酒</p> <p id="p3" onclick="color3()">我有孤独和烈酒，是否愿意跟我走，是否愿意一醉方休，然后奔向那自由。</p> </body> </html> <script src="js.js"></script>
function pp() { var sex = document.getElementById("sex").value; var hight = document.getElementById("hight").value; var kg = document.getElementById("weight").value; if(sex!=""&&hight!=""&&kg!="") { if(sex=="男") { if (kg <= hight - 100 + 3 && kg >= hight - 100 - 3) { alert("标准") } else if (kg > hight - 100 + 3) { alert("肥胖") } else if (kg < hight - 100 - 3) { alert("瘦弱") } } else { if (kg <= hight - 110 + 3 && kg >= hight - 110 - 3) { alert("标准") } else if (kg > hight - 110 + 3) { alert("肥胖") } else if (kg < hight - 110 - 3) { alert("瘦弱") } } } } function chengji() { var name =document.getElementById("name").value; var grade=document.getElementById("grade").value; if(name!=""&&grade!="") { if(grade<=100&&grade>=0) { if(grade>=80) { alert("你很优秀！继续保持") } else { alert("加油") } } else { alert("输入有误") } } } function tu1() { var d =document.getElementById("d"); d.style.backgroundImage="url(%E6%99%BA%E5%8D%9A%E6%98%9F%E4%B8%BB%E9%A1%B5_files/banner2.jpg)"; } function tu2() { var d =document.getElementById("d"); d.style.backgroundImage="url(%E6%99%BA%E5%8D%9A%E6%98%9F%E4%B8%BB%E9%A1%B5_files/banner3.jpg)"; } function tu3() { var d =document.getElementById("d"); d.style.backgroundImage="url(%E6%99%BA%E5%8D%9A%E6%98%9F%E4%B8%BB%E9%A1%B5_files/banner4.jpg)"; } function color1() { var p1 = document.getElementById("p1"); p1.style.color="#00FF66"; p1.style.fontSize="10px"; } function color2() { var p2 = document.getElementById("p2"); p2.style.color="red"; p2.style.fontSize="20px"; } function color3() { var p3 = document.getElementById("p3"); p3.style.color="yellow"; p3.style.fontSize="30px"; }
