小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一、认识JS
1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容
二、JS基础语法
1.代码书写位置 2.变量 3.注释 4.数据类型 5.基础输入输出 6.扩展内容:关键字、保留字和标识符
一、认识JS
1.JavaScript的组成
组成部分 | 说明 |
---|---|
ECMAScript:JavaScript语法 | 是javascript的核心,也是学习重点。 |
BOM:浏览器对象模型 | 一套提供给程序员操作浏览器功能的API,比如alert()。通过BOM可以操作浏览器窗口,如:弹出框、控制浏览器跳转、获取分辨率等 |
DOM:文档对象模型 | 通过DOM提供的API可以对页面上的各种元素进行操作(大小、位置、颜色等) |
2.浏览器执行js简介
(1)浏览器内核组成
分成渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎。
内核组成 | 作用 |
---|---|
渲染引擎 | 用来解析HTML与CSS,俗称内核。比如chrome浏览器的blink |
JS引擎 | js解释器用来读取网页中的js代码,对其处理后运行。比较经典的就是chrome浏览器的V8。 |
(2)五大浏览器四大内核
浏览器 | 内核 |
---|---|
IE浏览器 | Trident内核 |
Chrome浏览器 | 以前是Webkit内核,现在是Blink内核 |
Firefox浏览器 | Gecko内核 |
Safari浏览器 | Webkit内核 |
Opera浏览器 | 最初是自己的Presto内核,后来是Webkit内核 |
3.JavaScript是什么?
(1)概念
- 一种运行在客户端的脚本语言,现在也可以基于Node.js技术进行服务器端编程。
- 脚本语言:不需要编译,由js解释器(js引擎)逐行进行解释并执行。
- 世界上最流行的语言。(很多语言都自称最流行)
(2)JS的功能
- 页面各类动态广告,各类动画效果。
- 表单效验(密码强度检测,也是最初目的)。
- 在线游戏(水果忍者、三国志、偷菜)。
(3)HTML/CSS/JS的关系
- HTML/CSS是标记语言——描述类语言。
- CSS决定网页的妆容。
- javascript是脚本语言——编程类语言。
4.扩展内容
(1)JS的历史
JS之父:布兰登·艾奇(Brendan Eich,1961年~) (小猪佩奇)
Netscape网景公司在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。
(2)解释型语言和编译型语言
编译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译时间点的不同。
编译器是在代码执行之前进行编译,生成中间代码文件。
解释器是在运行时进行及时解释,并立即执行。
当编译器以解释方式运行的时候,也称之为解释器。
二、JS基础语法
1.代码书写位置
(1)行内式
<a href="#" onclick="alert('hello world')">点击我</a>
缺点:可读性差,引号易出错。
(2)内部式
<script type="text/javascript"> alert("hello world...");
</script>
内部式标签里的type可以省略,因为script标签的type默认就是text/javascript。
(3)外部式
<script src="js/hello.js" type="text/javascript"></script>
注意:外部js文件的标签中不写代码是规范的写法,就算写了不会生效。
2.变量
(1)什么是变量
- 通俗:变量就是一个装东西的盒子。
- 概念:变量是用于存放数据的容器,我们通过变量名 获取数据,甚至数据可以修改。
- 本质:变量是程序在内存中申请的一块用来存放数据的空间。
(2)变量的使用
声明:var age;
赋值:age = 10;
我们一般连写为:
var age = 10;
(3)变量命名规则和规范
规则:
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成。
- 区分大小写。
- 不能 以数字开头。
- 不能 是关键字、保留字 和 代码符号。
规范:
- 变量名必须有意义。
- 遵守小驼峰命名法。首字母小写,后面单词的首字母需要大写。(如:usrName)
3.注释
- 单行注释:
//
- 多行注释:
/* */
4.数据类型
(1)五大基本数据类型
①.number
1)整数:int
2)小数:float
3)数值范围:
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
最小值:Number.MIN_VALUE,这个值为:5e-324
4)isNaN(x) 方法:x是一个数值则返回false,x非数值则返回true
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2;
结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100);
结果不是 7, 而是:7.000000000000001
所以:不要直接判断两个浮点数是否相等 !
②.boolean
boolean布尔类型只有true/false两种值。
③.string
1)字符串嵌套:
JS 可以 用 单引号 嵌套 双引号 ,或者 用 双引号 嵌套 单引号 (外双内单,外单内双)。
2)字符串转义符
符号 | 转义符 |
---|---|
\n | 换行符 |
\\ | 斜杠 |
’ | 单引号 |
" | 双引号 |
\t | tab |
\b | 空格 |
\r | 回车符 |
3)字符串长度:str.length
4)字符串拼接:数值相加,字符相连。
④.undefined
未定义类型,一个声明后没有被赋值的变量会有个默认值 undefined。
⑤.null
空
(2)检测变量的数据类型
.typeof()方法可以返回变量的数据类型吗,例如:
例子 | 结果 |
---|---|
typeof(“小白”) | string |
typeof(0306) | number |
typeof(true) | boolean |
typeof(undefined) | undefined |
typeof(null) | object(js的一个bug) |
(3)数据类型的转换
①.转换为字符串
- toString 把变量转成字符串
- String() 把特殊值转成字符串
- 加号拼接字符串,任何基本类型和字符串拼接的结果都是字符串
②.转换为数值
- parseInt(string)函数——转成整数
- parseFloat(string)函数——转成浮点数
- Number()强制转换函数
- js隐式转换——利用算术运算隐式转换
③.转换为Boolean值
- Boolean——将布尔字符串转成布尔值
代表空、否定的值会被转换为false有五种:“”、0、NaN、null、undefined。
其余任何值都会被转换为true。
(4)引用数据类型
Object 、Array 、Function 、Data等,以及自定义类型,为js的引用数据类型。
创建方式:
- 字面量方式:
var person = {name:'zhangsan'};
- 构造方法:
var obj1= new Object();
5.基础输入输出
代码 | 说明 |
---|---|
alert(msg) | 在浏览器页面弹出一个只有确定项的小窗口 |
prompt(msg) | 在浏览器页面弹出一个可输入值的小窗口,(用户输入的 任何内容 都是一个 字符串) |
console.log(msg) | 在控制台输出信息 |
6.扩展内容:关键字、保留字和标识符
关键字:指JS本身已经使用了的名字。
break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等
保留字:实际上就是预留的“关键字”,意思是现在虽然现在还不是关键字,但是未来可能会成为关键字的。
boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等
表示符:指开发人员为变量、属性、函数、参数取的名字。
标识符不能是 关键字 或 保留字 。
小汤学编程之JavaScript学习day01——认识JS、JS基础语法相关推荐
- 小汤学编程之JavaScript学习day05——DOM、事件
一.DOM 1.DOM树状结构图 2.节点类型 3.document节点 4.element节点 5.CSS 二.事件链 1.JS的继承结构图 2.常用事件句柄 ...
- 小汤学编程之JavaScript学习day04——自定义对象、原型与原型链、BOM
一.自定义对象 1.对象的定义 2.对象的使用 二.原型与原型链 1.JS的继承结构图 2.关键点 三.BOM 1.window对象 2.document对象 3.lo ...
- 小汤学编程之JavaEE学习day01——HTTP简介、B/S与C/S应用、连接的建立与断开、Tomcat
一.HTTP简介 1.HTTP请求报文 2.HTTP响应报文 二.B/S与C/S应用 三.连接的建立与断开 1.连接的建立(三次握手) 2.断开连接(四次挥手) 四.连接的建立与断开 ...
- 小汤学编程之JavaScript学习day02——运算符、流程控制与循环、函数
一.运算符 1.算术运算符 2.一元运算符 3.关系运算符 4.逻辑运算符 5.赋值运算符 6.运算符的优先级 二.流程控制与循环 1.顺序结构 2.分 ...
- 小汤学编程之jQuery学习day01——简介、入门、选择器
一.简介 1.下载 2.导入 二.入门 1.jQuery对象 2.jQuery对象与js对象相互转换 3.页面载入 三.选择器 1.基本选择器 2.层级选择器 ...
- 小汤学编程之JavaScript学习day03——对象、Array数组、String字符、Date日期、JSON
一.JS中的对象 二.Array数组 1.特点 2.数组的定义 3.常用方法 4.数组的遍历 三.String字符 1.定义 2.常用方法 四.Date日期 1.定义 ...
- 小汤学编程之JavaEE学习day06——LayUI
一.LayUI简介 1.下载 2.入门案例 二.栅格布局 三.图标 四.按钮 1.按钮类型 2.主题 3.尺寸 4.圆角 5.按钮组 五.后台布局 六.表格数据 ...
- 小汤学编程之jQuery学习day03——事件、效果、插件
一.事件 1.绑定事件 2.解绑事件 二.效果 1.基本效果 2.淡入淡出 3.自定义效果 三.插件 1.下载地址 2.语法 3.常用的校验 4.案例 ...
- 小汤学编程之JavaEE学习day08——Maven
一.Maven介绍 1.什么是Maven 2.Maven的功能 3.什么是构建 4.项目的构建方式 二.Maven的安装 1.下载 2.安装 3.配置 ...
最新文章
- pythonsvm图像分类_python图像处理之sift-kmeans-SVM图像分类
- 用Python机器学习搞定验证码
- WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
- python time模块
- 中国连计算机硬盘都无法生产吗,中国仍无能力制造出电脑中的硬盘
- Flink java wordcount案例(批处理、流处理)
- 架构中的技术性解决难题之解决篇
- windows10系统电脑点击睡眠没反应怎么办?
- 《Java 开发从入门到精通》—— 2.4 Java的运行机制
- 自学-Linux-老男孩Linux77期-day6
- win7安装注意事项及一些美化设置
- word2vec模型原理及实现词向量训练案例
- 【语篇标记练习题】Dismissing what was said
- 在chrome浏览器上下载txt小说的Javascript代码
- [BJWC2008]王之财宝
- DNS测试 nslookup
- matlab混沌映射,混沌映射MATLAB仿真.docx
- Unity经典案例再现《太空大战》
- AndroidStudio报错Transform output file D:\android\RfidDemo\app\libs\RFID_lib.jar does not exist.
- Mac版 微信 撤回消息拦截两种方法
热门文章
- 提升速度与精度,FedReg: 减轻灾难性遗忘加速联邦收敛(ICLR 2022)
- 【深度好文】ICLR 2022 | cosFormer:重新思考注意力机制中的Softmax
- ICLR 2021 | 腾讯 AI Lab 入选论文解读
- GAN 优化 Yelp 形象图片广告
- 今日新出!旷视提出One-Shot模型搜索框架的新变体
- 英特尔杀入游戏显卡市场:支持光追和AI超分辨率,挑战AMD英伟达
- 《Python编程从入门到实践》记录之类编码风格
- enum java 比较_Kotlin与Java比较:枚举类
- 大数据分析实战-信用卡欺诈检测
- 数据结构(十三)树的遍历