JavaScript基础

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
{
    width: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
{
    width: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";   
}

posted @ 2016-10-30 20:52 丶白阅读(252) 评论(0) 收藏举报

刷新页面返回顶部