第一讲javascript入门（js的组成、事件类型、嵌入方式、注释方式、输出方式、变量类型 、变量命名规则、字符串转义符、算术运算符、数据类型转换、null和undefined的区别）
目录
理论：
JavaScript是什么
js的组成
二、JavaScript引入方式
1.嵌入式
2.外部引入
事件定义
三、JavaScript注释方式
1、单行注释
2、多行注释
四、JavaScript输出方式
1.alert 使用警告框显示数据
2、 document.write() 用于对页面（body）输出
3、console.log() 控制台输出 工作中调试常用
五、JavaScript变量
变量是什么？
1.基本数据类型：
2.字符串转义符
3.字符串长度的检测
2、变量的定义
3、JavaScript 标识符
4、变量命名规则
关键字
保留字
5、变量声明
6、初始化变量（变量赋值）
7、变量的值
七、算术运算符1.加+ 减- 乘* 除/ 取余% 赋值运算符=
六、null和undefined的区别：
理论：
JavaScript是什么
JavaScript是一种轻量级的脚本语言。
JavaScript是世界上最流行的脚本语言
javaScript是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
js的组成
ECMAScript（ES） : 负责翻译，为js的核心，解释器。
DOM (Document Object Model 文档对象模型)：赋予js操作HTML的能力，document。
BOM (Browser Object Modal 浏览器对象模型)：赋予js操作浏览器的能力，window，不兼容不建议使用。
二、JavaScript引入方式
JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中。JavaScript有以下三种引入方式
1.嵌入式
（1）嵌入在html的<script>标签中
<script type=“text/javascript”>alert(“哈喽”) ;
</script>2.外部引入
(1）单独的js文件，后缀名以.js结尾
<script src="myjavaScript.js"></script>事件定义
简单使用方式：嵌入在html标签的属性中或卸载script中。
<body><button onclick="alert(2012);">按钮</button>
<div ondblclick="alert('中国');">hello</div></body>
<script>a.onclick = function () {console.log(b);};
</script>onclick ,当鼠标点击一下时执行一次
onmouseover ,当鼠标放上去时执行一次
onmouseout ,当鼠标移出去时执行一次
onmousedown ,当鼠标按下时执行一次
onmouseup ,当鼠标在上面松开(弹起)时执行一次
ondblclick ,当鼠标双击时执行一次 onload ,当对象加载完成时执行一次
window.οnlοad=function(){}; 只要页面加载完毕，这个事件才会触发
window.οnunlοad=function(){}; 扩展事件--页面关闭后才触发的事件
window.οnbefοreunlοad=function(){}; 扩展事件--页面关闭之前才触发的事件
三、JavaScript注释方式
JavaScript 注释用于解释 JavaScript 代码，增强其可读性。 JavaScript 注释分为单行注释和多行注释两种方式。
1、单行注释
单行注释以 // 开头。
任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。
2、多行注释
多行注释以 /* 开头，以 */ 结尾。
任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。
四、JavaScript输出方式
JavaScript 能够以不同方式显示数据：
- 使用 alert(“内容”) 写入警告框
- 使用 document.write() 用于对页面（body）输出
- 使用 console.log() 控制台输出 工作中调试常用
- alert()函数会阻断JavaScript程序的执行，从而造成副作用；
console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑
1.alert 使用警告框显示数据
（1）警告框在浏览器中弹出窗口显示。
<script>alert("这是一个警告框")
</script>效果：
2、 document.write() 用于对页面（body）输出
<script>document.write(`\u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a<br>\u263a 欢迎学习javascript课程 <br>\u263a我是(我也不清楚几)班的xxx<br>\u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a`);</script>效果：
3、console.log() 控制台输出 工作中调试常用
（1）在浏览器中调用 console.log() 在控制台显示数据
<script>console.log("只有在控制台才能看到我");
</script>效果：
五、JavaScript变量
变量是什么？
变量是存放数据的容器，通过变量名获取数据，可以修改
1.基本数据类型：
简单数据类型 说明 默认值 Number 数字型，包含 整型值和浮点型值，如21、0.21 (运算结果为NAN表示为非数字） 0 Boolean 布尔值类型，只有true 、false两个值 ,加法运算时等价于1和0 false String 字符串类型，如 " 张三 " 注意在JS里面，字符串都带有引号 " " Undefined var a=null; 声明了变量a但是没有给值，此时a = underfined undefined Null var a=null; 声明了变量a, null表示为空值 null
2.字符串转义符
类似于HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是\开头的，常用的转义符及其说明如下:
转义符 解释说明 \n 换行符，n是newline的意思 \ 斜杠\ \ ’ 单引号 * 双引号 \t tab 缩进 \b 空格，B是blank的意思
3.字符串长度的检测
字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。
<script>//1.检测获取字符串的长度 lengthvar str = 'my name is andy';console.log(str.length); //显示 15</script>
2、变量的定义
变量即可变的量。在JavaScript中， 变量是存储数据值的容器。
从编程角度讲，变量是用于存储某种/某些数值的存储器。
对于变量的理解：变量是数据的代号。
3、JavaScript 标识符
所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。
4、变量命名规则
构造变量名称（唯一标识符）的通用规则是：
- 名称可包含字母、数字、下划线_和美元符号$
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
- 变量名区分大小写（y 和 Y 是不同的变量）
- 保留字 与 关键词 无法用作变量名称
- 不能用除( _ 或$ )以外的特殊符号
关键字
保留字
5、变量声明
语法: var 变量名;
举例：var a; 这就是定义了一个变量,变量名是a
var num1,num2; 可以一次声明多个变量 两个变量名间用，隔开
6、初始化变量（变量赋值）
在定义变量的时候，就给值。
Eg: var a=45;这就是初始化变量a 把45赋值给a
var a=10,b=20; 也可以同时初始化多个变量，每个变量之间用，隔开给变量赋值
比如你先定义了变量: var tt; 然后，再给值 tt=780;
这就是给变量赋值. Eg：var n; n=100;
7、变量的值
变量的值可以是数据类型的任何一种。
如：
- var a=“hello”; //变量的值是个字符串类型
- var b=10; //变量的值是个数字类型
- var c=false; //变量的值是个布尔类型
七、算术运算符
1.加+ 减- 乘* 除/ 取余% 赋值运算符=
+ 可以表示字符串的拼接
Eg：var s1="Hello,"; s1=s1+"World!";
alert(s1);
s1+=“!!!”;
s +=“!!!” 等价于 s=s+“!!!”;
注意： 加法运算同样适用 alert(s1);
加法运算符+ 减法运算符 – 乘法运算符* 除法运算符 / 取余 %
Eg：var a=4,b=2,c,d,e;
c=a-b; c是a与b的差
d=a*b; d是a与b的积
e=a/b; e是a与b的商
f=a%b; f是a与 b相除取的余数
六、null和undefined的区别：
undefined：在 JavaScript 中, undefined 是一个没有设置值的变量。不可转为数字0 ，与数字进行加法运算结果为NAN
null：在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。可转为数字0
区别：
null 与 undefind 的区别？
undefined原理上可以说是没有找到
null原理上意思为空对象
1.数据类型不一样,null的数据类型是object，undefined的数据类型是 undefined。
2.null和undefined 两者相等，但是当两者做全等比较时，两者又不等。（因为它们的数据类型不一样）
3.转化成数字的值不同
4.null代表"空"，代表空指针；undefined是定义了没有赋值
null和undefined的运用场景
undefined
1、变量被声明时，但没有赋值时，就等于undefined
2、调用函数时，应该提供的参数没有提供，该参数等于undefined
3、对象的属性没有被赋值，则该属性的值为undefined
4、函数没有返回值时，默认返回undefined
null
1、作为函数的参数，表示该函数的参数不是对象（不想传递参数）
2、作为对象原型链的终点
3、如果定义的变量准备在将来用于保存对象，此时可以将该变量初始化为null
第一讲javascript入门（js的组成、事件类型、嵌入方式、注释方式、输出方式、变量类型 、变量命名规则、字符串转义符、算术运算符、数据类型转换、null和undefined的区别）相关推荐
- Web前端第三季(JavaScript):三:第1章:JavaScript基本知识:107-js中变量的声明+108-js中变量的注意事项+109-js中变量的命名规则+110-赋值和算术运算符
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school ...
- 《第一阶段 Java基础 Day01笔记》————————第一讲 Java入门
第一讲 Java入门 1.爪哇岛(印尼) Java之父 ...
- LATEX教程第一讲—— LATEX入门
LATEX教程第一讲--LATEX入门 1.1 什么是LATEX? 1.2 怎么下载? 1.3 Latex初入门 1.3.1 基本框架 1. 一篇Latex的开始--\documentclass[** ...
- C# 编程入门第二课 注释变量，VS2019快捷键，String和string，命名规则，赋值运算符，+号作用占位符，转义字符算术运算符，类型转换
C# 编程入门第二课 文章目录 C# 编程入门第二课 1. 注释 2 变量 3.VS2019快捷键 4. String和string 5. 命名规则 6. 赋值运算符,+号作用 7. 占位符 8.转义 ...
- WebMatrix网站开发系列教程：第一讲 WebMatrix入门经典
第一讲:新手想要学习网站开发,让我们从WebMatrix开始吧! WebMatrix新手学习网站开发的首选!网站开发老鸟更新自身知识体系的最佳时机! WebMatrix简要介绍: 微软WebMatri ...
- 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- js中null和undefined的区别
在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理. 总所周知:null == un ...
- js中 NaN、 null 及 undefined 的区别（转载）
NaN:保留字(表明数据类型不是数字) undefined:对象属性或方法不存在,或声明了变量但从未赋值. 即当你使用了对象未定的属性或者未定义的方法时或当你声明一个变量,但你确从未对其进行赋值,便对 ...
最新文章
- 线程池---多线程学习笔记（三）
- 一个小清新搜索引擎试用感受 - 多吉搜索引擎(dogegoge)
- python flask Blueprint搭建
- 交叉熵损失函数分类_逻辑回归(Logistic Regression)二分类原理，交叉熵损失函数及python numpy实现...
- 为Autodesk Viewer添加自定义工具条
- SAP License：最近收到的信（审计人员关于成本问题的请教）
- 【Flask】ORM 关系一对一
- word更新域后图片错误_你还不知道Word中F1~F12键作用？
- MPEG-7实例入门
- Stack of js
- matlab实现带通滤波器的方法,数字信号处理课程设计---带通滤波器的设计及其MATLAB实现.doc...
- VMWare16下载安装Centos7镜像教程，详细记录
- android电容触摸屏的驱动及其上层工作原理,电容触摸屏驱动原理
- dosbox 中文操作系统_中兴新支点国产操作系统新版本了，越来越好用了
- HDU4121 UVa1589 Xiangqi 解题报告
- SAP 采购订单入库——收货业务分析
- 数字孪生的4个最佳实践
- 海外云服务器备份和恢复的6种最佳做法
- HTML与CSS的使用与总结
- 科研之路（2）：分析学习别人的科研历程