JavaScript（一）

shifting_sand

已于 2023-02-21 16:43:57 修改

阅读量95

点赞数

分类专栏：前端文章标签： javascript

于 2021-07-12 14:56:18 首次发布

本文链接：https://blog.csdn.net/shunjianxaioshi/article/details/118543726

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JS简介

HTML定义了网页的内容，CSS描述了网页的布局，JavaScript控制了网页的行为。
属于网络脚本语言。
用于设计，验证表单，检测浏览器，创建cookies
可插入html页面的编程代码
JavaScript：写入HTML输出

document.write("<h1>This is a heading</h1>");

JavaScript：对事件作出反应

<button type="button" onclick="alert("Welcome!")">点我！</button>

alert()函数不常用，但代码测试方便
JavaScript：改变HTML内容

x=document.getElementById("demo")  //查找元素，这个方法是HTML DOM中定义的，Document Object Model
x.innerHTML="Hello JavaScript";    //改变内容

JavaScript：改变 HTML 图像

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon")) #检索src中有没有bulbon
  {
  element.src="../i/eg_bulboff.gif";
  }
else
  {
  element.src="../i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()" src="../i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>

</html>

JavaScript：改变 HTML 样式

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";  # 改变样式

JavaScript：验证输入

if isNaN(x) {alert("Not Numeric")};

JS实现

HTML中脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的<body> 和<head> 部分中。JS会在页面加载时执行
外部JavaScript，外部文件是.js。外部脚本不能包含<script>标签

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JavaScript输出

JS没有打印或输出函数。通过以下方法显示数据：
- window.alert() 弹出警告框
- document.write() 将内容写入HTML文档中
- innerHTML 写入到HTML元素
- console.log() 写入到浏览器控制台
操作HTML元素

<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id=“demo” 的 HTML 元素，并把它的内容（innerHTML）替换为 “My First JavaScript”。
写到文档输出

<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>

JS语句

分号：分号用于分隔 JavaScript 语句。
顺序执行
JavaScript 代码块：JavaScript 语句通过代码块的形式进行组合。块由左花括号开始，由右花括号结束。
大小写敏感
忽略空格
可以在文本字符串中使用反斜杠对代码行进行换行
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。

注释

//注释
/* 多行注释*/

变量

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
var 声明变量
弱类型语言，变量数据类型根据值决定。
一条语句，多个变量。

var name="Gates", age=56, job="CEO";
var x, y, z = 1;  不可以

let 声明的变量只在其声明的块或子句中可用。
function varTest(){
	var x=1;
	if (Treu) {
		var x=2;
		console.log(x); // 2
	}
	console.log(x); // 2
}

function varLet(){
	let x=1;
	if (True) {
		let x=2;
		console.log(x); // 2
	}
	console.log(x); //1
}

const a=1; //常量,不能重新声明，不能重新赋值

JavaScript数据类型

字符串，数字，布尔，数组，对象，Null，Undefined
只有一种数字数据类型。前缀为"0"为八进制，为"0x"为十六进制
var x1=34.00，x2=34，y=123e5，z=123e-5
数组：var cars=new Array(); cars[0]=“Audi”;
或者：var cars=new Array(“Audi”,“BMW”,“Volvo”);
或者：var cars=[“Audi”,“BMW”,“Volvo”];
对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
typeof false // 返回boolean

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

对象属性有两种寻址方式：
- name=person.lastname;
- name=person[“lastname”];
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。cars=null;
当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

// 对象创建
function Demo(){
	var obj=new Object():
	obj.name="盖聂";
	obj.age=12;
	obj.firstF=function(){}
	obj.secondF=function(){}
	return obj;
}
var one=Demo();
document.write(one.age);

// 第二种
function Demo(){
	this.name="卫庄";
	this.age=12;
	this.firstF=function(){}
	this.secondF=function(){}
}
var one=new Demo
document.write(one.age);

基本类型的变量时存放在栈内存中的。

var a,b
a="cnjc";  //a:cnjc
b=a;  // b:cnjc
a="呵呵"; //a:呵呵，b:cnjc

在这里插入图片描述

引用类型的值是保存在堆内存中的。

var a = {name:"percy"};
var b;
b = a;
a.name = "zyj";
console.log(b.name);    // zyj
b.age = 22;
console.log(a.age);     // 22
var c = {
  name: "zyj",
  age: 22
};

在这里插入图片描述

JavaScript对象

JavaScript中所有事物都是对象：字符串、数字、数组、日期，等等。
对象拥有属性和方法。
- 属性是与对象相关的值。
- 方法是能够在对象上执行的动作。
在 JavaScript 中，对象是数据（变量），拥有属性和方法。字符串对象同时拥有若干个内建的方法。

var txt="Hello";
txt.length=5
txt.indexOf()
txt.replace()
txt.search()

创建JavaScript对象

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

javascript是键值对的容器

使用对象构造器来构造对象

function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name){
this.lastname=name;
}
}

var myFather=new person("Bill","Gates",56,"blue")

访问对象属性的语法是：objectName.propertyName
访问对象的方法:objectName.methodName()

var message="Hello world!";
var x=message.toUpperCase();

JavaScript类

JavaScript是面向对象的语言，但JavaScript不使用类。JavaScript基于prototype，而不是基于类的。

JavaScript for…in语句循环遍历对象的属性。

var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
  {
  txt=txt + person[x];
  }

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数就是包裹在花括号中的代码块，前面使用了关键词 function

function functionname()
{
这里是要执行的代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
调用带参数的函数

myFunction(argument1,argument2)

function myFunction(var1,var2)
{
这里是要执行的代码
}
# 变量和参数必须以一致的顺序出现。

实参个数如果比形参少，那么剩下的默认赋值为undefined，如果实参传的比形参数量多，那么是全部都会被传进去的，只不过没有对应的形参可以引用（但可以用arguments来获取剩下的参数）。
函数名和变量名重名，函数声明会首先执行，之后变量声明。所以变量声明会覆盖函数声明。

function myFunction(x, y) {
    y = y || 0;
}

带有返回值的函数

function myFunction()
{
var x=5;
return x;
}

var myVar=myFunction();
document.getElementById("demo").innerHTML=myFunction();

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

函数表达式、匿名函数

var x = function (a, b) {return a * b};
var z = x(4, 3);

构造函数


var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

自调用函数

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

函数作为值使用

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;

函数是对象

function myFunction(a, b) {
    return arguments.length;  //返回函数参数个数  arguments 对象包含了函数调用的参数数组。
}

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();  // function myFunction(a, b) { return a * b; }

箭头函数

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;
const x = (x, y) => { return x * y };

使用构造函数调用函数

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;

函数方法调用函数


function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

JavaScript事件

HTML事件是发生在HTML元素上的事情。使用JS可以触发这些事件
HTML可以是浏览器行为也可以是用户行为。（页面加载完成、input字段改变、按钮被点击）

<button onclick="getElementById('demo').innerHTML=Date()">
<button onclick="this.innerHTML=Date()">现在时间是？</button>
<button onclick="displayDate()">现在的时间是？</button>

事件	描述
onchange	HTML元素改变
onclick	用户点击HTML
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件用处（处理表单验证，用户输入，用户行为及浏览器动作）
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性

JavaScript字符串

用于存储和处理文本
可以使用索引位置来访问字符串中的每个字符

var carname = "Volvo XC60"
var character = carname[7]
var answer="He is called 'Johnny'";
var x = 'It\' alright';
var carname_len = carname.length;

\n：换行				\b：退格符
\r：回车				\f：换页符

字符串可以是对象

var x = "hello"
var y = new String("hello")
typeof x // 返回String
typeof y // 返回Object
(x === y) // 结果为false。===为绝对相等，类型和值都必须相等

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写

JavaScript运算符

JavaScript 算术运算符
算术运算符用于执行变量与/或值之间的算术运算。
给定 y=5，下面的表格解释了这些算术运算符：

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数（保留整数）	x=y%2	x=1
++	累加	x=++y	x=6
--	累减	x=--y	x=4

JavaScript赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

用于字符串的+运算符
如果是把数字与字符串相加，结果将成为字符串。

shifting_sand

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（一）

JS简介属于网络脚本语言。用于设计，验证表单，检测浏览器，创建cookies可插入html页面的编程代码JavaScript：写入HTML输出document.write("<h1>This is a heading</h1>");JavaScript：对事件作出反应<button type="button" οnclick="alert("Welcome!")"></button>...
复制链接

扫一扫