javascript基础语法

最新推荐文章于 2023-05-09 19:08:55 发布

CodingForAndroid

最新推荐文章于 2023-05-09 19:08:55 发布

阅读量372

点赞数

分类专栏： React Native+Flutter

本文链接：https://blog.csdn.net/u011733020/article/details/73739965

版权

React Native+Flutter 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

1.在网页中嵌入 js 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--网页嵌入js 代码-->
<script src="script.js">
</script>
</body>
</html>

2.注释

    //单行注释
    /**
     * 多行注释
     */

3.声明变量

   //声明变量,区分大小写，字母数字下划线组成，不可以是数字开头
    var band,album;
    band  = "JavaScript";
    //变量命名规范 两个以上的次时使用CamelCase
    var bandName ;

4.字符串类型

//字符串类型
var words = 'StringOfJavaScript';
words.length;//获取字符串长度
words.charAt(0);//获取字符串中的第0个字符
words.charAt(words.length-1);//字符串中最后一个字符
words.indexOf('i') //获取字符在字符串中第一次出现的位置，如果找不到返回-1
words.lastIndexOf('i');//获取字符在字符串中最后出现的位置，如果找不到返回-1
console.log(words.lastIndexOf('i'));
words.substring(0,2);
words.substr(0,2);

console.log(words.substring(0,2));//截取字符串，第一个参数表示从第几位开始截取，第二个参数表示截取到第几位参数，可以省略第二个参数，表示从第几位截取
words.substring(0,2);//St
words.substring(0);//String Of JavaScript
console.log(words.substr(0,2));// 第一个参数 从第几位开始截取，第二个参数，表示截取多少位。
words.substr(6,3);// 截取值为OfJ
console.log(words.substr(6,3));
words.replace('S','M');// 替换 第一个字符或者字符串
console.log(words.replace('S','M'));
words.split('i');//字符串切割，返回值是一个数组
var  newWords = words.split('i');
console.log(newWords);//["Str", "ngOfJavaScr", "pt"]
console.log(words.split('u'));//["StringOfJavaScript"] 截取不到返回整个字符串
newWords[0];//Str ,获取数组中的内容 用索引

5.Array数组

//Array数组
var array = [];//数组类型是一个Object
//插入数据可以通过
array = ['e1','e2','e3'];
array.length;//获取数组长度
array[0];
array[3] = 'e4';//
array.push('e5','e6')//push 添加元素在数组的最后边
console.log(array); //["e1", "e2", "e3", "e4", "e5", "e6"]
array.pop();//删除数组中最后的一个元素 e6
console.log(array)//e5 ["e1", "e2", "e3", "e4", "e5"]
array.shift();//删除数组中的第一个元素
console.log(array);// ["e2", "e3", "e4", "e5"]
// delete array[2];//delete 不会删除数组中的元素，只是删除数组中的值，变成''；
console.log(array);//["e2", "e3", 3: "e5"] 第三个元素 是undefined
array.splice(1);// 彻底删除数组中的元素  splice
console.log(array);
var newArray = ["e2", "e3", "e4", "e5"];
console.log(newArray.splice(3));//e5
console.log(newArray); // ["e2", "e3", "e4"]

//数组合并 contact 方法
var contactArray = array.concat(newArray);
console.log(contactArray);// ["e2", "e2", "e3", "e4"]
console.log(array);//["e2"]
console.log(newArray);//["e2", "e3", "e4"]

6.条件判断语句

//条件判断语句 if
var weather = '下雨'; var  temperature = 26;
if((weather ==='晴天')&&(temperature <= 26)){
    alert('心情不错');
}else if(weather === '下雨'){
    alert('心情不好');
}
//流程控制语句 switch case

switch (weather){
    case '下雨':
        alert('下雨');
        break;
    case '晴天':
        alert('晴天');
        break;
    default:
        break;
}
//流程控制语句  white

var index = 50;
while(index>0){
    console.log(index);
    index--;
}

//流程控制语句  for
for(;index<50;){
    console.log(index++);
}

7.函数 function functionName(params1,params2...)

//函数 function functionName(params1,params2...) 函数如果依次声明多个同名，最新声明的会覆盖前的，不会区分参数

function AlertMessag() {
 alert('hello this is a function ');
}
AlertMessag();

function AlertMessage(message) {
    alert(message);
}
AlertMessage('this is a params')

//匿名函数
var AlertMsg = function (){
    alert('this is 匿名函数');
}
AlertMsg();
var AlertMsg = function (message){
    alert(message);
}
AlertMsg('146 行');
//函数可以访问外部变量，函数内部的变量，只能被函数内部访问，函数外部不可以访问
var message = 'hello';

AlertMsg(message);

8.对象 Object

//对象 Object ，对象比如苹果  ，属性 颜色、 大小，行为 功能 就是方法
var beyond = {};//创建对象
beyond.formedIn = '1983';//设置属性
beyond['foundedIn'] = 'hongkang';
console.log(beyond);
//创建对象时同时设置属性
beyond ={formedIn:'1983',foundedIn:'china'};
console.log(beyond);
//查看属性 可以通过 对象.属性  也可以通过 对象[属性]
console.log(beyond.foundedIn);
console.log(beyond['formedIn']);
//对象中的属性 可以是 数字 字符串，数组等等，任何类型的属性
beyond.artist = ['张三','李四','王五','赵六','孙七','猪八'];
console.log(beyond);
// 删除属性
delete  beyond.foundedIn;
console.log(beyond);
//为对象添加方法
beyond.showArtist = function () {

    for(var i = 0;i<beyond.artist.length;){
        document.write(beyond.artist[i]);
        i++;
    }
}
beyond.showArtist();

//遍历属性 for  in
var  property;
for(property in beyond){
    //判断属性类型 用typeof
    if(typeof beyond[property]!== 'function' ){
        console.log(beyond[property]);
    }
}

9.文档对象模型DOM（Document Object Model）

//文档树 图片
//获取文档中的元素  getElementById();

document.getElementById('page-title');
document.getElementsByTagName('li');
//querySelector 与 querySelectorAll
document.querySelector();//找到返回的第一个 document.querySelectorAll('.art-list,li'); <li>Coffee</li>
document.querySelectorAll();//找到返回的所有 document.querySelectorAll('.art-list,li');

10.获取元素的属性

11事件处理

//事件处理
window.onload = function () {
    var btn = document.querySelector('.btn');

    btn.onclick = function () {
        console.log('被点击了');
    }

    btn.onmouseover = function(){
        console.log('鼠标在上面');
    }
    btn.onmouseout = function(){
        console.log('鼠标移开了');
    }
}
//为对象绑定事件
window.onload = function () {
    var btn = document.querySelector('.btn');

    function showMessage(event) {
        console.log(event);
    }
    btn.addEventListener('click',showMessage,false);

}