入门必看--JavaScript基础
JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题。
一.JavaScript
1.什么是JavaScript
JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言。
2.JavaScript的特点
JavaScript主要用来向HTML页面添加交互行为。
JavaScript是一种脚本语言,语法和Java类似。
javaScript一般用来编写客户端的脚本。
JavaScript是一种解释性语言。
3.JavaScript的组成
ECMScript标准(规定所有属性,方法和对象的标准)
BOM浏览器对象模型(Browser Object Model):与HTML交互
DOM文档对象模型(Document Object Model):访问和操纵HTML文档
4.JavaScript基本结构
- <script language=”javascript” type=”text/javascript”>
- </script>
- Language=”javascript”用来表示使用的语言是javascript
5.JavaScript执行原理
1. 浏览器客户端向服务器端发送请求。(用户在浏览器地址栏中输入的地址)
2.数据处理:服务器端将某个包含javaScript的页面进行处理。
3.发送响应:服务器端将含有javascript的HTML文件进行处理页面发送到浏览器客户端,然后由浏览器客户端从上直下逐条解析HTML标签和JavaScript标签,将页面效果呈给用户。
二.在网页中引入JavaScript的方式
1.使用<script>标签。
2.使用外部JavaScript文件。
希望多个页面中运行JavaScript实现相同效果,通常使用外部文件为.js的文件。
如何引用.js为扩展名的文件:
<script src=”../1.js”></script>
注意:外部文件不能包含<script></script>
3.直接在HTML标签中
- <input name=’btn’ type=”button” value=”弹出消息框” onclick=”javascript:alert(“欢迎你”);”/>
三.JavaScript核心语法
1.变量的声明和赋值
变量的声明只有用var,变量的命名规范和Java类似。Var num=1;
在JavaScript中变量可以不用声明就可以直接使用,但是不推荐这种用法。
2.数据类型
Undefined(未定义类型)
Null(空类型)
Number(数字类型)
String(字符串类型)
Boolean(布尔类型)
3.undefined和null的区别
null 表示"没有对象",即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。
Object.getPrototypeOf (Object.prototype)// null
undefined 表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于 undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于 undefined。
(3)对象没有赋值的属性,该属性的值为 undefined。
(4)函数没有返回值时,默认返回 undefined。
4.只有6种情况,判定结果为假。
null,false,undefined,0,"",NaN
5.字符串的一些常用方法
toString();返回字符串
toLowerCasee();把字符串装换为小写。
toUpperCase();把字符串转换成大写
charAt(index);返回在指定位置的字符串
indexOf(str,index);查找某个指定的字符串在字符串中首次出现的位置
Substring(index,index);返回位于指定索引index1和index2之间的字符串(包括index1不包括index2)
Split(str);将字符串分割为字符数组
6.创建数组并为数组赋值的三种方式
01. Var num=(‘1’,’2’);
02.var num=new Array(2);
Num[0]=1;
Num[1]=2;
03.var num=[‘1’,’2’];
数组的常用方法和属性
Length:设置或返回数组中元素的数目
Join():把数组的所有语速放入一个字符串,通过分割符进行分割。
Sort():对数组进行排序
Push():向数组末尾添加一个或更多元素,并放回新的长度。
- <script type="text/javascript">
- //01.方式一:创建数组,并给数组赋值
- // var fruit = new Array('apple', 'orange', 'peach', 'bananer');
- //02.方式二:先创建数组,后通过下标给数组赋值
- var fruits = new Array(4);
- fruits[0] = 'apple';
- fruits[1] = 'orange';
- fruits[2] = 'peach';
- fruits[3] = 'bananer';
- //03方式三:和方式一类似只不过改变了符号
- //var fruitss = new Array['apple', 'orange', 'peach', 'bananer'];
- //04.访问数组中下标为3的数据
- document.write(fruits[3]);
- //05通过数组的join方法把元素放到字符串中并用指定分隔符进行分割
- var result = fruits.join(',');
- //06通过sort方法对数组进行排序
- fruits.sort();
- //06.向末尾添加一个或多个元素,最后返回该数组的新长度
- var length= fruits.push('wert','foot');
- document.write('\n' + length);
- //07.遍历数组
- for(var item in fruits)
- {
- alert(fruits[item]);
- }
- </script>
7.运算符
8程序调试
方案一:在VS中调试
步骤:01.将要调试的页面设置成起始页
02.设置断点
03.按F5启动调试
方案二:chrome浏览器调试
步骤:01.点击F12,将工具调出
02.设置断点
03.刷新页面
方案三:IE浏览器
步骤:01.F12,开发人员工具
02.切到脚本选项卡
03.设置断点
04.启动调试
05.刷新
四.JavaScript中的函数
1.常用的系统函数
01. parseInt(“字符串”);
parseInt()函数首先查看位置为0处的字符,判断他是否为一个有效数字,如果不是则返回NaN,不在执行其他操作,但如果该字符是有效参数,则该函数将查看位置为1处的字符,进行同样的测试,这一过程将持续到发现该字符是有效字符为止,此时该字符将之前的字符串转换成数字。
eg:
var num1=parseInt(“78.9”)//返回值为78
var num2=parseInt(“afa78.9”)//返回值为NaN
02.parseFloat(“字符串”);
他的用法和parseInt类似,只不过字符串中出现的第一个点将被认为是有效字符.
eg:
var num1=parseFloat(“78.9”)//返回值为78
var num2=parseFloat(“afa78.9”)//返回值为NaN
2.自定义函数
在JavaScript中,自定义函数是由function,函数名,一组以参数以及置于括号中待执行的JavaScript语句组成。
下面来看一看语法:
function 函数名(参数1,参数2,..)
{
//JavaScript语句
[return 返回值]
}
function是定义函数的关键字,必须有。
参数1,和参数2是该函数的参数,因为JavaScritp他本省的类型是弱类型,所有在给定参数时没有必要提供类型
{}定义的函数的开始和结尾.
return 语句用来规定函数返回的值.
2.调用函数
要执行一个函数,首先肯定要调用这个函数,必须制定函数名和其后的参数。
eg:
- <script type=”text/javascript”>
- function show(){
- }
- show();
- </script>
3.匿名函数
1.匿名函数的理解
匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许临时创建一个没有指定名称的函数。最经常用作回调函数(callback)参数的值。
function 函数名(参数列表){函数体;}
如果是创建匿名函数,那就应该是:
function(){函数体;}
因为是匿名函数,所以一般也不会有参数传给他。
2.为什么要用匿名函数
为什么要创建匿名函数呢?在什么情况下会使用到匿名函数。匿名函数主要有两种常用的场景,一是回调函数,二是直接执行函数。
eg:
- <script language="javascript">
- var a = "a";
- (function(){
- var a="b";
- alert(a);
- })();
- alert(a);
- </script>
在上面这段代码中,会顺序输出两个alert框。第一个alert框内容为b,第二个为a。以为该Script标签中有一个匿名方法时自调用的,所有首先弹出b,然后碰到匿名方法后的alert(a)则弹出a。
入门必看--JavaScript基础的更多相关文章
- Java编程学习知识点分享 入门必看
Java编程学习知识点分享 入门必看 阿尔法颜色组成(alpha color component):颜色组成用来描述颜色的透明度或不透明度.阿尔法组成越高,颜色越不透明. API:应用编程接口.针对软 ...
- Liunx新手入门必看
安装CentOS(Linux的一个常用发行版本,互联网公司经常使用这个发行版)用到的软件: VMware_workstation_full_12.5.2.exe 虚拟机软件,虚拟机由这个软件安装.管理 ...
- 使用Code First建模自引用关系笔记 asp.net core上使用redis探索(1) asp.net mvc控制器激活全分析 语言入门必学的基础知识你还记得么? 反射
使用Code First建模自引用关系笔记 原文链接 一.Has方法: A.HasRequired(a => a.B); HasOptional:前者包含后者一个实例或者为null HasR ...
- 15个初学者必看的基础SQL查询语句
本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 本文将分享15个初学者必看的基础SQL查询语句,都很基础,但是你不一定都会,所以好好看看吧. 1.创建表和数据插 ...
- 三分钟教会你Python数据分析—数据导入,小白基础入门必看内容
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:小白 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行 ...
- 零基础小白Python入门必看:面向对象之典型魔术方法
- 【repost】学JS必看-JavaScript数据结构深度剖析
JavaScript以其强大灵活的特点,被广泛运用于各种类型的网站上.一直以来都没怎么好好学JS,只是略懂皮毛,看这篇文章时有读<PHP圣经>的感觉,作者深入浅出.生动形象地用各种实例给我 ...
- 新手必看ES6基础
ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...
- 学JS必看-JavaScript数据结构深度剖析
回归简单 要理解JavaScript,你得首先放下对象和类的概念,回到数据和代码的本原.前面说过,编程世界只有数据和代码两种基本元素,而这两种元素又有着纠缠不清的关系.JavaScript就是把数据和 ...
随机推荐
- 轻松理解JS基本包装对象
今天来讨论一下JS中的基本包装对象(也叫基本包装类型),之前刚学到这里的时候,自己也是一头雾水,不明白这个基本包装对象到底是个什么鬼,后来找了很多资料,终于看清了它的真面目.首先呢,我们现在复习一下J ...
- 云计算之路-阿里云上:Wireshark抓包分析一个耗时20秒的请求
这篇博文分享的是我们针对一个耗时20秒的请求,用Wireshark进行抓包分析的过程. 请求的流程是这样的:客户端浏览器 -> SLB(负载均衡) -> ECS(云服务器) -> S ...
- Provider 错误 '80004005' 未指定的错误 /conn.asp,行 23
网站本来正常,由于网站修改了title标签的内容,想要百度快照快点更新. 就自己提交快照.在下面网站: http://zhanzhang.baidu.com/sitesubmit/index 提交UR ...
- Dropbox的可用Hosts文件
108.160.167.203 www.dropbox.com 108.160.167.203 dropbox.com 108.160.165.211 dl-client677.dropbox.com ...
- ThinkPHP之数据库操作
Model文件位置 ThinkPHP使用的是MVC架构,所以我们我们在操作数据库时,首先需要创建自己的Model类. 在每个模块下有个Model文件夹,我们可以将Model类放置在该文件夹下.如果多个 ...
- ECMAScript —— 学习笔记(思维导图版)
导图
- android学习——Android Studio下创建menu布局文件
一.问题: android studio项目中没有看到menu文件夹: 在android studio项目中想要添加menu布局文件,一开始我的做法是:直接在res文件夹右键选择xml文件来添加,如下 ...
- Dinic问题
问题:As more and more computers are equipped with dual core CPU, SetagLilb, the Chief Technology Offic ...
- Intel 80x86 Linux Kernel Interrupt(中断)、Interrupt Priority、Interrupt nesting、Prohibit Things Whthin CPU In The Interrupt Off State
目录 . 引言 . Linux 中断的概念 . 中断处理流程 . Linux 中断相关的源代码分析 . Linux 硬件中断 . Linux 软中断 . 中断优先级 . CPU在关中断状态下编程要注意 ...
- KPROCESS IDT PEB Ldr 《寒江独钓》内核学习笔记(3)
继续上一篇(2)未完成的研究,我们接下来学习 KPROCESS这个数据结构. 1. 相关阅读材料 <深入理解计算机系统(原书第2版)> 二. KPROCESS KPROCESS,也叫内核进 ...