javaScript的初步学习（1）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_50673174/article/details/126189268

学习目标

记录个人JS学习
链接：
菜鸟教程
 W3school
Web入门-学习Web开发

成功不是一蹴而就的，而是漫长的积累后产生质变。学习也要掌握方法，我们不能零碎地学习，而应该有一个整体的概念，脑海中有一个架构。这样更有利于我们去理解一些语法和代码，以及个人练习。

学习内容

安装支持编写javaScript的基本软件
掌握JavaScript的基本语法
其它

一、安装基本软件

1.1 phpStudy

推荐的中间件：phpStudy

phpStudy是一个PHP调试环境的程序集成包。
该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer。

网站目录存放在phpstudy安装目录的WWW目录下，域名可以设置为127.0.0.1，端口号默认为80（Nginx和Apache的默认端口都是80端口），如果想要提高安全性，可以修改端口号
在这里插入图片描述

1.2 文本编辑器

1、Vscode
2、Sublime Text 3

两者都支持html的编辑，并提供命令补全功能。
其中，Vscode的插件Live Server能够提供网页自动加载的功能（具体的用法及安装可以去网上找）
因为配置麻烦，加上只是练习，工作量并不是很大，我就没有配置。
然后，使用的文本编辑器是Sublime。

在这里插入图片描述

1.3 浏览器

Windows：Firefox 、Chrome 、Opera 、Internet Explorer 、Microsoft Edge 、Brave （Windows 10 默认带有 Edge；如果你有 Windows 7 或以上版本，你可以安装 Internet Explorer 11；否则，你应该安装一个替代浏览器）。
我装了三个浏览器：Chrome、Firefox，以及windows自带的Edge。

二、安装目录的结构及测试

2.1 目录结构

这是我从Web开发手册那里截的图。
在这里插入图片描述这里有个项目和网站的概念，不过我们暂时不用管它。我们在JS学习项目下面创建2022-8-6网站，index.html为显示页面

我们现在尝试访问一下
根据介绍，除了index.html，我们还应该在网站目录下添加三个文件夹：images文件夹用于加载图片，styles文件夹用于设计样式，scripts文件夹包含所有用于向网站添加交互功能的JavaScript代码。
在这里插入图片描述

2.2 加载图像

根据建议，我们创建好三个文件夹及index.html后，尝试使用img标签加载图片。
这是W3school对对img的描述：
在这里插入图片描述
可能会使用的属性：

现在我们在index.html添加一行代码，加载和自己处于同级目录的的images目录下面的image1.jpeg（现在没有这张图片）
在这里插入图片描述在目录下添加图片

在这里插入图片描述

2.3 渲染

除了可以使用img标签加载图片的话，我们还可以使用样式表，对body标签进行一些设置
在这里插入图片描述
image，加载图片的路径；size，覆盖；attachment，背景固定，不随屏幕滚动而滚动；
在head头部添加连接，连接css文件

在这里插入图片描述
如果路径错误的话，将无法加载背景图片。我们需要修改路径。

在这里插入图片描述挡住了。我们把img图片移动到右边，顺便修改一下大小

优化

2.4 加载JS代码

JS文件
在这里插入图片描述

主页面
在这里插入图片描述
最终效果

换一张合适大小的图片

最后的效果

三、JS基本语法

3.1 声明变量的关键字

在这里插入图片描述

实践

关于var和let的区别，我参考是这篇：var和let的区别及详细说明
let可用于局部变量的声明,且let不能重复声明函数，否则将会报错。
若想修改全局变量，不需要输入关键字，直接对变量进行赋值即可
在这里插入图片描述

var则相反，声明的全局变量，并且可以多次声明
在这里插入图片描述

根据建议，我之后都使用let进行变量的声明。

3.2 变量类型

在这里插入图片描述

3.2.1 number

<script type="text/javascript">
let age=17;console.log(age);</script>

若未定义变量，则报错，变量未声明
在这里插入图片描述

3.2.2 String

在这里插入图片描述

<script type="text/javascript">
let str1='string1';console.log(str1);</script>

在这里插入图片描述

3.2.3 Boolean

在这里插入图片描述

3.2.4 Array

在这里插入图片描述

3.2.5 Object

在这里插入图片描述

3.2.6 Infinty，-Infinty，NaN，NULL

无穷大，无穷小
在这里插入图片描述
非数字（Not A Number）

3.3 动态变量

在这里插入图片描述

尝试依次将上述代码输入您的控制台，看看结果是什么（无须输入//之后的注释）。我们使用了一个名为typeof的特殊的操作符 ——它会返回所传递给它的变量的数据类型。第一次在上面的代码中调用它，它应该返回 string，因为此时 myNumber 变量包含一个字符串’500’。看看它第二次将返回什么

在这里插入图片描述

3.4 算数运算符

在这里插入图片描述

3.5 简单的按钮

做一个按钮（在js文件里配置）
在这里插入图片描述

在这里插入图片描述点击按钮

3.6 把字符串当作对象

在这里插入图片描述

3.6.1 length

在这里插入图片描述

3.6.2 IndexOf

在这里插入图片描述

3.6.3 slice

在这里插入图片描述

3.6.4 大小写转换

在这里插入图片描述

3.6.5 替换字符

在这里插入图片描述

3.7 过滤匹配

document.querySelector:选中元素，这里选中的是out元素
document.innerHTML：获取document对象的文本内容
document.createElement:添加元素节点，这里批量添加p标签
document.textContent:填充内容
document.appendChild:在末尾添加新的子节点
对列表中的每一行进行遍历，并通过indexOf函数进行筛选

在这里插入图片描述在style1.css进行配置，位置为relative，左边相对留下15px的空间
通过过滤，最终得到miku演唱的曲目

3.8 DOM型XSS

这里介绍一种DOM型的XSS。
当我直接添加一个链接的时候
在这里插入图片描述网页中显示的href是可以修改的

当我点击链接时
发生了DOM型的XSS注入
除此之外，若是存在onclick属性，也同样可以修改

所以，在个人测试的时候，可以不过滤，但是若想提供网站的安全性，需要做一些过滤。

四、其它

4.1 流程控制

语法和PHP差不多
在这里插入图片描述

4.2 函数

函数的定义方式和PHP没有区别，在javascript中，可以将函数绑定到事件上。

在这里插入图片描述
嵌套函数

匿名函数

4.3 Prototype

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

相当于直接在对象外部对对象（函数）的属性进行设置。
这里的Date函数用来获取日期（秒数）,Date.parse()将特定格式的字符串转换为日期，getFullYear()用来获取年份。
通过prototype，我对cur_date进行了设置，同时，Miku对象的匿名函数anniversary返回curdate和birthday的年份差。
定义d，传入参数，创建一个新的Miku对象
最终通过d.birthday和d.anniversary获取到了正确的值
在这里插入图片描述

4.4 通过Object自定义对象

Object对象是JavaScript中的内部对象，它提供了对象的最基本功能，这些功能构成了所有其他对象的基础。
Object对象提供了创建自定义对象的简单方式，使用这种方式不需要再定义构造函数。
可以在程序运行时为JavaScript对象随意添加属性，因此使用Object对象能很容易地创建自定义对象。

在这里插入图片描述 ukim对象的所有属性