• JavaScript(二)——语法


    1.基本数据类型:

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

    2.类型转换:

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

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

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

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

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

       示例:

    </html>
    <script>
    var a =prompt("请输入一个数字","只能是数字!!");
    if(a!=null)
    {
        var b =isNaN(a);
        if(b==false)
        {
            alert("输入正确!")    
        }
        else
        {
            alert("输入错误!!")    
        }
    }
    </script>
    View Code

    运行显示:

    3.运算符:

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

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

        逻辑运算符:&&    ||    !;

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

    4.语句:

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

    1)分支语句if

    if(判断条件)

    {

        满足条件要执行的语句

    }

    else

    {

        不满足条件时执行的语句

    }

      

    2)循环for语句:

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

    {

        循环体

    }

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

    (4)两个关键词:break 和 continue。

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

    5.变量:

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

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

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

    6.数组:

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

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

        数组的取值:a[i];

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

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

                a.reverse();  //翻转数组。

    7.函数:

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

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

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

    示例:

    1.输入你的性别,身高,体重,查看是否符合标准

    2.输入你的姓名,分数,查看是否及格,若>=80,再输出你很优秀!继续保持

    3.设置一个div,准备好3张图片,设置3个按钮,分别更改不同的背景,默认是第一张(类似于QQ空间更换主题)

    4.设置一个p标签,当点击这个p标签所在的位置时,更改文字的颜色,更改文字的大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    font
    {
        font-weight:700;}
    </style>
    </head>
    
    <body>
    <font size="+3">1.输入你的性别,身高,体重,查看是否符合标准</font><br />
    性别(男/女):<input id="sex" type="text"  /><br />
    身高(cm):<input id="height" type="text"  /><br />
    体重(kg):<input id="weight" type="text" /><br />
    <input type="button" value="检查是否标准" onclick="check()" />
    <br /><br />
    
    
    <font size="+3">2.输入你的姓名,分数,查看是否及格,若>=80,再输出你很优秀!继续保持</font><br />
    姓名:<input id="name" type="text" /><br />
    分数:<input id="score" type="text" /><br />
    <input type="button" value="查看是否及格" onclick="chakan()" /><br /><br />
    
    
    
    <font size="+3">3.设置一个div,准备好3张图片,设置3个按钮,分别更改不同的背景,默认是第一张(类似于QQ空间更换主题)</font><br />
    <div id="d" style="360px; height:240px; border:1px solid red; background-image:url(123.jpg)"></div><br />
    <input type="button" onmouseover="change1()" value="第一主题" /> <input type="button" onmouseover="change2()" value="第二主题" /> <input type="button" onmouseover="change3()" value="第三主题" />
    <br /><br />
    
    
    
    <font size="+3">4.设置一个p标签,当点击这个p标签所在的位置时,更改文字的颜色,更改文字的大小</font><br />
    <p id="p1" onclick="color1()">盼望着,盼望着,东风来了,春天的脚步近了。</p>
    <p id="p2" onclick="color2()">一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。 </p>
    <p id="p3" onclick="color3()">小草偷偷地从土地里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻俏俏的,草软绵绵的。</p>
    </body>
    </html>
    <script>
    function check()
    {
        var sex = document.getElementById("sex").value;    
        var height = parseInt( document.getElementById("height").value);    
        var weight = parseInt( document.getElementById("weight").value);
        if(sex=="男")
        {
            if(weight<height-100-3)
            {
                alert("体重偏瘦,多吃点!");    
            }
            else if(weight>height-100+3)
            {
                alert("你太胖了,多运动吧!");    
            }
            else
            {
                alert("体重很标准,继续保持!")    ;
            }    
        }    
        else if(sex=="女")
        {
            if(weight<height-110-3)
            {
                alert("体重偏瘦,多吃点!");    
            }
            else if(weight>height-110+3)
            {
                alert("你太胖了,多运动吧!");
            }
            else
            {
                alert("体重很标准,继续保持!")    ;
            }        
        }
        else
        {
            alert("到底是男是女???");    
        }
    }
    function chakan()
    {
        var name = document.getElementById("name").value;    
        var score = parseFloat( document.getElementById("score").value);
        if(score>=0 && score<=100)
        {
            if(score<60)
            {
                alert(name+"不及格");
            }
            else
            {
                if(score>=80)
                {
                    alert("恭喜你,"+name+",及格了,并且你很优秀,继续保持!");    
                }
                else
                {
                    alert(name+"及格了");    
                }
            }
        }
        else
        {
            alert("成绩输入有误!");    
        }
    }
    function change1()
    {
        var    d = document.getElementById("d");
        d.style.backgroundImage="url(123.jpg)";
    }
    function change2()
    {
        var    d = document.getElementById("d");
        d.style.backgroundImage="url(213.jpg)";
    }
    function change3()
    {
        var    d = document.getElementById("d");
        d.style.backgroundImage="url(312.jpg)";
    }
    function color1()
    {
        var p1 = document.getElementById("p1");
        p1.style.color="#3F3";
        p1.style.fontSize="30px";    
    }
    function color2()
    {
        var p2 = document.getElementById("p2");
        p2.style.color="#FF3";
        p2.style.fontSize="30px";    
    }
    function color3()
    {
        var p3 = document.getElementById("p3");
        p3.style.color="red";
        p3.style.fontSize="30px";    
    }
    </script>
    View Code

    运行效果显示在这里就不附上了,感兴趣的话就复制一下代码,自己运行以下看看。

     

     

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

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

    写法:

    1、输出

    <script>

                   document.write("hello world");

    </script>

    2、按钮运用

    <input name="alert" value="alert"type="button" onclick='alert("这是触发事件")'/>  

    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="点击变颜色" onclick="hello()" />

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

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

    6、定义一组变量

    var student =

                             {

                                                           name:"张三",

                                                           sex:"男"

                             };

                             student.name="张三";

                             document.write(student.name);

    (*打印“张三”)

    7、外部调用JS

    <script src=””></script>

  • 相关阅读:
    CentOS新系统必做的几件事
    CentOS基础指令备忘
    有向图的强连通分量
    模仿c的字符转整数函数 atoi
    N个骰子的点数和的概率分布
    c语言算法题目求职用
    copy指定目录下包括子目录中所有的文件
    js的页面交互
    js的数据类型、函数、流程控制及变量的四种声明方式
    z-index
  • 原文地址:https://www.cnblogs.com/H2921306656/p/5665079.html
Copyright © 2020-2023  润新知