JavaScript语法基础

最新推荐文章于 2023-11-08 08:42:57 发布

chance2015

最新推荐文章于 2023-11-08 08:42:57 发布

阅读量1.1w

点赞数 1

分类专栏： JavaScript_DOM编程 JavaScript学习大全文章标签： javascript

本文链接：https://blog.csdn.net/chance2015/article/details/50478727

版权

JavaScript_DOM编程同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript学习大全

8 篇文章 4 订阅

订阅专栏

1.命名规范

JS的变量名可以用下划线数字字母美元符$ 组成但数字不能开头
例如：

var a = 34;
var b = 45;
alert(a+b);

var $‘ = "jquery";
alert($);

c = 56;
alert(c);
<script type="text/javascript">
    var a = 3;
    var b = "hello";
    var $c = "world";
    console.log(a,b,$c);

</script>

js变量是区分大小写的
而且字符串可以用单引号也可以用双引号括起来
既var c = “hello”;
var d =’hello’;都是可以的

2.JS变量类型

1)数值类型

var a = 23;
var b = 3.14;

2)字符串类型

var c = "hello";
var d = "world";

3)布尔类型

var e = true;

4)null型

var f = null;

5)undefiend型

var g = undefined;

说明: null代表对象不存在，即对象为空用null
若基本数据类型为空则为undefiend;

6)一般数组的写法

[]包围逗号隔开每个值
JS中数组的索引永远是从0到n的不会出现跳值的情况

var arr = ['赵'，‘钱’,'孙','李','吴'];

调用方法:arr[2];

7)对象的写法

var obj = {name:"lisi",age:29};

说明对象里面的name那可以不加引号，但是后面的值若是字符串，必须加引号
调用方法: obj.name; 或者obj[name];

3.运算符

var a = 3;
var b = 2;
alert(a%b);

输出1
JS中拼接字符串用”+”

alert("hello" + 3 + "world");

输出 hello3world
//左往右加时，碰到第一个非数值型之后，就理解为字符串拼接

alert(3+2+"hello"+5+6);

输出5hello11

逻辑运算符与一般的语言不同

var a = false;
var b = 4;
var c = a||b;

在一般语言中为true 在JS中则为4
逻辑运算符返回的值为:能确定运算结果的单元的值

var a = false;
var b = 6;
var c = true;
var d = a||b||c;

此时d的值为6;

4.控制结构

1) 数组遍历：

使用for循环

var arr = ['赵','钱','孙','李'];
for(var i = 0;i<arr.length;i++)
    console.log(arr[i]);

2)对象遍历

使用for循环

var obj = {name:'lise','age':29,'height':180};
for(var k in obj){
    console.log(k);
    console.log(obj.k); //错误的写法
    cousole.log(obj[k]);//正确
}

5.对象的操作

String字符串对象

length属性 长度
concat(String) 连接两个或更多个字符串
indexOf(String) 返回出现字符串的位置
substr(num1,num2)截取字符串：从num1开始截取长度为num2
toLowerCase() 转换成小写
toUpperCase() 转换成大写
replace(str1,str2)字符串替换

Date日期对象

getYear()返回年份(2位或4位)
getFullYear()返回年份(4位)
getMonth()返回月份0-11
getDate()返回日期 1-31
getDay()返回星期 0-6
getHours()返回小时数0-23
getMinutes()返回分钟数0-59
getSeconds()返回秒数0-59
getMilliseconds()返回毫秒数0-999

Math数学对象

该对象不需要new 直接调用其内部静态方法

cell(数值) 向上取整
floor(数值) 向下取整
min(数值1,数值2) 返回最小值
max(数值1,数值2) 返回最大值
pow(数值1,数值2) 返回数值1的数值2次方
random() 返回随机数 0--1
round(数值) 四舍五入
sqrt(数值) 开平方根

数组对象

concat() 返回一个由两个数组合并组成的心数组
join()返回一个由数组中的所有元素连接在一起的string对象
pop()删除数组中的最后一个元素并返回该值
push()向数组中添加新元素，返回数组的新长度
shift()删除数组中的第一个元素并返回值
unshift()返回iuyige数组，在该数组头部插入了指定的元素
sort()排序
reverse()反序数组
slice()返回数组的一个片段
splice()从数组中删除元素

6.浏览器window对象

window对象的方法:

window.alert(message);
window.confirm(message);
window.close()关闭
window.print()打印
window对象的子对象
navigator浏览器信息对象
appCodeName 内部代码
appName 浏览器名称
appVersion浏览器版本
platform 操作系统类型
userAgen 用户代理信息
cookieEnabled是否支持cookie
<script type="text/javascript">
console.log(window.navigator.cookieEnabled);
console.log(测试);
</script>
assign(url)页面跳转

history历史纪录

length:历史纪录的数目
back();
forward();
go();
screen屏幕对象
height 高度
width 宽度
availHeight 可用高度
avaliWedth 可用宽度
coloeDepth 颜色

两个练习

1.点击屏幕，实现颜色的变换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>

<html>
<head>
<style>
    div{
        width:300px;
        height:300px;
    }
    #test1{
        background: green;
    }
    #test2{
        background:red;
    }

</style>
<script>
    function ch(){
        var div = document.getElementById("test1");
        div.id="test2";
    }
</script>
</head>
    <h1>特效是什么</h1>
    <div id ="test1" onclick = "ch();"></div>

</body>
</html>

2.点击屏幕，实现图片的切换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script>
    function toggle(){
        var test1 = doucument.getElementByTagId('test1');
        if(test1.scr.indexOf('on')>0) 
            test1.src = "off.jpg";
        else{
            test1.scr = "on.jpg";
        }
    }
</script>

<html>
<head>
    <title></title>
</head>
<body>
        <img id = "test1" scr="on.jpg" alt=onclick = "toggle();">
</body>
</html>

chance2015

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript语法基础

1.命名规范JS的变量名可以用下划线数字字母美元符$ 组成但数字不能开头例如：var a = 34;var b = 45;alert(a+b);var $‘ = "jquery";alert($);c = 56;alert(c);<script type="text/javascript"> var a = 3; var b = "hello"; va
复制链接

扫一扫