W3cJavaScript教程

JS是JavaScript的缩写，而JSP是Java Server Page的缩写，后者是用于服务器的语言。

JavaScript代码写在标签<script></script>之间。

Html文档中可以放入不限数量的脚本；脚本可位于<body>或<head>部分中（可同时存在），通常做法是把函数放入<head>部分或者页面底部。

<body>中的JavaScript：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

     <script>

         document.write("<h1>这是一级标题</h1>");

         document.write("<p>This is a message!</p>");

     </script>

     </body>

 </html>

demo

本例是在页面加载时向Html的<body>写文本。

<head>中的JavaScript函数：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <script>

             <!--函数体放在head部分-->

         function myFunction()

         {

             document.getElementById("demo").innerHtml = "我的第一个JavaScript函数";

         }

         </script>

     </head>

     <body>

         <h1>my web page</h1>

         <p id="demo">This is a paragraph!</p>

         <!--在body中使用button的onclick实事件调用函数-->

         <button type="button" onclick="myFunction()">Try it!</button>

     </body>

 </html>

demo

 <body>中的JavaScript函数：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <h1>My web page</h1>

         <p id="demo">A paragraph</p>

         <!--段落的对象id属性为demo-->

         <button type="button" onclick="myFunction()">try</button>

         <script>

             function myFunction()

             //js获取id的属性,使用innerHTML设置属性

             {

                 document.getElementById("demo").innerHTML="my first Js function!";

             }

         </script>

     </body>

 </html>

demo

外部的JavaScript：

外部文件通常包含被多个网页使用的代码；外部文件拓展名为.js；如需使用外部文件，html文件中的<script>标签的src属性中设置该.js文件。外部js文件不能包含<script>标签

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <script src="myScript.js"></script>

     </body>

 </html>

HTML

外部

 document.write("你真帅！");

Js

输出内容：

JavaScript中没有打印或输出函数，输出数据有以下四种方式：

　　1.使用alert()弹出警告框；

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>弹窗测试</title>

     </head>

     <body>

         <h1>handsome</h1>

         <button type="button" onclick="myFunction()">你过来啊</button>

         <script src="myScript.js"></script>

     </body>

 </html>

弹出窗测试

 function myFunction()

             {

                 alert("你真是帅到掉渣！");

             }

外部js

　　2.document.write()将内容写到HTML文档中（如果在HTML文档完成加载后执行则会对整个页面进行覆盖）

　　3.console.log()数据写入到浏览器控制台（浏览器F12打开控制台，点击控制台的console查看控制台文本）

　　4.innerHTML写入到HTML中的元素里

操作HTML元素：

给HTML元素加上id属性，js代码中使用document.getElementById("")的方式进行操作，使用innerHTML=""的方式获取或插入元素内容

JS语法规则：

*****Javascript标识符必须以字母，下划线，或美元符($)开头。

数据类型：

定义变量使用var

var length = 16;                                 　　　　　　  // Number 通过数字字面量赋值 
var points = x * 10;                              　　　  　　 // Number 通过表达式字面量赋值 
var lastName = "Johnson";                        　　　　// String 通过字符串字面量赋值 
var cars = ["Saab", "Volvo", "BMW"];             　　   // Array  通过数组字面量赋值 
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

*****Javascript对大小写敏感，变量通常采用驼峰命名法，首字母小写，后面每个单词首字母大写。

JavaScript语句理解:

JS语句是对浏览器发送的要求指令,浏览器根据接收到的指令执行相应操作,执行操作的载体为HTML语句.

例如:

 document.getElementById("demo").innerHTML = "hello";

 //表示向id为demo的HTML语句输出字符串hello

demo

JS是脚本语言,通常的编程语言是先讲程序进行编译然后再执行,JS是对语句按照编写顺序逐行执行.

每一行可执行语句以分号“;”结尾。

JS语句通常以语句标识符开始并执行，标识符是不可作为变量名的保留关键字段。

JavaScript变量：

存储的信息的容器，使用var关键字定义变量。

给变量赋值时，若为字符串则使用单引号或双引号。

重新声明变量，其值不会丢失。

声明新变量事可以使用new来定义其数据类型。

  var carname    =new String;

  var x=      new Number;

  var y=      new Boolean;

  var cars=   new Array;

  var person= new Object;

声明时确定类型

 JavaScript数据类型：

字符串（string），数字（number），布尔（boolean），数组（array），对象（object），空（null），未定义（undefined）

JS拥有动态类型，相同的变量可作用于不同的类型，根据赋值确定类型.

JavaScript数组：

三种定义方式：

 var fruit = new Array();

  fruit[0] = "Apple";

  fruit[1] = "banana";

  fruit[2] = "grape";

数组定义1

 var fruit = new Array("Apple","Banana","Grape");

数组定义2

 var fruit = ["Apple","Banana","Grape"];

数组定义3

 JavaScript对象：

由花括号隔开，对象的属性定义采用名称和值对（name:value）的形式，属性之间用逗号隔开，属性定义可以换行，代码可读性更高。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>just test</title>

     </head>

     <body>

         <h1>下面依次打印数组的三个元素</h1>

         <p id="test">我马上就变了。</p>

         <button type="button" onclick="myFunction()">见证奇迹的时刻。</button>

         <script>

             var person = {

                 firstname : "Edward",

                 lastname : "Erlic",

                     id    : 12138};

             function myFunction()

             {

                 document.getElementById("test").innerHTML = person.id;

             }

         </script>

     </body>

 </html>

定义对象

对象属性寻址有以下两种方式：

对象寻址

undefined和null：

undefined表示标量为空值，可以通过给变量赋值null来清空变量。

JavaScript函数：

函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用于中的任何变量。

函数是由事件驱动的，当被调用时才执行，且可以重复调用。

function functionname()

//function关键字不可少，大小写敏感，花括号必须有

{

  执行语句；

}

函数定义

调用带参数的函数：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>just test</title>

         <script>

             function myFunction(a,b)

             //定义带参函数时参数变量之间使用,隔开,

             {

                 alert(a+b);

             }

         </script>

     </head>

     <body>

         <h1>点击下面的按钮</h1>

         <button type="button" onclick="myFunction(3,5)">按钮1</button>

         <!--调用函数myFunction时想其中传递了两个值“3,5”，顺序与定义函数时参数顺序必须相同-->

         <button type="button" onclick="myFunction(7,8)">按钮2</button>

     </body>

 </html>

带参函数

调用带返回值的函数：

调用函数结束后返回一个值到调用的地方，函数结束运行，整个程序继续执行。

 var temp = myFunction();

带返回值函数

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>just test</title>

     </head>

     <body>

         <p id="test"></p>

         <script>

             function myFunction(a,b)

             {

                 return a*b;

             }

             document.getElementById("test").innerHTML = myFunction(3,4);

             //myFunction函数的返回值作为值向id为test的HTML元素输出文本

         </script>

     </body>

 </html>

demo

return也可以作为退出函数的语句而不返回任何值

 function myFunction(a,b)

 {

     if(a>b)

     {

         return;

     }

     x=a+b;

 }

demo

局部变量：

在函数内部声明的变量，只能在函数内访问它；不同的函数中可以声明同名的局部变量，只有声明过该变量的函数能识别出该变量；函数运行完毕本地变量就会被删除；局部变量优先级比全局变量高，同时出现的时候会隐藏同名的全局变量。

全局变量：

在函数外声明的变量都是全局变量，网页上的所有脚本和函数都能访问它。

//myGlobal定义在函数外，是全局变量

var myGlobal =10;

function fun1() {

//oopsGlobal虽然在函数内声明，但是没有使用var关键字，所以自动被创建在全局作用于中，是全局变量

oopsGlobal = 5;

}

demo

JavaScript事件：

事件是可以被JS监测到的行为

HTML事件：

浏览器行为或用户行为，HTML网页中每个元素都能产生可以触发JS函数的事件。

EXP：HTML页面加载完成、HTML input字段改变时、按钮被点击

字符串：

用于存储和处理文本，单、双引号都适用。

字符串中有引号的话有两种处理方式：

（1）字符串中的引号与外层引号不同

（2）使用转移字符反斜杠“\”

 var answer = 'It\'s alright';

 var answer = "He is called \"Johnny\"";

转义字符

字符串也可以是对象，使用new创建，一般尽量不要创建字符串对象，会拖慢执行速度。

字符串属性和方法：

原始值字符串不是对象，没有自己的属性和方法，但是可以调用JavaScript的属性和方法，因为JS在执行属性和方法的时候可以把字符串当做对象。

字符串属性如下：

属性 描述
constructor 返回创建字符串属性的函数
length 返回字符串长度
prototype 允许向对象添加属性和方法

字符串方法（只有常用的，一些比较生僻的没有列出）：

Method 描述
charAt() 返回指定索引位置的字符
concat() 连接两个或多个字符串，返回连接后的字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式匹配的值
substr() 从起始索引号提取字符串中指定数目的字符
substrng() 提取字符串中两个指定的索引号之间的字符
toLowerCase() 字符串转为小写
toUpperCase() 字符串转为大写
toString() 返回字符串对象值
vaueOf() 返回某个字符串对象的原始值

JavaScript入门学习笔记（一）的更多相关文章

  1. JavaScript入门-学习笔记(一)

    JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...

  2. javascript入门学习笔记2

    JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 实例 var x // x 为 undefined var x = 6; // x 为数字 var x = "Bil ...

  3. javascript入门学习笔记

    <button type="button" onclick="alert('Welcome!')">点击这里</button>alert ...

  4. JavaScript入门学习笔记（JSON）

    JSON是JavaScript Object Notation的简称,是一种轻量级的数据交换格式. JSON使用JS的语法,但其格式只是一个文本,可以被任何编程语言读取病作为数据格式传递. JSON以 ...

  5. JavaScript入门学习笔记(异常处理)

    try:语句测试代码块的错误,当try中的代码块出错时执行catch中的代码块. catch:语句处理错误: throw:语句创建或抛出自定义异常. 三者一起使用可以控制程序流并生成自定义异常信息. ...

  6. JavaScript入门学习笔记（二）

    JavaScript运算符: 算术运算符.赋值运算符和字符串连接运算符. 算法运算符与复制运算符用法参照Java: 字符串运算符: +运算符用于把文本值或字符串变量连接起来,适用于两个或更多字符串变量 ...

  7. JavaScript入门-学习笔记(二)

    关于js变量 变量,就是一个用来存储数据的容器 一般来说,我们的变量都是可以得先声明,再使用,就像是一个东西先必须存在,才能看得见摸得着.然而在js里(es5),可以先使用,后声明. a = 100; ...

  8. JavaScript入门学习笔记（表单验证）

    表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...

  9. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

随机推荐

  1. 小小知识点（六）——算法中的P问题、NP问题、NP完全问题和NP难问题

    转自CSDN默一鸣 https://blog.csdn.net/yimingsilence/article/details/80004032 在讨论算法的时候,常常会说到这个问题的求解是个P类问题,或 ...

  2. Centos查看tomcat状态及操作

    启动:一般是执行sh tomcat/bin/startup.sh 查看:执行ps -ef |grep tomcat 输出如下 www 5144 ...等等.Bootstrap start 说明tomc ...

  3. [系统软件]Ubuntu 18.04 LTS 安装 搜狗输入法，谷歌拼音

    1. 讲什么 本文主要讲述在Ubuntu18.04 LTS版本中安装搜狗输入法.谷歌拼音输入法的过程. 2. 为什么讲 1. Ubuntu电脑自带Ibus输入法+拼音/五笔,但是用了一段时间之后发现经 ...

  4. Windows 通过批处理自动执行 linux服务器上面命令的办法

    1. 使用putty 下载地址 https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 直接使用 exe版本就可以 https:/ ...

  5. Flask插件wtforms、Flask文件上传和Echarts柱状图

    一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...

  6. 使用System.out.printf()输出日志重定向到文件后显示混乱问题

    写了一个小工具,使用System.out.printf()输出日志,以方便使用者查看,在终端显示没有问题,但重定向到文件就有问题了,会出现一些很奇怪的乱序现象. 上网查询资料,判断应该是跟重定向和Li ...

  7. ☆ [ZJOI2006] 书架 「平衡树维护数列」

    题目类型:平衡树 传送门:>Here< 题意:要求维护一个数列,支持:将某个元素置顶或置底,交换某元素与其前驱或后继的位置,查询编号为\(S\)的元素的排名,查询排名第\(k\)的元素编号 ...

  8. pgsql事务与并发控制

    事务与并发控制 事务的基本的概念和性质 ACID: 原子性:一个事务要么全部执行,要么全部不执行 一致性:执行事务的时候,数据库从一个一致的状态变更到另一个状态 隔离性: 确保在并发执行的时候,每个事 ...

  9. BZOJ2870 最长道路

    题意:给定树,有点权.求一条路径使得最小点权 * 总点数最大.只需输出这个最大值.5w. 解:树上路径问题,点分治. 考虑合并两个子树的时候,答案的形式是val1 * (d1 + d2),当1是新插入 ...

  10. 关于微信登录授权获取unionid的方法

    前言:微信登录授权是目前普遍存在于小程序的,还有一种静默授权方式是微信提供的但是不推荐使用,由于不同设备登录openid是不同的那么我们应该怎样拿到一个唯一的ID呢,下面做分享 wxml代码 < ...