首页 > 代码库 > JavaScript

JavaScript

用法:

    在HTML中位置有三块:

    (1)head里面

    (2)body里面

    (3)</html>之后

    为了保险起见,一般写在</html>之后。

<script language="javascript">代码必须放在这里面</script>

三个常用对话框:

    alert("")警告对话框,作用是弹出一个警告对话框。

技术分享

    confirm("")确定对话框,作用是弹出一个可供选择的确定对话框,点击确定之后,它返回ture,点击取消返回false,可以用变量来接收。

技术分享

    prompt("要显示的提示文字"),作用是弹出一个可以输入内容的对话框。

技术分享

 

语法

1.基本数据类型:

    字符串、小数、整数、日期时间、布尔型等。

2.变量:

    都是通用类型var,可以随便存储其它类型的值,可以直接使用,不用定义。但习惯上定义。

定义变量: var a;   //所有变量定义都用var定义,var是通用的可变类型。

var s = "3.14"; var n = parseFloat(s); ; s += 5;
var d = parseInt(s);

3.数组:

    数组的定义:new Array();   //它的长度是动态变化的,里面可以放任意类型的元素。

    数组元素的赋值:a[0]=123; a[1]="hello";    //元素中的索引从0开始。

    数组的取值:a[i];

    数组属性:a.length;   //数组元素的个数,长度。

    方法:a.sort();//数组排序,按照每一个元素的第一个字符进行排序。a.reverse();   //翻转数组。

4.函数:

    函数的四要素:名称、输入、返回值、加工。

    定义函数:function add(形参){函数体}    //函数名为add,输入为参数的形式,返回值可以是var类型,也可以return一个返回值。

    函数必须经过调用才能执行。函数的调用:add(实参)。

*放在头部也可以读取(最先读取头部)

表单提交时会自动刷新网页,最好关掉

写法:

1、输出

<script>

                                     document.write("hello world");

</script>

2、按钮运用

<input name="alert" value="http://www.mamicode.com/alert"type="button" onclick=‘alert("这是触发事件")‘/>

 onclick单击

ondblclike 双击

3、定义变量并输出

        var bianliang;

                 bianliang="123";

                 document.write(bianliang);

4、改变元素的属性

<p id="hello">hello</p>

<script>

                 function hello()

                 {

                                     x=document.getElementById("hello")

                                     x.style.color = "#ff0000";

                 }

</script>

<input type="button" value="http://www.mamicode.com/点击变颜色" onclick="hello()" />

<!--点击由黑色变红色-->

找到元素:

    docunment.getElementById("id");根据id找,最多找一个;
    var a =document.getElementById("id");将找到的元素放在变量中;
    docunment.getElementByName("name");根据name找,找出来的是数组;
    docunment.getElementByTagName("name");根据标签名找,找出来的是数组;
    docunment.getElementByClassName("name") 根据classname找,找出来的是数组;

5item索引,指示第n个出现的元素,与getElementsByName同时使用

 

 

定义一组变量

var student =

                 {

                                     name:"张三",

                                     sex:""

                 };

                 student.name="张三";

                 document.write(student.name);

*打印张三

外部调用JS

<script src=http://www.mamicode.com/””></script>

 

1.类型转换:

    分为自动转换和强制转换,一般用强制转换。

    其他类型转换为整数:parseint();

    其他类型转换为小数:parsefloat();

    判断是否是一个合法的数字类型:isNaN();

    是数字的话返回false,不是数字的话返回ture

 

var a= prompt("输个数字进来","只能是数字")
if(a!=null)
{
    var b=isNaN(a);
    if(b)
    {
        alert("不是数字")
    }
    else
    {
        alert("不是数字")
    }
}

 

技术分享

需要将prompt放进isNaN方法内

 

2.运算符:

 

    数学运算符+   -   *   /   %   ++   --

 

    关系运算符==    !=   >=   <=   >   <

 

    逻辑运算符&&   ||   !;

 

    其他运算符+=   -=   *=   /=   %=   ?;

 

3.语句:

 

    一般分为顺序、分支和循环语句。

 

1)分支语句if

 

if(判断条件)

 

{

 

    满足条件要执行的语句

 

}

 

else

 

{

 

    不满足条件时执行的语句

 

}

 

  

 

2)循环for语句:

 

for初始条件;循环条件;状态改变

 

{

 

    循环体

 

}

 

  

 

3)问题类型:穷举、迭代。

 

4)两个关键词:break continue

 

5)如果要输出某一参数的值:输出的值是"+a+""+b"

 

<script>function visible1(){    $("p").hide();};</script></head><body><input type="button" onclick = "visible1()" value = "http://www.mamicode.com/点这里让文字消失"/><p>我会消失。</p>

 

$("id1")就相当于document.getElementById("id1")  

技术分享
  1 <style>
  2 #d
  3 { height:500px;
  4 background-image:url(1.jpg);
  5 position:relative;
  6 top:10px;
  7 }
  8 </style>
  9 
 10 </head>
 11 1.输入你的性别,身高,体重,查看是否符合标准
 12 <input type="text"  id="sex" placeholder="请输入你的性别" />
 13 <input type="text"  id="height" placeholder="身高"  />
 14 <input type="text"  id="weight" placeholder="体重" />
 15 <input type="button" value="测试" onclick="check()" /><br />
 16 2.输入你的姓名,分数,查看是否及格,若>=80,再输出你很优秀!继续保持<br />
 17 <input type="text" id="xingming" placeholder="请输入你的姓名" /><br />
 18 <input type="text" id="fenshu" placeholder="请输入你的分数" />
 19 <input type="button" value="查看" onclick="cha()" /><br />
 20 3.设置一个div,准备好3张图片,设置3个按钮,分别更改不同的背景,默认是第一张(类似于QQ空间更换主题)
 21 <div id="d"></div><br />
 22 <input type="button" value="第一主题" onclick="change1()" />
 23 <input type="button" value="第二主题" onclick="change2()" />
 24 <input type="button" value="第三主题" onclick="change3()" />
 25 <br /><br />
 26 4.设置一个p标签,当点击这个p标签所在的位置时,更改文字的颜色,更改文字的大小<br />
 27 <p id="x1" onclick="xx1()">天门中断楚江开,碧水东流至此回,两岸青山相对出,孤帆一片日边来</p><br />
 28 
 29 
 30 
 31 
 32 
 33 
 34 <body>
 35 
 36 </body>
 37 </html>
 38 <script>
 39 <!--alert("输入有误")
 40 /*confirm("输入正确")-->*/
 41 <!--prompt("输个数字进来","只能是数字")-->
 42 var a= prompt("输个数字进来","只能是数字")
 43 if(a!=null)
 44 {
 45     var b=isNaN(a);
 46     if(b)
 47     {
 48         alert("不是数字")
 49     }
 50     else
 51     {
 52         alert("不是数字")
 53     }
 54 }
 55 function check()
 56 {
 57     var sex = document.getElementById("sex").value;    
 58     var height = parseInt( document.getElementById("height").value);    
 59     var weight = parseInt( document.getElementById("weight").value);
 60 if((weight == undefined || weight == null || weight == "")&&(sex == undefined || sex == null || sex == "")&&(height== undefined || height == null || height == ""))
 61     {
 62         alert("不能为空");
 63     }
 64     else
 65     {
 66     if(sex=="")
 67     {
 68         if(weight<height-100-3)
 69         {
 70             alert("体重偏瘦");    
 71         }
 72         else if(weight>height-100+3)
 73         {
 74             alert("你太胖了");    
 75         }
 76         else
 77         {
 78             alert("体重标准");
 79         }    
 80     }
 81     else if(sex=="")
 82     {
 83         if(weight<height-110-3)
 84         {
 85             alert("体重偏瘦");    
 86         }
 87         else if(weight>height-110+3)
 88         {
 89             alert("你太胖了");    
 90         }
 91         else
 92         {
 93             alert("体重标准");
 94         }       
 95     }
 96 }
 97 }
 98 
 99 function change1()
100 {    var d=document.getElementById("d");
101     d.style.backgroundImage="url(2.jpg)";
102 }
103 function change2()
104 {    var d=document.getElementById("d");
105     d.style.backgroundImage="url(3.jpg)";
106 }
107 function change3()
108 {    var d=document.getElementById("d");
109     d.style.backgroundImage="url(4.jpg)";
110 }
111 function cha()
112 {    var xingming=document.getElementById("xingming").value;
113     var fenshu=parseInt(document.getElementById("fenshu").value);
114     if(xingming== ""&&fenshu== "")
115     {
116         alert("不能为空");
117     }
118     else
119     {
120         if(fenshu>0&&fenshu<=100)
121         {
122             if(fenshu>=80)
123             {
124                 alert("你很优秀!继续保持");
125             }
126             else
127             {
128                 alert("不及格");
129             }
130         }
131         else
132         {
133             alert("分数不正确");    
134         }
135     }    
136 }
137 function xx1()
138 {
139     var x1 = document.getElementById("x1");
140     x1.style.color="red";
141     x1.style.fontSize="30px";    
142 }
143 
144 </script>
View Code

技术分享

技术分享
 1 <form id="form1" runat="server">
 2     <div>
 3         <input id="Text1" type="text" id="sex" placeholder="请输入你的性别" />
 4         <input id="Text2" type="text" id="height" placeholder="身高"  />
 5         <input id="Text3" type="text" id="weight" placeholder="体重"  />
 6         <input type="button" value="测试" onclick="fun()" />
 7     </div>
 8     </form>
 9 
10 </html>
11 <script type="text/javascript">
12         function fun() {
13             var a = document.getElementById("Text1").value;
14             var b = parseInt(document.getElementById("Text2").value);
15             var c = parseInt(document.getElementById("Text3").value);
16             if (a == "" || isNaN(b) || isNaN(c)) 
17             {
18                 alert("不能为空");
19             }
20             else
21             {
22             var a = document.getElementById("Text1").value;
23             var b = parseInt(document.getElementById("Text2").value);
24             var c = parseInt(document.getElementById("Text3").value);          
25                 if(a=="")
26     {
27         if(c<b-100-3)
28         {
29             alert("体重偏瘦");    
30         }
31         else if(c>b-100+3)
32         {
33             alert("你太胖了");    
34         }
35         else
36         {
37             alert("体重标准");
38         }   
39     }
40     else if(a=="")
41     {
42         if(c<b-110-3)
43         {
44             alert("体重偏瘦");    
45         }
46         else if(c>b-110+3)
47         {
48             alert("你太胖了");    
49         }
50         else
51         {
52             alert("体重标准");
53         }       
54     }
55     else
56     {
57         alert("是男还是女");    
58     }
59                 
60             }
61         }
62      </script>
View Code

 

 

 

 

 

JavaScript