诶西,JavaScript学习记录。。。。。。

时间:2023-03-08 18:09:44
诶西,JavaScript学习记录。。。。。。

  由于大学课程缘故,老师巨爱叫人问问题,还记分呢,随便记录一下Js的学习情况,以后复习什么的也比较方便吧。。。。。。

开始咯,就按照C语言学习那样的方法来吧!

==================================割割割==================================

1.数据类型(这里只是大概提一下)

 /*
我认为Js里没有明显的数据类型,仅有 字符串、数字、布尔、数组、对象、Null、Undefined
*/ var temp = 'legth' var temp = 1
var temp = -3.14159
var temp = 1e9 var temp = false var person {
name : 'lwc'
sex : 'male'
age : 20
} var name = null //undefined
var name
log(name)

2.变量声明

var ans
var mark = false
var i = 0,j = 0,k = 0
var t
log(t)
//这种情况t是undefined
var name = 'Volvo'var name
//这种情况name依然是Volvo
var name = 'Volvo'var name = 'ben'//这种情况name就会被重新赋值

3.数组

//方法1
var ans = [] //方法2
var ans = new Array()

诶西,JavaScript学习记录。。。。。。

原地址:http://www.w3school.com.cn/jsref/jsref_obj_array.asp

4.函数

//JavaScript的函数的传参并不需要类型声明
function log(a) {
console.log(a)
} function functionname(param1, param2, ...)
{
/* code here */
}
 //其实我一直用的是另一种方法来声明调用一个函数
var imageFromPath = function(path) {
var img = new Image()
img.src = path
return img
}

这里我感觉js的规定有点太*了,类用函数也能定义......

 var Ball = function() {
var image = imageFromPath('ball.png')
var o = {
image: image,
x: 100,
y: 200,
speedX: 10,
speedY: 10,
fired: false,
}
o.fire = function() {
o.fired = true
}
o.move = function() {
if (o.fired) {
// log('move')
if (o.x < 0 || o.x > 400) {
o.speedX = -o.speedX
}
if (o.y < 0 || o.y > 300) {
o.speedY = -o.speedY
}
// move
o.x += o.speedX
o.y += o.speedY
}
}
return o
} var ball = Ball()
基础语法就到这里吧,接下来写一下常见对象的常用方法

5.String

其实常用的也就那么几个
1.indexOf()
stringObject.indexOf(searchvalue, fromindex)返回值为匹配串的起始位置
searchvalue为字符或字符串
fromindex是起始位置
如果找不到返回-1 2.replace()
stringObject.replace(regexp/substr, replacement)

3.str.split(a, [b])以'a'为标识切割str,
返回一个元组并保留前b个
4.match()
该方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
stringObject.match(searchvalue) searchvalue必需。规定要检索的字符串值。只检索一次,返回一个字符串,找不到返回null stringObject.match(regexp) regexp必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。返回一个元组,找不到返回null
var str = "1 plus 2 equal 3"
console.log(str.match(/\d+/g))
// ["1", "2", "3"]

6.Math

诶西,JavaScript学习记录。。。。。。

诶西,JavaScript学习记录。。。。。。

7.Date

诶西,JavaScript学习记录。。。。。。

诶西,JavaScript学习记录。。。。。。

诶西,JavaScript学习记录。。。。。。

8.Events

诶西,JavaScript学习记录。。。。。。

诶西,JavaScript学习记录。。。。。。

*9.之前是把Js当做一门语言来讲,接下来比较重要的就是,Js和html的对接了!

  ⑴首先,最常用的就是验证某些信息是否合法

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="body">
<form class="from-group" action="index.html" method="post" id="form">
<label for="">name</label>
<input type="text" name="username" value="">
<label for="">password</label>
<input type="password" name="password" value="">
<input type="submit" name="" value="click me" onclick="return check();">
</form>
</div>
<script type="text/javascript">
function check() {
var re = /^[a-zA-Z0-9]{6,20}$/g
var message = document.getElementById('form').username.value
console.log(message)
if(!re.test(message)){
alert('用户名或密码格式不正确')
return false
}
else {
alert('Ok!')
return true
}
}
</script>
</body>
</html>

⑵插入、删除一些元素,并修改他们的样式

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="active">
<select id="selector" required="required">
<option value="red">red</option>
<option value="green">green</option>
<option value="black">black</option>
<option value="blue">blue</option>
</select>
<button type="button" name="button" class='btn'>add</button>
<button type="button" name="button" class='btn'>remove</button>
</div>
<script type="text/javascript">
var p = document.getElementsByClassName('btn')
p[0].addEventListener('click', function(event){
var s = document.querySelector('#selector')
var addP = new function(){
var para = document.createElement('p')
var node = document.createTextNode('这是一个新段落。')
para.appendChild(node)
para.style.color = s.value
document.querySelector('#body').appendChild(para)
}
})
p[1].addEventListener('click', function(event){
var b = document.querySelector('#body')
var arrayp = document.getElementsByTagName('p')
console.log(arrayp);
while(arrayp.length != 0) {
b.removeChild(arrayp[0])
}
})
</script>
</body>
</html>

evermore更多请参照http://www.w3school.com.cn/jsref/dom_obj_window.asp