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 ...
随机推荐
- c++派生类中构造函数和析构函数执行顺序、判断对象类型、抽象类、虚函数
一. 代码: 1 #include<stdio.h> 2 #include<string.h> 3 #include<algorithm> 4 #include&l ...
- typedef struct xxx xxx与struct xxx区别 && “->”和“.”访问结构体变量
1. struct //是C中的结构体的关键词.如: stuct node{ int a;.....} a; node 相当于结构体的类型,关键是其实在C中stuct node 才相当于一个数据类型, ...
- java调用http接口的几种方式总结
本文参考: https://blog.csdn.net/fightingXia/article/details/71775516 https://www.cnblogs.com/jeffen/p/69 ...
- VUE 3.0 初体验之路
在2020年9月中旬,vue.js发布了3.0正式版,在不久的将来,VUE3.0 也终将成为大前端的必然趋势, 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -v ...
- 【原创】kubernetes之CNI理解
一.什么是CNI? CNI-容器网络接口,CNI(容器网络接口)是Cloud Native Computing Foundation项目,由一个规范和库(用于编写用于在Linux容器中配置网络接口的插 ...
- 解决宝塔面板没有命令行问题 && 查看宝塔面板项目环境
# 宝塔面板没有命令行,无法查看错误输出 利用ssh.比如xshell,MObaxtern .输入ip,username,password就可以进入服务器的命令行. # 查看项目的环境 服务器默认的p ...
- haut-1280 诡异的迷宫
1280: 诡异的迷宫 时间限制: 2 秒 内存限制: 128 MB提交: 174 解决: 27提交 状态 题目描述 Simple最近刷题(打游戏)刷多了,一觉醒来发现自己到了一个迷宫里,怎么也出 ...
- 解决: "E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) ..."
解决: "E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?& ...
- PWA & Service Workers 版本更新 bug
PWA & Service Workers 版本更新 bug PWA & Service Worker https://developer.mozilla.org/zh-CN/docs ...
- Python 2 to Python 3 convert
Python 2 to Python 3 convert 2to3, 自动将 Python 2 代码转为 Python 3 代码 https://docs.python.org/zh-cn/2/lib ...