01JavaScript基础
JavaScript基础
JavaScript简介
JavaScript是一种基于对象和事件驱动的、并具有全性能的脚本语言
JavaScript特点：
- 向HTML页面中添加交互行为
- 脚本语言，语法和Java类似
- 解释性语言，边执行边解释
脚本（Script），是使用一种特定的描述性语言，依据一定的格式编写的可执行文件。
组成：
分别为核心(ECMAScript) 、文档对象模型(DOM)、浏览器对象模型(BOM)。这三部分分别描述了该语言的语法和基本对象、处理网页内容的方法和接口、与浏览器进行交互的方法和接口。
基本结构：
写在body标签后面
<script type="text/javascript"><!—JavaScript 语句;—>
</script>
< script>…</ script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可
JavaScript的执行原理：
浏览器输入—>发送请求包含JavaScript的请求页面---->到应用服务器（解析HTML标签*
和JavaScript）----->从服务器下载含JavaScript的页面---->返回浏览器响应
网页中引用JavaScript的方式
使用< Script >标签
外部JS文件
<script src="export.js" type="text/javascript"></script>直接在HTML标签中
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/> <a href= "javascript:;" onclick="xxxxxxx"></a> //先消除a标签自身的点击，添加js的点击事件
JavaScript核心语法
主要包含:变量、数据类型、数组、运算符号、控制语句、注释、输入/输出、语法约定等。
变量：
先声明变量在赋值。var—用于声明变量的关键字； width—变量名
var width; width = 5;同时声明和赋值变量，可以连续声明赋值s
var name = "xxx"; var x,y,z = 10;不声明直接赋值
width = 5;变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用
JavaScript区分大小写，特别是变量的命名、语句关键字等
数据类型：
undefined
var width; 变量width没有初始值，将被赋予值undefined
null： 表示一个空值，与undefined值相等
number
var iNum=23; //整数 var iNum=23.0; //浮点数boolean：true和false
string：一组被引号（单引号或双引号）括起来的文本
var string1 = "This is a string";
typeof运算符：
typeof检测变量的返回值
typeof运算符返回值如下
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null
String对象：
属性：
- 字符串.length
- 方法
- 字符串对象.方法名（）；
| 方法名称 | 说 明 |
|---|---|
| charAt(index) | 返回在指定位置的字符 |
| indexOf(str，index) | 查找某个指定的字符串在字符串中首次出现的位置 |
| substring(index1，index2) | 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符 |
| split(str) | 将字符串分割为字符串数组 |
数组：
创建数组
var 数组名称 = new Array(size);- Array：表示数组的关键字
- size：表示数组中可存放的元素总数，可以越界
为数组元素赋值：
var fruit= new Array("apple", "orange", " peach","banana");访问数组：数组名【下标】
var fruit = new Array(4); fruit [0] = " apple "; fruit [1] = " orange "; fruit [2] = " peach "; fruit [3] = " banana ";
数组常用的属性和方法：
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性： | length | 设置或返回数组中元素的数目 |
| 方法： | join( ) | 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔 |
| sort() | 对数组排序 | |
| push() | 向数组末尾添加一个或更多 元素，并返回新的长度 |
其他方法：http://www.w3school.com.cn/js/jsref_obj_array.asp
运算符号：
| 类型 | 运算符 |
|---|---|
| 算术运算符 | + - ***** / % ++ — |
| 赋值运算符 | = += -= |
| 比较运算符 | > < >= <= == != === !== |
| 逻辑运算符 | && || ! |
逻辑控制语句：
if条件语句
switch多分支语句
for、while循环语句
for–in
var fruit = ["apple", "orange", "peach","banana"]; for(var i in fruit){document.write(fruit[i]+"<br/>"); } //此处i不是接收的值，而是值的下标，值用fruit[i]
循环中断：
break
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){if(i==3){break;}document.write("这个数字是："+i+"<br/>"); } </script> //输出：0 1 2continue
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){if(i==3){continue;}document.write("这个数字是："+i+"<br/>"); } </script> //输出：0 1 2 4 5
##### 注释：- 单行注释以//开始，以行末结束
- 多行注释以 /\* 开始，以 \*/ 结束，符号 /\*…… \*/ 指示中间的语句是该程序中的注释##### 常用的输入/输出：- alert( )```jsalert("提示信息")
prompt( )
prompt("提示信息", "输入框的默认信息"); prompt("请输入你喜欢的颜色","红色"); prompt("请输入你喜欢的颜色","");弹出可以输入内容的弹窗
confirm( )
confirm("内容确认或者取消弹窗……");
语法约定：
1、大小写的区分
1). JavaScript的关键字，永远都是小写的；
2). 内置对象，如Math和Date是以大写字母开头的；
3). 对象的名称通常是小写；若是多个单词，驼峰（Camel）命名法。
驼峰（Camel）命名法：开头单词小写，后面单词首字母大写。使用的很普遍，很多人习惯这种命名方法。示例：userName。
2、变量、对象和函数的名称命名
当声明变量、对象和函数的名称时大小写，数字，下划线，美元符号都可以，但是必须以字母，下划线，美元符号开头。否者会出现Uncaught SyntaxError类型的错误提示。
3、分号 “;”
JavaScript允许开发者自行决定是否以分号结束一行代码。
如果没有分号，JavaScript就将行代码的结尾看作该语句的结尾，不会报错。但最好每写完一行代码就加上";" 作为结尾。
程序调试
1. Chrome开发人员工具
- 停止断点调试
- 单步调试，不进入函数体内部
- 单步调试，进入函数体内部
- 跳出当前函数
- 禁用所有的断点，不做任何调试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z73mGEAh-1661166260779)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1660726767700.png)]
2. alert( )方法
alert() 会阻塞 UI 和 alert() 以下的 javascript 代码的执行，必须点击 ‘确定’ 按钮才能继续，非常低效
函数
函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数
系统函数：
parseInt (“字符串”)
- 将字符串转换为整型数字
- 如: parseInt (“86”)将字符串“86“转换为整型值86
<script type="text/javascript">var num1 = prompt("提示","请输入第一个数");var num2 = prompt("提示","请输入第二个数");var sum = parseInt(num1) + parseInt(num2);document.write(sum); </script> //sum = 22parseFloat(“字符串”)
- 将字符串转换为浮点型数字
- 如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
isNaN()
- 用于检查其参数是否是非数字(是否不是数字。为true不是数字)
if(isNaN(num1))
自定义函数：
- 定义函数：
function 函数名(参数1,参数2,参数3,…){ //无参或者有参//JavaScript语句[return 返回值] //可有可无
}
调用函数：
函数调用一般和表单元素的事件一起使用，调用格式
事件名 = "函数名()"
调用无参函数：
<script>function study(){for(var i=0;i<5;i++){document.write("<h4>欢迎学习JavaScript</h4>");}}
</script>
<input name="btn" type="button" value="显示5次欢迎学习JavaScript" onclick="study()" />
单击此按钮时，调用函数study( )，执行函数体中的代码
调用有参函数：
<script>function study(count){for(var i=0;i<count;i++){document.write("<h4>欢迎学习JavaScript</h4>");}}
</script>
<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />单击此按钮时，调用函数study (count )，执行函数体中的代码
函数示例：
方法：
<script>//show();function show(){alter("张三");}show(); //在方法前，在方法后都能使用
</script><script>function show(name){ //参数定义不需要varalter("名字为"+name);}show(123); //类型，根据自己输入的识别
</script><script>function show(name,age){ alter("名字为"+name);}show("张三",18,11); //两个参数，三个值，不会报错，多的不输出
</script>
对象：
<script>function UserVo(){this,name = "张三";}var u = new UserVo();u.name = "李四"; //张三 被修改为李四alert(u.name); //李四
</script>
<script>function UserVo(){ this,name = "张三";this.show = function(msg){ //传参msgalert(this.name);//调name要this alert(msg);}}var u = new UserVo();u.name = "李四"; u.show("msg---传参"); //方法调用
</script>
构造方法：
<script>function UserVo(n){ this,name = n;this.show = function(){ alert(this.name); }}var u = new UserVo("张三"); //构造方法u.show();
</script>
变量的作用域：
**形参：**顾名思义，形式参数，仅仅是声明了参数的类型和参数名称，未实际分配和赋值。
**实参：**实际参数，是指函数调用时，实际赋值和分配内存空间。
- 全局变量
- 局部变量
<body onload="second( )">
var i = 20;
function first( ){var i = 5;for(var j = 0; j<i; j++){document.write(" "+j);}
}
function second( ){var t = prompt("输入一个数","")if(t > i)document.write(t);elsedocument.write(i);first( );
}
事件：
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onlick | 鼠标单击某个对象 |
| onmouseover | 鼠标指导移到某元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
onload的使用：
<script>function load(){var conent = document.getElementById("user");alert(conent);}
</script>//在此处，让div先加载，在加载方法。不加onload代码从上到下运行，获取不到user的值
<body onload="load()"> <div id="user">111</div>
</body>
onkeydown的使用：
<html onkeydown="down(event)"><head><meta charset="UTF-8"><title></title></head><body></body>
</html>
<script>//敲回车，登陆成功function down(e){//alert(e.keyCode); //获得键盘的编码if(e.keyCode==13){login(); //方法直接调用}}function login(){alert("登录成功！");}
</script>
eval()
eval("var a=1");//声明一个变量a并赋值1。//执行加运算，并返回运算值。
var num = eval("2+3");
document.write(num);eval("mytest()");//执行mytest()函数。
eval("{b:2}");//声明一个对象。如果想返回此对象，则需要在对象外面再嵌套一层小括如下：eval("({b:2})");
注：使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量
```
eval()
eval("var a=1");//声明一个变量a并赋值1。//执行加运算，并返回运算值。
var num = eval("2+3");
document.write(num);eval("mytest()");//执行mytest()函数。
eval("{b:2}");//声明一个对象。如果想返回此对象，则需要在对象外面再嵌套一层小括如下：eval("({b:2})");
注：使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量
01JavaScript基础相关推荐
- 01-JavaScript基础.md
学习目标: 掌握编程的基本思维 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔等看不穿 ...
- 01-JavaScript基础
第0章 课前说明 0.1 学习方法及态度 没有学不会的知识,只有不努力的傻子!!! 学习的过程很痛苦,不学习的日子是苦难!!! 0.2 学前准备 1:拒绝一阳指和二指禅: 2:打字练习,及格线: 10 ...
- 学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)
1.编程语言.ECMA.JavaScript.浏览器的发展史 1.1 编程语言 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计 ...
- javaScript第一天（1）
01-JavaScript基础 核心知识点 javaScript书写位置 javaScript变量 javaScript数据类型 javaScript数据类型转换 javaScript运算符 今日学习 ...
- 第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
- 基础IT技术（Java，c++等）技术学习资料300篇
基础IT技术内容适合技术初学者,可以详细了解基础软件开发工程师所具备"信息/编码"."IP/组网"."程序逻辑"和"Web基础&q ...
- 【笔记】web安全基础
web安全基础 前言: 自己总结的web安全基础知识,部分未写完,以后有时间会完善,希望能帮到需要的人. 渗透测试 一.概念 渗透测试(penetration testing|pentest)是实 ...
- 最全Python培训课程，基础班+高级就业班+课件(数据分析、深度学习、爬虫、人工智能等) 精品课程
最新版Python全套培训课程视频,绝对零基础到Python大牛.包括:零基础得python基础班, 高阶进阶就业篇完整版(含:数据分析.机器学习.网络爬虫.数据挖掘.深度学习.人工智能等)课程共10 ...
- java入门 慕路径,Java入门基础知识总结学习教程大全【必看经典】
类型的表达式,是循环条件,表达式3是党执行了一遍循环之后,修改控制循环的变量值. ??? for语句的执行过程是这样的:首先计算表达式1,完成必要的初始化工作:然后判断表达式2的值,如果表达式的值为t ...
最新文章
- Delphi存取图像完整解决方案
- MySQL数据库的账户管理
- 自定义用户控件,实在数据动态提示
- 大学计算机绘图配置,大学计算机绘图试题及答案（二）
- 【渝粤教育】电大中专新媒体营销实务 (3)作业 题库
- LeetCode MySQL 1194. 锦标赛优胜者
- 基于神念TGAM的脑波小车（1）
- php使用函数封装去除空格,去除php注释和去除空格函数分享_PHP教程
- 适合自己的才是最好的
- 如何将KUX格式转换为MP4格式
- uni-app实现android,ios打包过程详解
- 携程2019秋招面经
- border-color属性设置单边边框和综合四边边框颜色
- 荣耀手机与无线电脑连接服务器,华为手机怎么实现无线连接PC电脑传输文件和图片...
- DOS中goto eof的作用
- 干货 | 携程Dynamo风格存储的落地实践
- php秒杀负库存问题,店铺商品出现负库存原因分析，负库存商品处理规范
- Java系列课程第二十二天（网络编程、正则表达式）
- STM32 us精确延时方式
- 习题3-1至习题3-5