JavaScript入门学习笔记(一)
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入门学习笔记(一)的更多相关文章
- JavaScript入门-学习笔记(一)
JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...
- javascript入门学习笔记2
JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 实例 var x // x 为 undefined var x = 6; // x 为数字 var x = "Bil ...
- javascript入门学习笔记
<button type="button" onclick="alert('Welcome!')">点击这里</button>alert ...
- JavaScript入门学习笔记(JSON)
JSON是JavaScript Object Notation的简称,是一种轻量级的数据交换格式. JSON使用JS的语法,但其格式只是一个文本,可以被任何编程语言读取病作为数据格式传递. JSON以 ...
- JavaScript入门学习笔记(异常处理)
try:语句测试代码块的错误,当try中的代码块出错时执行catch中的代码块. catch:语句处理错误: throw:语句创建或抛出自定义异常. 三者一起使用可以控制程序流并生成自定义异常信息. ...
- JavaScript入门学习笔记(二)
JavaScript运算符: 算术运算符.赋值运算符和字符串连接运算符. 算法运算符与复制运算符用法参照Java: 字符串运算符: +运算符用于把文本值或字符串变量连接起来,适用于两个或更多字符串变量 ...
- JavaScript入门-学习笔记(二)
关于js变量 变量,就是一个用来存储数据的容器 一般来说,我们的变量都是可以得先声明,再使用,就像是一个东西先必须存在,才能看得见摸得着.然而在js里(es5),可以先使用,后声明. a = 100; ...
- JavaScript入门学习笔记(表单验证)
表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...
- Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
随机推荐
- Openstack基础环境交换机常用配置(CISCO 3750G为例)
NOTE: 用户模式提示符为:cisco> 特权模式提示符为:cisco# 全局配置模式提示符为:cisco(config)# 端口模式提示符为:cisco(config-if)# 基础操作 ...
- Educational Codeforces Round 62
A. Detective Book 代码: #include <bits/stdc++.h> using namespace std; ; int N; int a[maxn]; ; in ...
- Django rest framework 使用haystack对接Elasticsearch
Elasticsearch 介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是 ...
- POJ1094 Sorting It All Out LUOGU 排序
Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 40012 Accepted ...
- Lodop某个电脑打印内容大小有问题
可能原因分析:本地设置放大比例问题,是真实的放大或缩小,1.查看比例应在100%, 2.控制面板设置显示应在100%(win7 win10中) 3.超文本样式问题,分析样式中不同浏览器版本下显示不一致 ...
- Djangon的坑
<a href="/del_student/?pk={{ students.pk }}"></a> 在django中当你写入这样的语句是,pk={{ stu ...
- Qt中实现将float类型转换为QString类型
在使用Qt Creator编程时,难免会用到将float类型转换为QString类型的时候下面是我所有的方法: 1. 将QString类型转化为float类型,很简单 QString data; fl ...
- Nginx-Tomcat搭建负载均衡(转载)
一. 工具 nginx-1.8.0 apache-tomcat-6.0.33 二. 目标 实现高性能负载均衡的Tomcat集群: 三. 步骤 1.首先下载Nginx,要下载稳定版: 2 ...
- 洛谷P4178 Tree (算竞进阶习题)
点分治 还是一道点分治,和前面那道题不同的是求所有距离小于等于k的点对. 如果只是等于k,我们可以把重心的每个子树分开处理,统计之后再合并,这样可以避免答案重复(也就是再同一个子树中出现路径之和为k的 ...
- Magento 2 创建 Widget
Widget是一个更好的工具,可以将内容插入或编辑到CMS页面块或页面中. 什么是小部件? 小部件是Magento 2配置中的强大功能.作为商店管理员,您可以利用小部件来改善生动界面下的店面.小部件允 ...