2017.07.12 学习记录 js基础学习及代码

来源：互联网发布：物体识别软件编辑：程序博客网时间：2024/06/01 21:07

1、alert更多是测试的时候用，在写js代码的时候尽量多测试。

2、DOM（文档对象模型）

3、改变style属性值

<body>

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 为字符

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>


<script>
cars=["vdvcd","cdcc","56322","cdscd"];
var i=0;
while(cars[i]){
alert(cars[i]);
i++;
}
</script>


<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>


<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/>






<script>
function goodbye()
{
alert("欢迎");
}
</script>
//<body onunload="goodbye()"/>



请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>


<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>


<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>


<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>

阅读全文

0 0