JavaScript学习的第一天

最新推荐文章于 2024-05-30 19:49:28 发布

qq_43552118zx

最新推荐文章于 2024-05-30 19:49:28 发布

阅读量118

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_43552118/article/details/84544073

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.JavaScript(JS)行为层

1.JavaScript的介绍

JavaScript 是一种基于对象和事件驱动的客户端脚本语言,常用来给 HTML 网页添加动态功能，比如响应用户的各种操作(提供了用户和界面的交互方式)

(1).对象:JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...等,它是带有属性和方法的特殊数据类型.

对象中的三大要素/三大特征:
属性: 用来描述一个对象的外观特征表现.

方法(主动行为): 对象自己本身所具备的能力.

事件(被动行为): 对象自己接受到一种指令需要完成的一种行为

2. 解析执行与编译执行,[延伸出的--------弱类型脚本语言]
编译执行：把代码编译成 CPU 认识的语言(文件)，然后整体的执行。
解析执行：一行一行解析，解析一行执行一行。
弱类型脚本语言:根基据值确定数据类型,接收数据的语法格式是:var变量名称=值;

二.JavaScript 嵌入页面的方式

(1)行间式嵌入:

<div class="div1" onclick="alert('hello javascript')">请点击</div>

(2)内嵌式嵌入:注意没有加载名称的事件需要调用加载事件,即给body添加页面加载事件

<script type="text/javascript">
 <function load(){
				alert('你好');
			}
          
  window.onload=function(){
               alert('没有名称的加载事件');
		}
		</script>
	</head>
	<body onload="load()">
	</body>

(3)外联式/外部式嵌入:

<script type="text/javascript" src="js/waibuyinruwenjian .js">
<body onload="load()">
</body>

消息框:alert confirm prompt

<script type="text/javascript">
				function load(){
					confirm("是否关闭窗口");
				}
			</script>
		</script>
	</head>
	<body onload="load()">
	</body>
</html>

prompt

	<script type="text/javascript">
				function load(){
                    prompt('请输入姓名','张三');
				}
			</script>

三.JavaScript的变量

1.定义:在整段程序中是不断变化的,同时用来存储数据,并且JavaScript 是一种弱类型语言，其变量类型由它的值来决定。定义变量需要用关键字 'var' (var num;)

2.变量的初始化:num=10(使用var定义多个变量)

eg:var num1=10,num2=20;/var num1,num2;num1=10;num2=20;

3.变量的命名规则:

(1)驼峰命名法:userName----小驼峰;UserNamePwd大驼峰

(2)变量的名称可以以$,字母开头,

(3)变量的名称可以包含数字,但不能以数字开始

(4)不能使用JavaScript中的关键字及保留符号命名。

(5)可以使用中文命名(不建议使用)

(6)区分大小写

(7)变量名不允许使用空格,长度不能超过 255 个字符。

四.JavaScript数据类型及转换

1.数据类型
JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。
基本数据类型包括以下3种：
1) 数字型（Number型）

eg:var num=10;

alert(typyof(num));/alert(typyof num);------用于检测变量的数据类型(两种写法)
2) 字符串型（String型）

eg:var str=' ';

alert(typyof str);
3) 布尔型（Boolean型）

eg:var bool=true;

案例

<script type="text/javascript">
			var num=10;
//			检测变量的数据类型为number
			alert(typeof num);
//			检测变量的数据类型为字符串
			var str='123'
			alert(typeof str);
//			检测变量的数据类型为布尔型
			var bool=true;
			alert(typeof bool);
		</script>
	</head>

特殊数据类型(3种)

(1)空值（null型）

(2)undefined未定义型:只声明了变量,未进行初始化(赋值)

(3)object对象类型

2.数据类型转换

字符串型转换为数值型:
eg: var num=10;
数字类型转化为字符串类型第一种写法
var num=String(num);
alert(typeof num);
数字类型转化为字符串类型第二种写法
var num=num.toString();
alert(typeof num);

数值型转换为字符串型:

eg: var str1='123';
alert(typeof Number(str1));

var str2='123abc';
var num_01=parseInt(str2);
alert(num_01);--------输出结果为123

var str3='12ab33cc';
var num_02=parseInt(str3);
alert(num_02);--------输出结果为12

var str5='123.34';
var num_04=parseFloat(str5);----转换为浮点类型确保数据的完整性
alert(num_04);-----输出结果为123.34

将日期类型转换为字符串

eg: var time=new Date();
alert(time);-----获取当前时间
第一种方法:
var strTime=time.toString();
alert(typeof strTime);
第二种方法:拼接字符串(最常用)
alert(typeof strTime+" ");

五.JS运算符和表达式

1.运算符(5种)

(1) 算术运算符:+ - * /；
(2) 比较运算符:> < >= <= != ==；
(3) 赋值运算符:-= += *= /= %=；
(4) 逻辑运算符；&&(与) ||(或) !(非)
(5) 条件运算符(三目/三元运算符):条件? 值1 值2；

<script type="text/javascript">
//			算数运算符
			var a=3,b=5;
			document.write(a+b);
			document.write('<br/>');
			document.writeln(a+b);
			document.write('<br/>');
			document.write(a-b);
			document.write('<br/>');
			document.write(a*b);
			document.write('<br/>');
			document.write(a/b);
			document.write('<br/>');
			document.write(a%b);
			document.write('<br/>');
		</script>

write()和writeln()之间的区别?

本质上输出的结果是相同的

document.write() :将内容写入文档，当前编辑位置为写入的内容的后一个字符,直接输出不换行
document.writeln() :将内容写入文档，并添加一个换行符，当前编辑位置为写入的内容的后一行的起始位置(writeln是以行方式输出的，但并不是指页面实际效果中的换行,两种方法在查看源代码时才看得出区别)

2.比较运算符

<!--比较运算符-->
            var a1=30,b1=50;
            document.write(a1>b1);
//          加括号设置优先级
            document.write('<hr/>'+(a1>b1));
		</script>

3.赋值运算符:

<script type="text/javascript">
var num_01=5,num_02=4;
			num_01+=num_02;   //num_01=num_01+num_02;
			alert(num_01+=num_02);
			alert(num_01-=num_02);
			num_01/=num_02;
			alert(num_01);
			alert(num_01*=num_02);
			alert(num_01%=num_02);
</script>

4.条件运算符:

<script type="text/javascript">
            var num_03=6,num_04=8;
            alert(num_03>num_04?'0':'1');
            alert(num_03>num_04?'成立':'不成立');
            alert(num_03<num_04?true:false);
</script>

5.逻辑运算符:

<script type="text/javascript">
            var $num_05=5,$num_06=6;
//           两边条件都成立时为true
            alert(($num_05>3&&$num_06>5)?true:false);
//           只有一边条件成立则为false
            alert(($num_05>6&&$num_06>5)?true:false);
		</script>

CSS3补充:HSL和HSLa的区别?

HSL色彩空间：HSL 和 HSV（也叫HSB）是对RGB色彩空间中点的两种有关系的表示，它们尝试描述比 RGB 更准确的感知颜色联系，并仍保持在计算上简单。H指hue（色相）、S指saturation（饱和度）、L指lightness（亮度）、V指value（色调）、B指brightness（明度）。色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等，取0-360。饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。明度（V），亮度（L），取0-100%。W3C 的 CSS3采用的是HSL。

HSLA色彩空间：HSLA是在HSL的基础上增加了透明度。

qq_43552118zx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript学习的第一天

一.JavaScript(JS)行为层1.JavaScript的介绍JavaScript 是一种基于对象和事件驱动的客户端脚本语言,常用来给 HTML 网页添加动态功能，比如响应用户的各种操作(提供了用户和界面的交互方式)(1).对象:JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...等,它是带有属性和方法的特殊数据类型.对象中的三大要素/三大特征:属性: ...
复制链接

扫一扫

专栏目录