您的位置：首页 > Web前端 > JavaScript

JavaScript_基础新手篇

2020-08-08 16:42 513 查看

JavaScript基础

  • 四、分支语句
  • 五、Math方法
  • 六、for循环
  • 七、while循环
  • 八、函数
  • 九、对象
  • 十、日期
  • 十一、Dom文档
  • 十二、project
  • 十三、事件

    • 一、变量

    1.1
    声明变量用var关键字后接变量名等于值

    var number = 'perhaps';

    1.2
    变量名命名规范
    只能使用数字、字母、下划线、美元符$
    不能使用关键字、保留字
    不能以数字开头
    大小写敏感

    1.3
    同时赋值多个变量

    var name = 'perhaps' , age = 18 , addr = 'shanghai'

    二、运算符

    2.1
    算数运算符
    加：

    +

    减：
    -

    乘：
    *

    除：
    /

    余数：
    %

    2.2
    赋值运算符
    值等于：

    ==

    横等(值和类型都相等)：
    ===

    不等：
    !=

    横不等：
    !==

    2.3
    关系运算符
    大于：

    >

    大于等于：
    >=

    小于：
    <

    小于等于：
    <=

    2.4
    逻辑运算符
    与：

    &&

    或：
    ||

    非：
    !

    2.5
    加强运算符
    自身加1：

    ++

    自身减1：
    --

    自身加等于：
    +=

    自身减等于：
    -=

    自身余等于：
    %=

    自身除等于：
    /=

    三、数据类型

    1、数字类型

    3.1.1
    整数

    int()

    转换成整数：

    parseInt()

    3.1.2
    浮点数

    float()

    转换成浮点数：

    paserFloat()

    2、字符串类型

    3.2.1
    字符串：一对单引号或者一对双引号括起来的的数据
    字符串是不可变数据类型

    var number = 'perhaps'；

    3.2.2
    字符串常用的方法
    获取字符串的长度：

    str.length()

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var s = 'PerHaps'；
console.log(s.length)；
</script>

</body>
</html>

    以下省略

    标签

    3.2.3
    获取字符串下标为n的字符：

    str.charAt(n)

    <script type="text/javascript">
var s = 'PerHaps'；
console.log(s.charAt(3))；
</script>

    3.2.4
    获取下标为n的字符编码：

    str.charCodeAt(n)

    <script type="text/javascript">
var s = 'PerHaps'；
console.log(s.charCodeAt(3))；
</script>

    3.2.5
    字符串拼接：

    str.concat(字符串)

    <script type="text/javascript">
var s = 'PerHaps'；
console.log(s.concat(' hello world'))；
</script>

    3.2.6
    查找字符第一个第一次出现的位置，如果没找到返回-1：

    str.lastIndexOf(字符串)

    <script type="text/javascript">
var s = 'PerHaps'；
console.log(s.lastIndexOf('Haps'))；
</script>

    3.2.7
    替换字符串(注意字符串是不可变数据类型，不会改变原字符串)：

    str.replace(old_str,nwe_str)

    <script type="text/javascript">
var s = 'PerHaps'；
console.log(s.replace('PerHaps','LanAn'))；
</script>

    3.2.8
    截取字符串：

    str.substr(start,end)

    <script type="text/javascript">
var s = 'PerHaps'；
console.log(s.substr(3,5))；
</script>

    3.2.9
    切割字符串：

    str.split(‘按字符切割返回数组类型’)

    <script type="text/javascript">
var s = 'PerHaps'；
console.log(s.split('r'))；
</script>

    3.2.10
    将字符串转换为小写：

    str.toLocaleLowerCase()

    <script type="text/javascript">
var s = 'PerHaps'；
// 将字符串转换为大写toLocaleUpperCase()
console.log(s.toLocaleLowerCase())；
</script>

    3、数组类型

    3.3.1
    可变数据类型
    一对中括号括起来的数据
    var arr = [1, 2, 3, 6, 5, 4]
    数组的方法

    3.3.2
    索引数组
    索引数组中第i个元素：

    arr[i]

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 索引下标为2的元素
console.log(arr[2]);
</script>
</body>
</html>

    3.3.3
    获取数组的长度：

    arr.length

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = [1, 2, 5, 3, 6, 5, 7, 8];
// 获取数组的长度
console.log(arr.length);
</script>
</body>
</html>

    3.3.4
    以下将省略

    标签

    在数组中添加元素：
    splice()

    // 增
/*
在第0个位置
替换0个，也就是不替换
增加两个元素
*/
arr.splice(0,0,8,9);
console.log(arr);

    3.3.5
    修改元素：

    splice()

    // 改
/*
将数组中的第0个元素，替换一次，替换后的元素
*/
arr.splice(0,1,8);
console.log(arr);

    3.3.6
    删除数组中的元素：

    splice()

    // 删
/*
将数组的第0个元素
不替换
删除一次
*/
arr.splice(0,1);
console.log(arr);

    3.3.7
    向数组末尾追加元素：

    push()

    // 在数组末尾追加一个元素4
arr.push(4);
console.log(arr);

    3.3.8
    将两个数组合成一个数组：

    concat()

    /* concat不改变原数组，
合并两个数组生成一个新的数组*/
new_arr = arr.concat([99, 88, 77]);
console.log(new_arr);

    3.3.9
    向数组最前面加入一个元素：

    shift()

    // 向数组最前面添加一个元素
arr.shift(99);
console.log(arr);

    3.3.10
    向数组最前面加入多个元素：

    unshift()

    // 向数组最前面添加多个元素
arr.unshift(33,44,55);
console.log(arr);

    3.3.11
    删除数组末端的元素：

    pop()

    // 删除数组末端的一个元素
arr.pop();
console.log(arr);

    3.3.12
    遍历数组

    var arr = [1, 4, 2, 3 ,55]
for (var i = 0; i<arr.length;i++){
console.log(arr[i])
}

    4、其他类型

    3.4.1

    null
    ：空类
    Nna
    ：非数字
    boolean
    ：布尔类型
    undefind
    ：没定义

    四、分支语句

    4.1
    三种输出方式：
    弹框：

    alert
    (‘hello world’)
    文档界面：
    document.write
    (‘helloworld’)
    控制台：
    console.log
    (‘hello’)

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 弹框
alert('hello world');
// 文档界面
document.write('helloworld');
// 控制台
console.log('hello');
</script>
</head>
<body>
<!-- 企业开发者，建议写在body后面 -->
<script type="text/javascript">
/*
这就是多行注释
*/
</script>
<script src="jsss" type="text/javascript" charset="UTF-8">

</script>
</body>
</html>

    4.2
    公式：

    if (条件){
语句
}

    4.3
    公式：

    if (条件){
语句
}else{
语句
}

    4.4
    公式：

    if (条件){
语句
}else if(条件){
语句
}
else{
语句
}

    4.5
    公式:
    常用于已知的，不需要范围。

    swith(变量){
case 变量值:
语句
break
case 变量值:
语句
break
case 变量值:
语句
break
default:
语句
}

    实例：

    <script type="text/javascript">
var grade='D';
switch(grade){
case 'A':
console.log('80-100');
break
case 'B':
console.log('70-79');
break
case 'C':
console.log('60-69');
break
case 'D':
console.log('<60');
break
default:
console.log('erro');
}
</script>

    4.6
    三目运算符：？

    // 三目运算符
var res=10<5?'真的':'假的';
console.log(res);

    五、Math方法

    5.1
    返回0-1之间的随机数：

    Math.random()

    四舍五入：
    Math.round()

    返回最大值：
    Math.max()

    返回最小值：
    Math.min()

    向上取整：
    Math.ceil()

    向下取整：
    Math.floor()

    x的y次方：
    Math.pow(x,y)

    开平方：
    Math.sqrt()

    六、for循环

    6.1

    for (表达式1；表达式2；表达式三){
语句
}
表达式1，表示初始值
表达式2，表示条件
表达式3，表示出口

    实例

    <script type="text/javascript">
for(var a=1;a<5;a++){
console.log('hellow world')；
}
</script>

    6.2
    for循环嵌套
    打印三角形到文档界面

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i = 1;i<10;i++){
for (var j = 1;j<i;j++){
document.write('o');
}
document.write('<br />')；
}
</script>
</body>
</html>

    6.3
    打印九九乘法表到文档界面

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i = 1;i<10;i++){
for (var j = 1;j<i+1;j++){
document.write(j+'*'+i+'='+i*j+' ' );
}
document.write('<br />')；
}
</script>
</body>
</html>

    6.4
    打印三角形

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i=0;i<6;i++){
for(var j=0;j<i;j++){
document.write('a');
}
document.write('<br />');
}
</script>
</body>
</html>

    6.5
    冒泡排序

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = [1, 2, 4, 6, 5, 3, 7, 8];
/*循环趟数，长度减一是因为两两比较，
所以比较的次数只有length-1次*/
for (var i = 0; i<arr.length-1; i++){
for (var j=0; j<arr.length-1-i; j++){
/*相邻的两个元素作比较
如果前一个元素大于后一个元素就交换位置
这是升序排序
如果要降序排序则将>改成<*/
if(arr[j]>arr[j+1]){
var t = arr[j];
arr[j] = arr[j+1];
arr[j+1] = t;
}
}
}
document.write(arr)
</script>
</body>
</html>

    七、while循环

    7.1
    公式

    while (条件){
语句
}

    实例

    <script type="text/javascript">
var a=7;
while(a<100)
{
console.log(a);
a+=7;
}
</script>
    <script type="text/javascript">
var b = 0;
while(b<100){
if(b%7===0){
console.log(b);
}
b++;
}
</script>

    八、函数

    8.1
    函数公式：
    function声明函数 函数名(){}

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function  fun(){
console.log('hello world')
}
fun()
</script>
</body>
</html>

    九、对象

    9.1
    对象：object，引用类型，引用对象的实例，也就是实例化
    创建对象的方式有多种方法
    这里选择选择两种中的其中一种
    创建对象：
    第一种使用new运算符创建
    var object = 

    new Object()
    ;
    object.‘name’ = ‘zhangsan’;
    object.‘age’ = 18;

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var obj = new Object();
obj.name = 'zhangsan';
obj.age = 18;
console.log(obj);
</script>
</body>
</html>

    第二种
    var object = {
    ‘name’ = ‘zhangsan’，
    ‘age’ = 18，
    };
    其他方式略；

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var obj2 = {
'name':'zhangsan',
'age':19,
//这是对象的方法
'run':function(){
console.log('pao?');
}
}
console.log(obj2);
//调用对象的方法
obj2.run()
</script>
</body>
</html>

    十、日期

    10.1
    Date
    调用对象的方法，创建实例。
    var d = 

    new Date()

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
// Thu Aug 06 2020 20:05:46 GMT+0800 (中国标准时间)
console.log(d);
// Thu Aug 06 2020
console.log(d.toDateString());
// 20:06:16 GMT+0800 (中国标准时间)
console.log(d.toTimeString());
// 2020/8/6
console.log(d.toLocaleDateString());
// 下午8:07:25
console.log(d.toLocaleTimeString());
// Thu, 06 Aug 2020 12:07:51 GMT
console.log(d.toUTCString());
</script>
</body>
</html>

    10.2
    定时器

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// var start = 10
// var tmid = setInterval(function(){
// 	if (start>0){
// 		console.log(start)
// 		start--
// 	}else{
// 		clearTimeout(tmid)
// 	}
// },1000)

// var start = 10
// var tmid = setInterval(function(){
// 	start--
// 	console.log(start)
// },1000)

var c=10
// 设置变量保存定时器函数返回的id，用于终止定时器
var tmid = setInterval(function(){
// 自减
c--
// 当定时器到0时终止定时器
if ( c === 0){
clearInterval(tmid)
}
// 选择33个随机数，自上而下随机选择，
// 将选到的值给到select
var select = Math.ceil(Math.random()*33)
console.log(select)
},500)
</script>
</body>
</html>

    十一、Dom文档

    11.1
    dom文档对象模型

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<h2 id="title">hha</h2>
<h3 id="aa">嘻嘻</h3>
<h4 class="cc">我们挨打游戏</h4>
<h4 class="cc">我们都是渣渣</h4>
</div>

<script type="text/javascript">
// 获取标签id
var h2 = document.getElementById('title')
// 修改内容
h2.innerText = '我会dom操作'
// 获取标签id
var h3 = document.getElementById('aa')
// 修改内容
h3.innerText = '不爱'
// 获取标签id
var h4s = document.getElementsByTagName('h4')
// 修改内容
for (var i = 0 ;i<h4s.length;i++){
h4s[i].innerText = '爱'
}
</script>
</body>
</html>

    节点获取的三种方式

    document.getElementById()
    ：获取节点id
    document.getElementsByTagName()
    ：获取节点标签，返回元组
    document.getElementsByClassName()
    ：获取相同值的class的节点，返回列表

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="a">
<p class="m"></p>
<div id="b"></div>
<p class="m"></p>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName('m')
console.log(a)
var b = document.getElementsByTagName('p')
console.log(b)
var c = document.getElementById('a')
console.log(c)
</script>
</body>
</html>

    增删改
    创建一个元素节点：

    createElement()

    添加一个新子节点到节点的末尾：
    appendChild()

    在当前节点前插入一个新的节点：
    insertBefore()

    将新节点替换成旧节点：
    repalceChild()

    移除节点：
    removeChild()

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="a">
<p id="start"></p>
<div id="b"></div>
<p id="end"></p>
</div>
<script type="text/javascript">
var b = document.getElementById('b')
// 创建标签
var p = document.createElement('p')
// 给元素设置内容
p.innerHTML = '今晚加班'
// 在b中住家p
b.appendChild(p)

// 创建h2标签
var h2 = document.createElement('h2')
h2.innerHTML = '好好复习'
// 通过操作父节点，将h2插入到b之前
b.parentNode.insertBefore(h2,b)
// 替换
// b.parentNode.replaceChild(h2,b)
// 删除
b.parentNode.removeChild(b)
</script>
</body>
</html>

    十二、project

    12.1
    进度条
    首先给一个标签创建文本框，在创建一个包含的标签属性
    然后获取相应的id，用计时器实现。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
width: 400px;
height: 50px;
border: 1px solid #00BFFF;
}
#b{
height: 50px;
background-color: #FF1493;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
</div>
</div>
<script type="text/javascript">
// 获取标签id
var b = document.getElementById('b')；
// 设置起点
var start = 0；
// 计时器
var  timeid = setInterval(function(){
// 宽度增加
b.style.width = start + 'px'；

// 停止的条件
if (start===400){
clearInterval(timeid)；
}
/*每次加10，放在这里控制与外边框宽度相等
如果放在前面判停止的条件要加10个像素的宽度*/
start+=10
},1000)
</script>
</body>
</html>


    12.2
    换皮肤

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
height: 500px;
border: 1px solid #FF1493;
/* background-repeat: no-repeat; */
}
#b{
height: 300px;
width: 300px;
border: 1px solid #00BFFF;
position: relative;
left: 300px;
top: 100px;
background-repeat: no-repeat;
background-position: center;
}
.select1{
background-image: url(./img/bg1.gif);
}
.select2{
background-image: url(img/2.jpg);
}
.select3{
background-color: #00BFFF;
}
.select4{
background-color: #FF1493;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<button onclick="pi1()">皮肤一</button>
<button onclick="pi2()">皮肤二</button>
</div>
<script type="text/javascript">
function pi1(){
var a = document.getElementById('a')；
a.className = 'select1'；
var b = document.getElementById('b')；
b.className = 'select2'；
console.log('换了')；
}
function pi2(){
var a = document.getElementById('a')；
a.className = 'select3'；
var b = document.getElementById('b')；
b.className = 'select4'；
console.log('换了')；
}
</script>
</div>
</body>
</html>

    12.3
    隔行换色

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
width: 700px;
height: 50px;
border: 1px solid salmon;
}
.select1{
background-color: #00BFFF;
}
.select2{
background-color: #FF1493;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var list = document.getElementsByTagName('li')
for (var i = 0 ;i<list.length;i++){
if(i%2===0){
list[i].className = 'select1'；
}
else{
list[i].className = 'select2'；
}
}
</script>
</body>
</html>

    12.4
    图片切换

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/1.jpg" onclick="one()">；
<img src="img/2.jpg" onclick="two()">；
<img src="img/3.jpg" onclick="three()">；
<hr >；
<img src="img/bg2.jpg" id="qie">；
<script type="text/javascript">
function one(){
var qie = document.getElementById('qie')；
qie.src = "img/1.jpg"；
}
function two(){
var qie = document.getElementById('qie')
qie.src = "img/2.jpg"；
}
function three(){
var qie = document.getElementById('qie')；
qie.src = "img/3.jpg"；
}
</script>
</body>
</html>

    十三、事件

    13.1
    事件：产生然后得到处理操作。
    事件的模式：内联模式、脚本模式
    事件的分类：鼠标事件、键盘事件、HTML事件。

    13.2
    鼠标事件
    onmouseover：鼠标移入到某个元素内都会触发
    onmouseout：鼠标移出某个元素时都会触发
    onmouseenter：鼠标只在移入本元素时调用一次
    onmouseleave：鼠标只在移出本元素时触发一次

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="images3/big_1.jpg" >；
<img src="images3/big_10.jpg" >；
<img src="images3/big_2.jpg" >；

<script type="text/javascript">；
var imgs = document.getElementsByTagName('img')
for (var i = 0 	;i<imgs.length-1;i++){
imgs.index = i；
onmouseover = function(){
console.log('comein')；
}
}
</script>
</body>
</html>

    13.2
    键盘事件
    onkeydown：按下了键盘上的某个键
    keypress：按下了键盘上的字符键
    keycode：按下了键盘上的ACll编码键，返回编码

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="images3/big_1.jpg" >
<img src="images3/big_10.jpg" >
<img src="images3/big_2.jpg" >

<script type="text/javascript">
// 三者同时存在只能生效最后一个
// onkeydown = function(event){
// 	console.log(event.shiftKey)
// }
// onkeydown = function(event){
// 	console.log(event.ctrlKey)
// }
// onkeydown = function(event){
// 	console.log(event.altKey)
// }
onkeydown = function(event){
console.log(event.keyCode);
console.log(event);
console.log(event.layerX);
console.log(event.layerY);
}

// 返回字符
onkeypress = function(event){
var  letter = String.fromCharCode(event.keyCode);
console.log(letter);
}
</script>
</body>
</html>

    13.3
    HTML事件
    windows.onload：当页面完全加载后触发
    select：当用户选择文本框的中的内容时触发
    scroll：当用户滚动带滚动条的元素时触发
    change：当文本框(input)或(textarea)内容改变且失去焦点后触发

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.select{
width: 100px;
height: 100px;
border: 1px solid #FF0000;
}
</style>

<script type="text/javascript">
window.onload = function(){
console.log('加载完成了');
}
</script>
</head>
<body>
</body>
</html>

    13.4
    事件流

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
width: 300px;
height: 300px;
border: 1px solid #FF0000;
}
#b{
width: 150px;
height: 150px;
border: 1px solid #FF0000;
}
#c{
width: 75px;
height: 75px;
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
<script type="text/javascript">
// 事件流，从外向内，从内向外
// evt.stopPropagation()停止或者切断

var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');

a.onmousedown = function(evt){
console.log('a');
evt.stopPropagation();
}
b.onmousedown = function(evt){
console.log('b');
evt.stopPropagation();
}
c.onmousedown = function(evt){
console.log('c');
evt.stopPropagation();
}
</script>
</body>
</html>
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航