2017.07.12 学习记录 js基础学习及代码
2017-07-12 23:03
549 查看
1、alert更多是测试的时候用，在写js代码的时候尽量多测试。
2、DOM（文档对象模型）
3、改变style属性值
<body>
<script>
function changeText() {
var tm=document.getElementById("tm");
tm.style.color="pink";
tm.style.fontSize="10px";
}
</script>
<div id="tm" style="font-size:50px;color:green;"onclick="changeText()">提莫一米五</div>
</body>
注意:改变字体大小是“tm.style.fontSize="10px";”
4、isNaN();
Is not a number
不是一个数字，返回值是一个boolean型结果，不是数字返回true;
alert(isNaN("中国"));//true
alert(isNaN(2.5));//false
alert(isNaN("2"));//false这里返回false是因为JavaScript是弱类型语言.
5、”==”和”===”
//"=="是判断值相等，"==="是判断类型和值是否都相等
alert(isNaN(2=="2"));//true
alert(isNaN(2==="2"));//false
总结：javascript是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码编译。
6、注释:
Javascript注释
1、单行注释 “//”
2、多行注释 “/*代码代码代码*/”
7、JavaScript变量：
变量是存储信息的容器。
关键字：var
例子:
第一种:var x=2;//声明并复制
var y=5;
var z=x+y;//声明变量，运算并赋值
第二种:var x,y,z;//声明
x=2;//赋值
Y=5;
z=x+y;//运算并赋值
注意：javascript是弱类型语言，在声明变量时并没有给出具体的类型，和Java的写法不一样，
比如var int x=2,这样的写法是错误的。
Javascript拥有动态类型，这意味着相同的变量可用作不同的类型：
例如:
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x
12426
为字符
8、parseInt();
var a=2;
var b="2";
var c=b+a;
alert(c);
这样的写法c的结果是”22”;
想要进行算术运算,可以先转换为数字
var a=2;
var b="2";
var c=parseInt(b)+a;
alert(c)
这样的c的值就是4
9、时间函数：
Date
setInterval("getNow()",1000);//每隔一秒舒服
function getNow()
{
var myDate =new Date();
var year = myDate.getFullYear();//获取当前完整年份
var month = myDate.getMonth();//获取当前月份
month =month+1;//月是从0开始 所以加1
var data = myDate.getDate();//获取当前天数
var hour =myDate.getHours();//获取当前小时
var minute =myDate.getMinutes();//分钟
var secend =myDate.getSeconds();//秒
var div =document.getElementById("time");
div.innerHTML= year+"年"+month+"月"+data+"日"+hour+"时"+minute+"分"+secend+"秒";//打印
}
10、数组：
a) Js的数组和java的数组有些不一样，JS数组可以存放不同类型的值。
var cars =new Array();
注意这里声明数组没有给定数组长度。
cars[0]=”Audi;
cars[1]=”BMW”
cars[2]=”Volvo”;
或者：
var cars=new Array("Audi","BMW","Volvo");
11、Javascript对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
比如：
var animal={
name: "tiger ",
sex: "Male",
skin: "yellow",
};
alert(animal.name);
alert(animal.sex);
alert(animal.skin);
取值的时候还可以这样写：
alert(animal["name"]);
alert(animal["sex"]);
alert(animal["skin"]);
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
13、字符串
属性：length 获取字符串的长度。
a) 常用的几个方法
i. IndexOf(); 检索字符串 返回第一次出现的位置 从0开始，没匹配到则返回-1
ii. match(); 找到一个或多个正则表达式的匹配。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
14、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
15、变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
代码练习：
<html>
<head>
<title> </title>
<script type="text/javascript"></script>
</script>
</head>
<body>
<!--点击下面的按钮，将代码块循环五次-->
<button onclick = "vv()">循环</button>
<p id = "cc"></p>
<script>
function vv(){
var x="";
for(var i=0;i<5;i++){
x=x+"我是循环第"+i+"次"+"<br/>";
}
document.getElementById("cc").innerHTML=x;
}
</script>
<!-- while 数组循环-->
<script>
cars=["vdvcd","cdcc","56322","cdscd"];
var i=0;
while(cars[i]){
alert(cars[i]);
i++;
}
</script>
<!--do while 数组循环-->
<script>
function whilexunhuan(){
var x="";
var i = 1;
do{
x = x+"haha"+i+"<br/>";
i++;
}
while(i<=5);
document.getElementById("x").innerHTML=x;
}
</script>
<button onclick="whilexunhuan()">do/while</button>
<p id="x"></p>
<!--改变原标签的元素-->
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
<p>"Old Header" 已被修改为 "New Header"。</p>
<!--获取本页面标签id和方法体-->
<input type = "button" value = "获取标签01" onclick = "testE()" />
<script>
function testE(){
var inputs = document.getElementsByTagName("input");
alert(inputs.length);
for(var i=0;i<inputs.length;i++){
alert(inputs[i].type+inputs[i].value+inputs[i].onclick);
}
}
</script><br/>
<!--JQ 属性-->
<!--JQ 选择器-->
<!--JQ onload和onunload事件属性-->
<script>
function goodbye()
{
alert("欢迎");
}
</script>
//<body onunload="goodbye()"/>
<!--onchange事件 元素值改变时触发-->
<!-- 离开输入框自动把小写字母变成大写-->
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
<!--onchange事件 拓展，选择城市-->
<div>
省<select id = "sheng" onchange = "tessB()">
<option value = "请选择">请选择</option>
<option value = "四川">四川</option>
<option value = "北京">北京</option>
</select>
市<select id = "sheng" onchange = "tessB()">
<option value = "请选择">请选择</option>
<option value = "四川">四川</option>
<option value = "北京">北京</option>
</select>
</div>
<script>
function tessA(){
var sheng = document.getElementById("sheng").value;
alert(sheng);
var sheng02 = document.getElementById("sheng");
alert(sheng02.options[sheng02.selectedIndex].text);
}
function tessB(){
var sheng = document.getElementById("sheng");
alert(sheng.options[sheng.selectedIndex].text);
}
</script>
<!-- 一个简单的 onmouseover-onmouseout 实例：获取焦点，失去焦点-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;color:red;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
<!-- 鼠标点击事件事件-->
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
<!-- 创建节点---在原节点的基础上才能追加元素-->
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
<!-- 删除节点，必须首先获得该元素的父元素：-->
<br/><br/>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">woshi另一个段落。另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
<!-- BOM 浏览器对象模型 window open-->
<form>
<input type = "button" value = "打开窗口" onclick = "open()">
</from>
<script>
function open(){
window.open("https://www.baidu.com/");
}
</script>
<form action = "">
用户名：<input id = "username" type = "text"/>
<input type = "button" value = "提交" onclick = "testD()">
</from>
<script>
function testD(){
var username = document.getElementById("username").value;
location.href = "https://www.baidu.com?username="+username;
}
</script>
</body>
</html>
2、DOM（文档对象模型）
3、改变style属性值
<body>
<script>
function changeText() {
var tm=document.getElementById("tm");
tm.style.color="pink";
tm.style.fontSize="10px";
}
</script>
<div id="tm" style="font-size:50px;color:green;"onclick="changeText()">提莫一米五</div>
</body>
注意:改变字体大小是“tm.style.fontSize="10px";”
4、isNaN();
Is not a number
不是一个数字，返回值是一个boolean型结果，不是数字返回true;
alert(isNaN("中国"));//true
alert(isNaN(2.5));//false
alert(isNaN("2"));//false这里返回false是因为JavaScript是弱类型语言.
5、”==”和”===”
//"=="是判断值相等，"==="是判断类型和值是否都相等
alert(isNaN(2=="2"));//true
alert(isNaN(2==="2"));//false
总结：javascript是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码编译。
6、注释:
Javascript注释
1、单行注释 “//”
2、多行注释 “/*代码代码代码*/”
7、JavaScript变量：
变量是存储信息的容器。
关键字：var
例子:
第一种:var x=2;//声明并复制
var y=5;
var z=x+y;//声明变量，运算并赋值
第二种:var x,y,z;//声明
x=2;//赋值
Y=5;
z=x+y;//运算并赋值
注意：javascript是弱类型语言，在声明变量时并没有给出具体的类型，和Java的写法不一样，
比如var int x=2,这样的写法是错误的。
Javascript拥有动态类型，这意味着相同的变量可用作不同的类型：
例如:
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x
12426
为字符
8、parseInt();
var a=2;
var b="2";
var c=b+a;
alert(c);
这样的写法c的结果是”22”;
想要进行算术运算,可以先转换为数字
var a=2;
var b="2";
var c=parseInt(b)+a;
alert(c)
这样的c的值就是4
9、时间函数：
Date
setInterval("getNow()",1000);//每隔一秒舒服
function getNow()
{
var myDate =new Date();
var year = myDate.getFullYear();//获取当前完整年份
var month = myDate.getMonth();//获取当前月份
month =month+1;//月是从0开始 所以加1
var data = myDate.getDate();//获取当前天数
var hour =myDate.getHours();//获取当前小时
var minute =myDate.getMinutes();//分钟
var secend =myDate.getSeconds();//秒
var div =document.getElementById("time");
div.innerHTML= year+"年"+month+"月"+data+"日"+hour+"时"+minute+"分"+secend+"秒";//打印
}
10、数组：
a) Js的数组和java的数组有些不一样，JS数组可以存放不同类型的值。
var cars =new Array();
注意这里声明数组没有给定数组长度。
cars[0]=”Audi;
cars[1]=”BMW”
cars[2]=”Volvo”;
或者：
var cars=new Array("Audi","BMW","Volvo");
11、Javascript对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
比如：
var animal={
name: "tiger ",
sex: "Male",
skin: "yellow",
};
alert(animal.name);
alert(animal.sex);
alert(animal.skin);
取值的时候还可以这样写：
alert(animal["name"]);
alert(animal["sex"]);
alert(animal["skin"]);
12、Undefined 和 Null
Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
13、字符串
属性：length 获取字符串的长度。
a) 常用的几个方法
i. IndexOf(); 检索字符串 返回第一次出现的位置 从0开始，没匹配到则返回-1
ii. match(); 找到一个或多个正则表达式的匹配。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
14、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
15、变量
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
代码练习：
<html>
<head>
<title> </title>
<script type="text/javascript"></script>
</script>
</head>
<body>
<!--点击下面的按钮，将代码块循环五次-->
<button onclick = "vv()">循环</button>
<p id = "cc"></p>
<script>
function vv(){
var x="";
for(var i=0;i<5;i++){
x=x+"我是循环第"+i+"次"+"<br/>";
}
document.getElementById("cc").innerHTML=x;
}
</script>
<!-- while 数组循环-->
<script>
cars=["vdvcd","cdcc","56322","cdscd"];
var i=0;
while(cars[i]){
alert(cars[i]);
i++;
}
</script>
<!--do while 数组循环-->
<script>
function whilexunhuan(){
var x="";
var i = 1;
do{
x = x+"haha"+i+"<br/>";
i++;
}
while(i<=5);
document.getElementById("x").innerHTML=x;
}
</script>
<button onclick="whilexunhuan()">do/while</button>
<p id="x"></p>
<!--改变原标签的元素-->
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
<p>"Old Header" 已被修改为 "New Header"。</p>
<!--获取本页面标签id和方法体-->
<input type = "button" value = "获取标签01" onclick = "testE()" />
<script>
function testE(){
var inputs = document.getElementsByTagName("input");
alert(inputs.length);
for(var i=0;i<inputs.length;i++){
alert(inputs[i].type+inputs[i].value+inputs[i].onclick);
}
}
</script><br/>
<!--JQ 属性-->
<!--JQ 选择器-->
<!--JQ onload和onunload事件属性-->
<script>
function goodbye()
{
alert("欢迎");
}
</script>
//<body onunload="goodbye()"/>
<!--onchange事件 元素值改变时触发-->
<!-- 离开输入框自动把小写字母变成大写-->
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
<!--onchange事件 拓展，选择城市-->
<div>
省<select id = "sheng" onchange = "tessB()">
<option value = "请选择">请选择</option>
<option value = "四川">四川</option>
<option value = "北京">北京</option>
</select>
市<select id = "sheng" onchange = "tessB()">
<option value = "请选择">请选择</option>
<option value = "四川">四川</option>
<option value = "北京">北京</option>
</select>
</div>
<script>
function tessA(){
var sheng = document.getElementById("sheng").value;
alert(sheng);
var sheng02 = document.getElementById("sheng");
alert(sheng02.options[sheng02.selectedIndex].text);
}
function tessB(){
var sheng = document.getElementById("sheng");
alert(sheng.options[sheng.selectedIndex].text);
}
</script>
<!-- 一个简单的 onmouseover-onmouseout 实例：获取焦点，失去焦点-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;color:red;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
<!-- 鼠标点击事件事件-->
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
<!-- 创建节点---在原节点的基础上才能追加元素-->
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
<!-- 删除节点，必须首先获得该元素的父元素：-->
<br/><br/>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">woshi另一个段落。另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
<!-- BOM 浏览器对象模型 window open-->
<form>
<input type = "button" value = "打开窗口" onclick = "open()">
</from>
<script>
function open(){
window.open("https://www.baidu.com/");
}
</script>
<form action = "">
用户名：<input id = "username" type = "text"/>
<input type = "button" value = "提交" onclick = "testD()">
</from>
<script>
function testD(){
var username = document.getElementById("username").value;
location.href = "https://www.baidu.com?username="+username;
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js小案例效果实现代码学习记录
- JS基础学习记录
- 网络远程教育平台课件实时记录学习时长的JS代码
- 2017.6.26 学习记录 MyEclipse的基础复习及代码
- NodeJS学习笔记--NodeJS+Express基础概念梳理记录
- js基础知识相关学习笔记记录
- 2017.6.28 学习记录 Mysql的基础运用及代码
- Github学习记录-零基础远程提交代码
- salesforce 零基础学习（三十六)通过Process Builder以及Apex代码实现锁定记录( Lock Record)
- [学习记录]JS图片滚动代码（无缝、平滑）
- C语言学习基础代码记录
- JS基础学习第四天：条件控制语句、循环语句、函数模块、事件等通用代码块2
- Javascript入门学习第一篇 js基础第1/2页
- JS特效代码大全（二）如何记录cookie的顶部自动伸缩广告
- 学习drag and drop js实现代码经典之作
- 以jQuery为基础的js分页代码--原创
- Android（OPhone） 学习笔记 - 代码基础
- JavaScript学习记录（基础）
- javascript 语法基础 想学习js的朋友可以看看
- Oracle 基础学习记录 (keep updating)