JavaScript（翁凯老师笔记）_翁凯 javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/Lmuziji/article/details/125827166

本文详细介绍了JavaScript的基础知识，包括变量、判断、循环等语法，以及函数、数组、对象的使用。通过示例代码展示了如何在浏览器环境中实现用户交互和数据处理。同时，讲解了window对象和document对象的应用，以及HTML中的JavaScript事件处理。此外，还涉及到了对象原型和计时器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

什么是JavaScript？
JavaScript相关语法知识

什么是JavaScript？

JavaScript是运行在浏览器里的脚本语言，HTML负责结构，CSS负责格式，JavaScript负责动作。
是一种可以在浏览器中运行的脚本文件语言
主要用来实现在浏览器端的动作
- 用户交互
- 数据处理

JavaScript相关语法知识

备注：感觉JavaScript语法知识和C++很类似

变量、判断、循环

<html>
<body>
//<body onLoad="alert('hi')">使用onLoad函数将语句投射到浏览器页面中
<script>
	var hello;//var 定义变量
	hello="Hello";
	var age=16;
	var ot=true;
	hello=hello + " World";//需要自己加空格，记住html中多个空格相连时，显示一个
	document.write(hello);
	document.write("Hello World");//.是运算符，即document做write这个动作，document也可以
	document.write("<h1>Hello World!</h1>");
</script>
</bady>
</html>

<html>
<head>
	<meta charset=utf-8>
</head>
<body>
<script>
var age=20;
if (age>18)
{
	alert("成年啦");
}
alert("好啦好啦，知道啦");
document.write("你的年龄是："+age);//注意"+"
</script>
</body>
</html>

switch语法：

var grade=74;
grade=grade/10;
switch(grade){
	case 10:
	case 9:
		alert("A");
		break;
	case 8:
		alert("B");
		break;
	case 7:
		alert("C");
		break;
	case 6:
		alert("D");
		break;
	default:
		alert("E");
		break;
	}

条件运算符：

(A>B) ? A++ : B++;

函数

function fun_name() {}
function fun_name(a,b) {}

//函数变量
var f=new Function(“x”，“y”，“return x*y”);
//等价于
function f(x,y) {return x*y;}
function cal(f,a,b)
{
	return f(a,b);//f为一个函数变量
}
//注意：JavaScript中变量的作用域只有中：1、整个区局的，2、函数中的。而其他语言像C++，则可能有多个

数组

创建数组：

var a = new Array();
var b = new Array(size);
var c = new Arrey(d1,d2,...,dn);
var d = [d0,d1,...,dn];
//javascript中数组可以扩大
//a[x]=n直接创建了数组中的一个单元x，并且赋了值n

数组长度：

var names=[];
alert(names.length);//"0"
//.length可以写
var colors=["red","blue","green"];
colors.length=2;
alert(colors[2]);//no undefined
alert(colors);//将数组全部输出，数组元素中间用“，”相连
alert(colors.join("||"));//red||blue||green

数组排序

function compare(value1, value2){
	if(value1<value2){
		return 1;
	} else if(value1>value2){
		return -1;
	} else {
		return 0;
	}
}
var values = [0,1,5,10,15];
//value.sort()用sort内部自己的排序
value.sort(compare);//定义自己的排序

splice()
splice(开始位置，删除个数，插入元素…)
- 删除：splice(0,2)
- 插入：splice(2,0,“red”,“green”)
- 替换：splice(2,1,“red”,“green”)

对象

对象是JavaScript的一种复合数据类型，它可以把多个数据集中在一个变量中，并且给其中的每个数据起名字
或者说，对象是一个属性集合，每个属性有自己的名字和值
JavaScript并不像其他OOP语言那样有类的概念，不是先设计类再制造对象

//创建对象：
var o = new Object();
var ciclr = {x:0,y:0,radius:2};
//运算符：
var book = new Object();
book.title = "HTML5秘籍";
book.translator = "李松峰";
book.reader = "张三";
//alert(book)不能向数组一样全部输出
//遍历所有属性
for (var x in book)
{
	alert(x); //title translator reader
	alert(book.x);//undefined
	alert(o[x]);//HTML5秘籍 李松峰 张三
	alert(x+"="+o[x]);
}

//Rect构造函数
function Rect(w,h){
	this.width = w; this.helight = h;
	this.area = function() { return this.width*this.helight; }
}
var r=new Rect(5,10);
alert(r.area());

原型对象
- 对象的prototype属性指定了它的原型对象，可以用.运算符直接读它的原型对象的属性
- 每当这个属性时才在它自己内部产生实际的属性

window

浏览器的全局对象是window
所有全局的变量实际上是window的成员
var answer = 12;
alert(window.answer);
HTML中的JavaScript
- 在<script></script>标记中
- 在<script>的src属性或archive指定的外部文件中
- 在某个HTML标记的事件处理器中
外部JavaScript文件
- <script src = "util.js"></script>
- 一个纯粹的代码文件，没有HTML标记
事件处理器
- <p onMouseOver="alert('hi');">鼠标经过是会显示hi
body事件
- onLoad
- onUnload

简单对话框

alert()
输出

confirm()

	if (confirm("还要继续吗？"))
	{
		alert("好，继续");
	}
	else
	{
		alert("好吧，再见");
	}
	var name = prompt("你的名字是：");
	alert(name);

prompt()

状态栏

status =

defaultStatus =

<p 
 	onMouseOver="status='网易云学习'；"
 	onMouseOut="status=' ';">
 	网易云学习
 	</p>

计时器

function update(){
	if(count >=0)
		status = count--;
}
<body onLoad="setInterval('update()',1000);">
//interval是计时器，每1000ms后执行一次

document

在这里插入图片描述

src：
javascript中src是：1、指定浏览器解释脚本代码语言的属性；2、指定浏览器以何种语言解释脚本代码；3、指明脚本所在文件，把src后面的内容传给服务器；4、指明脚本的大小。
事件
- onLoad/onUnload
- onMouseOver/onMouseOut
- onClick/onDblClick
- onSubmit