JavaScript初级学习
1. JavaScript的介绍
- 前身是LiveScript+JavaScript
- JavaScript(js)是一个脚本语言
- 基于浏览器的脚本语言
- 基于对象,面向对象的一个编程语言
2. EcmaScript
Ecmascript就是把LiveScript和JavaScript做了合并的一种规范;
我们现在使用的都是EcmaScript5的版本
3. JavaScript的特点
- 简单、易学、易用 、跨平台；
- IE、Navigator 符合ECMA（欧洲计算机制造协会）标准，可移植；
- 事件驱动式的脚本程序设计思想；
- 动态、交互式的操作方式。
4. JavaScript的用途
- 交互式操作；
- 表单验证；
- 网页特效；
- Web游戏
- 服务器脚本开发等
5. JavaScript的编写工具
vscode
webstorm
....
6. JavaScript的执行平台
浏览器来执行js脚本
7. JavaScript与Java的区别
- 雷锋 雷峰塔
- java是面向对象的编程语言,而js是面向对象和基于对象的语言
- java是编译型语言,js是解释型语言
- java是强类型,js是弱类型语言
8. JavaScript的引入方式
8.1 网页内部编写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的编写</title>
<!--在网页内部编写js代码-->
<script type="text/javascript">
alert("hello")
</script>
</head>
<body>
</body>
</html>
方便编写,不能达到复用效果
后期的维护变得复杂了
所以生产环境不建议这么来玩
8.2 js的外部引入
<script src="base.js"></script>
- 引入外部的js
一定要是script双标签 - 在script双标签中绝对不能写js代码
- script不能互相嵌套
9. javascript的语法格式
- JavaScript区分大小写
- JavaScript脚本程序须嵌入在HTML文件中；
- JavaScript脚本程序中不能包含HTML标记代码
- 每行写一条脚本语句,如果一行一条语句则可以省略末尾的分号,如果一行写了两条语句,则需要添加分号;
10. js的核心
javascript = ecmascript(js的基础语法)+dom(文档对象模型)+bom(浏览器对象模型)
11. JavaScript中的数据类型
- 数值(Number)
- 布尔(Boolean)
- 字符串值(String)
- 空值(Null)
- 未定义(undefined)
12. js中的变量
12.1 什么是变量
变量就是用来在内存中存储数据的;
12.2 如何定义变量
var 变量名称 = 值;
13. js中的标识符
标识符就是给变量 方法 函数 类 对象命名的;
- 数字 字母 下划线 $组成
- 不能以数字开头
- 标识符一定要做到
见名知意
14. 常用的命名法(保命指南)
| 命名法 | 示例 | 常用的地方 |
|---|---|---|
| 帕斯卡命名方法(大驼峰命名法) | UserName | 类 |
| 骆驼命名法(小驼峰命名法) | userName | 对象,变量,方法,函数 |
| 前缀命名法 | mUserName | 对象,变量,方法,函数 |
| 程序猿命名法(下划线命名法) | user_name | 对象,变量,方法,函数 |
- 在同一个项目中,尽量选择其中的两种使用
- 一般建议选择
大驼峰命名法+小驼峰命名法 = 驼峰命名法
15. js中的运算符
数学运算符
+ - * / %
关系运算符
> < >= <= == === !=
逻辑运算符
&&:两个表达式都为true时结果才是true
||:只要有一个为true则结果就为true
!: 取反
位运算符(了解)
& | ! ^ >> >>>
赋值运算符
= += -= *= /= %=
三元运算符(三目运算符)
布尔表达式?"表达式1":"表达式2"; 判断布尔表达式是否成,如果成立,则返回表达式1,否则返回表达式2
自增(++) 自减(--)运算符
++
--
运算符的优先级
()>!>数学运算符>关系运算符>逻辑运算符>赋值运算符
ps: 当我们无法确定运算符的优先级的时候,我们使用()来控制优先级;
16. 什么是表达式
- 表达式就是由数字、运算符、括号组成的;
- 表达式是能求得具体的结果的;
10: 是表达式,是数值表达式
"hello": 是表达式,是字符串表达式
a+b:是表达式 值表达式
a+b>30: 是表达式 值表达式 布尔值表达式 布尔表达式
var a=10(不是表达式); a=20(是赋值表达式);
var a = 20;不是表达式,(变量的定义不是表达式)
var c = a + b;不是表达式,(变量的定义不是表达式)
17. js中的流程控制
17.1 判断
if...
if(布尔表达式){
代码块
}
so:判断布尔表达式是否成立,如果成立则执行代码块
if...else...
if(布尔表达式){
代码块1
}else{
代码块2
}
so:判断布尔表达式是否成立,如果成立则执行代码快1,否则执行代码快2
if...else if...else
if(布尔表达式1){
代码块1
}else if(布尔表达式2){
代码块2
}else{
代码块3
}
so: 上面的代码块只会执行一个;
17.2 循环
while循环
while(布尔表达式){
代码块
}
do...while循环
do{
代码块
}while(布尔表达式);
so: 代码块至少执行一次
for循环
for(变量的定义;循环条件;改变循环条件的表达式){}
break: 中断循环,继续执行后续语句
continue: 结束本次循环,继续下一次循环,ps: continue要慎用,就是要控制好改变布尔表达式值的条件;
17.3 分支
switch(值){
case 值1:
代码块1
break;
case 值2:
代码块2
break;
case 值3:
代码块3
break;
default:
代码块4
break;
}
18. js中的函数
函数: 对功能的封装
函数的要素: 函数名称 形参列表 函数体 返回值
函数的定义:
function 函数名称(形参列表){
函数体
}
函数的调用:
函数名称(实参)
19. js中的变量的作用域
- 全局变量: 在全局定义的变量称为全局变量,可以在任意的地方使用
- 局部变量: 在代码块中定义的变量,只能在其定义的作用域使用
<script>
var a = 10; /*全局变量*/
console.log("-----", a);
function func1() {
var name = "admin";
}
func1();
console.log("+++++",name); /*局部变量全局不能使用*/
</script>
<script>
console.log(a); /*使用上面script中定义的全局变量*/
</script>
20. js中的数组
数组: 可以存储多个数据的一个集合;
20.1 数组的创建
var ages = new Array(10, 20, 30, 40); /*定义数组时直接初始化*/
console.log(ages);
var ages1 = new Array(3); /*传递一个参数代表的是数组的长度*/
console.log(ages1);
var ages2 = []; /*数组的定义,定义一个空数组,建议使用这种方式*/
console.log(ages2);
20.2 修改数组中的元素
var ages = [];
ages[2] = 20;
ages[2] = 10; /*使用下标修改数组元素*/
JavaScript初级学习的更多相关文章
- Javascript初级学习总结
首先,在Html页面输出,使用document.write('内容'); <html> <head> <title></title> <scrip ...
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- webpack 4.x 初级学习记录
首先声明下,本人不擅长文字表达,文采不行,所以文章中文字较少,请看代码,初级学习,不足之处请多多指教 GitHub链接 看云kancloud [TOC] webpack 4.x 安装 首先需要在全局中 ...
- 正则表达式（javascript）学习总结
正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
- JavaScript正则表达式学习笔记(二) - 打怪升级
本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...
- 初步总结javascript中学习DOM之前的知识
嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...
- JavaScript紧凑学习
JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...
随机推荐
- AtCoder Beginner Contest 173 D - Chat in a Circle (贪心)
题意:有一个空环和\(n\)个点,每次可以选择一个点放在空环上,并且获得周围两个点中最小的那个的权值,问能获得的最大的权值是多少? 题解:我们每次都优先放最大的进去,注意每次放的时候都要将这个点放在当 ...
- BIM技术基础-Revit2019建筑
第三章 三维信息建模(中) 3.5 拉伸屋顶的创建 拉伸屋顶→ 在立面中创建,屋顶的形状在垂直截面上一致的 利用参照平面或者已有的墙面或者已有的轴线 3.5.1利用拾取平面创建 画一个参照平面作为屋檐 ...
- value-key
value-key object 如果 Select 的绑定值为对象类型,请务必指定 value-key 作为它的唯一性标识. value-key 作为 value 唯一标识的键名,绑定值为对象类型时 ...
- npm publish & 403 Forbidden
npm publish & 403 Forbidden 403 Forbidden - PUT https://registry.npmjs.org/ https://www.npmjs.co ...
- PDF transform to PPT online & free
PDF transform to PPT online & free > Speaker Deck Share Presentationswithout the Mess Speaker ...
- HTTPS Proxy all in one
HTTPS Proxy all in one HTTP Proxy Charles Proxy https://www.charlesproxy.com/ Proxy SwitchyOmega 轻松快 ...
- react & redux data flow diagram
react & redux data flow diagram Redux 数据流程图
- H5 页面与小程序之间 传递数据
H5 页面与小程序之间 传递数据 小程序里面的 H5页面与小程序之间怎么传递数据 webview与小程序之间的实时通信 webview主动发消息给小程序 webview可以利用jssdk提供的 wx. ...
- how to recursively all files in a folder with sudo permissions in macOS
how to recursively all files in a folder with sudo permissions in macOS write bug OK sudo chmod 777 ...
- HTML Imports & deprecated
HTML Imports & deprecated https://caniuse.com/#search=html imports https://www.chromestatus.com/ ...