一、特点：

JavaScript和java并没有直接关系，就像雷锋与雷峰塔似的没有联系；

js是面向对象的，是运行在浏览器端的编程语言；

主要解决的是前端与用户的交互问题，包括交互数据。

二、js引入方式

1.行内式：

<开始标签 on+事件类型=“js代码”></结束标签>

行内引入方式必须结合事件来使用

<body>

<input type="button" onclick="alert('行内引入')" value="button" name="button">

<button onclick="alert(123)">点击我</button>

</body>

onclick:点击鼠标触发一个事件

alert(""):弹出提示框 括号内式字符串格式

2.嵌入式：

在head或body中，定义script标签，然后在script标签里面写js代码

<script type="text/javascript">

	alert('滚出来见我')

</script>

3.外链式：

定义外部js文件(.js结尾的文件)

<script type="text/javascript" src="js文件路径"></script>

注:

script标签一般定义在head或body中

Script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭使用

外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点

二、js语句和注释：

js语句以英文分号；结尾（不加也可以，不会报错）

单行注释：//

多行注释：/*注释*/

三、js变量的定义：

js中定义变量以关键字var开头

命名规范：

  • 不能以数字开头；

  • 可以以字母、下划线、$、#开头；

  • 驼峰命名

    浏览器控制台输出：

    console.log(变量名）

    数据类型：

    数字类型：number

    字符串类型：string

    布尔类型：boolean

    空值null是一个object

    未定义undefined

<script type="text/javascript">

//			数字类型number

			var num = 10;

//			alert(num);

//			console.log(num);

//			alert(typeof(num));

//			字符串类型string

			var str = 'hello world';

//			alert(str);

//			alert(typeof(str));

//			布尔类型boolean

			var bool = true;

//			alert(typeof(bool))

			var a = null;

//			alert(typeof(a))

			var b = undefined;

//			alert(typeof(b))

			var n = 10,m = 20;

			alert(n)

			console.log(m)

			console.log(n)

</script>

四、复合数据类型：

key：value形式

var result = {

	name:'张三'；

	age:18;

	a:false;

	}

alert(result);

console.log(result);

五、获取元素：

获取元素对象需要使用到标签对象：document

window.onload它是在文档加载完成后才执行里面的代码

<script type="text/javascript">

			window.onload=function  () {

				var div_obj = document.getElementById('one');

				console.log(div_obj);

			}

		</script>

六、读写元素数据：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>读写元素数据</title>

		<style type="text/css">

			.box{

				height: 200px;

				width: 200px;

				background-color:red ;

			}

			.box2{

				height: 100px;

				width: 100px;

				background-color:deeppink ;

			}

		</style>

		<script type="text/javascript">

			window.onload=function () {

				//获取标签对象

				var oDiv = document.getElementById("one");

				//对象读取id

				var odiv_id = oDiv.id;

//				alert(odiv_id);

				//读取类名

				var odiv_clsName = oDiv.className;

//				alert(odiv_clsName);

				//读取标签颜色      加上 style

				var odiv_color = oDiv.style.color;

//				alert(odiv_color);

				//读取字体大小

				var odiv_size = oDiv.style.fontSize;

//				alert(odiv_size);

				//写入数据

//				oDiv.style.color="green";

				//更改类名

//				oDiv.className="app";

//				var odiv_clsName = oDiv.className;

//				alert(odiv_clsName);

				oDiv.className="box2";

			}

		</script>

	</head>

	<body>

		<div id="one" class="box">读写元素数据</div>

	</body>

</html>

七、修改标签包裹的内容：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>修改标签包裹的内容</title>

		<script type="text/javascript">

			window.onload=function  () {

				//1.获取标签对象

				var a_obj = document.getElementById("one");

				//读取标签的内容 innerHTML

				var sContent = a_obj.innerHTML;

//				alert(sContent);

				//修改标签内容

				a_obj.innerHTML="我是修改后的内容";

			}

		</script>

	</head>

	<body>

		<a id="one" href="#">百度链接</a>

八、函数定义：

关键字：function 函数名

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>函数定义</title>

		<script type="text/javascript">

			window.onload=function  () {

				// 定义 函数    关键字 function 函数名

				//定义无参数函数

//				function fun_Name () {

//

//					alert("定义函数");

//

//				}

//

//				//调用函数   函数名();

//				fun_Name();

				//定义有参数函数

//				function fun_Alert(a,b) {

//

//					alert(a);

//					alert(b);

//

//				}

//

//				fun_Alert(10,"helloworld");

				//定义有返回值的函数

				function ret_function (a,b) {

					result = a+b;

					return result;

				}

				num_ret = ret_function(10,20);

				alert(num_ret);

			}

		</script>

	</head>

	<body>

	</body>

</html>

九、匿名函数：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>匿名函数</title>

		<style type="text/css">

			.box{

				height: 200px;

				width: 200px;

				background-color: red;

				border-radius:50% ;

			}

		</style>

		<script type="text/javascript">

			window.onload=function  () {

				//匿名函数  没有函数名

				var btn = document.getElementById("btn");

				//定义一个点击事件

//				function fun_Btn () {

//

//					alert("定义匿名函数");

//				}

				//给button 添加点击事件

//				btn.onclick = fun_Btn;

				btn.onclick=function  () {

					alert("定义匿名函数");

				}

			}

		</script>

	</head>

	<body>

		<button id="btn">点击一下</button>

		<div class="box" id="">

		</div>

	</body>

</html>

十、js条件分支：

if（表达式）{

代码块1；

}else if（表达式）{

代码块2；

}

...

else{

代码块n;

}

&&与比较

|| 或比较

JavaScript（js）概述的更多相关文章

  1. javascript组成概述认识

    这里的JavaScript组成概述是说的在浏览器端渲染的JavaScript而不是nodejs js组成概述 js的完整实现是由ECMAscript.DOM.BOM三个部分组成的: -ECMAscri ...

  2. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. Unit05： JavaScript对象概述 、 常用内置对象一 、 常用内置对象二 、 常用内置对象三

    Unit05: JavaScript对象概述 . 常用内置对象一 . 常用内置对象二 . 常用内置对象三 常用内置对象使用演示: <!DOCTYPE html> <html> ...

  4. js 概述 ( 一 )

    1 JS 概述 1 简称JS,是一种浏览器解释型语言,代码嵌套在HTML页面中,将由浏览器解释执行 作用:主要用来实现页面的动态效果,实现用户交互,实现网页中的网络请求 2 JS 组成 : 1 ECM ...

  5. Node.js 概述

    JavaScript 标准参考教程(alpha) 草稿二:Node.js Node.js 概述 GitHub TOP Node.js 概述 来自<JavaScript 标准参考教程(alpha) ...

  6. javascript(js)小数精度丢失的解决方案

    原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3* ...

  7. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

  8. paip.java 以及JavaScript (js) 的关系以及区别

    paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  9. 关于URL编码/javascript/js url 编码/url的三个js编码函数

    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent() 本文为您讲述关于js(javasc ...

  10. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. 为何有DAO与Service层？为何先搞Dao接口在搞DaoImpl实现？直接用不行吗？

    转自 http://blog.sina.com.cn/s/blog_4b1452dd0102wvox.html 我们都知道有了Hibernate后,单独对数据的POJO封装以及XML文件要耗损掉一个类 ...

  2. html页面设置自动刷新

    在中添加如下: <meta HTTP-EQUIV="REFRESH" CONTENT="1"> 其中CONTENT对应刷新的间隔时间,这里为1秒. ...

  3. json转字符串 —— jsonObj.toJSONString()与JSON.stringify(jsonObj)json to string

    json 转变成 string方法介绍: var people = { "programmers": [{ "firstName": "Brett&q ...

  4. localStorage 存储 数组

    let str = JSON.stringify(data.list); localStorage.setItem("options",str); let optionss=loc ...

  5. 使用Apache，压力测试redisson的一般高并发

    安装 Linux linux直接yum -y install httpd-tools,然后ab -V测试 Windows 1查看80端口有没有被占用,netstat -ano | findstr &q ...

  6. 如何衡量一个人的 JavaScript 水平？

    参考链接:https://blog.csdn.net/weixin_37615279/article/details/103658866

  7. 1、6 登陆 通过name 查到一个对象，如果没有。提示用户名不存在，再将查到的pwd 加传过来的pwd(需要加密)比较

    @RequestMapping("/login") public Object login(Student student) { Student s=studentService. ...

  8. 【C++札记】构造函数与析构函数

    构造函数(constructor) 1.构造函数是种特殊的类成员函数,遵循如下规则: a.函数名与类名必须相同. b.没有返回值 例如: class Obj { ... public: Obj() { ...

  9. yii2中通过migration创建数据表

    ### yii2中通过migration创建数据表 准备工作: 1.首先保证php写入了环境变量 2.在项目内创建migrations目录(base版的需要手动创建) 3.配置文件中正确配置了数据库信 ...

  10. 安全篇-AES/RSA加密机制

    在服务器与终端设备进行HTTP通讯时,常常会被网络抓包.反编译(Android APK反编译工具)等技术得到HTTP通讯接口地址和参数.为了确保信息的安全,我们采用AES+RSA组合的方式进行接口参数 ...