javascript基础-小白入门

最新推荐文章于 2024-05-03 16:20:14 发布

weixin_45923850

最新推荐文章于 2024-05-03 16:20:14 发布

阅读量563

点赞数

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

本文链接：https://blog.csdn.net/weixin_45923850/article/details/110689403

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript特点

浏览器脚本语言，可以和html代码混排
跨平台属性 windows、linux，只要有浏览器
安全性，不会访问本地资源，只是给浏览器执行
兼容性不好，各大浏览器支持的也不一样，有些功能用不了

javascript目标

实现页面特效，例如图片局部放大、表单的提交按钮

javascript使用场景

直接显示弹窗

<script>
	// 注意加分号结尾，注释为//，多行注释为/*...*/
	alert("我是第一，今天是个好天气");
</script>

外部引入js

<script src="./one.js"></script>               // 当前
alert("我是第二，今天天气并不好");               // one.js文件内容

事件方式（div页面布局）

<head>
	<meta charset="UTF-8">
	<title>javaScript基础---应用场景</title>
	<style>
		.two{
			width: 300px;
			height: 300px;
			background: blue;
		}
	</style>
</head>
<body>
    // 通过点击.two形成的框来弹窗
	<div class="two" onclick='alert("我是第三，哈哈哈哈我在这里")'></div>
</body>

链接方式

// 通过点击文本弹窗
<a href="javaScript:alert('我是第四，我今天是天下最快乐的人 ')">老四，今天你心情怎么样</a>
<a href="javascript:avoid">点我试试</a>

JS数据类型

声明方式—var

<script type="text/javascript">
//数据类型由var开始,变量声明时，变量名称不以数字开头，区分大小写，可以以_、字母开头,数字可以组合使用，但是#@等不能开头
	var one = 100;
	var two_2 = 200;
	var _three = 300;
	alert(one);    
</script>

字符串声明

<script>
	var str_1 = '今天你有点奇怪';
	var str_2 = "今天你好帅";
	console.log(typeof(str_1)); //调试为数据类型
	console.log(str_1);         //调试内容
	var str_3 = '今天你很\'漂亮\'' ;         //出现两个单引号时，第一种方式用转义字符\
	var str_4 = "我'喜欢'今天的你 " ;        //第二种方式就是单双引号错开
</script>

连接符

<script type="text/javascript">
	//连接符:+符号连接一起 ，`...`符号会保持原有格式
	var str_4 = "我有点几点几分美男" + 
	"后宫的好噶十点啥"; 
	var str_5 = `hdfhdguyfgjsbdv
		           jhsfjdjjhfg
		            djfj`;
</script>

bool型

<script type="text/javascript">
	//布尔值必须小写，只有true和false
	var bool = true;
</script>

number数值类型

<script type="text/javascript">
	var a = 100;                            // 不分整型和浮点型
	var a = 12.1;
	var a = 0x12;                           //0x，十六进制，12>00010010>18
	var a = 011;                            //0，八进制，11>001001>9
	var a = 0b11;                           //0b，二进制，3
	var a = 12.1e4;                         //e代表10的次方，即12.1*10^4

	//NaN,not a number，特殊的数值，以特殊情况判断,任何数值与NaN相运算都得NaN
	var b = NaN;   
	var c = 100 + NaN;

	//和任何数值作比较时得到的值为false时：
	var d = 200 < NaN; 

	//和任何数值作比较时得到的值为true时：
	var e = 200 != NaN;                    //不等于！=，等于用==
	var e = 200 !== NaN;                   //不恒等于！==，恒等于===
</script>

对象

var obj = new object();
var obj = {'name':'张杰','age':'32','bool':'true'};

数组

var arr = new Array();
var arr = ['day',50,true,"tys"];

空数据类型

var nul = null;

未定义数据类型

var und = undefined;

函数function

function fun(){
		}

HTML元素及获取

即以开始标签起始，结束标签结尾，并且开始标签和结束标签的内容叫做元素的内容，可以为空

getElementByld()方法

<h1 id="id_1">明天！</h1>
// 方法一
<script type="text/javascript">
	var x = document.getElementById('id_1');             //获取元素
	alert(x);
	x.innerHTML = '今天！';                              //修改元素,一定是元素对象x
</script>

// 方法二：直接获取并修改元素
<script type="text/javascript">
	document.getElementById("id_1").innerHTML= '今天！';    
</script>

// 方法三：button按钮事件触发，通过按钮实现元素的修改
<button type="button" onclick="document.getElementById('id_1').innerHTML= '今天！'">按钮</button>