js初学习

帝黎亚

已于 2022-02-10 20:35:39 修改

阅读量206

点赞数

文章标签： javascript 前端开发语言

于 2022-02-10 20:28:05 首次发布

本文链接：https://blog.csdn.net/qq_52109865/article/details/122866462

版权

基础部分

JavaScript 是属于 HTML 和 Web 的编程语言。编程令计算机完成您需要它们做的工作

命名规则：

1.变量名
变量名推荐使用驼峰法来命名(camelCase)
2.空格与运算符
通常运算符 ( = + - * / ) 前后需要添加空格
3.代码缩进
通常使用 4 个空格符号来缩进代码块
4.复杂语句的通用规则:
将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明
5.对象定义的规则:
将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性-值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号

运算符

算数
运算符	描述
+		加法
-		减法
*		乘法
/		除法
%		取模（余数）
++		递加
--		递减

赋值
运算符	例子	等同于
=		x = y	x = y
+=		x += y	x = x + y
-=		x -= y	x = x - y
*=		x *= y	x = x * y
/=		x /= y	x = x / y
%=		x %= y	x = x % y

数组

JavaScript 数组用于在单一变量中存储多个值。数组是一种特殊的变量，它能够一次存放一个以上的值

创建数组
使用数组文本是创建 JavaScript 数组最简单的方法。

语法：
var array-name = [item1, item2, ...];

JavaScript 变量可以是对象。数组是特殊类型的对象。正因如此，我们可以在相同数组中存放不同类型的变量。因此有很多方法都是通用的比如lenth，比如单独访问数组对象

函数

在 JavaScript 中，对象是王。如果理解了对象，就理解了 JavaScript。
在 JavaScript 中，几乎“所有事物”都是对象。
布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
所有 JavaScript 值，除了原始值，都是对象。(所以程序员怎么可能缺对象！！！)
JavaScript 定义了 5 种原始数据类型：

string
number
boolean
null
undefined

那么对函数而言，JavaScript 函数是被设计为执行特定任务的代码块，会在某代码调用它时被执行，函数嘛，无非就是定义一次用好几次，js的函数也是如此.
js的函数调用：
函数中的代码将在其他代码调用该函数时执行：
当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）
举个例子：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用函数把华氏度转换为摄氏度：</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(86);
</script>
</body>
</html>

这就是一次调用

实例

实现建议的计算器（输入型）
html代码：

<html>
	<head>
		<meta charset="utf-8"/>
		<title>简易计算器</title>
		
		<style>
			body{
				font-size: 20px;
				text-align:center;
				letter-spacing:1px;
				margin-top:20px;
			}
			#bu input{
				background-color: #164481;
				font-size: 50px
			}
		</style>
		<!--引入外部js-->
		<script src="test.js"></script>
	</head>
		
	<body>
		<p>
			number1：
			<input id="text1" type="text" onblur="num1(event)"/>
		</p>
		<p>
			number2：
			<input id="text2" type="text" onblur="num2(event)"/>
		</P>
		<p id="bu">
			<input  value="+" type="button" onclick="tp(event)"/>
			<input  value="-" type="button" onclick="tp(event)"/>
			<input  value="*" type="button" onclick="tp(event)"/>
			<input  value="/" type="button" onclick="tp(event)"/>
		</p>
		<p>
			结果为：
			<input id="text3" type="text"/>
		</p>

	</body>
</html>

js文件：

var sum1=0;
var sum2=0;
function num1(){
	var evt=arguments[0]||window.event;
	var s=evt.srcElement||evt.target;
		sum1=Number(s.value);
				
}
function num2(){
	var evt=arguments[0]||window.event;
	var s=evt.srcElement||evt.target;
	sum2=Number(s.value);
}
			
function tp(){
	var evt=arguments[0]||window.event;
	var s=evt.srcElement||evt.target;
	var a=document.getElementById("text3");
	a.value=eval(sum1+s.value+sum2);
		}

实例：
在这里插入图片描述
简易的钟表：
html：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示时间</title>
<style type="text/css">
	#clock{
		margin-left: 700px;
		margin-top: 400px;
		size:1.25rem
	}
</style>
<script type="text/javascript">
  var nowtime = setInterval(clock, 100);
  function clock(){
    var time=new Date();          
    nowtime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); ;
    document.getElementById("clock").value = nowtime;
  }
</script>
</head>
<body>
<form>
<input type="text" id="clock"/>
</form>
</body>
</html>