javascript简单网页制作

转载

温柔一刀 2024-10-24 07:33:16

文章标签 javascript简单网页制作父节点数组字符串 文章分类 JavaScript 前端开发

1. 前端三要素

HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

什么是CSS预处理器

用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用

常用的CSS预处理器有哪些

SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS

JavaScript框架

JQuery;Angular;React;Vue;Axios

2. JavaScript简单入门

2.1 引入

内部标签

<script> 
	//....
<script>

外部引入

<!--外部引入
        注意：script必须成对出现
    -->
    <script src="js/hj.js"></script>

    <!--不用显示定义type，也默认就是javaScript-->
    <script type="text/javascript"></script>

2.2 需要注意的一些地方

定义变量：

var score = 1；//全局
let score = 1；//局部
const score = 1;//常量

比较运算符

== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN

尽量避免使用浮点数进行运算，存在精度问题！
null 和 undefined
数组:Java的数组必须是相同类型的对象~，JS中不需要这样;取数字下标：如果越界了，就会报undefined

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二种定义方法
new Array(1,2,3,4,5,'hello');

对象:对象是大括号;每个属性之间使用逗号隔开，最后一个属性不需要逗号

var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}

严格检查格式:'use strict';必须写在JavaScript的第一行！

3. 数据类型

3.1 字符串

正常字符串我们使用单引号，或者双引号包裹
注意转义字符 \
多行字符串编写

//tab 上面 esc下面
        var msg =
            `hello
            world
            你好呀
            nihao
            `

模板字符串

//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`

字符串长度:str.length
字符串的可变性，不可变
indexof();substring()

3.2 数组

Array可以包含任意的数据类型
字符串的"1"和数字 1 是不同的
slice（）截取Array的一部分，返回的一个新数组，类似于String中substring
push：压入到尾部 ; pop：弹出尾部的一个元素
unshift：压入到头部; shift：弹出头部的一个元素
concat()并没有修改数组，只是会返回一个新的数组
连接符join

javascript简单网页制作_javascript简单网页制作

3.3 对象

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
	name:"Qc",
	age:23,
	email:"123456789@QQ.com",
	score:99
}

使用一个不存在的对象属性，不会报错！undefined
动态的删减属性，通过delete删除对象的属性
判断属性值是否在这个对象中！'age' in person
判断一个属性是否是这个对象自身拥有的 perso.hasOwnProperty('age')

3.4 流程控制

if
while
for for...of...

3.5 Map和Set(类似Java)

ES6的新特性~

Set：无序不重复的集合

4. 函数

4.1 定义函数

//方式一
function abs(x){
    if(x>=0){
        return x；
    }else {
        return -x；
    }
}

////方式二
var abs = function(x){
    if(x>=0){
        return x；
    }else {
        return -x；
    }
}

4.2 参数问题

javaScript可以传任意个参数，也可以不传递参数~
假设不存在参数，如何规避？手动抛出异常
arguments是一个JS免费赠送的关键字；代表，传递进来的所有参数，是一个数组！
rest；ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…

4.3 变量的作用域

假设在函数体重声明，则在函数体外不可以使用~（闭包）
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
内部函数可以访问外部函数的成员，反之则不行
养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；
全局对象window；alert() 这个函数本身也是一个window的变量；
如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~

4.4 方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

5. 内部对象

5.1 Date

var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getFu11YearO); //年
now. getMonth(); //月0~11 代表月
now. getDate(); //日
now. getDay(); //星期几
now. getHours(); //时
now. getMinutes(); //分
now. getseconds(); //秒
now. getTimeO); //时间戳全世界统一1970 1.1 0:00:00 毫秒数
console. log(new Date(1578106175991)) //时间戳转为时间

5.2 JSON

在JavaScript中一切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…

对象都用{}
数组都用[]
所有的键值对都是用key:value

json和js对象的区别：
var obj = {a: 'he11o' ,b: 'he11ob'};var json = '{"a": "he11o" , "b":"he1lob"}'

6. 面向对象编程

6.1 面向对象原型继承

当创建一个新函数时，系统会根据一组特定的规则为函数创建一个prototype属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数（constructor），该构造函数是一个指向函数的指针。而在原型对象中，除了有这个构造函数，我们还可以添加其他的属性和方法。

6.2 面向对象class继承

class关键字是在ES6引入的

添加方法

//给student添加一个方法 
//1、先定义一个类、属性、方法
class student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}
//使用方法
var person = new student('小明');
person.hello();

继承

class student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}
class xiaoStudent extends student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    mygrade(){
        alert('我是一个小学生')
    }
}
//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);

了解原型链

7. 操作BOM对象（重点）

BOM：浏览器对象模型
JavaScript诞生就是为了能够让他在浏览器中运行！

window
Navigator(不建议使用)，封装了浏览器的信息
screen 代表屏幕尺寸

screen.width
1920
screen.Height
1080

lacation 代表当前页面的URL信息

主机：host
当前指向的位置：href
协议:protocol
重新加载的方法：f reload() //location.reload()刷新网页

document(重点) document代表当前的页面，HTML DOM文档树

//获取具体的文档树节点：
<d1 id="app">
    <dt> Java</dt>
    <dd> JavaSE</dd>
    <dd> JavaEE</dd>
</d1>
<script>
    var d] = document. getElementById(' app ');
</script>

//获取cookie
document.cookie

//劫持cookie原理：把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie'></script>
<!-- 获取你的cookie上传到他的服务器 -->
//服务器端可以设置cookie为httpOnly

history代表浏览器的历史记录,不建议使用
history.back() //后退history.forward() //前进

8. 操作DOM对象(重点)

浏览器网页就是一个Dom树形结构(与div包围的标签差不多)
这是原生代码，之后都用jQuery

8.1 获得dom节点

<div>
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
var p1 = document.getElementByID('p1');
var p2 = document.getElementByclassName('p1');
var father = document.getElementByID('father');

var childrens = father.children;// 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
</script>

8.2 更新节点

<div id="id1">
    
</div>

<script>
    var id1 = document.getElementByID('id1')
</script>

id1.innerText = '123' //innerText方法修改文本内容  
id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式
id1.style.color = 'red' //style.什么：style方法修改css样式。即可以在js里操作修改样式
id1.style.padding = '2em' //属性使用字符串包裹

8.3 删除节点

删除节点的步骤：先获取父节点，通过父节点删除自己
注意：删除多个节点是，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删

<div>
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>
<script>
    var self = document.getElementByID('p1');
    var father = p1.parentElement; //找到p1的父节点
    father.removechild(self) //通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除
</script>

8.4 插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementByID('js'); //获取想要加入的节点
    var list = document.getElementByID('list'); //获取想要加入的父节点
    list.appendchild(js); //在list节点下追加子节点 
</script>

8.5 在js中创建一个新的节点追加

<script>
    //第一个方法：通过js创建一个新节点
    var new = document.creatElement('p'); //创建一个p标签
    new.id = 'new';
    new.innerText = 'hello'; //在这个标签上输入文本
    list.appendchild(new); //在父节点下加进去

    //用第二种方法创建一个有自己属性的标签节点
    var myScript = document.creatElement('script');//创建一个script标签节点
    myScript.setAttribute('type','text/javascript'); /*setAttribute方法加入属性和属性值。第一个参数为属性名，第二个参数为属性值。生成效果为<script type='text/javascript'></sript>*/

    //可以创建一个style标签
    var myStyle= document.createElement('style'); //创建了一个 空style标签
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容
    document.getElementsByTagName( 'head' )[0]. appendChild(myStyle) //在父节点追加这个style标签

</script>

8.6 在前面插入节点：insertBefore

var ee = document. getElementById('ee');
var js = document . getElementById('js');
var list = document . getElementById( 'list');
//要包含的节点. insertBefore(newNode, targetNode)
list. insertBefore(js,ee); //在list节点中（list是父节点），在ee节点前加入目标节点js

9. 操作表单（验证）

9.1 获取表单信息

<body>
<form action='#' method="post">
    //文本框
    <p>
    <span>用户名：</span>
    <input type="text" id="username">
    </p>

    //单选框
    <p>
    <span>性别</span>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="women" id="girl">女

    </p>
</form>
</body>

<script>
    var input_text = document.getElementById('username';)
    //得到文本框的值
    input_text.value
    //修改文本框的值
    input_text.value='123'

    var boy_radio = document.getElementById('boy';)
    var girl_radio = document.getElementById('girl')
    //对于单选框、多选课等固定的value，boy_radio.value只能去到当前的值  
    boy_radio.checked; //看返回的结果，是否为true，如果为true则被选中
    boy_radio.checked=true; //赋值
</script>

9.2 提交表单，MD5加密

MD5在线链接:script src=https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js/script

<head>
    <!-- 首先要导入MD5这个工具包 -->
    <script src="https://cdn . bootcss . com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <!-- action属性是提交完表单后调整的网页 -->
    <form action="#" method="post">
    <p>
        <span>用户名: </span> <input type="text" id="username" name="username">
    </p>
    <P>
        <span>密码: </span> <input type="password" id="password" name="password">
    </p>

<!--绑定事件onclick被点击。按钮提交事件aaa()--> .
    <button type="submit" onclick="aaa()">提交</button>
</form>
</body>
<script>
    function aaa() {
        var uname = document.getElementById( 'username ' );
        var pwd = document.getElementById('password' );
        console.1og(uname.value);
        //MD5算法把pwd变成乱码，用这个方法会在前端把密码加长 用户体验感不好
        pwd.value = md5(pwd.value);
        console.1og(pwd.value);
    }
</script>

9.3 表单提交，md5加密优化版

<!-- 使用form提交事件aaa()
    οnsubmit=绑定一个检测的函数，返回true或false
    将这个结果返回给表单，使用onsubmit接收
    οnsubmit="return aaa()"
 -->
 <form action="https ://www. baidu. com/" method="post" onsubmit="return aaa()">
    <P>
        <span>用户名: </span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码: </span> <input type="password" id=" input - password" >
    </p>
    <input type= "hidden" id="md5-password" name=" password" >
    </form>
<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById( 'username' );
        var pwd = document.getElementById(" input-password" );
        //通过隐藏去提交
        var md5pwd = document.getElementById('md5-password' );
        md5pwd.value = md5(pwd.value);
        //可以校验判断表中内容，true就是通过提交，false, 阻止提交
        return true;
        }
</script>

10. jQuery

使用时导入包或者jQuery的cdn网址
公式：$(selector).action() 这个selector选择器就是css的选择器.action是事件

10.1 选择器

原生的js选择器的种类有：

标签选择器：document.getElementByTagName()
id选择器： document.getElementByID()
类选择器： document.getElementByClassName()

jq选择器有（css中的选择器他全部都能用）：

标签选择器：$('p’)'.click();
id选择器：$('#id名').click();
class选择器：$('.class名').click();
查看文档看更多

10.2 事件

<!-- 要求：获取鼠标当前的一个坐标 -->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    // 当前网页元素加载完毕之后，响应事件
    // $(document).ready(function(){ //document默认是文档，ready默认是加载完
    // })
    // 上面这行的简写
    $(function(){
        $('#divMove').mousemove(function(e){ //获取了divMove的鼠标移动的坐标
            $('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY) //在mouseMove这个span里显示鼠标移动的坐标

        })
    });
</script>

10.3 操作DOM事件

节点文本操作

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //拿到这个标签的文本，
    $('#test_ul li[name=python]').text();
    //修改这个标签的文本
    $('#test_ul li[name=python]').text('123');
    //修改样式
    $('#test_ul').html();
</script>

CSS的操作

$('#test_ul').css("color","red"); //使用键值对来表示属性和属性值`

元素的显示和隐藏：本质display:none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

未来ajax()；

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}})

11. 扒网站

如何巩固JS（看jQuery源码，看游戏源码！）

layui--layer弹窗组件Element-UIAnt Design

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：深度学习在雷达信号处理中的应用

下一篇：轨迹均值滤波

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯