Web信息安全实践_2.5 JS语法基础

JavaScript历史

  • HTML页面缺乏交互性
  • 造成带宽、时间和服务器资源的浪费
    • 前端加入基本的检查:登录名、密码是否为空,两次密码输入是否一致...

JavaScript代码嵌入在HTML中

<script> ... </script>
  • 浏览器加载页面时执行代码,代码的动态输出和HTML的静态内容进行集成
  • 可以在用户输入提交给远程服务器之前进行验证

JavaScript语法

1、动态数据集成

document.write:向文档流写入HTML表达式或JavaScript代码

<html>
    <head>
        <title>JavaScript Page</title>
    </head>
?
    <body>
        <script type="text/javascript">
            document.write("<p>Hello world!</p>");
            document.write("<p>输出 HTML 标签没压力" +"<i>hello world</i>?</p> ");
        </script>
    <p> 这是一些静态内容。 </p>
    </body>
</html>

2、数据类型和表达式

数据类型

  • String
  • Number
  • Boolean

变量

  • 变量名由字母、数字和下划线组成
  • 变量名区分大小写
  • 不需要声明变量名,变量第一次使用时会创建(JavaScript不检查变量的类型)
<html>
    <head>
        <title>Data Types and Variables</title>
    </head>
?
    <body>
        <script type="text/javascript">
            var x, y;
            x= 1024;
            y=x;
            x = "foobar";
            document.write("<p>x = " + y + "</p>");
            document.write("<p>x = " + x + "</p>");
        </script>
    </body>
</html>

3、控制语句

<!--将一张纸持续对折,在纸张的厚度达到从地面到太阳的距离之前,需要折叠多少次?-->
<body>
    <script type="text/javascript">
        var distanceToSun = 93.3e6*5280*12;
        var thickness = .002;
        var foldCount = 0;
        while (thickness < distanceToSun) {
            thickness *= 2;
            foldCount++;
        }
        document.write(" 共需要折 <b>" + foldCount +"</b> 次。 ");
    </script>
</body>

4、字符串对象

<script> var txt = "Hello";
    document.write(txt.length+"</br>"); // 属性
    document.write(txt.replace(‘e‘,‘i‘)+"</br>")//封装函数
    document.write(txt.search(‘l‘));
</script>

5、交互式弹窗

prompt(message, value)
  • 参数:
    • message 对话框中显示的提示消息
    • value 出现在框中的默认值
  • 返回:用户输入的值(字符串类型)
    • 如果value是数字,使用parseFloat(parselnt)进行转换
<body>
    <script type="text/javascript">
        var userName = prompt(" 请输入姓名: ", " 小明 ");
        var userAge = prompt(" 请输入年龄: ", "20");
        var userAge = parseFloat(userAge);
        if (userAge < 18) {
            document.write("<h1> 未成年人适度上网! </h1>");
        }
        else {
            document.write("<h1> 欢迎你, "+userName+" ! </h1>");
        }
    </script>
    <p>The rest of the page...</p>
</body>

6、Math对象

  • 内置的Math对象包含函数和常量
Math.sqrt Math.pow Math.abs Math.max Math.min
Math.floor Math.cell Math.round Math.PI Math.E
Math.random(返回0到1的实数)
<body>
    <div style="text-align:center">
        <script type="text/javascript">
            var roll1 = Math.floor(Math.random()*6) + 1;
            var roll2 = Math.floor(Math.random()*6) + 1;
            document.write("<img src=‘die" + roll1 + ".gif‘/>");
            document.write("&nbsp;&nbsp;");
            document.write("<img src=‘die" + roll2 + ".gif‘/>")
        </script>
    </div>
</body>
<!--Math.floor(Math.random()*6) 0-5-->

7、eval函数:计算某个字符串,并执行其中的JavaScript代码

<script>
    eval("x=10;y=20;document.write(x*y)");
    document.write("<br>" + eval("2+2"));
    document.write("<br>" + eval(x+17));
</script>

字符串传递给一个接口,。。。需要eval???

原文地址:https://www.cnblogs.com/tianjiazhen/p/12235543.html

时间: 2024-11-08 23:59:55

Web信息安全实践_2.5 JS语法基础的相关文章

Web信息安全实践_2.3css简介

CSS(Cascading Style Sheets,层级样式表) 内容和格式分离 使用方式 外部样式表 (保存在外部 .css ) 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) css语法 选择器.属性.值 p { font-family: times; } 选择器 类选择器用于指定一组元素的样式 类选择器使用 HTML类属性,并使用“.”定义 id 选择器用于为单个唯一元素指定样式 id 选择器使用 HTML元素的id属性,并使用“#”定义 简单的元素选择

Web信息安全实践_2.1 HTML_2.2HTML重要元素

HTML(Hypertext Markup Language):指定网页静态内容的语言 Hypertext:文本.多媒体.链接... Markup:可以用来标识文档结构和内容类型的特殊符号,即标签 2.2HTML重要元素 标签 Anchors 使用标签 <a> 来设置,可以链接到网络上的任意文件 href 属性来描述链接的地址, name :锚名称 <a href="#001"> 点我跳转到页面底部 </a> <br> <a hre

Web信息安全实践_2.6 JavaScript DOM_2.7 JavaScript 攻击

DOM (Document Object Model,文档对象模型) HTML DOM 定义了访问和操作 HTML 文档的标准方法 DOM 以树结构表达 HTML 文档 通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素 通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量: JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS

Web信息安全实践_2.8 PHP

PHP(HyperText Preprocessor,超文本预处理器) PHP 功能 PHP 可以生成动态页面内容 PHP 可以创建.打开.读取.写入.关闭服务器的文件 PHP 可以收集表单数据 PHP 可以发送和接收cookies PHP 可以添加.删除.修改数据库中的数据 PHP 可以加密数据 PHP 与表单的交互 PHP 使用超全局变量 $_GET .$_POST 或者 $_REQUEST 用于收集表单数据 $_GET 和 $_POST 分别接受通过GET 和 POST 方法提交的数据 $

js语法基础

js的由来,最开始是95年为了检查服务器验证表单数据而逐渐发展的. js的组成,1核心(ECMAScript)2文档对象模型(DOM)3浏览器对象模型(BOM) js是解释性执行,弱类型,基于对象,事件驱动,跨平台的脚本语音 对象包括日期对象,字符串对象,数学对象一系列对象 弱类型不区分整数和小数(相对于其他编程语音)变量可以存储任意类型 事件驱动:基于事件,例如鼠标经过(hover),鼠标点击(click,鼠标正键单击)失去焦点(focus)按键弹起事件 onload加载事件 跨平台:wind

JS语法基础-基本使用及数据类型分类

JS基础 --------------- 什么是JS? ------------------ JS的全称是Javascript. ----------------------------- 老婆和老婆饼的关系: 李明和李明博的关系: 雷锋和雷峰塔的关系: JavaScript和java之间基本没有任何关系! ------------------------------------- javascript的历史 原文地址:https://www.cnblogs.com/niaocaizhou/p/

Web信息安全实践_4.3 Ajax

Ajax的特性: 局部更新.仅仅更新数据. 不会页面跳转 不需要iframe 异步更新,在请求受阻,其他部分的代码可以继续执行. 接收回复并处理. Ajax的使用特点: 第一,生成XMLHTTPRequest对象: 第二,发出请求: 第三,处理请求返回的结果 <html> <head> <script type="text/javascript"> function loadXMLDoc(URL) { // 使用Ajax获取内容之后,在原始页面进行更

js语法基础入门(5.2)

5.2.循环结构 当一段代码被重复调用多次的时候,可以用循环结构来实现,就像第一个实例中出现的场景一样,需要重复询问对方是否有空,这样就可以使用循环结构来搞定 5.2.1.for循环语句 //语法结构: for(初始化表达式:条件表达式:条件改变表达式){ 循环体: } 程序流程图 实例: /** *输出1-100的整数 */ for(var i=1;i<100;i++){ document.write(i+"<br />"); } for循环详解 //假如要循环输出

Web信息安全实践_3.4 CSRF防御

错误的CSRF防御方法 (1)只接受 POST 请求 攻击者不能基于链接简单地攻击( IMG ),但是可以使用脚本创建隐藏的 POST 请求 (2)转账需要多步 e.g. 第一个请求转多少个coin,第二个请求转给谁 CSRF 攻击可以按顺序执行每个步骤 (3)检查 Referer Referer Referer报文头是网页请求头的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器藉此可以获得一些信息用于处理. 用户正常转账:请求从