JavaWeb JavaScript ① JS简介

目录

一、HTML&CSS&JavaScript的作用

二、前后端关联标签——表单标签

1.form标签

2.input标签

3.get/post提交的差异

4.表单项标签

5.布局相关标签

块元素——div

行内元素——span

三、CSS

1.CSS引入方式

方式1 行内式

方式2 内嵌式

方式3 外部样式表

2.CSS选择器

元素选择器

id选择器

class选择器

3.CSS浮动

4.CSS定位

position 属性指定了元素的定位类型。

5.CSS盒子模型

① margin

② padding

四、JS简介

1.JS起源

2.JS特点

① 脚本语言

② 基于对象

③ 弱类型

④ 事件驱动

⑤ 跨平台性

3.JS的引入方式

① 外部引入：

② 内部引入：

③ 异步引入：

④ defer引入：

4.注意：

5.JS中的函数

① JS如何声明函数

② 函数如何和单击按钮的行为绑定在一起？

③ 如何弹窗提示函数里用alert()

④ 推荐js代码放在head中

逆转时间的公式，就是珍惜当下

                                      —— 24.7.19

一、HTML&CSS&JavaScript的作用

HTML：主要用于网页主体结构的搭建

CSS：主要用于页面元素美化

JavaScript：主要用于页面元素的动态处理

HTML与CSS较为简单且已在其他的作品进行过学习，这里只进行对应的补充

详情看前端专栏：http://t.csdnimg.cn/tJnPB

二、前后端关联标签——表单标签

表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签,是向服务端发送数据主要的方式之一

1.form标签

表单标签，其内部用于定义让用户输入信息的表单项标签

action，form标签的属性之一，用于定义信息提交的服务器地址

① url

② 相对路径

③ 绝对路径

method，form标签的属性之一，用于定义信息的提交方式

① get：get方式，数据会以键值对形式缀到url后，以？作为参数开始的标识，多个参数用&隔开；数据直接暴露在地址栏上，相对不安全；地址栏在不同浏览器上有长度限制，所以提交的数据量不大；地址栏上只能是字符，不能提交文件

② post：post方式，数据默认会通过请求体发送，不会缀到url后；数据不会直接暴露在地址栏上，相对安全；数据是单独打包通过请求体发送，提交的数据量比较大；请求体中，可以是字符也可以是文件；相比于get，效率略低一些

③ put

④ delete

2.input标签

主要的表单项标签,可以用于定义表单项

name，input标签的属性之一，用于定义提交的参数名。

type，input标签的属性之一，用于定义表单项类型
① text 文本框
② password 密码框
③ submit 提交按钮
④ reset重置按钮

注：表单标签通过表单项标签向后端提交数据，

表单项标签一定要定义name属性，该属性用于明确提交时的参数名

表单项还需要定义value属性，该属性用于明确提交时的实参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="welcome.html" method="get">
        <!-- 添加表单项标签 用户输入信息的标签 -->
        用户名：<input type="text" name="username" value="张三"> <br>
        密码：<input type="password" name="userPWD"> <br>
        邮箱：<input type="email"> <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </form>
</body>
</html>

3.get/post提交的差异

get：① get方式，数据会以键值对形式缀到url后，以？作为参数开始的标识，多个参数用&隔开；② 数据直接暴露在地址栏上，相对不安全；③ 地址栏在不同浏览器上有长度限制，所以提交的数据量不大；④ 地址栏上只能是字符，不能提交文件；⑤ 相比于post方式效率较高一些

post：① post方式，数据默认会通过请求体发送，默认不会缀到url后；② 数据不会直接暴露在地址栏上，相对安全；③ 数据是单独打包通过请求体发送，提交的数据量比较大；④ 请求体中，可以是字符也可以是文件；⑤ 相比于get，效率略低一些

4.表单项标签

表单项标签一定要定义name属性,该属性用于明确提交时的参数名

表单项还需要定义value属性,该属性用于明确提交的时的实参

input

        type 输入信息的表单项类型

                text        单行普通文本框

                password        密码框

                submit        提交按钮

                reset        重置按钮

                radio        单选框        多个选项选其一，多个单选框使用相同的name属性值,则会有互斥效果

                checkbox        复选框多个选项选多个 checked属性，默认选中

                hidden 隐藏域不显示在页面上，提交时会携带

file 文件上传框

        textarea 文本域多行文本框

        select 下拉框

          option 选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="welcome.html" method="get">
        <!-- 添加表单项标签 用户输入信息的标签 -->
        <!-- 希望用提交一些特定的信息，但是考虑安全问题或者是用户操作问题，不希望该数据发生改变 -->
        <input type="hidden" name="id" value="123">
        <input type="text" name="pid" value="456" readonly> <br>
        <!-- readonly属性，使得用户无法修改该输入框的值,只读且携带，disabled不携带 -->
        <input type="text" name="pid" value="789" disabled> <br>
        
        用户名：<input type="text" name="username" value="张三"> <br>
        
        密码：<input type="password" name="userPWD"> <br>
        
        邮箱：<input type="email"> <br>
        
        <!-- 单选框 type=“radio” checked属性，默认勾选 -->
        性别：
            <input type="radio" name="gender" value="male" checked> 男
            <input type="radio" name="gender" value="female"> 女 <br>

        爱好：
            <input type="checkbox" name="hobby" value="reading"> 读书
            <input type="checkbox" name="hobby" value="swimming"> 游泳
            <input type="checkbox" name="hobby" value="running"> 跑步
            <input type="checkbox" name="hobby" value="traveling"> 旅行
            <br>

        个人简介：
            <textarea name="intro" style="width: 300px;height: 100px;"></textarea>
            <br>

        籍贯：
            <select name="province">
                <option>鲁</option>
                <option>沪</option>
                <option value="1">青</option>
                <option value="0" selected>请选择</option>
            </select>
            <br>

        选择头像：
            <input type="file">

        <input type="submit" value="登录">
        <input type="reset" value="清空"> <br>
    </form>
</body>
</html>

5.布局相关标签

块元素——div

块元素：自己独占一行的元素，块元素的CSS样式宽、高等，往往都是生效的

行内元素——span

行内元素：不会自己独占一行的元素，行内的CSS样式的宽、高等等，很多都是不生效的

三、CSS

1.CSS引入方式

方式1 行内式

通过元素的style属性引入样式

语法:style="样式名:样式值;样式名:样式值;... ...

缺点:① 代码复用度低不利于维护 ② css样式代码和html结构代码交织在一起,影响阅读,影响文件大小,影响性能

方式2 内嵌式

通过在head标签中的style标签定义本页面的公共样式，通过选择器确定样式的作用元素

方式3 外部样式表

将css代码单独放入一个.css文件中,哪个html需要这些代码，就在head中通过link标签引入

2.CSS选择器

元素选择器

根据标签的名字确定样式的作用元素

语法：标签名{}

缺点：某些同名的元素不希望使用某些样式，某些不同名的元素也使用该样式，都无法协调

id选择器

根据标签的id值确定样式的作用元素

语法：#id值{}

缺点：id值具有唯一性，样式只能作用到一个元素上

一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性

class选择器

语法：.class属性值

根据元素的class属性值确定样式的作用元素

元素的class属性值可以重复，而且同一个元素的class属性可以有多个值

3.CSS浮动

CSS 的 Float(浮动)使元素脱离文档流，按照指定的方向(左或右发生移动)，直到它的外边缘碰到包含框或另一个浮动框的边框为止

浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。

文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置

4.CSS定位

position 属性指定了元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

① absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位（根据页面的边缘进行定位，脱离文档流，原位置被其它元素继续占用），元素的位置通过“left”、“top”、“right”、“bottom”属性进行规定

② fixed 生成相对定位的元素，相对于浏览器窗口进行定位（滑动页面不会改变），元素的位置通过“left”、“top”、“right”、“bottom”属性进行规定

③ relative 生成相对定位的元素，相对于其原本的位置进行定位，因此，“left：20”会向元素的left位置添加20像素

④ static 默认值，没有定位，元素出现在正常的流中（忽略top,bottom,left,right或z-index声明）

5.CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model”这一术语是用来设计和布局时使用

① margin

外边距 top 上 right 右 bottem 下 left 左 auto 居中

② padding

内边距 top 上 right 右 bottem 下 left 左

四、JS简介

1.JS起源

JavaScript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的 客户端脚本语言，主要目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。ECMA-262是正式的JavaScript标准，这个标准基于 JavaScript (Netscape)和JScript(Microsoft)，ECMA-262 的开发始于1996年，在1997年7月，ECMA会员大会采纳了它的首个版本。这个标准由 ECMA组织发展和维护，JavaScript的正式名称是"ECMAScript"。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动、数据动态变化和动画特效等

2.JS特点

① 脚本语言

JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行，JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

② 基于对象

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性:[封装]、[继承]「多态]中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

③ 弱类型

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并目会在程序执行过程中根据上下文自动转换类型

④ 事件驱动

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

⑤ 跨平台性

JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个Javascript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

3.JS的引入方式

① 外部引入：

在HTML文件中通过<script>标签引入外部JS文件，并在head标签中指定src属性

如：<script src="js文件路径"></script>

② 内部引入：

在HTML文件中通过<script>标签直接在标签中编写JS代码，并在head标签中指定type属性为"text/javaScript"

如：<script type="text/javascript">...</script>

③ 异步引入：

在HTML文件中通过<script>标签引入外部JS文件，并在标签中指定src属性，同时在head标签中添加async属性

如：<script src="js文件路径" async></script>

④ defer引入：

在HTML文件中通过<script>标签引入外部JS文件，并在标签中指定src属性，同时在head标签中添加defer属性

如：<script src="js文件路径" defer></script>

4.注意：

① 一个html中可以有多个script标签
② 一对script标签不能在引入外部js文件的同时定义内部脚本
③ script标签如果用于引入外部js文件,中间最好不要有任何字符包括空格和换行

5.JS中的函数

① JS如何声明函数

function 函数名(参数列表){

函数体;

}

② 函数如何和单击按钮的行为绑定在一起？

onclick单击属性 / ondblclick双击属性

③ 如何弹窗提示函数里用alert()

在函数里定义提示

④ 推荐js代码放在head中

function myFunction() {
    // 弹窗提示
        alert("Hello, Suprised!");
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <style>
        .btn1 {
            width: 150px;
            height: 40px;
            font-style: 24px;
            font-family: '隶书';
            background-color: yellow;
            color:rgb(151,8,8);
            border: 3px solid rgb(151,8,8);
            border-radius: 3px;
        }
    </style>
    <!-- 
        JS引入方式：
        1. 外部引入：在HTML文件中通过<script>标签引入外部JS文件，
            并在head标签中指定src属性，如：<script src="js文件路径"></script>

        2. 内部引入：在HTML文件中通过<script>标签直接在标签中编写JS代码，
            并在head标签中指定type属性为"text/javascript"，如：<script type="text/javascript">...</script>

        3. 异步引入：在HTML文件中通过<script>标签引入外部JS文件，并在标签中指定src属性，
            同时在head标签中添加async属性，如：<script src="js文件路径" async></script>

        4. defer引入：在HTML文件中通过<script>标签引入外部JS文件，并在标签中指定src属性，
            同时在head标签中添加defer属性，如：<script src="js文件路径" defer></script>
     -->

     <!-- 内部引入 -->
     <script>
        /*
            1.Js如何声明函数？
                function 函数名(参数列表){
                    函数体;
                }

            2.函数如何和双击按钮的行为绑定在一起？  ondblclick属性
            3.如何弹窗提示在函数里用alert()
            4.推荐js代码放在head中
        */
       function SayHello() {
        // 弹窗提示
            alert("Hello, JavaScript!");
        }
     </script>

     <!-- 外部引入 -->
     <script src="button.js" type="text/javascript"></script>

</head>

<body>
    <button class="btn1" ondblclick="myFunction()">双击点我有惊喜</button>
    <button class="btn1" onclick="SayHello()">点我弹窗</button>
</body>
</html>