《使用JS&jQuery改善用户体验》前两章节总结

再前面我们通过学习HTML和CSS的学习,已经可以很好的呈现出页面内容,但这只是静态的,这样的页面效果用户体验度低。因此,将这样页面信息生动的展示给浏览者并且可以更好的互动就是这本书的重点。

<第一章节>

一.JavaScript 概述

JavaScript诞生于1995年,主要功能是进行用户输入的合法性验证,是互联网上最流行的脚本语言,是一种轻型的、解释性的脚本语言,是一种由浏览器内的解释器解释执行的程序语言。这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。它的执行原理是当某个客户向服务器端访问某个页面时,服务器端把整个页面中包含JavaScript的脚本代码当做响应内容发回给客户端,客户端的浏览器根据发回的页面文件从上往下的读取并且解析当中的HTML或者脚本代码。

在HTML代码中添加JavaScript脚本代码的三种方式:
1.HTML文件混合式
2.JS文件引用式
3.HTML代码嵌入式。

二.JavaScript核心语法

1.变量是存储数据的基本单位,JavaScript通常利用变量来参与各种运算,实现动态效果。var是声明变量的关键字,message、width、height是变量名。为变量命名时遵循以下规则:
(1.)第一个字符必须是一个字母、下划线(_)或一个美元符号($)
(2.)其他字符可以是字母、下划线、,美元符号或数字
(3.)区分大小写
(4.)不能与关键字同名,如while、for、if等。
2.JavaScript的变量是弱类型,需要用typeof操作符检测给定的数据类型。而它的返回值有:undefined、string、boolean、number、object。
3.JavaScript的运算符包括算术运算符、赋值运算符、比较运算符和逻辑运算符。[详细且看网址](https://www.runoob.com/js/js-operators.html

4.JavaScript流程控制语句有顺序结构、选择结构(if语句和switch语句)和循环结构(while语句、do-while语句和for语句)

<第二章节>函数和事件。

一.函数

使用函数前需定义函数,而定义函数有4个规则:
1.使用function关键字,function后是函数名
2.函数的命名规则与变量名的命名规则相同
3.函数名后的“()”,可以包含若干参数,也可以选择不带参数
4.最后是一对{},包含具体实现特定功能的若干语句。
例如:

<head >
    <script type="text/javascript">
        function func(){
            document.write('这是一个函数!')
        }
    </script>
</head>
<body>
<h2>
    函数的调用:
    <script type="text/javascript">func()</script>
</h2>
</body>
系统函数

1.parseInt函数
它将字符串转换为整数,仅接收一个参数。它从字符串的开头开始解析在第一个非整数位置停止解析并返回前面读到的所有整数。如果字符串不是以整数开头将返回NaN(not a number:非数字值)
2.parseFloat函数
与parseInt函数类似,它是返回一个浮点数
3.isNaN函数
它用于判断参数是否是NaN(不是数字)。如果是NaN,那么isNaN返回true,否则返回false。
示例:计算两个文本框的数字之和

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<script>
    function calc(){
        var num1 = document.getElementById("op1").value;
        var num2 = document.getElementById("op2").value;
        if(num1.trim() !="" && num2.trim() !=""){
            //trim函数用于删除字符串首尾的空格
            if(! isNaN(num1) && !isNaN(num2)){
                document.getElementById("result").value = parseFloat(num1) + parseFloat(num2);
            }else {
                alert("请输入正确的数值");//弹出消息框
            }
        }else{
            alert("请输入两个数操作");
        }
    }
</script>
</head>
<body>
  <input type="text" id="op1"/>+<input type="text" id="op2"/>=<input type="text" id="result"/><br>
 <input type="button" value="计算" onclick="calc()"/>
</body>

二.事件

JavaScript是基于对象、采用事件驱动的脚本语言。通过鼠标或按键在浏览器窗口或网页元素上执行的操作,称之为事件(event)。常用的事件有onclick事件、onload事件、onblur事件、onchange事件、onmouseover事件、onmouseout事件和onmousemove事件。
示例:onmouseover事件、onmouseout事件用法

<body>
 <marquee direction="right" onmouseover="stop()" onmouseout="start()">
     <img src="pic1.jpg">
 </marquee>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。