JS基础

最新推荐文章于 2021-09-12 13:13:27 发布
最新推荐文章于 2021-09-12 13:13:27 发布
阅读量218 收藏
点赞数
分类专栏： 计算机语言 文章标签： 脚本语言 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43271194/article/details/89458445
版权

JAVASCRIPT

  • 目标，能认识代码所表达的意思即可
JavaScript学习（轻量级脚本语言）简介
  • 可插入HTML页面，可由所有现代浏览器执行,使用<script>和</script>标签，表明何时开始何时结束
  • 可以改变大多数HTML的属性
  • 对大小写敏感，会忽略多余的空格
  • 可以使用\来换行，注释和C语言一样
  • 测试和捕捉,try里测试，若发生错误则执行catch
try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

JAVASCRIPT

JS基本教程

如何实现
  • 使用<script>标签，JS代码加在中间，可放在body,head等位置
  • 外部的JS，文件拓展名为.js。<script src="myScript.js"></script>
输出

  • document.getElementById("id")访问某用id标识的元素

  • document.write("<p></p>")仅限于向文档输出内容

变量
  • 变量必须以字母开头，少用$和_开头
  • 使用var来声明变量，再赋值
  • 一条语句多个变量用 ， 分开
  • 动态变量即：相同变量可以用作不同的类型
  • 只有一种数字类型，可带小数点或者不带
  • 局部与全局变量
  • 如果把值赋给没有声明的变量，该变量将自动作为全局变量声明
对象
  • 对象由花括号分开
创建对象及属性

  • 名加’.'连接符，连接对象
    person.age=56;

  • 对象的属性意名称和值对的形式（name:value）来定义，属性有逗号分开

    var person=
{
 firstname:"Bill",
 lastname:"Gates",
 id:5566
};

  • 对象有两种寻址方式

    name=person.lastname

    name=person["lastname"]

函数

  • 代码如下

    myFunction(argument1,argument2)

    • 可以发送任意数量的函数
    function functionname(var1，var2)
{
    这里是要执行的代码;
    return x;返回值
}
    • 可以在任意位置进行调用
    • function必须小写
    • 变量和参数必须以一致的顺序出现，也就是第一个变量就是第一个被传递的参数的值
运算符
  • 同C
  • 对字符串和数字进行加法运算，结果为字符串
  • 可以叠加字符串
语法语句
if，for，while
  • 请使用小写，否则会报错
  • 其余语法和C大致相同

for (var i=0,len=cars.length;i<len;i++)

JS错误

  • try 语句测试代码块的错误

    catch 语句处理错误

    throw 语句创建自定义错误

try
{
    //运行代码
}
catch
{
	//代码
}


throw exception
表单验证
必选项目
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}
依次类推，邮箱等

JS HTML DOM

简介
  • 通过HTML DOM（文档对象类型），可访问JS HTML所有元素

DOM HTML 树

查找HTML元素

  • 通过id

    var x=document.getElementById("id名")

  • 标签名

    var x=document.getElementById("main")

    var y=x.getElementsByTagName("p")

    查找id为main的元素，然后查找其中所有的p元素

  • 类名

DOM HTML
改变输出流
  • JS能创建动态的HTML内容
  • document.write()直接向HTML输出流写内容（不要再文档加载后使用，否则会覆盖）
改变HTML内容

  • 最简单的是用innerHTML属性

    document.getElementById(id).innerHTML=new HTML

改变HTML属性值

document.getElementById(id).属性=new value

DOM CSS

document,getElementById(id).style.属性=new style

DOM 事件
对事件作出反应
  • 向HTML事件属性添加JS代码

​ JavaScript

  • 事件例子（当用户点击鼠标，当网页已加载，当图像已加载，鼠标移动到元素，输入字段被改变时，提交HTML表单，触发按键时）
事件属性（向元素分配事件）
<!DOCTYPE html>
<html>
<body>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button "displayDate()">点击这里</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

  • 该例子就是向button元素分配 onclick事件，还有如下

    <script>
document.getElementById("myBtn").function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
onload和onunload事件

  • 在用户进入或离开页面时被触发

  • onload可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

  • 可用于处理 cookie（检验navigator.cookieEnabled是否为真）

onchange

  • 结合对输入字段的验证来使用

    <input type="text" id="fname" "myFunction()">

onmouseover,onmouseout
  • 鼠标在移到某元素上方，移出是时触发
onmousedown,onmouseup,onclick
  • 首次点击鼠标，释放鼠标按钮，完成鼠标点击时
JS HTML DOM 节点
创建并添加HTML元素
创建新的元素p：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。
var node=document.createTextNode("这是新段落。");
向 <p> 元素追加这个文本节点：
para.appendChild(node);
向一个已有的元素追加这个新元素。
var element=document.getElementById("div1");
element.appendChild(para);
删除元素
假定例子
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素
parent.removeChild(child);
JS 对象
  • 对象是带有属性和方法的特殊数据类型
  • JS中所有事物都是对象：字符串，数据，数组，函数。。。
访问对象

objectName.propertyName

  • 方法(可以在对象上执行的操作)

    objectName.methodName()

创建JS对象

  • 直接定义并创建

    person=new Object();
person.firstname="Bill";
另一种语法： 
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

  • 使用函数来定义对象，然后创建新的对象实例

    function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
JS类
  • JS不使用类
JS数字
  • 只有一种数字类型
  • 数字为64位
  • 精度：整数15位，小数17位
JS字符串

  • 字符串对象

    var txt="Hello world!"
document.write(txt.length/toUpperCase())//可根据需要添加
JS日期

  • 定义日期

    var myDate=new Date()Date 对象自动使用当前的日期和时间作为其初始值。

  • 操作日期

    为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：
var myDate=new Date()
myDate.setFullYear(2008,7,9)
注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
将日期对象设置为 5 天后的日期：
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
JS数组

  • 创建,赋值

    var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

  • 访问

    document.write(mycars[0])

  • 修改

    mycars[0]="Opel";

JS math
对一个数进行四舍五入。
document.write(Math.round(4.7))
返回一个介于 0 和 1 之间的随机数
document.write(Math.random())
返回一个介于 0 和 10 之间的随机数：
document.write(Math.floor(Math.random()*11))
JS RegExp

  • 正则表达式

  • 定义

    使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
var patt1=new RegExp("e");

  • 对象方法

    test():检索字符串中的指定值。返回值是 true 或 false。
exec():检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null
compile():用于改变 RegExp,可以改变检索模式，也可以添加或删除第二个参数
JS cookie
创建和存储cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)//过期天数
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

JS注入攻击

方法
  • 每当接受用户输入的内容并重新显示这些内容时，网站就很容易遭受 JavaScript 注入攻击。

    1. 能直接输入并提交，如

      <script>alert(“Attack!”)</script>  
此文本表示显示警告消息框的 JavaScript 脚本。在某人将此脚本提交，会显示Attack! 会在将来任何人访问网站时显示。

    2. 浏览器地址栏中输入一段js代码，用来改变页面js变量、页面标签的内容。

      • 使用Javascript注入，用户不需要关闭或保存网页就可以改变其内容，这是在浏览器的地址栏上完成的
      语法大致如下：
javascript:alert(#command#)
如：
1. 站点上看到一个alert警告框，那么首先在地址栏上输入URL并等待页面加载完成，然后删掉URL并输入：
javascript:alert("Hello World") 
2. 例如一张图片。
它的源代码为：
<IMG Name="hi" SRC="hello.gif"> 
把它改成存储在另一个站点里的某一个文件中，一次完整的图片URL地址为：
http://www.mysite.com/bye.jpeg
只需要在地址栏输入：
javascript:alert(document.hi.src="http://www.mysite.com/bye.jpeg") 
值得注意的是，此修改是暂时的，刷新网页后会消失
3. 修改变量的值
假设源代码如下：
<SCRIPT LANGUAGE="JavaScript">
var a="test"
</SCRIPT> 
输入：
javascript:alert(a="hello") 
4. 更改表单属性
源代码：
<form name="format" action="send.php" method="post">
<input type="hidden" name="mail" value="someone@somewhere.com">
<input type="text" name="name">
<input type="submit" value="submit"></form> 
将表单发送到另一个邮箱：
javascript:alert(document.format.mail.value="me@hacker.com")
解释：document+对象名+想修改的属性+值
如果新的属性值为字符串时，加上双引号，变量则不加
如果标签没有名字，则用下列命令：
javascript:alert(document. .mail.value="me@hacker.com") 
假如表单很多，又没有名字咋办？
加个序号即可，但是从0开始数哟！
使用如下命令：
javascript:alert(document.forms[1].mail.value="me@hacker.com") 
其他也是同理：
图片：
javascript:alert(document.images[3].src="#the url of the picture you want#") 
链接：
javascript:alert(document.links[0].href="#the url you want#") 
cookie也行哦！
防御

  1. 重新在视图中显示数据时，用 HTML 编码任何网站用户输入的数据
    如：<%=Html.Encode(feedback.Message)%>

    在转换后，浏览器在解析编码的字符串时不再执行 JavaScript 脚本。而是显示无害的页面。

  2. 将数据提交到数据库之前使用 HTML 编码数据。

Amire0x
关注
专栏目录
JavaScript学习：JavaScript this 关键词
weixin_44753854的博客
08-12 246
使用this关键词例子： var person = { firstName: “Bill”, lastName : “Gates”, id : 678, fullName : function() { return this.firstName + " " + this.lastName; } }; （this.firstName 意味着 this（person）对象的 firstNa...
js基础知识点思维导图
11-29
以上是JavaScript基础知识点的部分概述，理解并掌握这些概念是成为合格的JS开发者的基础。通过持续学习和实践，可以深入探索更高级的主题，如AJAX、前端框架（如React、Vue）、Node.js后端开发等。
JavaScript 对象详解
huangjianfeng21的博客
06-10 220
JavaScript对象的概述 什么是对象，代表现实中的某个事物, 是该事物在编程中的抽象，多个数据的集合体(封装体)，用于保存多个数据的容器 为什么要用对象，便于对多个数据进行统一管理 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。而对象的值就是引用类型的实例。 在javaScript 中引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称做为类，但 ja...
JavaScript中常用的5个输入输出函数
qq_52754410的博客
09-05 3582
这四个输入输出函数分别是：警告窗函数alert（），输出函数document.write(),提示对话函数prompt(),对话框confirm()函数。 1.警告窗函数alert（“所输出内容”）; alert()函数中换行用转义字符\n。 例：alert(“你好\nJavaScript”); 注：1.定义变量时字符串与变量之间用“+”连接 和2差不多将“+”后改为定义的变量名。 2.字符串和表达式之间用”+”加号连接。 alert(“2+3=”+(2+3)); ...
JavaScript js基础用法 示例代码
06-07
本资源主要是关于js基础用法的示例代码 内容包含了js变量定义 js输入输出 js转义符 js注释和编码规范 JavaScript 是一种广泛使用的脚本语言，主要用于网页和Web应用程序的客户端开发。 JavaScript（简称JS）是一种...
JavaScript js基础学习 示例代码
最新发布
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
Javascript基础.xmind
07-31
JavaScript基础三天总结
软件测试 基础班 JavaScript JS基础.ppt
10-03
软件测试基础班 JavaScript JS基础是软件测试的一门重要课程，本节课将对 JavaScript 的基础知识进行详细的介绍。 一、JavaScript 简介 JavaScript 是一种高级的、动态的、基于原型的编程语言，主要用于客户端的...
JS的基本输入和输出：
qianhua521的博客
11-14 631
1. 2.(1)alert  // 这是一个js 的 内置 函数（函数表示一个功能），它用来在网页上个弹出一个 文本框，提示用户一些信息，我们习惯叫他 弹      出框或者警示框 // alert("你将要进入一个神奇的js世界！"); // alert("你将要进入一个又糟糕的js世界！");     (2)console.log // alert会覆盖整个浏览器的所有页面，体验不
前端html JavaScript快速入门指南
qq_40275473的博客
05-12 251
一 html快速入门 1 基本框架 （1） 与 之间的文本描述网页 与 之间的文本是可见的页面内容 与 之间的文本被显示为标题 与 之间的文本被显示为段落 2 HTML 链接 HTML 链接是通过 标签进行定义的 进程调度算法 链接到一个html网页文件 This is a link 链接跳转到对应网页 在 href 属性中指定链接的地址 3 添加其他脚本语言 (1) HTM...
[Javascript]：Javascript的输出与输入方式
我只是个程序员。
09-12 2万+
JS的输出方式 1.alert() 弹出一个对话框，并显示输入的信息，信息都是String形式。该对话框包含一个确定按钮，点击后浏览器才会继续解析执行。 alert("弹出一个alert()"); //输出指定内容 var msg = "输出一个变量"; alert(msg); //输出变量中的内容
JS的输入与输出
weixin_51077152的博客
09-12 3480
1. 输入——动态输入框（prompt方法） prompt(‘提示’,默认值) 默认值可以省略 1. 作用：向程序输入数据 2. 格式：prompt(‘提示文字’, 默认值); 3. 注意：返回值为字符串类型 2. 输出方式（3种） 1）输出到控制台 console.log(); 2）输出到网页 document.write(); 输出到页面的内容在script后面 3）弹出警告框 window.alert(); 简写：alert(); 注意：alert会阻止页面程序的得执行 以上都是顺序执行，由上
JS中常用的输入输出方法
博客之家
05-25 7366
JS中常用的输入输入方法：alert、prompt、confirm
js的输入和输出语句
weixin_54902466的博客
05-09 4347
本章技术分享为js的输入和输出语句 文章目录前言一、输出二、输入总结 前言 输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。 举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。 一、输出 JavaScript 可以接收用户的输入，然后再将输入的结果输出： alert()、document.wirte() 以数字为例，向 alert() 或 document
js使用
weixin_30631587的博客
11-24 55
js使用 HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 　　1.JavaScript 对大小写是敏感的。 　　2.JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。 Test：点击按钮改变标签内容 ...
js常用函数_JavaScript中常用的输入输出函数
weixin_39907316的博客
12-03 1123
作为刚踏进js大门的新手，首先必须掌握js中有哪些常用的输入输出函数，下面我为大家介绍我们常用的4种输入输出函数，警告窗函数alert()，输出函数document.write(),提示对话函数prompt()，confirm()函数。1. 警告窗函数alert(“要输出的信息”)此函数只有一个参数，参数可以是字符串、变量或者表达式。如下：(1) alert(“你喜欢JavaScript吗”);(...
js的基本输入输出语句
热门推荐
jt18729260336的博客
09-29 3万+
1. alert() 显示消息 消息弹出窗：在 JS 中可以使用浏览器提供的 alert 函数 显示消息 语法如下：               var usrMsg = "请问有空吗？"               alert(usrMsg); 2. prompt(info) 获取输入 消息输入窗：在 JS 中可以使用浏览器提供的 prompt 函数从键盘接收用户的输入 ...
JavaScript基础入门教程
"这是一份面向初学者的JavaScript基础教程，旨在帮助没有JavaScript经验的人掌握这门语言的基本概念。教程虽然不涉及动态网页的高级技术，但覆盖了JavaScript的基础知识，包括语法、对象和事件等。它采用了参考教程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值